Как Создать Списки WordPress в Gutenberg: Инструкция(100)%

Как создать списки с иконками и классными стилями на Gutenberg в WordPress

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Если Вам нужно на своем сайте информировать посетителей о чем либо, но Вы не знаете как создать списки для этого, то этот материал облегчит Вашу жизнь! Поехали …

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

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

Вкратце, добавив эти расширенные функции в свой список, Вы сможете:

• Привлекайте посетителей, делая Ваши простые списки более интерактивными
• Лучше передавайте сообщения, меняя значки списка
• Обеспечьте лучший пользовательский интерфейс контента для Ваших пользователей
• Добавьте стили для своих скучных списков, чтобы сделать их интересными
• Создавайте более понятные контрольные списки, списки функций и т. д.

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

Как создать списки на Gutenberg – Начало

Чтобы начать добавлять расширенные функции в свои списки, Вам необходимо убедиться, что Вы используете последнюю версию Qubely, универсального набора инструментов Gutenberg, на своем сайте WordPress. Вы можете найти Qubely в каталоге плагинов WordPress.org.

Шаг 1: Добавьте блок расширенного списка

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

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

Шаг 2. Выберите тип макета списка

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

Шаг 3: Определите выравнивание списка

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

Шаг 4: Настройте типографику для лучшего визуального оформления

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

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

Если Вы хотите больше параметров настройки, есть также раздел Advanced Typography. С помощью опции «Типография» Вы можете установить высоту строки, расстояние между буквами и т. д.

Шаг 5: Настройка пуль

С блоком списка WordPress по умолчанию, Вы застряли с некоторыми базовыми пунктами для Вашего списка. Но с помощью блока Advanced List в Qubely Вы не ограничены только этим.

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

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

Шаг 6: украсьте свой список с помощью вариантов дизайна

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

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

Бонус: расширенные возможности настройки

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

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

Окончательный вывод о том как создать списки на сайте WordPress в Gutenberg

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

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

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

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