Здравствуйте. Прочитав данную статью, вы узнаете – как создать стильную кнопку для своего сайта, и узнаете как добавить кнопку в любое место на вашем сайте. Вы узнаете, как просто и быстро создаются стильные кнопки, 3D кнопки, с эффектом, резиновые кнопки, кнопки любого цвета, формы и размера. Кнопки, нажав на которые человек попадёт на ту страницу, которую вы укажите в настройках.
Особенно данная статья будет интересна тем, кто создаёт свой интернет-магазин, или любую продающую страницу. Но конечно кнопки можно использовать на любом сайте, в качестве подписки на новости, перехода на другую страницу, в виде украшения, и т.д. Применений можно найти много, если захотеть. На фото ниже показана лишь не большая часть того, что вы сможете сотворить.
Итак, в создании стильных кнопок, нам поможет плагин – Shortcodes Ultimate, вообще с помощью данного плагина можно создать не только кнопки, но и также множество функций и элементов для сайта.
Начнём, для начало решите где будет отображаться созданная вами кнопка, конечно вы сможете сделать это и потом, а пока просто выберите любое место для эксперимента. Выберите либо через запись, либо через виджет, без разницы.
Поехали, в визуальном редакторе нажмите кнопку – Вставить шорткод.
Если у вас такого редактора нет, установите плагин Classic Editor.
Либо нажмите на кнопку добавления шорткода в новом редакторе – это показано в видео инструкции на странице плагина.
Выберите функцию – Кнопка.
У вас откроется окно, для создания кнопки.
Переходим к настройкам, начнём по порядку:
– Ссылка, укажите ссылку страницы, либо сайта, куда попадёт человек после нажатия на кнопку.
– Цель, здесь вам нужно указать, будет открываться страница в новом окне браузера, или в том же самом, после нажатия на кнопку.
– Стиль, здесь вам нужно будет поэкспериментировать, и выбрать стиль кнопки.
– Фон, выберите цвет фона кнопки.
– Цвет Текста, выберите цвет текста кнопки.
– Размер, выберите размер кнопки.
– Резиновая, резиновая кнопка имеет ширину – 100%, то есть она будет растягиваться на всю страницу.
– По центру, укажите Да, чтобы кнопка отображалась по центру.
– Радиус, выберите радиус углов кнопки, можно сделать кнопку квадратной или круглой, либо указать радиус.
– Иконка, выберите иконку, которая будет отображаться на кнопке, можно загрузить любой свой вариант. Прикольная штука, делает кнопку более привлекательной.
– Цвет иконки, выберите цвет иконки.
– Тень текста, можно настроить тень для текста на кнопке, указать с какой стороны будет тень, цвет тени, размер.
– Описание, можно добавить не большое описание, которое будет отображаться под Текстом кнопки, описание не совместимо с иконкой.
– onClick, JavaScript код для атрибута onClick, не знаю что это, не пользуюсь данной настройкой.
– Атрибут Rel, Здесь вы можете добавить значение для атрибута rel. Примеры значений: nofollow, lightbox. Аналогично, не знаю что это, и не пользуюсь.
– Title Атрибут, это текст, в виде подсказки, или напутствия, который будет появляться при наведении курсора мыши на кнопку.
– Класс, Дополнительный CSS класс, CSS – это стиль, не пользуюсь.
– Содержимое, основной текст кнопки.
Готово, после создания кнопки, нажмите на кнопку – Предпросмотр, чтобы увидеть что у вас получилось.
Если вас всё устраивает, жмите на кнопку – Вставить шорткод.
Смотрите, к примеру вы хотите вставить кнопку, не через запись, и не через виджет, а не посредственно в файл php, к примеру header.php или footer.php. Тогда вам нужно использовать специальный HTML-код, потому что если вы просто вставите шорткод, то у вас ничего не получится, шорткод и отобразится, а не кнопка.
Поэтому, в таких случаях, используйте специальный HTML-код:
<?php echo do_shortcode(‘shortcode‘); ?> жирным я выделил место куда необходимо вставить шорткод.
Если у вас остались вопросы, напишите комментарий
Интересный материал, в принципе нашел, то что искал. Спасибо автору за статью!
А можно как-то реализовать красивые кнопки на сайте без плагина? Не хотелось бы сайт нагружать большим количеством плагинов.
Конечно можно ! с помощью HTML кода. Вот простой пример:
Результат:
Поищите в поиске, очень много информации. Вы правы, конечно лучше использовать HTML код. Плагины – это для мощных сайтов, с высокой производительностью.
а можно из этой кнопки сделать кнопку с выпадающим меню?
Выпадающее меню можно сделать с помощью функций – Спойлер или Вкладки, в плагине Shortcodes Ultimate.
Есть специальный плагин для создания выпадающего меню !
У меня нет полных прав на сайт. Поэтому хочу сделать через этот виджет. Кнопка сама получается, а с меню не получается
У кнопки нет функции выпадающего меню. Вам лучше сделать вкладку с выпадающим меню, а потом изменить CSS стили вкладки, цвет фона, цвет текста, границы и т.д.
Классный плагин для изменения CSS стилей на WordPress – SiteOrigin CSS !!!
Но, не все плагины нагружают сайт, если поискать можно найти простенький плагин, с минимальной нагрузкой.
Посмотрите на мой сайт, могли бы мне помочь исправить неровности в меню под шапкой и сделать красиво рубрики справа в сайдбаре?
При желании всё можно сделать. А что за неровности ? по моему с меню у тебя всё нормально. С рубриками можно поэкспериментировать, а какой виджет стоит для рубрик ? Могу посмотреть в свободное время, нужен будет доступ в админ-панель.
Спасибо за совет. Постараюсь сделаюсь у себя на сайте красивые кнопки))
ДД!Подскажите, пжлста, какую прописать ссылку для картинки?
Где картинку необходимо для этого разместить?
Спасибо!
А при чём тут картинка ? Здесь речь про кнопки…
Благодарю!Я уже разобралась сама!
Добрый день подскажите пжл, если использовать данный код Кнопка как в нем прописать ссылку чтобы открывалась форма из плагина Contact Forms7. если такое конечно возможно
Можно сделать так,что бы при наведении на кнопку изменялся цвет(кнопки или текста в кнопке)?!
Конечно можно ! Вам могут помочь плагины:
– SiteOrigin CSS.
– Simple Custom CSS.
– Custom CSS Pro.
При наведении параметр Hover менять надо в CSS.
Супер!!! я подумала, что у меня ,то-то не так–вдруг начался разворот страницы))благодарю))
Пожалуйста , подскажите , как эту кнопку остановить!!
вспомнила))спасибо)
Интересный плагин, боюсь, сильно будет блог тормозить.
Но прям все что нужно для создания лендинга.
Надо посмотреть, совместим ли он с новыми версиями.
И многие кнопки у меня уже есть.
У меня не тормозит. Базу данных чистить надо.
Добрый день! А как сделать кнопки в один ряд? И еще хотелось бы узнать, как-то можно размеры и форму кнопок задать (например – квадрат). И для мобильной версии надо какие-то дополнительные функции прописывать?
Заранее спасибо!
Добрый день. Чтобы сделать кнопки в один ряд, используйте функцию “Колонки” в Shortcodes Ultimate. В каждую колонку нужно будет вставить шорткод кнопки. Дополнительные функции прописывать не надо.
Здравствуйте! Подскажите пожалуйста, можно ли сделать кнопку, чтобы при нажатии на нее открывалась страница соцсетей? Например, представлен перечень товаров и кнопка “Смотреть все” (не текст, а именно кнопка).
Добрый день. Конечно можно. При создании кнопки, в настройках, укажите URL адрес страницы, которая должна открываться.
Здравствуйте. Мне необходимо сделать так, чтобы при нажатии на кнопку пользователь попадал на начало того заголовка с которого он начал просматривать статью. Заголовоки внесены в содержание блога. Кнопка при прокрутки страницы, всегда находится на виду, то есть зафиксирона.
Добрый день. Есть такой плагин Page scroll to id.
Илья, добрый день. Если не сложно, расскажите, как у такой кнопки
Кнопка
сделать так, чтобы она обратно отжималась при уходе мыши в сторону. Кнопки встроенные в тему после нажатия отжимаются, а эта нет. Отжимается только если где-то в стороне кликнуть.
Здравствуйте. Не много не понял вас. Что значит “чтобы она обратно отжималась при уходе мыши в сторону”? Можете по подробней объяснить.
У меня в теме WordPress все кнопочки как бы прозрачные, если навести мышку – кнопка закрашивается, мышку отвожу с кнопки в сторону – снова прозрачная. Кнопка, которую вы предложили, ведет себя также, но если по ней кликнуть, то она уже остается закрашенной даже если мышку отвести в сторону.
Да, понятно. Значит в стилях указан этот цвет. Вы можете изменить его. Может помочь плагин SiteOrigin CSS. Можно вручную изменить без плагина. Кликните по кнопке, чтобы она стала закрашенной. Затем, нажмите на кнопку правой кнопкой мыши. В открывшемся окне, нажмите Посмотреть код (браузер гугл) или Исследовать элемент (браузер Яндекс). Справа у вас откроется окно с редактором. Там будут отображаться CSS стили. Найдите там этот цвет и скопируйте весь этот код с цветом. Далее, этот код вставьте сюда: Внешний вид – Настроить – Дополнительные стили. И последнее, измените код цвета, на подходящий для вас цвет. Как вручную менять CSS код я вот здесь показывал, посмотрите, чтобы яснее стало. Если что-то не понятно пишите комментарии к тем записям.
Спасибо. Все получилось.