СОЗДАНИЕ КНОПОК ДЛЯ САЙТА НА WORDPRESS

 

Всем привет на связи обучающий проект ЗАПИСКИ ВЕБМАСТЕРА ! Сегодня я хотел Вам рассказать о такой важнейшем элементе абсолютно любого сайта, как кнопки.

Для чего они нужны?

В первую очередь для того что бы добавить динамики на сайт и улучшить взаимодействие с вашими клиентами.

В прошлом видео мы создавали с Вами форму. Теперь давайте сделаем так что-бы при клике по кнопке наша страница с формой открывалась в новом окне.

Итак для создания кнопки мы будем использовать наилучший плагин для этого MAXBUTTONS.

Кстати если вы не знаете как работать с консолью редактирования, то посмотрите мою публикацию.

Итак для начала давайте установим плагин для создания кнопок, который называется MAXBUTTONS.

Для этого в панели консоли наводим курсор на вкладку плагины и выбираем добавить новый,

после чего в области поиска плагина вводим MAXBUTTONS

Нас интересует вот этот первый попавшийся плагин, у которой автор Max FoundrY

При установке плагинов следите, что бы автор-разработчик совпадал с автором того плагина, который вам рекоммендуют использовать. Итак кликаем по кнопке установить,

а затем по активировать

Если вы всё сделаете правильно, то у вас на панели консоли появится вкладка MAXBUTTONS.

Теперь мы наводим курсор мыши на эту вкладку и выбираем ADD NEW,

после чего перед вами откроется панель создания кнопки. Здесь мы и будем производить все настройки. Итак давайте создадим кнопку консультация. Для того что бы присвоить кнопке название и отличать её от всех других необходимо ввести в первом поле имя этой самой кнопки, давайте введём слово консультация.

Итак наша кнопка будет переадресовывать на страницу с формой сбора контактных данных, которую мы создали в прошлой публикации. Мне нужно открыть страницу с этой формой и скопировать ссылку на неё из адресной строки браузера,

после чего вставить в вот эту область

Далее для того что бы страница с формой открывалась в новом окне необходимо поставить галочку прям вот здесь

Если Вы хотите что бы при наведении на кнопку выводилась подсказка с названием кнопки, либо любой другой текст, то нужно внести необходимые записи в вот это поле

Теперь давайте введём текст, который будет отображаться на кнопке. Для этого в вот этой области введём слово консультация

Как вы видите в правом верхнем углу есть область, где отображается текущий внешний вид кнопки, то есть это такая демонстрационная область

А мы переходим непосредственно к настойке внешнего вида кнопки. В первой области выбираем основные параметры кнопки

Здесь можно поменять шрифт, просто выбрав необходимое значение из списка,

также можно поменять размер шрифта-сделать его более крупным или наоборот мелким

Кроме того можно придать ему жирности или курсивного начертания.

Далее можно выровнять название кнопки по левому или правому краю, а также по центру

Чуть ниже настраиваются отступы области названия кнопки от краёв по четырем направлениям

Теперь мы переходим к настройке цветовой палитры кнопки и в первую очередь настроим цвет шрифта кнопки

Для выбора цвета текста названия кнопки кликаем левой кнопкой мыши вот по этой области

После чего перед нами откроется панель выбора цвета

Мы выбираем цвет на области популярных решений палитры,

либо ищем подходящий вариант на панели смешивания

Например мы хотим установить оранжевый – для этого кликаем по нему на панели самых популярных цветов

А затем выбираем понравившееся решение на панели смешивания посредством перемещение кружка на необходимое решение. Вот так!

Также можно выбрать более насыщенный вариант выбранного цвета, либо его засветить. Для этого просто перемещаем рамку на линейке, расположенной справа.

Итак я выберу обычный белый цвет для шрифта названия кнопки

Для того что бы выйти из панели выбора цвета необходимо просто кликнуть левой кнопкой мыши на любом свободном месте

Далее чуть ниже можно выбрать ширину кнопки, а также высоту посредством ввода значения в пикселях

А вот справа от области выбора цвета текста названия кнопки располагается область выбора цвета текста названия кнопки при наведении на неё курсором мыши. Я выберу для названия кнопки при наведении на неё черный цвет. Как это сделать вы уже знаете.

Чуть ниже находится область для ввода описания кнопки. Я здесь ничего вводить не буду

Теперь переходим к настройке рамок кнопки. Во-первых можно установить уровень закругленности рамок посредством введения значения в пикселях в вот эти области. Чем больше значение тем более закругленные рамки получаются. Давайте установим значение десять

Чуть ниже можно выбрать вид рамки-сплошная линия, вдавленная граница, прерывистая линия и многое другое

Также чуть ниже можно выбрать плотность рамки, то есть её ширину – посредством установки значения в пикселях в вот эту область.

Теперь давайте подберём цветовые решения для рамок. В обычном состоянии я выберу белый цвет, а при наведении черный

Чуть ниже можно задать уровень насыщенности тени рамок кнопок — слева, по краям, с отступом вниз, по широкой области посредство ввода значения в соответствующие области

А ещё чуть ниже можно выбрать цвет тени в обычном состоянии и при наведении на кнопку курсором мыши

Теперь переходим к настройке фона кнопки

Давайте выберем в обычном состоянии фон черного цвета, а при наведении оранжевый

Чуть ниже можно поставить уровень засветления или затемнения дизайна кнопки посредством установки необходимого значения в соответствующий области для кнопки в обычном состоянии и при наведении на неё

Далее здесь есть вот такой маркер. С помощью него можно разнообразить дизайн кнопки посредством добавления градиента. Давайте активируем этот маркер

Как вы видите после этого активировались дополнительные области выбора цветов

Давайте с помощью них настроим цветовое решение градиентов. Для обычного состояния кнопки выберем синий цвет, а при наведении белый. Посмотрите как же круто начали выглядеть наши кнопки

Также здесь есть вот это область, где можно контролировать уровень отображения градиента, чем меньше значение тем более активно градиент проявляется в дизайне кнопки

Теперь переходим к настройки тени названия кнопки. Здесь также можно определить уровень этой тени посредством установки значение,

 а также соответственно выбрать цвет тени. То есть в этой области можно настроить эффект размытости название кнопки

Теперь мы переходим к следующему блоку. Здесь настраивается положение и отступы кнопки на сайте в своём контейнере. Этот раздел не является часто применяемым поэтому мы останавливаться на нём не будем

Следующий блок предназначен для придания особенных функций свойств и кнопки посредством таких технологий как html и css. Если вы незнакомы с ними, то сюда даже и не лезьте

В последнем блоке определяются настройки кнопки на разных разрешениях

Для того что бы автоматически определять параметры кнопки под различные разрешения необходимо установить этот маркер в активное состояние

Если же вы хотите в ручную определять параметры, то из раскрывающегося списка выбираете устройство

и кликаете по кнопке ADD

после чего в появившейся области настраиваете параметры именно под выбранное вами устройство

А именно здесь можно выбрать размер шрифта названия кнопки,

ширину и высоту кнопки,

а также ширину контейнера где размещается кнопка

Кроме того можно определить расположение контейнера, то есть выровнять его по правому или левому краю, либо скрыть

Ещё можно скрыть данную кнопку на настраиваемом устройстве посредством перевода маркера в активное положение

 

В этой области размер параметров можно задавать не только в пикселях, но и в процентах для этого нужно выбрать соответствующий параметр из раскрывающегося списка соответствующей области

Итак настройка параметров кнопки завершена, теперь нам необходимо сохранить все изменения кликнув по этой кнопке

После сохранения wordpress нас перебросит в начало панели настройки кнопки, если этого не произошло то поднимитесь на самый вверх вот к этой области

Данную область может закрывать вот это демонстрационное окно,

в этом случае сверните его, кликнув по треугольнику

Итак wordpress нам создал кнопку вот с таким шорт-кодом

Он нам понадобится для вставки кнопки на сайт. Скопируйте его куда-нибудь.

Если вам нужно создать ещё одну кнопку, то для это необходимо кликнуть вот по этой кнопке,

после чего откроется новая панель настройки параметров, где вы и прозведете все настройки на основании информации, полученной в этом видеоуроке.

Но если вы создаёте кнопки с одинаковым дизайном, то проще вашу кнопку скопировать, а уж затем изменить название и её функционал. Это лучше нежели чем снова редактиовать дизайн.

Для копирования кнопки необходимо кликнуть вот сюда

После чего в открывшемся модульном окне игнорируем все предупреждения и кликаем вот по этой кнопке

После чего мы попадаем в редактор новой кнопки скопированными параметрами и производим все изменения, а затем сохраняем все настройки.

Также скопировать кнопку можно из каталога. Для перехода в каталог – наводим курсор мыши в консоли на вкладку MAXBUTTONS и выбираем BUTTONS,

после чего перед нами открывается каталог созданных кнопок

Наводим курсор мыши на кнопку. которую хотим скопировать и кликаем по ссылке copy

Если нужно отредактировать кнопку, то кликаем по edit

Либо по move to trash если хотим удалить данную кнопку

Итак у нас всё готово теперь давайте вставим данную кнопку на сайт. Если вы хотите разместить кнопку на странице, то просто вставляете скопированный шорт-код в то место куда хотите вставить кнопку. Я же в свою очередь размещу кнопку в подвале сайта с помощью виджета. Итак давайте перейдём в панель виджетов, для этого на панели консоли наводим курсор мыши на вкладку внешний вид и выбираем виджеты

Затем в каталоге виджетов находим текст и кликаем понему,

после чего в появившейся областе выбираем виджет -зону footer 1

и кликаем по кнопке добавить виджет

Итак данный виджет отправился в виджетзону footer 1. Далее нам нужно в вот эту область, то есть в описание

вставить шорт-код нашей кнопки, которой мы скопировали ранее

После чего мы сохраняем изменения

Давайте теперь перейдём на сайт и посмотрим, что же у нас получилось

Пожалуйста вот наша стильная кнопка,

которая при наведении на неё меняет свой вид на такой

Давайте кликнем по ней. И вот пожалуйста перед нами в новой вкладке открылась страница с формой

Пользуйтесь на здоровье!

Я перебрал несколько возможных вариантов создания кнопок на cms wordpress и это решение является реально лучшим!

А на сегодня у меня всё, с Вами был обучающий проект ЗАПИСКИ ВЕБМАСТЕРА!

До встречи на волнах наших эфиров!