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

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

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

  • Сергей 23.12.2018

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

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

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

  • Сергей 24.12.2018

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

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

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

 

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


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

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