Как добавить динамические ссылки в модули кнопок Divi

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

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

Зачем использовать динамические ссылки

В HTML ссылки бывают двух форм: абсолютные и относительные. Абсолютная ссылка указывает точный адрес, которого вы хотите достичь, и обычно она включает https:// или www. С другой стороны, относительная ссылка относится к странице или каталогу, который соответствует текущей странице, которую вы просматриваете. Например, https://google.com — абсолютная ссылка. Но если вы находитесь на веб-сайте Elegant Themes и хотите создать ссылку на /modules , вы перейдете на страницу галереи наших модулей. Вы не сможете ссылаться с домашней страницы Google на страницу модулей на веб-сайте Elegant Themes, поскольку это отдельные домены. Даже если бы у Google был URL-адрес /modules , вы не перешли бы на страницу модулей Elegant Themes из-за их несвязанного характера.

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

Относительные ссылки, динамические ссылки и Divi

В Divi можно ссылаться на различные места в вашей установке WordPress, не зная URL-адреса. Вы можете просто выполнить поиск по нескольким ключевым словам и получить прямую ссылку на эти места на своем сайте.

В рамках динамических ссылок вы можете ссылаться на:

• Текущая страница: страница, над которой вы работаете.
• Страница автора: страница автора страницы/поста.
• Ваша домашняя страница: домашняя страница вашего сайта.
• Сообщения: сообщения на вашем сайте.
• Страницы: страницы вашего сайта.
• Медиа: файлы, которые можно найти в медиагалерее (это ссылка не на файл, а на страницу медиа на вашем сайте).
• Проекты: пользовательский тип публикации проекта в Divi.
• Продукты: если у вас установлен WooCommerce, вы можете динамически ссылаться на продукт WooCommerce.
• Настраиваемые вручную поля: настраиваемые поля, созданные вами вручную.

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

Добавление динамических ссылок на кнопки Divi

Чтобы продемонстрировать, как динамические ссылки могут работать на вас, давайте начнем с установки макета целевой страницы «Сантехника».

Установите пакет макетов

Для начала установим макет страницы. Сначала нам нужно создать новую страницу в WordPress. На панели управления WordPress наведите указатель мыши на пункт меню «Страницы» в левом меню. Затем нажимаем «Добавить новый» .

Зайдя в редактор WordPress по умолчанию Gutenberg, установите заголовок для своей новой страницы. Затем нажмите фиолетовую кнопку «Использовать Divi Builder» .

Затем вам будут предложены три варианта. Мы собираемся нажать фиолетовую среднюю кнопку «Просмотр макетов» .

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

В пакете макетов сантехники выберите макет целевой страницы .

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

Мы будем работать с кнопкой, расположенной в разделе «Заголовок» макета.

Добавление ссылок: ссылки на страницы

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

Далее кликаем на вкладку «Ссылка» . Обратите внимание на значок динамического контента. Здесь мы сможем ссылаться на различные места нашего сайта. Нажмите на значок «Динамический контент» .

Поскольку мы будем ссылаться на страницу нашего веб-сайта, давайте щелкнем опцию «Ссылка на страницу» .

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

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

Сделав это, вы заметите, что в текстовом поле URL-адрес ссылки теперь указано, что у вас есть ссылка на страницу.

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

Теперь давайте добавим динамическую ссылку на сообщение в блоге на нашем веб-сайте.

Добавление ваших ссылок: ссылки на сообщения

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

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

Удалив ссылку, мы вернемся назад и щелкнем значок «Динамический контент» .

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

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

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

Закругляем все это

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