Как изменить кнопку на сайте wordpress

Используйте блок «Кнопки», чтобы предлагать пользователям выполнять действия с помощью ссылки в виде кнопки. Кнопка может быть ссылкой на другие страницы на вашем сайте или на внешнюю страницу. Это отличный способ обратить внимание пользователей на важные действия, которые они могут выполнять.

Содержание

Обучающее видео

Добавление блока «Кнопки»

Чтобы добавить блок «Кнопки», нажмите значок инструмента вставки блоков «+» и выполните поиск по ключевому слову «кнопки». Нажмите на блок, чтобы добавить его в запись или на страницу. После добавления первой кнопки вы можете указать функцию, которую должна выполнять кнопка.

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

Панель инструментов блока

Для блока «Кнопки» существует два уровня.

• Ваши кнопки находятся в общем блоке «Кнопки». Он называется родительским блоком.
• Отдельные блоки Кнопка внутри родительского блока Кнопки.

После нажатия на родительский блок «Кнопки» появляются следующие опции панели инструментов.

• Изменение блока «Кнопки» на блок другого типа
• Перетаскивание маркера блока для перемещения блока
• Перемещение вверх и вниз
• Изменение выравнивания элемента (дополнительную информацию см. ниже)
• Изменить выравнивание по вертикали
• Другие опции панели инструментов

На панели инструментов отдельных блоков «Кнопки» есть следующие опции.

• Выбрать родительский блок «Кнопки»
• Стили кнопок (дополнительную информацию см. ниже)
• Перетаскивание маркера блока
• Перемещение вверх (влево) и вниз (вправо)
• Изменение выравнивания элемента (дополнительную информацию см. ниже)
• Изменить выравнивание по вертикали
• Изменить выравнивание
• Ссылка
• Полужирный шрифт, курсив и другие варианты форматирования текста
• Другие опции панели инструментов

Создание ссылки на кнопку

Чтобы добавить ссылку на кнопку, нажмите значок ссылки на плавающей панели инструментов, которая появляется при нажатии блока. Этот значок похож на отдельное звено металлической цепочки. Вы сможете вставить свою ссылку или искать существующие страницы и записи на своем сайте.

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

Выравнивание кнопок

Вы можете выровнять кнопки по левому или правому краю, либо по центру. Сначала убедитесь, что выбираете родительский блок «Кнопки», как показано ниже.

Затем выберите опцию выравнивания на панели инструментов:

Настройки блока

Если нажать на блок, на боковой панели справа появятся дополнительные настройки блока. Если боковая панель не отображается, чтобы открыть настройки, нужно нажать значок шестерёнки ⚙️ в правом верхнем углу экрана.

Стили

Книгопечатание

Радиус границ

Настройки цвета

Настройки отступов

Отступ — это пустое место в пределах границы блока. Отступ может выделить содержимое и сбалансировать макет страницы. В разделе Размеры настроек на боковой панели блока имеется отдельная опция для настройки отступа конкретной кнопки. Вы можете выбрать одинаковое значение для всех четырёх границ или разные значения для отступов сверху и внизу, а также сбоку.

Настройки ширины

Горизонтальные и вертикальные кнопки

Дополнительно

Button Edit

Buttons let users take actions and make choices with a single click or tap.

1. Design guidelines
2. Development guidelines
3. Related components

Buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like:

• Modals
• Forms
• Toolbars

Buttons should:

• Be clearly and accurately labeled.
• Clearly communicate that clicking or tapping will trigger an action.
• Use established colors appropriately. For example, only use red buttons for actions that are difficult or impossible to undo.
• Prioritize the most important actions. This helps users focus. Too many calls to action on one screen can be confusing, making users unsure what to do next.
• Have consistent locations in the interface.

Buttons should be clear and predictable—users should be able to anticipate what will happen when they click a button. Never deceive a user by mislabeling a button.

Buttons text should lead with a strong verb that encourages action, and add a noun that clarifies what will actually change. The only exceptions are common actions like Save, Close, Cancel, or OK. Otherwise, use the {verb}+{noun} format to ensure that your button gives the user enough information.

Button text should also be quickly scannable — avoid unnecessary words and articles like the, an, or a.

Link buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Link buttons are also useful when you don’t want to distract from the content.

Default buttons have medium emphasis. The button appearance helps differentiate them from the page background, so they’re useful when you want more emphasis than a link button offers.

Primary buttons have high emphasis. Their color fill and shadow means they pop off the background.

Since a high-emphasis button commands the most attention, a layout should contain a single primary button. This makes it clear that other buttons have less importance and helps users understand when an action requires their attention.

All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there needs to be a label added and an icon to signify what the button does.

Do
Use color to distinguish link button labels from other text.

Don’t
Don’t wrap button text. For maximum legibility, keep text labels on a single line.

A layout should contain a single prominently-located button. If multiple buttons are required, a single high-emphasis button can be joined by medium- and low-emphasis buttons mapped to less-important actions. When using multiple buttons, make sure the available state of one button doesn’t look like the disabled state of another.

A button’s level of emphasis helps determine its appearance, typography, and placement.

Use button types to express different emphasis levels for all the actions a user can perform.

This screen layout uses:

1. A primary button for high emphasis.
2. A default button for medium emphasis.
3. A link button for low emphasis.

Placement best practices:

• Do: When using multiple buttons in a row, show users which action is more important by placing it next to a button with a lower emphasis (e.g. a primary button next to a default button, or a default button next to a link button).
• Don’t: Don’t place two primary buttons next to one another — they compete for focus. Only use one primary button per view.
• Don’t: Don’t place a button below another button if there is space to place them side by side.
• Caution: Avoid using too many buttons on a single page. When designing pages in the app or website, think about the most important actions for users to take. Too many calls to action can cause confusion and make users unsure what to do next — we always want users to feel confident and capable.

Renders a button with default style.

import { Button } from '@wordpress/components';

const MyButton = () => <Button variant="secondary">Click me!</Button>;

The presence of a href prop determines whether an anchor element is rendered instead of a button.

Props not included in this set will be applied to the a or button element.

The button’s children.

• Required: No

An optional additional class name to apply to the rendered button.

• Required: No

An accessible description for the button.

• Required: No

Whether the button is disabled. If true, this will force a button element to be rendered.

• Required: No

Whether the button is focused.

• Required: No

If provided, renders a instead of button.

• Required: No

If provided, renders an Icon component inside the button.

• Required: No

If provided with icon, sets the position of icon relative to the text. Available options are left|right.

• Required: No
• Default: left

If provided with icon, sets the icon size. Please refer to the Icon component for more details regarding the default value of its size prop.

• Required: No

Indicates activity while a action is being performed.

• Required: No

Renders a red text-based button style to indicate destructive behavior.

• Required: No

Renders a pressed button style.

• Required: No

Decreases the size of the button.

• Required: No

Sets the aria-label of the component, if none is provided. Sets the Tooltip content if showTooltip is provided.

• Required: No

If provided with showTooltip, appends the Shortcut label to the tooltip content. If an object is provided, it should contain display and ariaLabel keys.

• Required: No

If provided, renders a Tooltip component for the button.

• Required: No

If provided with href, sets the target attribute to the a.

• Required: No

If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.

• Required: No

If provided withshowTooltip, sets the position of the tooltip. Please refer to the Tooltip component for more details regarding the defaults.

• Required: No

Specifies the button’s style. The accepted values are 'primary' (the primary button styles), 'secondary' (the default button styles), 'tertiary' (the text-based button styles), and 'link' (the link button styles).

• Required: No

• To group buttons together, use the ButtonGroup component.

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

Текстовые кнопки работают с помощью javascript-библиотеки Quicktags.

Quicktags API — инструкция по использованию Quicktags

/**
 * Main API function for adding a button to Quicktags
 *
 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Minimum required to add a button that calls an external function:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('Yeah!'); }
 *
 * Minimum required to add a button that inserts a tag:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

Библиотека располагается в wp-includes/js/quicktags.js

Вышеуказанный API означает, что у нас есть возможность добавить 2 типа кнопок:

1. Простая текстовая кнопка
2. Кнопка, при нажатии на которую вызывается некоторая javascript-функция (callback)

О том, зачем нам может пригодиться callback, будет ниже, а пока переходим ближе к делу.

Как добавить простую кнопку в редактор WordPress

Весь код вносится в functions.php или создаётся MU Plugin

// Добавляем кнопки в текстовый html-редактор
add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );
function add_sheensay_quicktags() {
        //Проверка, определен ли в wordpress скрипт quicktags
	if (wp_script_is('quicktags')) :
?>
    <script type="text/javascript">
	  if (QTags) {  
	    // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
	    QTags.addButton( 'sheens_p', 'p', '<p>', '</p>', 'p', 'Параграф', 1 );
	    
	    QTags.addButton( 'sheens_h2', 'h2', '<h2>', '</h2>', 'h2', 'Заголовок 2 уровня', 2 );
	    QTags.addButton( 'sheens_h3', 'h3', '<h3>', '</h3>', 'h3', 'Заголовок 3 уровня', 2 );
	    QTags.addButton( 'sheens_h4', 'h4', '<h4>', '</h4>', 'h4', 'Заголовок 4 уровня', 2 );
	  }
    </script>
<?php endif;
}

В результате увидим в редакторе

Вы также можете добавить свои шорткоды вместо тегов, например, вот так

QTags.addButton( 'sheens_shortcode', 'shortcode', '[shortcode]', '[/shortcode]', '', 'Шорткод', 1 );

Описание QTags.addButton()

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

1. id — уникальный идентификатор. Вводите любое значение. Обязательный параметр
2. display — название кнопки. Обязательный параметр
3. arg1 — открывающий тег или название callback-функции (см. ниже). Обязательный параметр
4. arg12 — закрывающий тег (если есть)
5. access_key — горячая клавиша. Указывать не обязательно
6. title — всплывающее описание кнопки. Указывать не обязательно
7. priority — приоритет в списке кнопок. Чем выше число, тем левее будет располагаться кнопка
8. instance — поместить кнопку в определённый экземпляр класса. По умолчанию добавляется в общий

Как добавить кнопку с callback-функцией в редактор WordPress

Выглядит эта конструкция вот так

QTags.addButton( 'my_id', 'my button', my_callback );
function my_callback() { alert('Callback работает!'); }

Callback-функция — функция, которая вызывается при возникновении определённого события. В нашем случае, при нажатии на кнопку, на которую мы её повесим

Добавим кнопку, которая будет генерировать ссылки-якоря вида

<a id="anchor" name="anchor"></a>

Теперь на этот анкор можно ссылаться так

<a href="#anchor">Ссылка на anchor</a>

Переходим к коду

add_action( 'admin_print_footer_scripts', 'sheensay_add_quicktags_callback' );
function sheensay_add_quicktags_callback() {
	if ( wp_script_is('quicktags') ) :
?>
    <script type="text/javascript">
	 function sheensay_anchor() {
           // Вылезет окошко, в которое нужно ввести название анкора
	    var a = prompt("Введите анкор"); 
            // Вставит код в текст статьи
            if (a)
	      QTags.insertContent('<a id="'+a+'" name="'+a+'"></a>'); 
	  }
          QTags.addButton( 'sheensay_anchor', 'anchor', sheensay_anchor, '', '', '', 30); 
    </script>   
<?php endif;
}

Обратите внимание, мы используем конструкцию QTags.insertContent(''); внутри callback-функции. Она будет определять то, что будет вноситься текстом в окно редактора.

Как удалить кнопку из текстового редактора WordPress

Для внесения изменения в состав текущих кнопок есть хук quicktags_settings:

/**
 * Удаляем лишние кнопки из текстового HTML-редактора WordPress
 */
add_filter('quicktags_settings', 'sheensay_set_minimum_buttons');
function sheensay_set_minimum_buttons( $q ) {
   //default: strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen
    $q['buttons'] = 'strong,em,link';
    return $q;
}

В результате, из основных кнопок останутся только strong, em, link.

Про Quicktags API на WordPress.org

Как на страницу WordPress
добавить кнопку в стиле Темы 

Чтобы в WordPress добавить кнопку, используя стиль Темы, необходимо условие — наличие элемента-ссылки в самом шаблоне. Например, для перенаправления со страницы анонсов на полный текст статьи с анкором «Читать далее». В результате получите аналогичный атрибут перехода на другую страницу сайта или внешнего ресурса.

Метод хорош тем, что отпадает необходимость прописывать стиль (цвет, тень, закругление углов, изменение при клике, id и пр.). Все параметры уже есть в Теме. Вместо объемного, вы используете код из 1-2 строк. Внеся минимальные изменения в шаблонный скрипт, вставите кнопку на любой странице в 3 клика.

Как добавить кнопки на других страницах

WordPress, в том числе, используемая на сайте Тема — дистрибутивы с открытым исходным кодом. Нужный скрипт находится на html странице. Внешний вид задан в style.css. Алгоритм создания таков:

1. Скопировать HTML код кнопки на странице.
2. Удалить атрибут скрипта (продолжение текста): #moreхх и title
3. Подставить свои значения: ссылку и анкор.
4. Преобразованный вариант вставить в текст (редактор WP).

Шаг1. Скачать HTML код кнопки

Перейдите на сайт, где находятся анонсы — это Главная или Домашняя вебстраница. Нажмите Ctrl+U (или опция контекстного меню: Просмотр кода страницы). Откроется HTML запись. В поле поиска (Ctrl+F) введите фразу «Читать далее» или ту, которая используется у вас. Эти слова выделят желтым цветом. Окружающий код — скрипт вывода кнопки. Как правило обрамляется тегами: <p…>….</p>.

Шаг 2. Изменение кнопки Темы по-умолчанию

Скопируйте html-код элемент. Разместите в каком-либо редакторе на ПК или офисе для дальнейшей корректировки. Вместо имеющихся значений (ссылка и анкор) подставьте свои данные. Смотрите, как изменен скаченный образец на скриншоте.

В примере: ссылка — синяя; анкор — красная запись; класс =«more-link« — идентификатор заданного элемента — кнопки. У вас этот атрибут может именоваться иначе. К нему привязаны параметры в файле style.css Темы. Удаляете из кода лишнее, подставляя свои значения:

• class=»more-link-box» — можно убрать, оставив тег <p>
• вместо http://test-wp.ru/2020/12/30/%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b0/ — это длинный код кириллической ссылки и #more274» title=»кнопка, вставляете нужную ссылку.
• вместо анкора Читать далее прописываете подходящее название.

Важно: Не забудьте про двойные кавычки. Ими обрамляется класс «more-link« и сама ссылка. В строке кода не должно быть пробелов.

Шаг 3. Добавить кнопку на страницу

Чтобы вставить созданный вариант кода в статью при публикации, рекомендую перейти в классический редактор WordPress. В нем работать проще и быстрее, чем в Gutenberg, который иногда глючит. В любом случае дополнительный инструмент не помешает. Запустить его — дело 2-х минут.

Для этого в Админке WP перейдите: Плагины — Добавить новый — введите название Classic Editor — Установить — Активировать. Между редакторами можно легко переключаться, выбирая удобный способ размещения статей. Поэтому вы ничего не теряете. После смены редактора не забудьте сохранить изменения.

Как добавить кнопку — классический редактор WordPress

1. Установите курсор на строке, где должна отображаться кнопка-ссылка.
2. Перейдите в режим ТЕКСТ (html).
3. Вставьте код.

1. Сохраните документ.
2. Вернитесь в Визуальный режим публикации.
3. Если необходимо, переместите видимую ссылку в центр или вправо.
4. Проверьте результат, как выглядит элемент на сайте.

Как добавить кнопку в стиле Темы — блоковый редактор WordPress

В Гутенберг классическая панель (блок) не содержит опции переключения между визуальным отображением и Текстовым форматом (HTML). Поэтому там это реализовывается по-другому.

1. Нажмите на знак +.
2. Выберите блок HTML код.
3. Введите подготовленный код.
4. Проверьте результат на вебстранице.

Особенность заключается в том, что по-умолчанию ссылка будет находиться слева. Если необходимо ее переместить в центр или вправо, положение нужно указать в скрипте. Тогда вставляемый код будет выглядеть так:

Заключение: Вариантов, как сделать кнопку в WordPress, много. Например, элемент можно создать в специальной программе. Полученный код, включающий стиль, вставить на страницу. Но в некоторых онлайн сервисах включают ссылку на свой сайт. Что не является хорошим решением.

Функциональную кнопку, работающую на каждой странице, типа Звонок по телефону (Click-to-Call) или Прокрутка вверх (to top) вставляют при помощи плагинов. Подходящий вариант расширения подбирайте в репозитории WordPress, ориентируясь на количество скачиваний.

В новом редакторе WordPress Gutenberg есть удобная возможность создания кнопок. Одинарных, двойных, тройных — это вкладка Паттерны. Но чтобы использовать стиль Темы, работают с заданным классом элемента. Стиль связан именно с этим атрибутом html.

Создание рекомендаций по дизайну кнопок может показаться излишним. В конце концов, вы уже знаете, как выглядят веб-кнопки, не так ли?

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

• Кнопки часто составляют основной призыв к действию.
• Кнопки “Купить” сильно влияют на доход.
• Кнопки регистрации электронной почты помогают создать свою клиентскую базу.
• Кнопки отправки формы важны для управления.
• Социальные кнопки помогают поделиться своим контентом.

Предлагаем практическое руководство по созданию кнопок. Цель руководства: помочь вам создать кнопки, которые преобразуют и приближают вас к достижению цели вашего сайта.

1. Убедитесь, что кнопки хорошо сочетаются с вашим сайтом и брендингом

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

В то же время не бойтесь экспериментировать. Всплеск смелого цвета может быть именно тем, что увеличит конверсии.

2. Придерживайтесь установленных соглашений о дизайне

Этот момент должен быть очевидным, но не всегда это так. Чтобы пользователи могли нажимать на кнопки, они должны знать, что эта опция существует. Если ваш дизайн слишком далек от обычных правил, это может помешать пользователям распознавать кнопки.

Установленные соглашения

Форма. Благодаря длительной эволюции компьютеров наиболее знакомой формой является прямоугольник (с закругленными углами или без них). Как пример, взгляните на WordPress.

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

Тени и блики. Тени со смещением становятся универсальным сигналом о том, что на это можно нажать. Поэтому не забудьте сделать ваши кнопки более выпуклыми.

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

Смотрите также:

Много интересной информации в разделе Уроки WordPress.

3. Используйте метки

Следующим пунктом нашего руководства по дизайну кнопок являются метки. Без подсказки о том, что делает кнопка, пользователи не смогут определить, нужно ли им кликать на кнопку.

Это необязательно должно быть текстом, иногда достаточно указать иконки. Вы можете видеть это в социальных клавишах обмена, которые стали вездесущими.

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

Обязательно сделайте свои метки описательными и конкретными, используйте глаголы, описывающие действие, которое оно будет выполнять (например, покупка или купить), и создайте актуальность этого действия, например со словом сейчас. Это особенно важно для призывов к действию, которые часто являются центральной частью любой веб-страницы.

4. Размер и интервал кнопок

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

Важно создать кнопки таким образом, чтобы:

а) сделать их пригодными для использования,

b) предотвращать случайное использование пользователем неправильной информации.

Когда дело касается размера, нужно учитывать, что средний человеческий кончик пальца составляет 16-20 мм. Это примерно 45 – 57 пикселей. Чтобы учесть это, Apple рекомендует использовать размер кнопки не менее 44 х 44 пикселя.

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

5. Внедрение обратной связи

Как только вы разработали свои кнопки так, чтобы пользователи могли четко их идентифицировать, работа не прекращается. Следующий вопрос: что происходит, когда пользователи используют кнопку? Как оказалось, эти элементы дизайна имеют более одного состояния:

• Обычный – ясно видно, что это кнопка приглашает к взаимодействию.
• Сфокусированный – как правило, эффекты наведения мыши подтверждают, что взаимодействие с элементом возможно.
• Нажато – вознаграждает пользователя за действие, подтверждает, что происходит какое-то действие.
• Занято – показывает активность, происходящую в фоновом режиме.
• Отключено – дает понять, что возможны другие действия, только не в настоящее время.

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

6. Позиция Кнопка видна

Конечно, когда вы создали свои кнопки, последний шаг – убедиться, что пользователи могут их найти. В противном случае, как они нажмут на них? По этой причине также важно выбрать правильное расположение кнопки.

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

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

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

7. Контрастность

Выделяя кнопки из остальной части дизайна, вы даете понять, что взаимодействие возможно и желательно. Это также предотвращает потерю кнопок в общей массе контента.

Общие инструменты для создания контраста:

• Цвет – используйте контрастные цвета, в том числе для метки кнопки.
• Размер – большие элементы выделяются лучше.
• Типографика – смелый текст или использование другого шрифта может привлечь внимание.
• Пробел – больше пустого места вокруг элемента означает больше внимания к нему.

Хороший способ выяснить, достаточно ли контраста – использовать тест на прищуривание. Для этого просто отодвиньтесь от экрана, прищурьте глаза и посмотрите, выделяется все еще кнопка.

Звучит странно, но это проверенная и хорошо работающая техника среди веб-дизайнеров.

Теперь, когда вы знаете, как должны выглядеть кнопки, возникает вопрос: как их создать на своем сайте? Новый редактор Gutenberg делает это очень просто.

1. Создайте блок-элемент

В Gutenberg есть возможность создать кнопку, как и любой другой блочный элемент. Просто нажмите на символ плюса слева. Когда откроется меню, прокрутите вниз до элементов макета, чтобы найти элемент Кнопка (Button).

Нажмите, чтобы добавить ее на свою страницу.

2. Настроить текст и назначение кнопки

После щелчка WordPress открывает это меню.

У вас есть следующие варианты:

• Изменить ориентацию – используйте символы вверху, чтобы выровнять кнопку влево, по центру или вправо относительно страницы.
• Текст кнопки «Редактировать» – нажмите кнопку, и тогда вы сможете ввести и редактировать текст: полужирным, курсивом или зачеркнутым шрифтом.
• Ввод ссылки – там, где редактор говорит Вставить URL-адрес или тип, вы указываете, куда будет перенаправлены посетители при нажатии кнопки.

3. Отредактируйте дизайн

Можно изменить цвет кнопки и текста всего за несколько кликов.

Либо выберите один из доступных параметров, либо используйте панель выбора цветов, чтобы создать новый оттенок. Также можно ввести шестнадцатеричный код определенного оттенка. Если вы выберете комбинацию цветов, которую трудно будет прочитать, редактор предупредит вас об этом.

В разделе «Дополнительно» можно добавить к кнопке собственный стиль CSS. Таким образом, можно создать собственный дизайн с разметкой CSS, включая эффекты зависания и многое другое.

И это все – самый простой способ добавить кнопку в WordPress.

Источник: hostenko.com/wpcafe

Настраиваем панель администрирования WordPress – изменяем стиль элементов

Программное обеспечение: WordPress

Время на выполнение: 45 минут

Результат: Что вы получите после проведения всех изменений.

Скачать материалы по данному уроку

Это шестая из шести частей цикла «Пользовательская настройка панели администрирования WordPress»:

6. Настраиваем панель администрирования WordPress – изменяем стиль элементов.

В первых пяти статьях данной серии я показала вам, как настраиваются различные элементы панели администрирования WordPress: в том числе форма авторизации, панель инструментов и окно редактирования записей.

В этом уроке вы узнаете, как оформить окно панели в соответствии с вашим корпоративным стилем и брендом. В частности, я расскажу вам, как:

• изменить стиль и настроить подписи в подвале окна панели администрирования;
• изменить стиль меню администрирования;
• изменить стили ссылок и кнопок.

Для этого я создам отдельный плагин — если у вас уже есть плагин, созданный по материалам предыдущих пяти статей данной серии, вы можете добавить в него код, который мы рассмотрим в этом уроке. Тогда у вас будет единый плагин со всеми настройками для панели администрирования.

Что вам потребуется для выполнения данного урока

Для выполнения урока вам понадобятся:

• Установленная система WordPress;
• Открытые права доступа к папке плагинов сайта, чтобы добавить в нее свой плагин.;
• Текстовый редактор для редактирования кода плагина.

Установки плагина

Так как в числе прочего мне потребуются новые изображения и таблицы стилей, то кроме PHP-файла мне нужно создать отдельные папки для них. Я создаю папку, в которой размещается PHP-файл, содержащий основные функции моего плагина, а также папки для изображений и стилей.

То есть у меня будет папка под названием wptutsplus-customizing-admin6-styling , в которой у меня есть две вложенные папки – с изображениями и CSS – а также PHP-файл .

В начале этого PHP-файла я прописываю следующие строки:

Начинаем с панели инструментов

Так как в предыдущих уроках данного цикла я уже производила некоторую настройку панели инструментов, то она выглядит не совсем так, как панель инструментов WordPress по умолчанию. На скриншоте ниже показано, с какого момента мы начинаем:

В этом уроке я изменю стиль некоторых элементов (в том числе их цветовую гамму) так, чтобы они соответствовали моему бренду.

1. Установки для таблицы стилей

Прежде всего, я собираюсь создать таблицу нужных нам стилей. Вместо использования хука wp_enqueue_scripts , как это делается для установки стилей самого сайта, я использую функцию admin_enqueue_scripts .

Поэтому добавляем в наш плагин следующий код:

Вам также потребуется создать в директории /CSS папки вашего плагина собственные таблицы стилей. С их помощью вы будете задавать стили для элементов, описанных ниже в этом уроке.

2. Вносим изменения в подписи нижней части страницы

По умолчанию текст внизу страницы гласит: « Спасибо за использование WordPress ». Если вы используете multisite или разрабатываете сайт для клиентов, вы можете использовать здесь подписи, связанные с вашим брендом. Это легко можно сделать с помощью фильтра admin_footer_text .

Я собираюсь изменить сам текст, а также добавить к нему еще и логотип. Поэтому создаю в папке с изображениями моего плагина файл, откуда логотип будет загружаться. А в сам код плагина я добавляю следующие строки:

В результате подписи внизу страницы будут выглядеть так, как это показано на скриншоте ниже:

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

В таблицу стилей вашего плагина, добавьте следующие строки:

Теперь изображение имеет нужный размер:

3. Изменение стиля меню панели администрирования

В третьей части этого цикла статей я показала вам, как настроить содержимое меню панели администрирования — сейчас я покажу, как настроить его стиль. Я собираюсь кардинально изменить цвет элементов – результат вам может понравиться, а может и нет, но зато вы будете знать, как это делается!

В таблицу стилей мы добавляем следующие строки:

В результате цветовая гамма меню панели администрирования у нас теперь совсем другая:

• фон темно-серого цвета;
• вложенные пункты белого цвета с серым текстом;
• ссылки белые;
• активная страница имеет красный фон.

Самым сложным здесь является изменение стиля стрелки, которая указывает на активный пункт меню или вложенные уровни навигации – для того, чтобы задать ее стиль используются элементы .wp-menu-arrow element и the .wp-menu-arrow div .

Однако с другой стороны здорово, что WordPress использует для отображения данного объекта чистый CSS, а не картинку. Потому что вам достаточно всего определить целевой элемент и поправить код, а не изменять изображение с помощью графического редактора.

Наша панель инструментов теперь выглядит таким образом:

4. Изменение стиля ссылок

Я хочу, чтобы мои ссылки отображались в тех цветах, которые я использовала для меню панели инструментов — в частности, я хочу, чтобы ссылки становились красного цвета, когда на них наведен курсор мыши или когда элемент выбран.

Добавляем в таблицу стилей следующие строки:

Теперь мои ссылки будут красного цвета, когда на них наведен указатель мыши. Так, как это показано на скриншоте ниже:

5 . Изменение стиля кнопок

Последнее, что я хочу изменить в дизайне панели администрирования – это стиль кнопок. Я собираюсь изменить их цвета — когда они активны и неактивны. Здесь я использую ту же цветовую гамму, что и для других элементов панели:

В таблицу стилей добавляем следующий код:

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

А это цвета, которые имеют активные и неактивные элементы после моего рестайлинга:

Теперь все изменения дизайна, которые я хотела произвести, завершены!

В этой серии статей я показала вам шесть приемов для изменения различных элементов панели администрирования WordPress.

Будем надеяться, это дало необходимое вдохновение для того, чтобы вы произвели свои собственные изменения.
WordPress – поистине прекрасная система управления сайтом.

С помощью определенных настроек вы можете создать для ваших пользователей или клиентов возможность более удобно работать с сайтом, а также задать дизайн различных элементов, который соответствует вашему бренду.

Редакция Перевод статьи « Customizing the WordPress Admin – Adding Styling »

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

жирным я выделил место куда необходимо вставить шорткод.

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

У вас остались Вопросы? Тогда я жду ваших Комментариев!

Источник

Лучшие WordPress плагины для пользовательских кнопок.

HTML / CSS – это не те языки, которые обычно используют пользователи WordPress. Большинство людей предпочитают визуальный редактор и графический интерфейс для настройки своих тем, страниц и плагинов. Хотя вы, безусловно, можете изменять свои страницы, создавать красивые кнопки и делать гораздо больше, используя код, но это не единственный способ сделать это. Один из способов создания красивых пользовательских кнопок для призывов к действиям и перехода по целевым страницам – использование плагинов.

WordPress по умолчанию не имеет опций для добавления пользовательских кнопок. Однако существует множество бесплатных и платных решений для создания привлекательных кнопок. Что можно использовать на целевых страницах, а также в призывах к действию? Есть плагины WordPress для почти каждой задачи. В этом посте вы узнаете, зачем вам нужны эти кнопки и плагины WordPress для их получения.

Какие основные типы кнопок?

В основном смысле кнопки переносят посетителей с одного адреса на другой. Они следуют механизму ссылок, которые объединяют две страницы и позволяют пользователям переходить с одной страницы на другую. Кнопки имеют три типа по назначению:

• Ссылки : Вы можете просто использовать их вместо ссылок. Конечно, не все ссылки заслуживают того, чтобы быть кнопками.
• Обмен контентом : кнопки «Поделиться» в социальных сетях позволяют пользователям делиться ссылкой на страницу в социальной сети.
• CTA : Призыв к действию (CTA) – это другой тип кнопок, которые психологически оптимизированы и используются для привлечения внимания пользователя.

Большой вопрос: зачем они тебе нужны?

Зачем вам нужны эти пользовательские кнопки?

Одним из наиболее влиятельных аспектов интернет-маркетинга является дизайн сайта. То, насколько хорошо продуман и прост в навигации ваш сайт на многих уровнях, определяет ваш коэффициент конверсии. Исследования показывают, что привлекательные страницы с большей вероятностью убедят посетителей дать вам свой адрес электронной почты или купить ваш продукт. Независимо от того, продаете ли вы что-то или нет, вы всегда продаете.

Вы продаете свой бренд. Хотя посетители не всегда знают об этом, они судят о вашем бренде по дизайну сайта. Кнопки являются одним из важных элементов красивого дизайна. Если кнопки хорошо продуманы и соответствуют общей теме вашего блога, посетители более склонны использовать их.

Вот почему вам не нужны только кнопки. Вам также нужно, чтобы они были красивыми и с высокой конверсией на целевых страницах. Но давайте сначала поговорим о кнопках, я скоро напишу еще один пост о Landing Page.

Способы добавления красивых кнопок в WordPress

Существует два способа добавления кнопок в WordPress:

• Код : вы можете использовать HTML и CSS для создания кнопок. Для этого необходимо знать эти языки.
• Плагины : просто установите плагин WordPress для добавления кнопок. Как обычно, это самый простой способ.

Плагины для добавления пользовательских кнопок в WordPress

Плагин кнопки WordPress MaxButtons

Плагин WordPress для кнопок MaxButtons – это бесплатный плагин для WordPress, который позволяет пользователям получать красивые и элегантные кнопки. Это дает вам возможность создавать и добавлять красивые кнопки на основе CSS3 в ваших сообщениях и страницах. Он имеет более 70 000 активных установок и является одним из наиболее настраиваемых плагинов для кнопок WordPress.

Особенности:

• Общая настройка : Вы можете создавать неограниченное количество кнопок и использовать их в сообщениях и страницах с короткими кодами. Цвет кнопки, размер текста, радиус рамки, стиль рамки и дюжина других свойств стиля могут быть изменены.
• Отзывчивость : кнопки, созданные с помощью этого плагина, хорошо смотрятся как на настольных ПК, так и на портативных устройствах.
• Кнопки в стиле значков : Вы можете добавлять значки к своим кнопкам, настраивать их расположение и размер. Более 35 000 иконок поставляются в упаковке.
• Поддержка Google Fonts . Одно из преимуществ этого плагина в том, что он поддерживает Google Fonts.
• Профессиональная версия : некоторые из описанных мной функций доступны только в премиальной версии плагина, которая стоит 19 долларов.

Кнопки шорткод и виджет

Кнопки Shortcode и Widget – еще одно бесплатное решение для создания кнопок с высокой конверсией. Он имеет аккуратный и простой в использовании интерфейс.

Особенности:

• Общая настройка : текст кнопки, значок, форма, цвет, размер или цвет рамки можно настраивать. Живой предварительный просмотр там тоже.
• Кодирование не требуется : этот плагин избавляет от необходимости знать CSS и по-прежнему создавать потрясающие кнопки.
• Использование везде : позволяет использовать кнопки в сообщениях, страницах, боковых панелях и даже в файлах тем. Создатели утверждают, что лагин работает где угодно.
• Пользовательские стили . Каждая кнопка имеет уникальный класс CSS, который можно использовать для добавления пользовательских стилей. Или вы можете назначить каждому экземпляру кнопки определенный класс CSS для индивидуального стиля.

Он также имеет премиум-версию, в том числе кучу полезных функций.

Плагин Создателя Кнопок

Button Maker Plugin – еще один простой в использовании плагин для создания кнопок в WordPress. Хотя он не имеет впечатляющей пользовательской базы и имеет только 1000+ активных установок.

Особенности:

• Основные параметры : Создавайте неограниченное количество кнопок и сохраняйте их для будущего использования. Их цвет, размер шрифта, размеры и т.д. также могут быть изменены.
• Узнайте, что конвертируете : позволяет записывать показы и клики по каждой кнопке, чтобы вы знали, что конвертирует.
• Платная версия : чтобы расширить возможности этого плагина, вы можете приобрести его премиум-версию. В Button Maker Pro у вас есть несколько новых функций, таких как возможность добавления многострочного текста в кнопки.

Простые кнопки социальных сетей для WordPress

Easy Social Share Buttons для WordPress – это плагин для кнопок социальных сетей. Это комплексное и оптимизированное решение для повышения социальной активности на вашем сайте. В отличие от большинства плагинов в этом списке, он не предназначен для создания кнопок общего назначения. Скорее, он фокусируется только на кнопке социального обмена.

• Основные характеристики: плагин поставляется с более чем 45 ключевыми социальными сетями, имеет более 48 уникальных шаблонов и большой набор настроек и позиций дизайна.
• Совместное использование контента . Плагин может отображать счетчики в социальных сетях и информировать посетителей о том, как они отслеживают ваши профили в социальных сетях. В общей сложности 123 способа отображения результатов подсчета.
• Настройка шаблона : такие настройки, как изменение цвета или размера кнопки в шаблонах кнопок, можно легко выполнить с помощью шаблона настройки.
• Совместим с : Плагин хорошо работает с BuddyPress, WooCommerce, bbPress и Easy Digital Downloads.

Button Pro – CSS3 кнопки

Button Pro – кнопки CSS3 – это еще один элемент CodeCanyon, составляющий этот список. Он стоит всего 4 доллара и имеет более 1100 продаж. Плагин имеет простой в использовании набор кнопок на основе CSS3 и пакет социальных кнопок. Но это не плагин WP. Хотя это может помочь вам начать работу довольно быстро, если вы немного разберетесь в CSS.

Особенности:

• Общая настройка : на выбор доступны 3 размера кнопок и 11 вариантов цвета. Вам просто нужно добавить класс CSS, чтобы использовать плагин.
• Документация: Подробная документация поставляется с плагином, чтобы помочь вам сделать его лучше.
• Настройка состояний . Вы можете настроить внешний вид кнопки, когда она находится над в активном состоянии.
• Адаптивный : они работают быстро для основных браузеров и корректно работают на более низких версиях браузера.

Вывод

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

Какой твой любимый плагин WordPress из списка? Давайте обсудим в комментариях.

Источник

Кнопки — один из самых эффективных способов привлечь внимание пользователя. Вы когда-нибудь задумывались: «Как легко создать эти крутые и гладкие кнопки, абсолютно не вводя код?

В этом уроке я покажу вам, как создавать кнопки призыва к действию с высоким CTR, которые вы можете использовать для:

• Направлять пользователей на определенную страницу
• Соберите потенциальных клиентов и электронную почту через модальное всплывающее окно
• Получите высокий CTR на партнерке связи
• Для добавления более визуально привлекательных элементов в ваши целевые страницы.

Доказано, что кнопки имеют высокий CTR. Если вы когда-либо посещали сайт, оптимизированный для конверсии, целевую страницу , Возможно, вы видели такие кнопки:

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

Когда вы смотрите на картинку, отмеченная оранжевая кнопка является примером кнопки, созданной с помощью плагина MAXbuttons. Здесь, в этом уроке, вы пройдете ту же пошаговую процедуру, которая поможет вам создать кнопки, которые будут отображаться в любом месте на вашем Блог WordPress.

Я покажу вам самый простой способ сделать это, который вообще не требует кодирования и настройки CSS.

В этом уроке мы будем использовать плагин MAXButtons. Вот несколько причин, почему вы должны использовать это:

• Автономный плагин, поддерживающий кэш для более высокая скорость загрузки.
• Широкие возможности настройки, бесплатное использование
• Простой в использовании, но мощный
• Поставляется с готовыми ресурсами для оптимизации ссылок
• Поддержка различные темы
• Поддерживает шорткод и ярлык внутри редактора

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

Как говорится, давайте начнем.

Шаг 1: Установите плагин MAXButtons для WordPress

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

Скачать MAXbuttons

Шаг 2: Создание кнопки с нуля

Перейдите в меню MAXButtons на боковой панели панели инструментов WordPress. Нажмите кнопку «Добавить новую кнопку». Откроется новый экран редактора, где вам нужно создать и отредактировать кнопку. Позвольте мне показать вам, как это делается.

1 — введите имя кнопки. Хотя в этом нет необходимости, я рекомендую вам дать каждой из ваших новых кнопок имя, чтобы вы могли различать их и легко находить несколько кнопок, если вам случится создать более 10 из них. Это для внутреннего использования. Пользователи не увидят его на живом сайте.

[Продолжайте смотреть на плавающий предварительный просмотр. Он меняется, когда вы начинаете редактировать свою кнопку. Это даст вам представление о том, как это будет выглядеть на живом сайте.]

2 — В следующем поле под названием кнопки введите URL-адрес, на который вы хотите отправить пользователя, когда он нажимает на нее. Это может быть партнерская ссылка для продвижения, обновления контента, формы подписки на список адресов электронной почты или любой страницы и т. д. Вы можете выбрать, хотите ли вы добавить тег атрибута nofollow к твоей кнопке ссылке и если вы хотите открыть его в новом окне. Внутренний и внешний, можно использовать обе ссылки.

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

4 – В тексте здесь должен быть введен слоган вашей кнопки. Как вы можете видеть на изображении выше, текст, который будет отображаться на живом сайте, должен быть коротким и максимально близким к сути. Если возможно, уложитесь в 3 слова. Что-то как клик здесь лучше, чем пожалуйста, нажмите эту кнопку.

5 — Другие параметры включают семейство текстовых шрифтов, размер и формат. Вы можете выбрать один из доступных вариантов, и на изображении я использовал размер Джорджии 18 пикселей с полужирным шрифтом. Вы также можете изменить цвет текста при наведении, чтобы добавить эффект анимации к вашей кнопке. Цвет при наведении активируется, как только курсор оказывается над кнопкой. Вы также можете выровнять текст, если хотите.

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

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

7 — В следующем разделе вы можете настроить цвет фона или основной цвет вашей кнопки. Вы должны изменить этот цвет на то, что зрители могут связать, например, с вашим Тема WordPressстандартный цвет. Мне нравится оранжевый цвет, поэтому я должен изменить его на оранжевый. Вы можете легко выбрать любой цвет из всплывающего окна цветовой палитры.

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

Вот и все. Настройки в нижней части предназначены для опытных пользователей, которым нравится играть с пользовательским CSS. Я предполагаю, что вы новичок, поэтому, пожалуйста, не трогайте эти настройки. Оставьте их как есть.

Шаг 3: Сохранить и просмотреть

Теперь единственное, что вам нужно, чтобы ваша кнопка заработала, это:

1. Нажмите на кнопку Сохранить.
2. Скопируйте шорткод, показанный на экране.
3. Вставьте в любом месте на вашем сайте.

Шорткод нужно вставлять в визуальном редакторе, а не в тексте. Ниже представлена ​​та же демонстрационная кнопка, которую я демонстрировал в этом уроке и на изображениях.

[maxbutton id = «8»]

Он выглядит довольно хорошо и оптимизирован для высокого CTR. Вы можете использовать шорткод, чтобы отобразить любую кнопку в разделе виджетов, а также в разделе нижнего колонтитула. Для этого используйте текстовый виджет.

Также обратите внимание, что после того, как вы создали кнопку и успешно сохранили ее, предварительный просмотр кнопки вместе с назначенным ей шорткодом сразу же начнет появляться в разделе «кнопки» в меню плагина MAXButtons.

Я надеюсь, что этот урок был полезен. Поделитесь этим постом в Facebook и Twitter.