Как изменить ширину определенных блоков параграфа или заголовка?

Question

Как изменить ширину определенных блоков параграфа или заголовка?

22 окт. 2019 г., 17:34:20

Просмотры: 17.4K

Голосов: 0

Чаще всего мне нравится, когда блоки занимают всю ширину моего сайта (https://princetonfireandsafety.com/), но иногда мне нужно, чтобы отдельный заголовок или параграф был не таким широким. Например, если текст состоит всего из одной или двух строк, он выглядит странно, растягиваясь на всю страницу (как раздел на моей странице с заголовком "Did you know that store bought fire extinguishers still need to be certified for your business?" - я бы хотел, чтобы он был лишь немного шире средней колонки над ним).

Я не знаю, как этого добиться. Может быть, я упускаю какую-то опцию в редакторе блоков? Нужно ли использовать CSS/HTML? Или есть плагин, который упростит эту задачу?

Я использую тему OceanWP, если это имеет значение.

Silbernagel Enterprises

1

плагины css html блок редактор заголовки

Комментарии

Это можно реализовать через API стилей блоков

Tom J Nowell

22 окт. 2019 г. 18:34:13

Да, это ваша тема разрешает всем блокам быть на всю ширину. Лучший вариант - либо создать дочернюю тему, либо попробовать другую тему.

WebElaine

22 окт. 2019 г. 22:06:03

Все ответы на вопрос

Комментарии

Да, я разобрался с CSS до того, как увидел ваш комментарий, но использование % — определенно лучшее предложение! Я скоро переключусь на это, спасибо. :)

Silbernagel Enterprises

28 окт. 2019 г. 01:51:57

Комментарии

Дело в том, что я не вижу этих опций для колонок при редактировании блока Gutenberg Columns. Полагаю, они просто недоступны в теме OceanWP?

Silbernagel Enterprises

28 окт. 2019 г. 01:50:46

Ollie 26 · Answer 1 · 2019-10-25T04:40:46Z

Добавьте класс к блоку
Затем вы можете использовать CSS для установки ширины этого блока следующим образом:

.your-block-class {
width: 70%;
}

Добавьте приведенный выше CSS-код в поле пользовательского CSS вашей темы или в файл style.css в разделе "Внешний вид" > "Редактор тем". Убедитесь, что вы используете дочернюю тему, если выбираете последний вариант. И, конечно же, замените your-block-class выше на имя класса, которое вы создали.

РЕДАКТИРОВАТЬ: заметил, что вы это сделали. Рекомендую использовать % вместо px, чтобы ширина адаптировалась под мобильные устройства, планшеты и т.д..

marklchaves 21 · Answer 2 · 2019-10-25T07:30:51Z

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

Прежде чем идти по пути CSS, вы можете рассмотреть использование колонок, например, трех колонок, как у вас выше раздела "Знаете ли вы, что магазинные...". Использование встроенных макетов колонок вместо пользовательского CSS может быть более масштабируемым в долгосрочной перспективе.

Вот как это будет выглядеть с использованием Gutenberg.

https://i.sstatic.net/Zh2QZ.jpg

Во второй строке я использовал блок Gutenberg "3 колонки" с примерно такими пропорциями ширины: 5% 90% 5%.

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

Надеюсь, это поможет.