Вопрос или проблема
Большую часть времени мне нравится, чтобы блоки занимали полную ширину моего сайта (https://princetonfireandsafety.com/), но иногда я просто хочу иметь один заголовок или абзац, который не такой большой. Например, если текст состоит всего из одной или двух строк, он выглядит действительно странно, занимающим всю страницу (например, раздел на моей странице под названием “Знали ли вы, что купленные в магазине огнетушители все равно нужно сертифицировать для вашего бизнеса?” Я бы хотел, чтобы он был чуть шире средней колонки прямо над ним).
Я не знаю, как это сделать. Я упускаю какую-то опцию в редакторе блоков? Это какой-то CSS/HTML, который нужно сделать? Или есть плагин, который упростит это?
Я использую тему OceanWP, если это имеет значение.
-
Добавьте класс к блоку
-
Затем вы можете использовать CSS, чтобы задать ширину для этого блока следующим образом:
.your-block-class {
width: 70%;
}
- Добавьте указанный выше код CSS в пользовательское поле CSS вашей темы или в файл style.css в разделе внешний вид>редактор тем. Убедитесь, что вы используете дочернюю тему, если делаете это в последнем случае. И, конечно, замените your-block-class выше на имя класса, который вы создали.
Редактирование: заметил, что вы это сделали. Я рекомендую использовать % вместо px, чтобы это адаптировалось к мобильным устройствам, планшетам и т. д.
Вы определенно можете использовать CSS, как уже упоминалось.
Перед тем как обращаться к CSS пути — вы могли бы использовать колонки, как три колонки, которые у вас выше в разделе “Знали ли вы, что купленные в магазине …”. Использование встроенных макетов колонок вместо пользовательского CSS может лучше масштабироваться в долгосрочной перспективе.
Вот как это будет выглядеть с использованием Гутенберга.
https://i.sstatic.net/Zh2QZ.jpg
Во втором ряду я использовал блок Gutenberg с тремя колонками с шириной примерно 5% 90% 5%.
Вы можете использовать ту же концепцию с любым конструктором страниц, который поддерживает макеты колонок.
Надеюсь, это поможет.
Ответ или решение
Изменение ширины параграфов или заголовков в вашем сайте может значительно улучшить читабельность и восприятие контента. Если вы сталкиваетесь с ситуацией, когда текст, состоящий всего из одного или двух предложений, занимает всю ширину страницы, это может выглядеть непривлекательно. Рассмотрим несколько способов, как вы можете это исправить, используя возможности редактирования блоков и CSS, а также некоторые инструменты.
1. Использование редактора блоков и колонок
Первый метод — это использование встроенных функций редактора Gutenberg. Вы можете применить колоночные блоки, что позволит вам более гибко расположить контент. Например, вы можете создать три колонки с шириной 5% – 90% – 5%. Это создаст иллюзию «сжатия» центрального контента, при этом пространство по обе стороны будет заполнено.
Как это сделать:
- В редакторе Gutenberg добавьте блок колонн.
- Настройте ширину колонок по своему желанию.
Такое решение не требует написания CSS и будет хорошо масштабироваться на различных устройствах.
2. Применение кастомного CSS
Если вы хотите большего контроля над стилем, вы можете изменить ширину конкретных блоков с помощью CSS. Для этого выполните следующие шаги:
Шаг 1. Добавьте класс к блоку
Для начала вам необходимо добавить уникальный класс к вашему блоку, например, «my-custom-width».
Шаг 2. Напишите CSS код
Затем вам нужно добавить кастомный CSS-код для настройки ширины блока. Пример:
.my-custom-width {
width: 70%; /* или любая желаемая ширина */
margin: 0 auto; /* для центрирования блока */
}Шаг 3. Вставка CSS
CSS-код можно добавить в разделе «Настроить» > «Дополнительные стили» в вашей теме OceanWP или в файле style.css дочерней темы. Использование процента вместо пикселей гарантирует, что ваш текст будет адаптироваться под разные размеры экрана.
3. Просмотр и использование плагинов
Если вам нужно еще больше возможностей, есть плагины, которые могут помочь вам управлять стилем блоков без необходимости погружаться в код. Например, плагины, такие как Elementor или Beaver Builder, предоставляют простые в использовании интерфейсы для настройки ширины блоков и занимаемого ими пространства.
Заключение
Модификация ширины параграфов и заголовков на вашем сайте может существенно повысить его визуальную привлекательность. Используйте встроенные функции редактора, возможности кастомного CSS или подходящие плагины, чтобы достичь нужного результата.
Не забывайте тестировать дизайн на различных устройствах, чтобы убедиться, что все смотрится корректно и удобно для пользователей.