Шаблон сайта Dwelling CMS создан для компаний в сфере недвижимости, которым нужен красивый веб-сайт для своих клиентов, помогающий генерировать новых клиентов.
Структура
Структура этого шаблона в первую очередь построена на основе 12-колоночной структуры макета.
Для создания колоночной разметки разделу потребуется родительский блок div с классом «12 Columns». Для изменения выравнивания доступны комбинированные классы.
Затем разместите внутри блоки div с классом «Column». Они превратятся в ваши столбцы, так что их должно быть столько, сколько вам нужно.
Затем вы можете добавить специальный комбинированный класс, который будет определять количество столбцов, занимаемых контентом. Например, макет с контентом слева и изображением справа может использовать комбинированный класс «Desktop 6» для обоих столбцов. Это означает, что каждый блок будет занимать 6 столбцов, или 50% доступной ширины.
Для изменения ширины столбцов на планшетах и мобильных устройствах можно добавлять комбинированные классы.
Секции и контейнеры
Для каждого блока контента следует использовать разделы и контейнеры. Разделы организуют контент и добавляют к блоку отступы сверху и снизу. Контейнеры задают максимальную ширину, которая зависит от размера устройства. Раздел имеет классы и комбинированные классы для вариаций, которые вы можете найти ниже.
Применительно к элементу раздела Webflow, это добавляет верхний и нижний отступы к содержимому.
Изменяет верхний отступ, найденный в классе Section, на двойной .
Изменяет нижний отступ, найденный в классе Section, на двойной .
Изменяет верхнее и нижнее поля в классе Section на двойные .
Применяется к блоку div, вложенному в элемент section. Это ограничивает ширину .
Компоненты
Этот шаблон содержит готовые компоненты для быстрого и легкого создания страниц. В шаблоне есть компоненты для навигации, нижнего колонтитула и общих разделов, которые обычно повторяются. Полный список компонентов можно посмотреть здесь . Компоненты можно использовать двумя способами:
Идентичный контент для каждого экземпляра: это полезно для навигации и нижнего колонтитула, где он должен быть идентичным на каждой странице. Внесение изменений в экземпляр в одном месте приведёт к его обновлению на каждой странице.
Свойства компонента: Для компонентов, использующих свойства Webflow, таких как компонент Split Layout, вы можете использовать правую боковую панель для обновления текста, изображений и ссылок в одном экземпляре, не затрагивая другие экземпляры. Это отлично подходит для модулей с разным контентом на сайте, но при этом макет и стиль должны быть одинаковыми.
Как использовать
Доступ к компонентам на левой панели инструментов. Выберите нужный компонент, чтобы разместить его на странице.
Дважды щелкните компонент, чтобы глобально обновить его содержимое.
Используйте свойства компонента на правой боковой панели, чтобы вносить уникальные изменения в содержимое, не затрагивая другие экземпляры этого компонента.
Если компонент должен быть полностью уникальным, просто щелкните правой кнопкой мыши по компоненту и выберите «Отменить связь с экземпляром».
Руководство по стилю
Руководство по стилю позволяет легко обновлять стили, которые будут меняться глобально на сайте. Ознакомиться с руководством по стилю можно здесь .
Типографика
Обновление шрифта и его размеров следует выполнять в руководстве по стилю. Чтобы обновить основной шрифт, выберите элемент Body, а затем тег Body (All Pages) на панели стилей. Внесение изменений здесь обновит шрифт во всем проекте.
Чтобы обновить шрифт и размеры заголовка, выберите каждый заголовок, а затем измените его стиль на нужный вам.
Цвета
Чтобы изменить цвета сайта, перейдите в раздел «Цвета» в руководстве по стилю и выберите один из цветовых блоков.
На панели стилей выберите цвет фона.
Во всплывающем окне выберите значок карандаша, чтобы изменить основной цвет. Это изменит цвет всего сайта.
Дополнительная информация
Для получения дополнительной информации посетите Webflow University, где вы найдете подробные руководства.
.png)