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

Как сделать стильную кнопку для сайта на 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? обновлено: Декабрь 23, 2018 автором: Илья Журавлёв

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

  • 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. если такое конечно возможно

  • Аленка 31.03.2017

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

  • Илья Журавлёв 31.03.2017 Автор

    Выпадающее меню можно сделать с помощью функций – Спойлер или Вкладки, в плагине Shortcodes Ultimate.

    Есть специальный плагин для создания выпадающего меню !

  • Аленка 31.03.2017

    У меня нет полных прав на сайт. Поэтому хочу сделать через этот виджет. Кнопка сама получается, а с меню не получается

  • Илья Журавлёв 31.03.2017 Автор

    У кнопки нет функции выпадающего меню. Вам лучше сделать вкладку с выпадающим меню, а потом изменить CSS стили вкладки, цвет фона, цвет текста, границы и т.д.

    Классный плагин для изменения CSS стилей на WordPress – SiteOrigin CSS !!!

  • Денис 04.05.2017

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

  • Илья Журавлёв 04.05.2017 Автор

    Конечно можно ! Вам могут помочь плагины:

    SiteOrigin CSS.
    Simple Custom CSS.
    Custom CSS Pro.

    При наведении параметр Hover менять надо в CSS.

  • Ирэна 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.

  • Сергей 23.12.2018

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

  • Илья Журавлёв 23.12.2018 Автор

    Здравствуйте. Не много не понял вас. Что значит “чтобы она обратно отжималась при уходе мыши в сторону”? Можете по подробней объяснить.

  • Сергей 23.12.2018

    У меня в теме WordPress все кнопочки как бы прозрачные, если навести мышку – кнопка закрашивается, мышку отвожу с кнопки в сторону – снова прозрачная. Кнопка, которую вы предложили, ведет себя также, но если по ней кликнуть, то она уже остается закрашенной даже если мышку отвести в сторону.

  • Илья Журавлёв 23.12.2018 Автор

    Да, понятно. Значит в стилях указан этот цвет. Вы можете изменить его. Может помочь плагин SiteOrigin CSS. Можно вручную изменить без плагина. Кликните по кнопке, чтобы она стала закрашенной. Затем, нажмите на кнопку правой кнопкой мыши. В открывшемся окне, нажмите Посмотреть код (браузер гугл) или Исследовать элемент (браузер Яндекс). Справа у вас откроется окно с редактором. Там будут отображаться CSS стили. Найдите там этот цвет и скопируйте весь этот код с цветом. Далее, этот код вставьте сюда: Внешний вид – Настроить – Дополнительные стили. И последнее, измените код цвета, на подходящий для вас цвет. Как вручную менять CSS код я вот здесь показывал, посмотрите, чтобы яснее стало. Если что-то не понятно пишите комментарии к тем записям.

  • Сергей 24.12.2018

    Спасибо. Все получилось.

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

Ваш e-mail не будет опубликован.

 

Внимание! Вы соглашаетесь с Политикой конфиденциальности сайта info-effect.ru


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

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