Как использовать стилизованные разделы для настройки дизайна сайта вашей группы

Стилизованные разделы — это действительно мощные инструменты, которые помогают выделить контент вашего сайта, сохраняя при этом связь с вашим собственным художественным брендом. Они открывают множество дверей, включая больше изображений, цветов и вариантов макета, чтобы ваш сайт оставался привлекательным.

Хотя разделы могут быть особенно полезны на одностраничных веб-сайтах, их, безусловно, можно применить к любой странице вашего веб-сайта, где вы хотите привлечь внимание и выделить функции, которые вы добавляете.

Есть много аспектов, которые необходимо включить, чтобы дизайн веб-сайта вашей группы был тщательным и профессиональным, например, эффективная биография, отличная музыкальная страница и EPK. После того, как вы создали свой музыкальный веб-сайт и разместили основной контент, вы можете копнуть немного глубже и настроить некоторые разделы, чтобы создать веб-сайт, соответствующий вашему стилю.

Ключом к отличному дизайну веб-сайта является постоянное перемещение взгляда посетителя по странице. В этом могут помочь изменения цвета, текстуры и движения, чего можно добиться с помощью настраиваемых стилей разделов. Здесь так много аспектов, о которых нужно подумать, и вам может быть интересно: можете ли вы создать дизайн веб-сайта группы, который выделяет ваш контент, не будучи слишком загроможденным?

Да! Ключ в том, чтобы придумать сплошную цветовую схему и найти отличные текстурные изображения, которые вы можете использовать на своем сайте. Вот пошаговое руководство по созданию красивого сайта со стилизованными разделами!

Организуйте свой контент

Раздел — это, по сути, блок пространства на странице, в который вы можете добавлять функции. Приятно использовать разделы, чтобы разбивать вещи по категориям или делать акцент на определенной функции на странице.

Например, вы можете использовать стилизованные разделы, чтобы привлечь внимание к функции «Подписаться на список рассылки», или разделить раздел на три столбца, чтобы добавить три функции «Изображение» и «Текст» для приятных призывов к действию на главной странице. Это видно на примере ниже.

Добавить раздел на любую страницу в панели управления довольно просто. В разделе «Редактировать содержимое» наведите указатель мыши на макет страницы — вы увидите синюю кнопку «+Добавить раздел» над или под существующим разделом.

Нажмите эту кнопку, чтобы добавить новый раздел!

Вы также можете настроить столбцы для каждого отдельного раздела здесь, нажав кнопку «Редактировать столбцы» в левом верхнем углу раздела. Вы можете выбрать между 1, 2 и 3 столбцами с несколькими асимметричными вариантами для левой или правой боковой панели.

Настройте стили разделов

Для большего художественного чутья настройте до трех разных стилей разделов на вкладке «Редактировать тему». Стили разделов — это место, где вы настраиваете фон раздела, а также цвет текста, ссылок и кнопок. Здесь вы действительно задаете тон для разделов на своем сайте — вы можете установить высококонтрастные цвета между разделами или выбрать более тонкие цветовые различия — все, что соответствует вашей эстетике.

Как и в остальных вариантах дизайна шаблона веб-сайта вашей группы, вы можете настроить стили разделов на вкладке «Редактировать тему» ​​на панели управления.

В параметрах редактора темы слева просто прокрутите вниз до параметров «Стиль раздела 1», «Стиль раздела 2» и «Стиль раздела 3», выберите настройки цвета и, когда все будет правильно настроено, нажмите « сохранить», чтобы применить изменения.

Установите свойства раздела

После того, как вы установили стили разделов на вкладке «Редактировать тему», вы можете вернуться на вкладку «Редактировать содержимое» и применить различные свойства к разделам на вашем сайте. Наведите указатель мыши на раздел и нажмите «Редактировать раздел» в верхнем левом углу этого раздела. Свойства, которые вы можете настроить, — это цвета разделов (извлеченные из установленных вами стилей разделов), фоновое изображение и эффект прокрутки, а также заполнение раздела.

Вы также можете добавить к разделу необязательный заголовок и настроить выравнивание этого заголовка по своему вкусу. Этот заголовок также можно добавить в качестве элемента подменю, если вы включите переключатель «Показать в меню». Это можно использовать, если у вас довольно много контента на определенной странице, и вы хотите предоставить более простой способ доступа ко всему этому контенту.

Чтобы изменить цвета раздела, нажмите «Цвета раздела», а затем выберите стиль раздела в раскрывающемся меню.

Чтобы изменить заполнение раздела, нажмите «Заполнение раздела» и выберите «Нет», «Маленький», «Средний», «Большой» или «Очень большой». Отступы обеспечивают больший интервал вверху и внизу содержимого в разделе и могут создавать пробелы для придания законченного вида.



Нажмите «Сохранить», чтобы сохранить все эти изменения. Я собираюсь подробно остановиться на параметрах фонового изображения ниже, потому что здесь так много потенциала!

Добавить фоновое изображение

Возможности с функциями фона раздела безграничны благодаря добавленной текстуре, глубине и индивидуальному стилю, которые они предлагают. Теоретически вы можете установить фоновое изображение для каждого раздела на вашем сайте, чтобы он был полностью основан на изображениях без сплошных цветовых блоков. Это действительно мощный шаг, если вы хотите создать сайт с визуальным мышлением.

При этом важно помнить о сплоченности. Вы должны убедиться, что все эти изображения находятся в одной цветовой палитре и не содержат много деталей. Вот пример сайта, который я создал, используя разные изображения неба и облаков: Реквием по небу.

Чтобы добавить фоновое изображение в раздел, снова нажмите «Редактировать раздел», а затем нажмите «Фоновое изображение». Отсюда нажмите «добавить изображение» и либо загрузите новое изображение, либо выберите изображение в средстве выбора изображений. Нажмите «Применить». Затем вы можете обрезать и увеличить изображение по мере необходимости и нажать «Сохранить».

Отсюда вы можете установить прозрачность изображения. В зависимости от содержимого в разделе вы можете оставить прозрачность изображения на низком уровне (ниже 20%). Но, если изображение не будет мешать содержанию здесь, вы можете немного увеличить его. В моем примере здесь я установил прозрачность на 70%. Вы также можете выбрать другой стиль раздела, чтобы совместить цветной фон с выбранным вами изображением.

Затем установите эффект прокрутки. Вы можете опустить это, но у нас есть несколько довольно приятных вариантов. Эффект прокрутки Parallax дает аккуратный трехмерный эффект, поскольку фоновое изображение прокручивается с немного другой скоростью, чем сама страница. Эффект Фиксированная прокрутка фиксирует изображение на фоне, а остальное содержимое прокручивается по нему. Вы можете поиграть с ними по мере необходимости. Снова нажмите «Сохранить», чтобы применить эти изменения.

Получайте удовольствие, играя с пользовательскими стилями разделов!

Как видно из этих примеров, с параметрами стиля и макета, которые предоставляют разделы, очень весело работать. Они упрощают создание красивого музыкального веб-сайта. Многие из наших шаблонов веб-сайтов поставляются с предварительно созданными стилизованными разделами, чтобы вы могли начать работу, и все они также готовы для мобильных устройств. Я надеюсь, что этот пост придаст вам уверенности, чтобы опробовать все эти возможности!

Создайте профессиональный веб-сайт для мобильных устройств за считанные минуты, который легко обновлять и поддерживать. Создайте сайт своей группы с Bandzoogle уже сегодня!