Сайты на WordPress часто создают на основе готовых дизайнов: выбирают из библиотеки по типу Starter Templates, затем заменяют тексты, изображения, цвета и т.д. Однако в готовых дизайнах может не хватать нужной секции или страницы. А для кого-то использовать готовые шаблоны в принципе не вариант.
В этой статье разберём универсальный принцип построения секций с помощью стандартного редактора блоков WordPress. Этот принцип позволит дополнять готовые дизайны, а также создавать недостающие страницы или собирать собственные макеты с нуля.
Подготовка новой страницы
После создания пустой страницы (раздел «Страницы – Добавить страницу») следует сразу выполнить два действия:
- отключить отображение заголовка;
- настроить адрес страницы.
Выключите заголовок страницы
Заголовок, который вы вводите в верхней части редактора WordPress, требуется, прежде всего, для удобной навигации в админке. Он помогает найти нужную страницу среди других, но на самом сайте его лучше спрятать.
Если заголовок включён, тема также отобразит его на самой странице в специальном контейнере. Дизайн этого контейнера нельзя настраивать в редакторе так же гибко, как и обычные блоки.
Поэтому стандартное название обычно скрывают, и при необходимости добавляют отдельно на титульный баннер с помощью блока «Заголовок». Это позволяет более удобно контролировать дизайн страницы.
В теме Astra есть удобный выключатель заголовка в виде иконки с глазом. В других темах такого переключателя может не быть или он может размещаться в другом месте.
Измените URL-адрес страницы
Адрес страницы должен быть кратким и понятно передавать его содержание. Например:
contact— для страницы «Контакты»;services— для страницы «Услуги»;about— для страницы «О нас».
Чтобы подобрать удачный адрес, можно посмотреть, как оформлены URL соответствующих страниц на сайтах конкурентов.
Поле для изменения адреса страницы находится на главной боковой панели WordPress: вкладка «Страница», опция «Ярлык».
Принцип построения секций
В создании секций вам поможет простой и универсальный принцип 3К. Это аббревиатура для слов « Контейнер , Колонки, Контент», она описывает структуру любой секции.
В сущности, любую страницу на любом сайте можно воспринимать как набор прямоугольных контейнеров. Внутри каждого из них расположено какое-то количетсво колонок, а уже в колонках находятся текст, изображения, кнопки и другой контент.
Например, титульный баннер на главной странице этого сайта это синий контейнер с одной колонкой, где располагаются заголовок, подзаголовок и строка поиска.
Далее следует контейнер, в котором сначала одна колонка для заголовка и подзаголовка, а затем две колонки, в которых располагаются ссылки на статьи.
Создание базовых секций
Базовый алгоритм при создании любой секции состоит из следующих шагов:
- добавить блок «Контейнер» и выбрать количество колонок;
- установить цвет фона секции;
- добавить внутренние отступы.
Добавьте блок «Контейнер»
Поскольку среди стандартных блоков WordPress нет блока Контейнер, вам понадобится установить плагин Spectra от разработчиков темы Astra. Он добавит в редактор новые блоки, которые отлично расширят ваши возможности в создании сайта.
Статья на тему 👀
Обзор плагина Spectra
Сразу после добавления блока «Контейнер» потребуется выбрать макет с колонками. Чтобы определить подходящую структуру для каждой секции, проанализируйте ваши любимые сайты или сайты конкурентов.
Установите цвет фона секции
Если во всех разделах на вашей странице должен быть один и тот же цвет, этот шаг можно пропустить. Однако делать разноцветные секции — тоже популярный вариант, который встречается на многих сайтах. Обычно в таких ситуациях используют два, максимум три цвета. К примеру, белый, светло-серый и один из ярких фирменных цветов бренда.
Параметры фона контейнера находятся на вкладке «Стиль», раздел «Background». Надо выбрать вариант фона «Сплошной цвет», после чего появится опция для выбора цвета.
Добавьте внутренние отступы
Отступы обычно требуются сверху и снизу. Они не дают тексту, изображениям и другим элементам прижиматься к границам контейнера. Без них секция обычно выглядит тесной и неряшливой.
Параметры отступов находятся на вкладке «Стиль», раздел «Spacing», опция «Padding». По умолчанию контейнер может иметь небольшие отступы, например 10 пикселей с каждой стороны. Для полноценной секции этого часто недостаточно, поэтому значение сверху и снизу следует увеличить.
Чтобы установить разные значения для каждой стороны, нажмите кнопку с цепочкой, чтобы разорвать связь между полями, и отдельно увеличьте значения в полях «Top» и «Bottom». Например, до 50 или 100 пикселей.
После базовой подготовки секции можно добавлять в колонки контент: текст, изображение, кнопки и другие блоки.
Создание более сложных секций
Когда вы добавляете блок «Контейнер», среди стандартных макетов с колонками может не потребоваться. К примеру, возьмем секцию «Выберите устройство» с нашего демонстрационного сайта smartfix.vashdomen.com. В ней заголовок занимает всю ширину, а под ним располагаются четыре карточки в одну строчку.
Поскольку макета с такой структурой среди готовых вариантов нет, его придется собирать вручную. Концептуально это будет происходить по такому алгоритму:
- подготовить основной контейнер;
- добавить в него внутренние контейнеры;
- указать размеры внутренних контейнеров;
- изменить поведение внутренних контейнеров в середине основного.
Шаг 1. Создайте основной контейнер
Сначала подготовьте контейнер, который будет материнским для всей секции. Выберите первый макет, настройте цвет фона и внутренние отступы.
Шаг 2. Добавьте в основной контейнер внутренние
После этого добавьте внутрь еще пять контейнеров: один для заголовка, четыре для колонок под ним. На этом шаге все вложенные контейнеры будут располагаться друг под другом вертикально. Так и должно быть.
Шаг 3. Укажите размеры внутренних контейнеров
Выберите контейнер, который должен стать первой из четырех колонок, и откройте вкладку «General». В разделе «Container Type» найдите опцию «Custom Width». По умолчанию будет установлено значение 100%. Так как колонок четыре, логично будет установить ширину 25%.
Для первого вложенного контейнера, в котором должно располагаться название секции, следует оставить ширину 100%.
Шаг 4. Измените поведение внутренних контейнеров в середине основного
Даже несмотря на то, что мы изменили ширину внутренних контейнеров, они всё ещё располагаются в столбик. Так происходит потому, что стать в одну строку им не дают настройки основного контейнера.
А именно речь о двух опциях: «Direction» (направление расположения блоков) и «Wrap» (перенос блоков). Они находятся на вкладке «General», раздел «Layout».
Опция «Direction» определяет направление, в котором размещаются вложенные блоки. По умолчанию это направление будет сверху вниз. Чтобы внутренние колонки стали в одну строчку, нужно выбрать горизонтальное направление — слева направо.
После изменения направления расположения блоков все пять вложенных контейнеров станут в один ряд, включая контейнер для заголовка, который имеет ширину 100%. Это может показаться нелогичным, но так происходит из-за опции «Wrap», которая отвечает за настройку переноса блоков.
Если в этой опции выбран вариант «No wrap» (без переноса), вложенные блоки не будут переноситься на следующую строку, какая бы ширина не была у каждого из них.
Выберите вариант «Wrap» (с переносом), чтобы включить перенос блоков в соответствии с шириной, установленной в их параметрах. После этого контейнер заголовка с шириной 100% займет отдельную строку, а четыре контейнера с шириной 25% разместятся под ним.
Единственное, что при ширине в 25% последняя колонка не уместится и перенесётся на новую строчку. Так происходит из-за того, что пространство между колонками тоже учитывается и в сумме с ним четыре колонки по 25% занимают более 100%.
Чтобы решить эту проблему, нужно немного уменьшить ширину каждой колонки — примерно до 23%. Это должно компенсировать пространство между колонками.
Таким образом, можно создавать любые сложные структуры: секции с карточками, списками услуг, тарифами, предпочтениями, отзывами и другими элементами.
Дублирование секций
Полезный лайфхак — делать дубликаты секций, чтобы сэкономить время и не воспроизводить макеты каждый раз с нуля.
Откройте «Обзор документа» на верхней панели редактора, найдите главный контейнер нужной секции, щелкните три точки и выберите команду «Дублировать». Затем измените контент, фон, количество колонок или другие параметры копии.
Многоразовые шаблонные блоки
Еще один лайфхак — сохранять секции, чтобы затем добавлять их на страницы в несколько кликов. К примеру, это может быть рекламный блок или любая другая секция или даже макет, который вы хотите использовать повторно.
Сначала доведите нужную секцию до состояния, в котором готовы её сохранить, затем выберите её главный контейнер, откройте дополнительные опции на всплывающей панели и выберите «Создать паттерн».
Придумайте для паттерна четкое имя, чтобы потом его было легко найти. Например, «Рекламный блок 1» или что-то вроде этого.
После добавления вы можете найти сохраненный паттерн в меню добавления блоков. Вкладка «Патерны», раздел «Мои паттерны».
Что дальше
Надеемся, что эта статья помогла вам в создании страницы или необходимой секции. Если у вас остаются какие-то вопросы, задайте их в комментариях, попробуем всем помочь.