Стильная кнопка для сайта

Как сделать стильную кнопку для сайта на wordpress ?

Всем Привет !

Прочитав данную статью, вы узнаете — Как создать Стильную кнопку для своего Сайта, и + Узнаете Как добавить кнопку в любое место на вашем Сайте. Вы узнаете, как просто и быстро создаются Стильные кнопки, 3D кнопки, с эффектом, резиновые кнопки, кнопки любого цвета, формы и размера. Кнопки, нажав на которые человек попадёт на ту страницу, которую вы укажите в настройках !

 

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

 

13-06-2015 01-13-33

 

Итак, в создании стильных кнопок, нам поможет плагин — Shortcodes Ultimate, вообще с помощью данного плагина можно создать не только кнопки, но и также множество функций и элементов для сайта. О том как установить и настроить плагин, а так же как работать с ним, я уже писал, прочтитеЗдесь ! Там всё очень просто !

 

Итак, если вы установили плагин, и прочитали как с ним работать, тогда Едем Дальше !

 

В данной статье мы только рассмотрим — Как Создать Кнопку для Сайта ? Рассмотрим настройки, и возможности данной функции. Начнём, для начало решите где будет отображаться созданная вами кнопка, конечно вы сможете сделать это и потом, а пока просто выберите любое место для эксперимента. Выберите либо через запись, либо через виджет, без разницы.

 

Поехали, нажмите кнопку — Вставить шорткод.

27-05-2015 21-03-21

 

 

Выберите функцию — Кнопка.

13-06-2015 01-43-01

 

 

У вас откроется окно, для создания кнопки.

13-06-2015 01-49-33

 

Переходим к настройкам, начнём по порядку:

 

Ссылка, укажите ссылку страницы, либо сайта, куда попадёт человек после нажатия на кнопку.

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

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

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

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

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

Резиновая, резиновая кнопка имеет ширину — 100%, то есть она будет растягиваться на всю страницу.

По центру, укажите Да, чтобы кнопка отображалась по центру.

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

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

Цвет иконки, выберите цвет иконки.

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

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

— onClick, JavaScript код для атрибута onClick,  не знаю что это, не пользуюсь данной настройкой.

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

Title Атрибут, это текст, в виде подсказки, или напутствия, который будет появляться при наведении курсора мыши на кнопку.

Класс, Дополнительный CSS класс, CSS — это стиль, не пользуюсь.

Содержимое, основной текст кнопки.

 

Всё, в конце после создания кнопки, нажмите на кнопку — Предпросмотр, чтобы увидеть что у вас получилось. Если вас всё устраивает, жмите на кнопку — Вставить шорткод.

 

mouse-593297_640

 

Смотрите, к примеру вы хотите вставить кнопку, не через запись, и не через виджет, а не посредственно в файл php, к примеру header.php или footer.php. Тогда вам нужно использовать специальный HTML-код, потому что если вы просто вставите шорткод, то у вас ничего не получится, шорткод и отобразится, а не кнопка.

 

Поэтому, в таких случаях, используйте специальный HTML-код:

 

<?php echo do_shortcode(‘shortcode‘); ?>  жирным я выделил место куда необходимо вставить шорткод.

 

Итак, теперь вы знаете — Как можно создать Стильную кнопку, и Как добавить её в любое место вашего Сайта. Как видите здесь всё предельно просто, нажимай на кнопки и создавай кнопки ! :-)) Умеете читать по Русски, и нажимать на кнопки — значит Разберётесь ! А у меня на этом всё, до новых встреч ! САМСАЙ !
У вас остались Вопросы ? Тогда я жду ваших Комментариев !

 

Как сделать стильную кнопку для сайта на wordpress ? обновлено: Октябрь 21, 2016 автором: Илья Журавлёв
 
 

11 комментариев

  • Alex 24.12.2015 Ответить

    Интересный материал, в принципе нашел, то что искал. Спасибо автору за статью!

  • Виктор Климов 13.01.2016 Ответить

    А можно как-то реализовать красивые кнопки на сайте без плагина? Не хотелось бы сайт нагружать большим количеством плагинов.

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

      Конечно можно ! с помощью HTML кода. Вот простой пример:

       

      <button style=»background: #ff0000; width: 100px; height: 40px; border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;»>Кнопка</button>

       

      Результат:

       

       

      Поищите в поиске, очень много информации. Вы правы, конечно лучше использовать HTML код. Плагины — это для мощных сайтов, с высокой производительностью.

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

      Но, не все плагины нагружают сайт, если поискать можно найти простенький плагин, с минимальной нагрузкой.

      • Виктор Климов 13.01.2016 Ответить

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

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

          При желании всё можно сделать. А что за неровности ? по моему с меню у тебя всё нормально. С рубриками можно поэкспериментировать, а какой виджет стоит для рубрик ? Могу посмотреть в свободное время, нужен будет доступ в админ-панель.

  • Виктор Климов 13.01.2016 Ответить

    Спасибо за совет. Постараюсь сделаюсь у себя на сайте красивые кнопки))

  • Инга 18.04.2016 Ответить

    ДД!Подскажите, пжлста, какую прописать ссылку для картинки?
    Где картинку необходимо для этого разместить?
    Спасибо!

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

      А при чём тут картинка ? Здесь речь про кнопки…

      • Инга 19.04.2016 Ответить

        Благодарю!Я уже разобралась сама!

  • Кузница 13.06.2016 Ответить

    Добрый день подскажите пжл, если использовать данный код Кнопка как в нем прописать ссылку чтобы открывалась форма из плагина Contact Forms7. если такое конечно возможно

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

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


5 + 2 =



super-infa-top
Стрелка вверх