Как сделать красивый виджет: настраиваем стиль и оформление виджетов на сайте

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

Как оформить заголовок и тело виджета

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

Заголовок и тело виджета

Нельзя добавить заголовки к виджетам «Главное меню», «Разделитель», «Ссылка на версию для слабовидящих», «Ссылка на сведения об образовательной организации».

При редактировании поработайте с разделами «Тип виджета» и «Тип заголовка виджета»: с их помощью можно менять оформление заголовка и тела виджета.

При редактировании можно изменять тип виджета и тип заголовка виджета

На скриншотах ниже приведены примеры того, как отображается виджет новостей при изменении этих параметров.

Тип виджета: с фоном; тип заголовка виджета: с фоном
Тип виджета: с рамкой; тип заголовка виджета: с фоном
Тип виджета: без фона; тип заголовка виджета: с фоном
Тип виджета: без фона; тип заголовка виджета: без фона
Тип виджета: с фоном
Тип заголовка виджета: с фоном
Тип виджета: с рамкой
Тип заголовка виджета: с фоном
Тип виджета: без фона
Тип заголовка виджета: с фоном
Тип виджета: без фона
Тип заголовка виджета: без фона

Как выбрать стиль оформления виджета

При работе над дизайном виджета Вы можете поэкспериментировать со стилями: выбрать другой шрифт, шапку заголовка, контур рамки и т.д. Для этого в «Нубексе» есть ряд готовых шаблонов, которые находятся в разделе «Оформление» -> «Стили» -> «Виджеты».

В меню управления (слева) выберите раздел "Оформление", в нем - пункт "Стили"

В разделе "Стили" выберите пункт "Виджеты"

Чтобы выбрать новый дизайн для виджета, просто кликните по иконке с понравившимся стилем: система автоматически сохранит изменения, и виджет отобразится на сайте в новом оформлении.

Просто кликните на понравившийся стиль виджетов: система автоматически сохранит изменения

На скриншотах ниже приведены примеры отображения виджета новостей в разных стилях.

Отображение виджета новостей в стиле s1 Отображение виджета новостей в стиле s7 Отображение виджета новостей в стиле s15 Отображение виджета новостей в стиле s11