Вход
Регистрация
← Назад

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

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

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

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

Получите подарки от 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;
}

& {
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.
Важно:
Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке