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

Как сделать стильную кнопку для сайта на 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‘); ?>  жирным я выделил место куда необходимо вставить шорткод.

 

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

 






info-effect.ru
Как сделать стильную кнопку для сайта на wordpress? обновлено: Февраль 22, 2018 автором: Илья Журавлёв

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

  • 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 код. Плагины – это для мощных сайтов, с высокой производительностью.

      • Аленка 31.03.2017 Ответить

        а можно из этой кнопки сделать кнопку с выпадающим меню?

    • Илья Журавлёв 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. если такое конечно возможно

  • Денис 04.05.2017 Ответить

    Можно сделать так,что бы при наведении на кнопку изменялся цвет(кнопки или текста в кнопке)?!

  • Ирэна 05.02.2018 Ответить

    Супер!!! я подумала, что у меня ,то-то не так–вдруг начался разворот страницы))благодарю))

  • Ирэна 05.02.2018 Ответить

    Пожалуйста , подскажите , как эту кнопку остановить!!

  • Ирэна 05.02.2018 Ответить

    вспомнила))спасибо)

  • Марина 13.03.2018 Ответить

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

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

      У меня не тормозит. Базу данных чистить надо.

  • Кир 05.04.2018 Ответить

    Добрый день! А как сделать кнопки в один ряд? И еще хотелось бы узнать, как-то можно размеры и форму кнопок задать (например – квадрат). И для мобильной версии надо какие-то дополнительные функции прописывать?
    Заранее спасибо!

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

      Добрый день. Чтобы сделать кнопки в один ряд, используйте функцию “Колонки” в Shortcodes Ultimate. В каждую колонку нужно будет вставить шорткод кнопки. Дополнительные функции прописывать не надо.

  • Оля 06.04.2018 Ответить

    Здравствуйте! Подскажите пожалуйста, можно ли сделать кнопку, чтобы при нажатии на нее открывалась страница соцсетей? Например, представлен перечень товаров и кнопка “Смотреть все” (не текст, а именно кнопка).

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

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

  • Алексей 06.10.2018 Ответить

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

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

      Добрый день. Есть такой плагин Page scroll to id.

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

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

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


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

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

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