тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Вкладка Элементы разметки в Wordpress

Сейчас мы с вами разберем блоки вкладки Элементы разметки.

Интервал

Начнем наше изучение с блока Интервал:

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

Созданный блок выглядит вот так:

Обратите внимание на следующую кнопочку:

Потянув за эту кнопочку вверх или вниз можно изменять размеры интервала.

Также размер можно настроить с помощью дополнительного бокового меню:

Внутри наш блок представляет собой обычный div с заданной в атрибуте style высотой:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Сделайте два абзаца и вставьте между ними блок Интервал. Сделайте размер вставленного интервала высотой 200px. Откройте вашу запись в режиме предпросмотра и посмотрите на внешний вид вашей страницы.

Разделитель

Следующий блок, который мы с вами рассмотрим, называется Разделитель и представляет собой разделяющую блоки линию. Для создания указанного блока следует нажать на следующую кнопку:

В результате получится вот такая линия:

С помощью бокового меню можно сменить стиль созданной линии:

Внутри наша линия представляет собой тег hr:

<hr class="wp-block-separator"/>

Сделайте два абзаца и вставьте между ними блок Разделитель.

Смените внешний вид вашего разделителя на широкую линию.

Смените внешний вид вашего разделителя на точки.

Кнопка

Следующий блок, который мы разберем называется Кнопка и представляет собой кнопку-ссылку.

Для создания блока нужно нажать на следующую иконку:

В результате появится вот такая кнопка:

Можно добавить текст кнопки:

И можно добавить адрес, на который будет вести наша кнопка-ссылка:

После ввода адреса ссылки необходимо нажать на следующую кнопку:

Рассмотрим теперь боковое меню кнопки. Вот настройки цвета текста и фона (подобные настройки мы уже проходили ранее):

А вот настройки, меняющие стиль кнопки:

Сделайте блок Кнопка. Добавьте текст и адрес ссылки.

Поменяйте цвет текста вашей кнопки на красный, а цвет фона - на синий.

Поменяйте цвет фона вашей кнопки на произвольный.

Поменяйте стиль вашей кнопки на квадратный.

Поменяйте стиль вашей кнопки на контур.

Поменяйте стиль вашей кнопки обратно на скругленный.

Колонки

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

Для создания указанного блока следует нажать на следующую кнопку:

В результате получится следующее:

По умолчанию при создании блока получатся две колонки, вот они:

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

Следующая кнопка предназначена для выбора типа блока левой колонки:

Если же навести мышкой на правую колонку - появится кнопка для выбора типа блока правой колонки:

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

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

В этом случае откроется меню блока:

Как вы видите, в этом меню всего две кнопки. Первая кнопка заставляет колонки растянутся по ширине содержимого:

А вторая кнопка заставляет колонки растянутся на всю ширину сайта:

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

Создайте блок Колонки.

Сделайте в первой колонке заголовок и 2 абзаца.

Сделайте во второй колонке заголовок, изображение и абзац.

Откройте меню блока и сделайте так, чтобы ваши колонки растянулись на всю ширину сайта.

Создайте новый блок Колонки. Используя боковое меню, установите количество колонок в 3. Воспользуйтесь для этого соответствующим инпутом.

Поменяйте количество колонок на 4, используя для этого соответствующий ползунок.

Медиа и текст

Следующий блок создает изображение, а сбоку от него текст:

После создания блока появится следующее:

Как вы видите, слева будет располагаться изображение:

А справа - текст:

Давайте разберем настройки меню блока.

Следующая кнопка делает так, чтобы ширина блока была по содержимому:

Следующая кнопка делает так, чтобы ширина блока была на всю ширину сайта:

Следующая кнопка делает так, чтобы изображение было слева, а текст - справа (по умолчанию так и будет):

А следующая кнопка делает наоборот: так, чтобы изображение было справа, а текст - слева:

Создайте описанный блок. Добавьте в него изображение и текст.

Сделайте так, чтобы изображение было справа, а текст - слева.