Пн. Мар 4th, 2024

Как поменять стиль для любого блока на 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;
}

Сохраняем дополнительные стили и смотрим наши изменения:

Надеюсь, у Вас тоже все получилось! Подписывайтесь на блог, будем много проверенной и полезной информации!

от admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *