супер стиль кнопка

Как сделать Супер Стильную кнопку на сайт WordPress


 Привет ! Сегодня вы узнаете как можно очень просто и очень быстро сделать супер стильную кнопку для своего сайта ! Вы сможете выбрать стиль кнопки, цвет кнопки, размер кнопки, цвет фона и цвет текста кнопки. Вы сможете вставить в кнопку любую ссылку, сможете выбрать в каком окне будет открываться ссылка, в новом или текущем. Вы сможете сделать кнопку резиновой, то есть на всю страницу, можно выбрать расположение кнопки, задать радиус углов кнопки. Можно добавить в кнопку иконку и указать цвет иконки, у вас будет большой выбор иконок для кнопки. Можно добавить тень к тексту кнопки и т.д.

 Примеры кнопок, которые вы сможете сами сделать !

 

стиль кнопка

 

 Делать кнопки мы будем с помощью супер популярного и супер полезного плагина – Shortcodes Ultimate. Установить данный плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

Shortcodes Ultimate

 

 Кстати, данный плагин предназначен не только для создания кнопок. С помощью данного плагина вы сможете создавать более 40 различных функций для своего сайта. Мы уже разбирали данный плагин, как с ним работать и как его настроить, если вам интересно, то обязательно прочтите. Для создания кнопки вам не обязательно знать как работает плагин и как его настроить, просто читайте далее и вы всё узнаете ! Всё очень просто !

 Далее, после установки и активации плагина, вам нужно решить куда вы хотите добавить кнопку. Вы можете добавить кнопку на страницу, в запись или через виджет “Шорткоды”. Для примера я покажу вам как добавить кнопку в запись. Откройте для редактирования любую запись, в которую вы хотите добавить кнопку. На странице редактирования записи, в визуальном редакторе у вас появится новая кнопка – Вставить шорткод. Нажмите на данную кнопку.

 

запись редактор

 

 Далее, в открывшемся окне, в списке функций плагина, вам нужно выбрать и нажать на вкладку – Кнопка.

 

функции кнопка

 

 Далее, у вас откроется окно для создания кнопки. Давайте разберём все настройки:

 

– Ссылка, укажите здесь URL адрес страницы или сайта, на которую будет попадать пользователь при нажатии на кнопку.

– Цель, здесь нужно выбрать в каком окне будет открываться ссылка, в новом или том же.

– Стиль, вы можете выбрать стиль для кнопки. У вас на выбор 9 вариантов, поэкспериментируйте с каждым стилем, чтобы выбрать подходящий для вас.

– Фон, выберите цвет фона для кнопки.

– Цвет текста, выберите цвет текста кнопки.

– Размер, выберите размер кнопки.

– Резиновая, можно сделать кнопку резиновой, то есть на всю страницу.

– По центру, можете сделать отображение кнопки по центру.

– Радиус, можете выбрать радиус углов кнопки.

– Иконка, можно выбрать для кнопки иконку. Для выбора иконки нажмите на кнопку – Выбрать иконку. Чтобы загрузить свою иконку нажмите на кнопку – Медиа менеджер.

– Цвет иконки, выберите цвет для иконки.

– Тень текста, можете добавить тень для текста кнопки и выбрать цвет тени текста.

– Описание, можно добавить для кнопки небольшое описание, которое отображается под основным текстом кнопки.

– onClick, можно добавить JavaScript код для атрибута onClick. Оставьте поле пустым если не понимаете о чём идёт речь.

– Атрибут Rel, здесь вы можете добавить значение для атрибута rel. Примеры значений: nofollow, lightbox.

– Атрибут заголовка, здесь вы можете добавить атрибут для заголовка.

– Класс, можете добавить дополнительный CSS класс для кнопки.

Содержимое, укажите текст, который будет отображаться в кнопке.

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

Вы также можете воспользоваться функцией “Предпросмотр”, чтобы посмотреть кнопку в предварительном режиме.

 

настройка шорткод вставить шорткод

 

 Далее, на странице редактирования записи у вас появится шорткод кнопки. Обновите или опубликуйте запись.

 

шорткод запись

 

 На сайте, в записи, у вас будет отображаться готовая кнопка !

 

супер кнопка

 

 Всё готово ! Как видите, создать супер стильную кнопку очень просто ! Спасибо разработчикам плагина !

 Остались вопросы ? Напиши комментарий ! Удачи !

 






info-effect.ru
Как сделать Супер Стильную кнопку на сайт WordPress обновлено: Ноябрь 8, 2017 автором: Илья Журавлёв

2 комментария

  • Ирина 21.09.2017 Ответить

    Илья, день добрый! Подскажите, пожалуйста, а можно ли добавить 3-4 кнопки в один ряд?

    • Илья Журавлёв 21.09.2017 Ответить Автор

      Здравствуйте! Конечно можно! В этом же плагине есть функция “Колонки”. Шорткоды кнопок вставляете в шорткоды колонок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку Отправить комментарий, вы соглашаетесь с Политикой конфиденциальности и Пользовательским соглашением сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх