Настройки CSS
для блоков
и секций
Да здравствует кастомизация!
Представляем обновление, которое расширяет возможности настройки внешнего вида элементов сайта.
Сразу оговоримся: пока работа с этим функционалом требует базовых знаний html и css. Но в будущем мы значительно упростим эти настройки — дело времени.
А сейчас немного теории, чтобы вам всё было понятно.
CSS это настройки внешнего вида контента на сайте: картинок, кнопок, форм, фигур. Чего угодно.
Какие могут быть настройки:
— изменение цвета при наведении
— изменение размера при наведении
— градиенты
— обводка.
— настроить любые css-стили одного блока или всей секции
— отдельно настроить стили блока в мобильной версии
— настроить стили элементов, вложенных в секцию или блок
— копировать блоки или секции с настройками CSS.
При копировании все настройки сохраняются.
Покажем на примерах как это работает.
Предположим, мы хотим, чтобы в мобильной версии отображалось адаптивное меню, спрятанное в гамбургер. А текущее меню не отображалось. Сейчас наш сайт выглядит так:
Что делаем: скроем блок с меню и контактами в мобильной версии. Для этого воспользуемся новым функционалом и пропишем настройки стилей в разделе @mobile:
Мы прописали вот такие настройки:
Теперь наш сайт выглядит так:
Как видим, из мобильной версии пропало меню.
Теперь добавим секцию с мобильным меню,
в настройках скроем отображение в десктопе:
В итоге получаем сайт, где на десктопе отображается стандартное меню, а в мобильной версии — меню-бургер:
https://lpmotor.ru/block-styles
стилизация кнопки
Важное замечание — для настройки именно кнопки (а не всего блока, где она размещена) необходимо задавать свойства для класса .btn-new
https://lpmotor.ru/block-styles
Выбираем кнопку с анимацией нажатия при наведении,
копируем настройки из примера:
и получаем вот такую кнопку:
и отступы кнопки:
теперь выглядит так:
просто копируем уже настроенную:
будет разворачиваться на весь экран:
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
Например, добавив в настройки CSS секции такой простой код:
color: #000000;
text-decoration: underline;
}
a:hover {
text-decoration: none;
background: #ffe100;
}
transition: all 0.3s ease;
overflow:hidden;
}
img:hover {
transform: scale(1.05);
filter: brightness(50%);
}
Но мы понимаем, что это отнюдь не простой функционал.
Поэтому мы будем дорабатывать механику работы с CSS, чтобы редактировать стили блоков и секций было максимально просто.
Также будем рады вашим примерам работы с CSS! Лучшие наработки будем добавлять в библиотеку CSS-настроек.
Присылайте ваши примеры на support@lpmotor.ru — просто прикрепите ссылку на сайт и код CSS.
