Как использовать виджет Elementor Loop Grid в WordPress с HappyAddons

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

Loop Grid — это новый виджет, который Elementor и его дополнения разработали и выпустили для нас совсем недавно. Инновационный виджет позволяет создавать и отображать контент в красиво организованной сетке.

Не беспокойтесь, если вы мало что знаете об этом виджете. В этом учебном посте мы рассмотрим пошаговое руководство по использованию виджета Elementor Loop Grid в WordPress с HappyAddons. Надеюсь, вы найдете этот урок полезным и интересным.

Что такое циклическая сетка в Elementor?

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

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

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

Как использовать виджет Elementor Loop Grid

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

• Элементор
• HappyДополнения
• HappyAddons Pro

Как только они будут готовы, начните следовать инструкциям руководства, как описано.

Шаг 01. Перетащите виджет Loop Grid на свою страницу.

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

Введите Happy Loop Grid в поле поиска панели Elementor. Как только виджет появится, перетащите его в нужную область холста.

Шаг 02: Создайте шаблон циклической сетки

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

Итак, чтобы создать с нуля, нажмите кнопку «Создать шаблон» .

Вы попадете на новую страницу. Нажмите кнопку «Добавить новый», когда выбрана вкладка «Шаблон цикла».

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

Откроется новый холст. Здесь вы снова можете перетаскивать виджеты, которые хотите создать макет вашего шаблона Loop Grid.

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

Шаг 03: Создайте макет для шаблона циклической сетки

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

# Опубликовать избранное изображение

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

# Информация о сообщении

Добавив виджет «Информация о публикации», вы можете показать автора публикации, дату публикации и время ее публикации. Лучше добавить виджет под избранное изображение.

Если вы хотите удалить какой-либо элемент виджета, просто щелкните значок крестика (x) рядом с ним. Аналогично, чтобы добавить новый элемент, нажмите кнопку + Добавить элемент .

Перейдите на вкладку «Стиль» . На этой вкладке вы получите параметры для изменения цвета, толщины и выравнивания текста и значков виджета.

# Заголовок сообщения

Перетащите виджет «Название публикации» под виджет «Информация о публикации».

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

Перейдите на вкладку «Стиль» . Вы можете стилизовать цвет и типографику заголовка по своему усмотрению.

# Отрывок из сообщения

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

Точно так же, как показано выше, вы можете настроить цвет и типографику текста на вкладке «Стиль» .

Шаг 04. Оптимизируйте макет шаблона для мобильных устройств

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

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

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

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

Вот руководство о том, что следует учитывать при создании мобильной версии сайта.

# Опубликуйте шаблон

После этого опубликуйте шаблон , нажав кнопку «Опубликовать» на панели Elementor.

Шаг 04. Перейдите на основной холст и выберите шаблон цикла.

Перейдите на основной холст Elementor. Выберите раздел «Петлевая сетка» . В разделе «Макет» вы найдете возможность «Выбрать шаблон цикла» .

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

После выбора шаблона Loop Grid ваши опубликованные сообщения будут отображаться в формате сетки, как показано на изображении ниже.

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

Шаг 05: Настройте и стилизовать раздел сетки цикла

В разделе «Макет» вы выбираете количество столбцов, количество публикаций на странице и одинаковую высоту . При необходимости выполните необходимую настройку.

Для этого урока мы сохранили три столбца и три сообщения на странице.

# Настроить запрос

После этого зайдите в раздел Query .

В виджете «Петлевая сетка» можно отображать контент из различных источников. По умолчанию сообщения отображаются в формате сетки. Но вы можете отображать страницы или целевые страницы, если хотите.

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

Вы должны сохранять каждое сообщение с тегом или категорией. Если вы хотите отображать только контент определенного автора, тега или категории, щелкните значок + плюс под надписью «Включить по».

Выберите «Авторы» или «Условия» . Вы также можете выбрать оба.

После выбора опции «Включить по» введите имена авторов и термины в соответствующие поля. Содержимое мгновенно будет отфильтровано, и в сетке цикла будет отображаться только содержимое этого конкретного автора и термина.

Настройте другие параметры запроса по своему усмотрению. Надеюсь, вы сможете сделать их сами.

Шаг 06. Настройте параметр нумерации страниц для раздела циклической сетки

Разверните раздел «Разбиение на страницы и загрузите больше» .

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

Мы выбрали Числа + Предыдущий/Следующий . На изображении вы можете видеть, что этот параметр нумерации страниц отображается под виджетом.

Шаг 07: Стилизация макета виджета «Петлевая сетка»

Перейдите на вкладку Стили . Вы найдете параметры для настройки и стилизации макета, поля элемента и нумерации страниц виджета.

Давайте сначала расширим раздел «Макет» . Это позволит вам настроить разрыв столбца и разрыв строки . Делайте это по мере необходимости.

Аналогичным образом разверните раздел «Ящик с предметами» . Вы можете добавить отступы , тип фона (цвет или изображение), тень блока, типы границ и радиус границы .

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

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

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

Шаг 08: Перенастройте шаблон циклической сетки

Сначала вам нужно найти шаблон. Как вы разработали с помощью HappyAddons, перейдите на панель управления WordPress . Затем перейдите в HappyAddons > Theme Builder > Loop Template .

Найдите шаблон и откройте его с помощью параметра «Редактировать с помощью Elementor» .

Например, мы изменили типографику текста Продолжить чтение >> .

После этого обновите изменения.

Шаг 09: Предварительный просмотр изменений

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

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

Таким образом, вы можете настроить шаблон Loop Grid в любое время.

Шаг 10: Опубликуйте дизайн контурной сетки

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

Примечание. Убедитесь, что вы идеально оптимизировали виджет для адаптации к мобильным устройствам, как мы показали выше при оптимизации шаблона Loop Grid. Здесь процесс будет таким же.

Распространенные случаи использования виджета Elementor Loop Grid

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

1. Макеты блога

Elementor Loop Grid упрощает макеты блогов, поскольку позволяет отображать сообщения в динамичной и приятной сетке. Вы можете настроить внешний вид контента (публикаций или страниц), включая заголовки сообщений, выдержки, изображения, метаданные и т. д., чтобы обеспечить целостный вид.

Узнайте, как создать шаблон сообщения в блоге с помощью Elementor.

2. Сетки продуктов

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

3. Витрина портфолио

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

Узнайте, как создать сайт-портфолио.

4. Списки событий

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

5. Списки услуг

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

Закрытие

Мы надеемся, что теперь вы знаете все тонкости виджета Elementor Loop Grid. Если вы научитесь правильно использовать виджет, вы сможете создать безграничные возможности дизайна для своего веб-сайта. Благодаря интуитивно понятным функциям и удобству использования вы можете оказать профессиональное влияние на свой веб-сайт, привлекая посетителей.

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

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