Настройки CSS
для блоков
и секций

Да здравствует кастомизация!

Представляем обновление, которое расширяет возможности настройки внешнего вида элементов сайта.

Сразу оговоримся: пока работа с этим функционалом требует базовых знаний html и css. Но в будущем мы значительно упростим эти настройки — дело времени.

А сейчас немного теории, чтобы вам всё было понятно.

CSS это настройки внешнего вида контента на сайте: картинок, кнопок, форм, фигур. Чего угодно.

Какие могут быть настройки:

— тень и свечение
— изменение цвета при наведении
— изменение размера при наведении
— градиенты
— обводка.
Что такое CSS

— настроить любые css-стили одного блока или всей секции
— отдельно настроить стили блока в мобильной версии
— настроить стили элементов, вложенных в секцию или блок
— копировать блоки или секции с настройками CSS.
    При копировании все настройки сохраняются.

Что теперь можно

Покажем на примерах как это работает.

Предположим, мы хотим, чтобы в мобильной версии отображалось адаптивное меню, спрятанное в гамбургер. А текущее меню не отображалось. Сейчас наш сайт выглядит так:

Пример 1: скрытие блока

Что делаем: скроем блок с меню и контактами в мобильной версии. Для этого воспользуемся новым функционалом и пропишем настройки стилей в разделе @mobile:

Мы прописали вот такие настройки:

Теперь наш сайт выглядит так:

Как видим, из мобильной версии пропало меню.

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

В итоге получаем сайт, где на десктопе отображается стандартное меню, а в мобильной версии — меню-бургер:

Сделаем кнопку с анимацией нажатия при наведении.
Примеры стилизации кнопок:
https://lpmotor.ru/block-styles
Пример 2: нестандартная
стилизация кнопки
Открываем css-свойства блока «Кнопка».
Важное замечание — для настройки именно кнопки (а не всего блока, где она размещена) необходимо задавать свойства для класса .btn-new
Здесь мы собрали примеры стилизации кнопок: 
https://lpmotor.ru/block-styles

Выбираем кнопку с анимацией нажатия при наведении,
копируем настройки из примера:
Скопированные стили вставляем в настройки CSS 
и получаем вот такую кнопку:
Проверим как кнопка выглядит на мобильной версии:
Хм, великовата. В мобильной версии надо уменьшить шрифт
и отступы кнопки:
Поменяли параметры и в мобильной версии кнопка
теперь выглядит так:
Если нам понадобится ещё одна такая же кнопка,
просто копируем уже настроенную:
На сайте есть карточки товаров:
Добавим тень для первой карточки. Открываем настройки css и вставляем строчку кода:
Теперь первая карточка выглядит так:
Добавим усиление тени при наведении:
Применим настройки для всех трёх карточек:
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
Пример 3: тень для карточки-товара и ховер-эффект
Сделаем секцию, которая при изменении размеров окна
будет разворачиваться на весь экран:
Всё, что нужно сделать — добавить этот код в настройки CSS секции:
Пример 4: секция во весь экран
& {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}

Стилизовать ссылки стало намного проще. Мы можем задать нужные CSS свойства как для всей секции, так и для конкретного блока

Например, добавив в настройки CSS секции такой простой код:
Пример 5: настройка ссылок
a {
color: #000000;
text-decoration: underline;

}

a:hover {
text-decoration: none;
background: #ffe100;

}

В данном случае нужно будет привязать настройки к тегу img. Например, так:
Пример 6: увеличение и затемнение картинки при наведении
img {
transition: all 0.3s ease;
overflow:hidden;
}

img:hover {
transform: scale(1.05);
filter: brightness(50%);
}
Текущие CSS настройки доступны для всех пользователей.
Но мы понимаем, что это отнюдь не простой функционал.

Поэтому мы будем дорабатывать механику работы с CSS, чтобы редактировать стили блоков и секций было максимально просто.

Также будем рады вашим примерам работы с CSS! Лучшие наработки будем добавлять в библиотеку CSS-настроек.

Присылайте ваши примеры на support@lpmotor.ru — просто прикрепите ссылку на сайт и код CSS.
Важно:
ИНН 590421414992
ОГРН 313590414000013
ИП Старолат А.Ю., 614000 г. Пермь

8 800 250 5337
При поддержке Фонда Развития Интернет Инициатив
*Настоящая информация о тарифах не является офертой, публичной офертой и предоставляется исключительно в информационно-ознакомительных целях.