Когда (и как) использовать расширенные макеты сетки в WordPress

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

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

Введение в расширенные макеты сетки

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

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

Хотя мы все довольно привыкли к этому на страницах продуктов и в результатах поиска, расширенные сетки предлагают лучший способ. Допустим, есть пять сообщений в блоге, которые вы хотите отобразить на целевой странице. Со стандартной сеткой ваши варианты будут либо рядом 5 × 1, либо сеткой 2 × 3 с пустым пространством.

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

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

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

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

Преимущества передовых сетей

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

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

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

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

Как ваш сайт может извлечь выгоду из расширенного макета сетки (3 варианта использования)

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

1. Блоги с несколькими категориями

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

Усовершенствованный макет сетки не только позволяет отображать больше сообщений на странице и лучше их размещать. Это также может позволить вам творчески группировать и классифицировать сообщения.

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

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

2. Интернет-магазины

Одно из наиболее распространенных применений сеток — интернет-магазины. Целевые страницы часто разбиты на ряды категорий и продуктов для просмотра покупателями.

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

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

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

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

3. Галереи

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

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

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

Независимо от того, являетесь ли вы художником, фотографом, продавцом изысканных товаров или веб-дизайнером, возможность продемонстрировать свою работу уникальным и интересным способом может усилить эффект от самой работы. Расширенные макеты сетки, такие как те, которые вы можете создать с помощью Beaver Builder, позволяют вам выделить работу по дизайну вашего веб-сайта среди миллионов других сайтов WordPress.

Как создать расширенный макет сетки для вашего сайта WordPress (за 3 шага)

Создание расширенного макета сетки проще, чем вы могли ожидать, благодаря интуитивно понятным функциям Beaver Builder. Если вы уже знакомы с редактором блоков WordPress, Beaver Builder — это более мощная альтернатива, которая дает вам новые возможности и может применяться к большему количеству областей вашего сайта с добавлением Beaver Themer.

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

Шаг 1: Установите и активируйте плагин Beaver Builder

Когда вы будете готовы начать, просто найдите Beaver Builder в разделе « Плагины » панели управления WordPress, затем установите и активируйте его:

При создании новой страницы или публикации выберите «Запустить Beaver Builder», чтобы открыть редактор:

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

Шаг 2: Создайте свою расширенную сетку

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

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

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

3. Заполните слоты

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

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

Затем вы можете изменить каждый раздел, как обычный блок WordPress. Доступны дополнительные параметры, если вы наведете курсор на элемент и щелкните значок « Редактировать столбец »:

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

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

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

Вывод

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

Чтобы создать расширенный макет сетки с помощью Beaver Builder, просто выполните следующие действия:

1. Установите и активируйте плагин Beaver Builder.
2. Добавьте модули строк/столбцов на страницу или в публикацию, чтобы сформировать сетку.
3. Заполните сетку другими элементами, такими как изображения и другие медиафайлы.

Премиум-планы Beaver Builder включают использование нескольких сайтов, белую маркировку и тему Beaver Builder, которая разработана специально для использования с нашим плагином. Мы также предлагаем другие продукты, в том числе Beaver Themer и Assistant Pro, которые еще больше упрощают процесс веб-дизайна.

У вас есть вопросы о расширенных макетах сетки? Дайте нам знать в комментариях ниже!