Как изменить размер блоков в WordPress

Редактор блоков Gutenberg, официально представленный в WordPress 5.0, дает пользователям возможность полностью настраивать свой контент и сайты WordPress. Больше не ограничиваясь необходимостью создания в WYSIWYG-инструменте, таком как TinyMCE Classic Editor, Gutenberg предоставляет отдельные блоки для каждого элемента содержимого сообщения или страницы. Благодаря контролю над настройками для каждого конкретного блока пользователи могут создавать контент WordPress более легко, чем когда-либо прежде. И один из самых простых способов выделить дизайн - это вывести его за рамки настроек по умолчанию. Итак, мы собираемся посмотреть, как изменить размер блоков в WordPress, чтобы вы могли начать думать (и проектировать) нестандартно.

Большая часть изменения размера в редакторе блоков по-прежнему ограничена областью содержимого сайта из-за адаптивного характера блоков. Если вы установили область содержимого вашей страницы на полную ширину, вы будете работать в этом пространстве. Например, если у вас установлена ​​область содержимого сообщения от 580 пикселей до 1200 пикселей, вы будете работать там. Все методы, которые мы используем, чтобы научить вас изменять размер блоков в WordPress, основаны на идее, что вы будете оставаться в границах любого конкретного контейнера блока.

Как изменить размер блоков в редакторе

Некоторые - но не все - блоки имеют встроенные параметры изменения размера. Их размер легче всего изменить по понятным причинам. Однако в зависимости от блока параметры изменения размера будут находиться в разных местах.

Пример # 1: блок изображения

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

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

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

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

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

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

Пример # 2: блок событий

Для блока событий настройки изменения размера находятся исключительно в контекстном меню самого редактора. (Блок событий - это отдельный плагин от Automattic, который вы установите, и он не является частью основного редактора Gutenberg.)

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

Регулировка высоты блока в самом редакторе вроде хакерская, но работает. Если вы просто нажмете ввод / возврат в поле пустого блока, вы можете увеличить высоту, вставив дополнительные пустые блоки абзаца.

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

Пример 3 #: Использование столбцов для изменения размера блоков в WordPress

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

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

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

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

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

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

Нужны дополнительные параметры размера? Рассмотрите более продвинутый конструктор страниц

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

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

Как изменить размер блоков в WordPress с помощью CSS

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

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

В любом случае вы просто введете класс в текстовое поле. Не включайте точку / точку перед именем класса в этом поле .

Теперь вам нужно перейти в « Внешний вид - Настроить» и найти в самом низу раздел « Дополнительные CSS ». Напишите или вставьте код CSS, чтобы изменить размер блока по своему вкусу.

Мы рекомендуем избегать использования измерений в пикселях (px), потому что они абсолютные. Предпочтительно использовать vw (ширина области просмотра) , vh (высота области просмотра) или % (процент) для настройки блока. Каждый из них будет масштабироваться по отношению к устройству и / или другому контенту вокруг него.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Имейте в виду, что % и vw / vh тоже разные, хотя работают они одинаково. Все они работают в процентах, но они относятся к разным якорям.

Процентное измерение относится к контейнеру, в котором находится элемент. Таким образом, если секция или строка, в которой находится элемент, не доходит до краев экрана, даже установка width: 100% не дойдет до границ.

Однако использование vh / vw будет относиться к области просмотра самого устройства, а не к элементам сайта. Используя height: 80vh , вы всегда можете убедиться, что этот блок занимает 80% высоты экрана, независимо от того, отображается ли он на мобильном устройстве, настольном компьютере или планшете.

Заключение

Редактор блоков в WordPress предоставляет пользователям огромное количество параметров настройки, которые ранее были недоступны (то есть внутри самого редактора). Знание того, как изменять размер блоков в WordPress, необходимо для того, чтобы иметь возможность использовать редактор блоков в полной мере. А с полным редактированием сайта, теперь в его репертуаре, это тот навык, который со временем станет только более полезным.

Какими советами вы можете поделиться по поводу изменения размера блоков в WordPress?

Статья от 3rieart / shutterstock.com