> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.support-vigbo.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Слайдер с анонсами статей в блоге На главной странице блога вы можете разместить слайдер с анонсами ваших статей. Для слайдера есть четыре варианта дизайна, каждый из которых можно настроить под оформление своего блога. Все дизайны слайдера позволяют: * Добавить заголовок и описание для каждого слайда; * Прикрепить ссылки на статьи или другие разделы сайта; * Задать прозрачность фото слайдера и цвет кнопок пролистывания. --- # КАК НАСТРОИТЬ СЛАЙДЕР НА СТРАНИЦЕ БЛОГА 1. Перейдите в раздел **Настройки** в своем блоге в системе управления. ![screen-118.png](https://storage.crisp.chat/users/helpdesk/website/-/a/3/4/a/a34a5179ba12e800/aadae041-47c4-4c9f-b8b8-c8daaa_1wf3f04.png) 2. И откройте раздел **Слайдер**. ![screen-119.png](https://storage.crisp.chat/users/helpdesk/website/-/a/b/3/8/ab3810edd4bf9000/156067e9-76df-4fd7-83b3-5f64ef_z2sfpj.png) 3. Далее вы можете загрузить изображения в слайдер. ![screen-120.png](https://storage.crisp.chat/users/helpdesk/website/-/4/c/f/c/4cfc6686c7611c0/b056479e-f56c-424c-b158-1024f3_1bcaykk.png) Вы можете добавлять по одной фотографии или сразу добавить несколько. Чтобы добавить сразу несколько фотографий, нажмите **Добавить слайд**, далее на клавиатуре зажмите кнопку Ctrl и кликните на каждый файл, который хотите добавить в слайдер. 3. После загрузки фото, можно добавить **Заголовок** и **Описание** для любого слайда. Данный текст будет отображаться на или под фото в слайдере (в зависимости от выбранного дизайна слайдера). ![screen-103.png](https://storage.crisp.chat/users/helpdesk/website/-/c/a/5/7/ca579448c0a69000/0f5e35a3-aecd-4f81-a853-c747f3_kcr1hr.png) 4. Для фото вы можете задать ссылку на запись вашего блога (выбрав заголовок нужной записи из выпадающего списка) или прописать ссылку вручную на любую страницу вашего или другого сайта. ![screen-104.png](https://storage.crisp.chat/users/helpdesk/website/-/f/8/4/b/f84ba3849564c000/46116bfa-b398-41f8-b800-fa2d18_1jpp63b.png) 5. Выберите один из 4 вариантов дизайнов слайдера. ![screen-121.png](https://storage.crisp.chat/users/helpdesk/website/-/8/6/c/e/86cede1aa1db0800/113741f0-92e3-4c61-ae0c-93259c_1xyuaqc.png) Чтобы определится с выбором посмотрите примеры и информацию по каждому виду дизайна. --- # ОПИСАНИЕ ВИДОВ СЛАЙДЕРА | [Вид 1](/#”vid1”) [Посмотреть](/#”vid1”) | [Вид 2](/#”vid2”) [Посмотреть](/#”vid2”) | | --- | --- | | [Вид 3](/#”vid3”) [Посмотреть](/#”vid3”) | [Вид 4](/#”vid4”) [Посмотреть](/#”vid4”) | **Вид 1** Изображения занимают всю область слайдера (растягиваются на всю ширину слайдера). Ширину и высоту слайдера вы можете задать в **Дизайн-редакторе**. Заголовок и описание, добавленное к слайдам, будут отображаться на фото. Для этого вида слайдера также можно включить слайдшоу и задать для него интервал в **Дизайн-редакторе**, чтобы фотографии менялись автоматически и выбрать один из трех эффектов смены фотографий. ![screen-122.png](https://storage.crisp.chat/users/helpdesk/website/-/e/2/3/a/e23a46c2c77ef800/d8771ada-1388-4498-bc42-e359e6_soqeix.png) Слайдер будет выглядеть следующим образом: ![Screenshot_2.png](https://support.vigbo.tech/hc/article_attachments/115002055231/Screenshot_2.png) **Вид 2** Изображения отображаются полностью, сохраняя свои пропорции. Текст на фото отображается по центру на фоне. Цветовые настройки текста, фона и оформление слайдера вы можете задать в **Дизайн-редакторе**. Слайдер будет отображаться следующим образом: ![Screenshot_4.png](https://support.vigbo.tech/hc/article_attachments/115002063232/Screenshot_4.png) **Вид 3** Изображения в этом слайдере только квадратные. Текст всегда располагается под фото. Вы можете задать расстояния между слайдами, цветовое оформление текста в **Дизайн-редакторе**. Слайдер будет отображаться следующим образом: ![Screenshot_6.png](https://support.vigbo.tech/hc/article_attachments/115002063372/Screenshot_6.png) **Вид 4** Фото отображаются полностью. Текст на фоне всегда располагается вверху слайдера. Высота фона под текстом на всех фото определяется высотой наибольшего текста (количеством строк) на каком-либо фото в слайдере. Описание отображается при наведении на заголовок. Вы можете задать расстояние между фото, высоту и ширину, цветовые настройки и оформление слайдера в **Дизайн-редакторе**. Слайдер будет отображаться следующим образом: ![Screenshot_7.png](https://support.vigbo.tech/hc/article_attachments/115002055331/Screenshot_7.png) > **ВАЖНО:** в мобильной версии сайта на фото в слайдере отображается только заголовок, текстовое описание не отображается. 6. Управление цветовыми настройками и оформлением слайдера производится в **Дизайн-редакторе**. Перейдите в раздел **Оформление** > **Оформление сайта** и нажмите кнопку **Дизайн-редактор**. ![screen-97.png](https://support.vigbo.tech/hc/article_attachments/7083851097628/screen-97.png) Откроется новая вкладка браузера с вашим сайтом и редактором для управления оформлением. Перейдите здесь в раздел **БЛОГ** > **Слайдер** и внесите здесь необходимые правки. Для каждого вида слайдера доступен свой набор настроек. ![screen-107.png](https://support.vigbo.tech/hc/article_attachments/360025675160/screen-107.png) После добавления необходимых настроек, не забудьте включить отображение слайдера в блоге. ![screen-123.png](https://support.vigbo.tech/hc/article_attachments/7124863328156/screen-123.png)