Как создать интерактивное оглавление для сообщения в блоге с помощью блока макета Divi

Добавление интерактивного оглавления в сообщение блога - отличный способ улучшить взаимодействие с пользователем. Во многих случаях оглавление сообщения блога использует якорные ссылки, чтобы помочь пользователям перемещаться по контенту. А оглавление (с якорными ссылками) действительно просто создать с использованием базового HTML. Однако добавление пользовательского дизайна / CSS для настройки может быть проблемой. Здесь вам пригодится блок макета Divi.

В этом руководстве мы собираемся разработать интерактивное оглавление для одного сообщения в блоге (в Гутенбурге), которое использует якорные ссылки, чтобы направлять пользователей к обозначенным заголовкам по всему сообщению. Для этого мы будем использовать блок Divi Layout для создания Table of Contents со всеми мощными инструментами дизайна конструктора Divi, имеющимися в нашем распоряжении.

Давайте начнем!

Sneak Peek

Загрузите многоразовый блок макета содержания БЕСПЛАТНО

Чтобы получить доступ к блоку макета Table of Contents из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Как использовать загрузку для импорта этого блока макета на свой сайт

Чтобы импортировать эти многоразовые блоки макетов изображений Divi на свой сайт, сначала вам необходимо распаковать загружаемый файл. Там вы найдете три файла JSON, которые вам нужно будет импортировать на свой сайт.

Перейдите к редактированию сообщения с помощью редактора по умолчанию (Gutenberg). Откройте меню «Дополнительные инструменты и параметры» в правом верхнем углу страницы и выберите «Управление всеми повторно используемыми блоками».

Затем нажмите кнопку «Импорт из JSON». Выберите один из файлов JSON в папке загрузки и нажмите кнопку импорта.

После этого добавьте новый блок в Gutenberg. Мы сможем найти импортированные блоки многоразового макета под переключателем параметра «Повторное использование». Просто нажмите на заголовок «Оглавление», чтобы добавить его в свой пост.

Вот и все!

Давайте перейдем к руководству, не так ли?

Что нам нужно для начала

Для начала нам потребуется сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую запись в WordPress и используйте редактор по умолчанию (Gutenberg), чтобы добавить имитацию содержимого (заголовок, заголовки, абзацы, избранное изображение и т. Д.). Убедитесь, что вы создали как минимум три блока заголовков с содержанием под каждым. Так как мы будем добавлять якорные ссылки в оглавление, нам нужно три заголовка, чтобы ссылаться на них дальше по посту.

После этого мы готовы приступить к работе.

Создание интерактивного оглавления для сообщения в блоге с помощью блока макета Divi

Добавить блок макета Divi

Сначала добавьте новый блок макета Divi в верхнюю часть содержимого сообщения в блоге.

Затем нажмите кнопку «Создать новый макет». Это развернет редактор макета, который является конструктором Divi для блока макета.

Добавить ряд

В редакторе макета начните разработку, добавив строку из одного столбца.

Добавить верхний разделитель

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

Настройки делителя

Затем обновите настройки разделителя следующим образом:

• Цвет линии: #eeeeee
• Положение линии: вертикально по центру
• Вес разделителя: 3 пикселя
• Ширина: 25%
• Отступ: 30 пикселей сверху, 30 пикселей снизу.

Добавить нижний разделитель

Чтобы создать второй разделитель, продублируйте предыдущий разделитель.

Создайте заголовок оглавления с помощью модуля Blurb

Как только разделители будут на своих местах, давайте создадим заголовок для оглавления.

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

Рекламное содержание

Откройте настройки рекламного объявления и обновите содержимое следующим образом:

• Название: «Содержание»
• Значок использования: ДА
• Значок: см. Снимок экрана

Настройки дизайна рекламного объявления

На вкладке дизайна обновите следующее:

• Цвет значка: #eeeeee
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 100 пикселей
• Заголовок уровня заголовка: H2
• Ширина содержимого: 100%
• Высота: 38 пикселей

Обратите внимание, что высота рекламного объявления меньше высоты значка. Это позволяет значку расширяться вниз рядом с элементами аннотации, которые мы добавим далее.

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

Добавить объявление №1

Добавьте новый модуль рекламного объявления под заголовком рекламное объявление.

Рекламное содержание

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

Затем обновите содержимое с помощью значка со стрелкой вправо на рабочем столе.

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

Дизайн рекламных объявлений

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

• Цвет значка: # b856c7
• Значок круга: ДА
• Цвет круга: #ffffff
• Показать границу круга: ДА
• Цвет границы круга: # b856c7
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 16 пикселей
• Размер текста текста: 16 пикселей
• Высота строки заголовка: 2em
• Ширина содержимого: 100%
• Поле: 118 пикселей слева
• Отступ: сверху 10 пикселей
• Отступ (при наведении): 10 пикселей влево

Повторяющееся объявление для других элементов

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

Добавление URL ссылки привязки

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

Якорная ссылка #one

Для простоты мы добавим якорную ссылку «#one» в первую аннотацию в списке. Для этого откройте настройки для первого модуля рекламного объявления в списке (не заголовка рекламного объявления) и обновите следующее:

• URL ссылки на модуль: #one

Якорная ссылка # два

Затем откройте настройки второго элемента анонса и добавьте следующую ссылку:

• URL ссылки на модуль: #two

Якорная ссылка # три

Наконец, добавьте следующую ссылку к третьему элементу аннотации:

• URL ссылки на модуль: #three

Увеличение расстояния

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

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

• Ширина желоба: 1
• Ширина: 100%
• Padding: 0px сверху, 0px снизу

Настройки раздела

Давайте также уберем отступы из раздела. Откройте настройки раздела и обновите следующее:

• Padding: 0px сверху, 0px снизу

Сохраните макет

Мы закончили с дизайном нашего оглавления. Убедитесь, что вы сохранили и закрыли редактор макета.

Теперь вы должны увидеть новое оглавление в редакторе блоков по умолчанию.

Добавление якорей HTML в заголовки сообщений

Мы добавили URL-адреса ссылок привязки к каждому из объявлений, составляющих элементы нашего оглавления. Теперь нам нужно добавить соответствующий CSS ID (или привязку HTML) к блокам заголовков дальше по записи.

HTML-якорь один

Нажмите на блок, содержащий первый заголовок, на который вы хотите перейти по ссылке / перейти. Затем откройте настройки этого блока. Под переключателем «Дополнительные параметры» добавьте «один» в поле ввода HTML-привязки:

Якорь HTML: один

Помните, что у нашего первого элемента рекламного объявления есть URL-адрес «#one», который будет ссылаться на него. Но не добавляйте хэштег к этому якорю HTML. Это не нужно.)

HTML-якорь два

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

• Якорь HTML: два

Якорь HTML три

И, наконец, выберите третий блок заголовка и добавьте привязку HTML следующим образом:

• Якорь HTML: три

Конечный результат

Посмотрим на окончательный результат в живом посте.

А вот как будут работать якорные ссылки. Обратите внимание на эффект наведения курсора на значки и плавную прокрутку ссылки до соответствующей привязки под страницей.

Добавление содержания как многоразового блока макета

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

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

Введите имя для многоразового блока («Содержание») и нажмите «Сохранить».

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

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

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

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

Я надеюсь, что это оглавление блока макета Divi окажется полезным для тех сообщений, которые достаточно длинные, чтобы в них нуждаться. Если вы заинтересованы в том, чтобы это делалось за вас динамически (например, создавая для вас оглавление автоматически на основе заголовков сообщения), существуют плагины, такие как Table of Contents Plus, которые делают это за вас. Этот пост предназначен для тех, кто любит проектировать с Divi и не возражает против создания оглавления пост за постом.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!