Как поменять стиль для любого блока на Word Press и не лезть в код стилей темы? У всех разработчиков и вебмастеров возникает периодически такая задача. Далее пошагово, просто, быстро и на своем примере распишу как ее решить.
Итак, допустим у нас задача: поменять стиль нескольких блоков, не засоряя темы своим кодом и не затрудняя себя долгими поисками заветного стиля.
Сразу оговорюсь, что в современных версиях вордпресс сразу есть редактор для блоков «Гуттенберг». Поэтому редактировать их можно просто и быстро. Если у Вас текст оформлен по старинке классическим параграфом, то советую их преобразовать в блоки. А чтобы искать на странице нужный блок советую установить бесплатный плагин, о нем писала в одной из прошлых статей
Содержание
Как добавить свои дополнительные стили для блока или тега
Итак, переходим в панель редактирования нужной страницы и находим нужный блок.
У меня предустановлена тема «Астра» про нее писала много в соответствующей статье. Блок имеет вот такой неказистый вид:
Я хочу, чтобы у данного блока была светлая полупрозрачная подложка и поменять цвет текста (цвет можно поменять и прямо в настройках, но для примера сделаем в дополнительных стилях).
Выделяем нужный блок и переходим в его настройки (правая панель редактирования) Open Block Settings
Затем переходим на вкладку «Расширенные»
Дополнительно — Дополнительные классы css и присваивает какой-то класс (можете написать свое имя — у меня «title»)
Далее сохраняем изменения — нажимаем «Обновить» и переходим из административной панели на видимый сайт
Нажимаем «Настроить» в верхнем меню
Находим вкладку «Дополнительные стили»
Я присвоила стилю title следующие параметры — размер и цвет шрифта, а так же цвет подложки background-color (светлый и полупрозрачный):
Можете использовать мой код и вставить его в поле дополнительных стилей:
.title {
font-size: 15px;
color: #333333;
padding-left: 10px;
background-color: rgba(255,255,255,0.5);
}
.title span {
display: inline;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: -10px 0 0 rgba(0, 0, 0, 0.5), 10px 0 0 rgba(0, 0, 0, 0.5);
padding: 0 10px 0 0;
color: #FFFFFF;
line-height: 14px;
font-size: 45px;
}Сохраняем дополнительные стили и смотрим наши изменения:
Надеюсь, у Вас тоже все получилось! Подписывайтесь на блог, будем много проверенной и полезной информации!