← Назад

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

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

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

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

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

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

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

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

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

Что такое CSS

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

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

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

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

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

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

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

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

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

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

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

Сделаем кнопку с анимацией нажатия при наведении.

Примеры стилизации кнопок:
https://lpmotor.ru/articles/shablony-css-koda-dlya-knopok

Пример 2: нестандартная
стилизация кнопки

Открываем css-свойства блока «Кнопка».
Важное замечание — для настройки именно кнопки (а не всего блока, где она размещена) необходимо задавать свойства для класса .btn-new

Здесь мы собрали примеры стилизации кнопок:
https://lpmotor.ru/articles/shablony-css-koda-dlya-knopok

Выбираем кнопку с анимацией нажатия при наведении,
копируем настройки из примера:

Скопированные стили вставляем в настройки 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.

Важно:

Попробовать CSS в редакторе

Ищете конструктор чтобы собрать сайт или интернет-магазин?

Попробуйте mottor бесплатно

Попробовать бесплатно