Здравствуйте !
На связи как обычно — Илья Журавлёв, сегодня я расскажу вам и покажу как создать стильные и эффектные кнопки для сайта wordpress. Но это ещё не всё, у меня есть для вас сюрприз, вы так же узнаете как создавать красивые и изящные призывы к действию. В общем вас ждёт много прикольных фишек, которые несомненно украсят ваш сайт и сделают его привлекательным ! Добавлять кнопки и призывы к действию на сайт, можно будет с помощью простых шорткодов.
Вы сможете добавить на свой сайт готовые кнопки, либо создать свой собственный стиль для кнопок. Примеры некоторых готовых кнопок:
Призывы к действию: (Призыв к действию состоит из фона, текста и кнопки. Можно будет создать свой стиль)
Плагин, который позволит вам создавать стильные кнопки и призывы к действию, называется — WPi Designer Button. Установить данный плагин вы сможете прямо из своей админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.
Чтобы настроить плагин, перейдите по вкладке: WPi
— Styles, создание своего стиля для кнопок.
— Buttons, создание кнопок.
— Twin Buttons, создание двух кнопок.
— Call To Action, создание призыва к действию.
— Share Buttons, кнопки поделиться.
— Global Settings, глобальные настройки.
При создании кнопки вы можете воспользоваться готовыми стилями, но можно создать свой стиль. Сейчас я покажу как это сделать. Перейдите во вкладку — Styles и нажмите на кнопку — Добавить новую.
Горизонтальное меню:
— Color Palette, здесь можно копировать номера готовых цветов для кнопок.
— Style Presets, здесь можно выбрать готовые стили для кнопок.
— Style Themes, здесь можно выбрать готовые цветовые темы для кнопок.
— Help, помощь.
Под горизонтальным меню, вы сможете выбрать тип отображения кнопки: Текст с иконкой, Только текст, Только иконка.
Чтобы создать свой стиль, воспользуйтесь вертикальным меню, в левой части страницы.
Button Shape.
— Shape, выберите форму кнопки. Rectangle — прямоугольник. Rounded — закруглённый.
— Padding, обивка кнопки, расстояние между текстом и краем кнопки.
— Display, Inline Block — по размеру, Block — резиновая кнопка, на всю страницу в ширину.
— Min Width, здесь можно указать минимальную ширину кнопки.
Font Style
— Font, здесь можно выбрать стиль шрифта для текста кнопки.
— Font Weight, здесь можно задать насыщенность шрифта, сделать шрифт жирным.
— Text Size, здесь можно выбрать размер для текста кнопки.
Border
— Border Width, здесь можно выбрать размер ширины границы кнопки.
— Border Style, можно выбрать стиль границы кнопки.
— Border Sides, можно указать с какой стороны будет граница на кнопке.
Effects
— Texture, можно выбрать эффект текстуры для кнопки.
— Shadow, добавить тень к кнопке и выбрать размер тени.
— Shadow Type, выбрать тип тени. Outside — тень снаружи. inside — тень внутри.
— Text Shadow, добавить тень к тексту кнопки и выбрать размер тени.
— Glow Size, добавить свечение для кнопки и выбрать размер свечения.
— Glow Color, выберите цвет свечения.
Colors
— Text Color, укажите цвет текста.
— Text Hover Color, укажите цвет текста при наведении на кнопку.
— Text Active Color, цвет текста при нажатии на кнопку.
— Background Color, укажите цвет фона кнопки.
— Background Hover Color, цвет фона при наведении.
— Background Active Color, цвет фона при нажатии.
— Border Color, укажите цвет границы кнопки.
— Border Hover Color, цвет границы при наведении.
— Border Active Color, цвет границы при нажатии на кнопку.
Справа от вертикального меню можно будет сразу же наблюдать результат создания стиля кнопки.
После того как вы создадите свой стиль для кнопки, укажите название для стиля и нажмите на кнопку — Опубликовать.
Создание кнопки. Перейдите на вкладку — Buttons и нажмите на кнопку — Добавить новую.
Создание кнопки:
— Style Id, здесь можно выбрать стиль для кнопки. Вы можете выбрать здесь стиль, который вы сами создали, либо выберите стиль из списка стилей по умолчанию.
— Button Text, укажите здесь текст, который будет отображаться в кнопке.
— Icon, здесь можно выбрать иконку для кнопки. Иконку лучше выбирать в горизонтальном меню, там можно изображение иконок смотреть.
— Icon Position, расположение иконки, справа или слева.
— Link, можно указать здесь ссылку для кнопки.
— Target, Self — открывать ссылку в том же окне. New Window — открывать ссылку в новом окне браузера.
В конце можно скопировать шорткод кнопки.
После создания кнопки, укажите имя созданной кнопки и нажмите на кнопку — Опубликовать. После чего на странице — Buttons, у вас появится созданная кнопка. Вы сможете скопировать шорткод кнопки и вставить шорткод в страницу или запись вашего сайта.
