Как открыть кнопки заголовка и ползунка Divi Fullwidth в новой вкладке / окне

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

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

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

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

Почему вам следует автоматически открывать ссылку в новой вкладке / окне?

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

Не позволять посетителям уходить с сайта

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

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

Продолжают оставаться на вашем сайте после закрытия открытой ссылки.

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

Автоматическое открытие ссылки в новой вкладке или окне помогает вам напомнить людям, как они впервые попали в другое место; через ваш сайт.

Выбор открытой вкладки позже

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

Скорее всего, контент будет понятнее при чтении во второй, третий или четвертый раз.

Приступайте к работе: открывайте полноразмерные кнопки заголовка и слайдера в новой вкладке

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

В полноширинном заголовке и слайдере эти возможности не включены. А поскольку HTML предопределен, мы не можем просто изменить прилагаемый к нему HTML-код. Вот почему мы собираемся добавить код jQuery, который заставит кнопки Fullwidth Header и Fullwidth Slider открываться в новой вкладке / окне.

Создание полноразмерного заголовка

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

В этом разделе полной ширины выберите заголовок полной ширины. Заголовок Fullwidth предоставляет веб-сайту красивый заголовок, в котором есть все необходимое. Теперь прокрутите вкладку Content заголовка Fullwidth и запишите текст, который вы хотите разместить на кнопке. После этого также добавьте ссылку на кнопку.

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

Щелкните поле «Первая кнопка» и посмотрите, как класс выделен оранжевым шрифтом. Это класс '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'. Нам понадобится этот класс в нашем коде jQuery. Если вы хотите, чтобы вторая кнопка открывалась в новой вкладке или в новом окне, сохраните где-нибудь этот класс.

Создание ползунка полной ширины

Если вы хотите вместо этого добавить ползунок полной ширины, добавьте новый раздел полной ширины. На этот раз поместите ползунок полной ширины в раздел. Запишите текст кнопки на вкладке «Содержимое» и перейдите на вкладку «Дополнительно».

Прокрутите эту вкладку вниз, пока не найдете опцию Slide Button. Скопируйте назначенный класс кнопки, которая является частью ползунка полной ширины.

Добавление кода jQuery в параметры темы Divi

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

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

Чтобы добавить код на весь свой веб-сайт, перейдите в Divi> Параметры темы> Интеграция и добавьте следующий код в <head> вашего веб-сайта :

Код jQuery для кнопки полноразмерного заголовка

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Код jQuery для кнопки Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Не забудьте добавить текст между тегами <script>, как показано на экране печати выше.

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

После этого сохраните изменения. Код будет немедленно применен ко всему вашему веб-сайту.

Добавление кода jQuery в модуль кода

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

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

Скопируйте тот же код и вставьте его в поле содержимого в подкатегории «Текст» вкладки «Содержимое».

Код jQuery для кнопки полноразмерного заголовка

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Код jQuery для кнопки Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Сохраните изменения.

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

Последние мысли

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

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

Как часто вы открываете ссылки в новой вкладке и почему? Дайте нам знать в комментариях ниже!