Как создать контент с колонками на сайте WordPress? –
Столбцы помогают упорядочить содержимое внутри меньшего разделителя. Вы можете размещать текст, изображения или любые два элемента рядом друг с другом, а не показывать один под другим. Раньше вам нужен был плагин компоновщика страниц для создания столбцов контента на сайтах WordPress. Однако теперь это очень просто с редактором блоков Gutenberg, и вы можете перетаскивать любые блоки внутри столбца. В этой статье мы объясним, как использовать столбцы и другие блоки в редакторе Gutenberg для создания содержимого столбцов в WordPress.
Блок столбцов Гутенберга
Столбцы — это один из блоков Гутенберга по умолчанию в составе блоков «Дизайн». Тип /столбцы или используйте средство вставки блоков, чтобы добавить блок столбцов в область содержимого при редактировании сообщения или страницы.
Вставить блок столбцов в Гутенберге
Если вы не найдете его, щелкните три вертикальные точки (Параметры), отображаемые в правом верхнем углу редактора. Перейдите к нижней части списка меню и выберите опцию «Настройки». Откроется диалоговое окно «Настройки» и перейдите в раздел «Блоки». Найдите или найдите блок «Столбцы» в разделе «Дизайн» и включите его.
Включить блок столбцов в Гутенберге
Вставить столбцы в область содержимого
Получив блок «Столбцы», вставьте его туда, где вы хотите отобразить контент с столбцами. Вам будет предложено выбрать количество внутренних столбцов и нажать на один из доступных вариантов. Например, выберите 50/50, чтобы иметь два одинаковых внутренних столбца в строке, или выберите 33/33/33, чтобы иметь три равных внутренних столбца.
Выберите количество столбцов
Давайте использовать в нашем примере 50/50 два внутренних столбца. Как только вы нажмете на эту опцию, WordPress вставит два блока-заполнителя в одну строку, как показано ниже.
Два блока внутри колонн
Не всегда необходимо выбирать 50/50, 33/33/33 или один из других доступных вариантов. Вы можете настроить ширину каждого столбца в соответствии с вашими предпочтениями. Для этого убедитесь, что вы выбрали первый блок-заполнитель внутри столбцов, и установите флажок «Настройки столбца», отображаемый в настройках правой боковой панели. Вы можете ввести ширину в пикселях или щелкнуть PX, чтобы изменить ее на %, а затем ввести значение в процентах, что будет проще. Позвольте мне ввести 66% для первого столбца, что автоматически отрегулирует ширину второго столбца до 34%.
Изменить ширину столбцов
Добавить столбцы и стек на мобильном устройстве
Допустим, после вставки блока двух столбцов (50/50) вы хотите добавить еще один столбец. Для этого обязательно выберите блок «Столбцы», щелкнув значок «Столбцы», отображаемый на верхней панели инструментов блока. Теперь на правой боковой панели будут отображаться различные настройки и увеличиваться число в разделе «Столбцы». Как видите, ширина первого внутреннего столбца сохраняется равной 66%, в то время как второй и вновь вставленный третий внутренние столбцы делятся поровну (17% + 17%).
Добавить столбец и стек на мобильном устройстве
Обязательно выберите опцию «Стопка на мобильном устройстве», чтобы внутренние столбцы отображались один под другим на мобильных устройствах. В противном случае все три столбца будут отображаться в одной строке на мобильном устройстве, что скроет содержимое. Вы можете просмотреть столбцы, выбрав опцию «Предварительный просмотр > Мобильный», и увидеть, что внутренние столбцы одинаково расположены в мобильном представлении.
Столбцы сложены на мобильном телефоне
Примечание: Вы также можете уменьшить количество столбцов, например, просто изменив число с 3 на 2. В таком случае третий внутренний столбец будет удален, и вы потеряете все содержимое, вставленное в этот столбец. Поэтому обязательно удалите все содержимое из последнего столбца, прежде чем уменьшать количество столбцов.
Вставка блоков во внутренние столбцы
Теперь вы знаете, как вставить блок столбцов и настроить ширину внутренних столбцов. Следующим шагом будет вставка блоков во внутренние столбцы. Просто нажмите на значок + и добавьте блок, который хотите вставить.
Вставить блок во внутреннюю колонку
Позвольте мне добавить абзац и изображение в два внутренних столбца блока столбцов, как показано ниже. Вы можете настроить горизонтальное и вертикальное выравнивание по середине, чтобы содержимое выглядело выровненным.
Текст и изображение внутри блока столбцов
Настройка содержимого столбцов
Каждый блок внутри блока Columns будет иметь свои настройки на боковой панели. Вы можете использовать эти настройки для украшения контента, если это необходимо. Ниже показано, как настроенный блок Columns будет выглядеть после изменения настроек текста и изображения:
Настраиваемый блок столбцов в WordPress
Вот что я поправил:
- Столбцы – добавлен фон.
- Абзац в первом внутреннем столбце – уменьшен размер шрифта, использован полужирный шрифт для текста и изменен цвет.
- Изображение во втором внутреннем столбце – изменен на закругленный угол вместо стиля по умолчанию.
Как видите, последний блок выглядит как классное поле с призывом к действию, которое вы можете использовать для демонстрации своих собственных или партнерских продуктов. При необходимости вы также можете вставить кнопку под текстом, чтобы пользователи могли нажать и перейти на страницу продукта.
Преобразование столбцов в повторно используемый блок
Лучшая часть редактора Gutenberg заключается в том, что вы можете повторно использовать любой блок, не создавая его снова с нуля. Просто нажмите на три вертикальные точки (Параметры) на верхней панели инструментов блока «Столбцы». Выберите опцию «Создать многоразовый блок» и укажите имя для сохранения вашего блока. Позже вы можете в любое время найти повторно используемое имя блока и вставить его в любые другие сообщения/страницы на вашем сайте.
Преобразование столбцов в повторно используемый блок
Примечание: При необходимости вы также можете назначить собственный класс CSS для своего блока столбцов в разделе «Дополнительно» настроек правой боковой панели. Или откройте «Редактор кода», нажав на три вертикальные точки в правом верхнем углу экрана, и добавьте к блоку собственный встроенный стиль. Пользовательский CSS можно использовать для добавления границы и настройки интервалов (полей и отступов) блока столбцов. Узнайте больше о том, как использовать пользовательский класс CSS в WordPress.
Использование медиа и текстового блока в Гутенберге
Преимущество блока «Столбцы» заключается в том, что он поддерживает несколько внутренних столбцов, и вы можете перетаскивать любой другой блок внутри столбца. Однако, если вы просто хотите использовать комбинацию текста и мультимедиа в макете из двух столбцов, тогда в редакторе Gutenberg также есть еще один блок «Медиа и текст» для этой цели. Вставка этого блока отобразит макет с двумя столбцами с возможностью вставки медиафайла в один столбец и текста в другой столбец. Вы можете изменить выравнивание мультимедиа по левому или правому положению и использовать настройки боковой панели, чтобы создать окно выноски, подобное объясненному выше. Также можно перетаскивать другие блоки, такие как таблица или список, рядом с медиаблоком вместо использования обычного текста.
Медиа и текстовый блок в WordPress
Хорошая часть заключается в том, что вы можете в любое время преобразовать блок «Медиа и текст» в «Столбцы», чтобы получить дополнительные функции, доступные для блока «Столбцы».
Преобразование мультимедиа и текста в блок столбцов
Пример содержимого с двумя столбцами
Ниже приведен живой пример того, как блоки с двумя столбцами будут выглядеть на опубликованном сайте WordPress. Он использует блок Gutenberg Columns вместе с пользовательским встроенным CSS для добавления границ и отступов. Как уже упоминалось, вы можете вставлять в любом месте, используя многоразовый блок, и вам не нужен какой-либо сторонний плагин для создания такого красивого содержимого вызова в WordPress.
Астра Тема
Получите самую популярную тему WordPress, чтобы создать свой сайт с полным набором инструментов и развивать свой бизнес в Интернете.
