Как добавить модуль «Слайдер» в REG.Site
Модуль «Слайдер» удобно использовать для размещения информации об акциях и услугах на главной странице. В этой статье мы расскажем, как можно создать вот такой слайдер:
Чтобы создать слайды:
- 1.
Перейдите в режим редактирования сайта.
- 2.
Нажмите на серый плюс в строке, в которую хотите вставить модуль.
- 3.
Выберите модуль Слайдер:
- 4.
Перед вами появится окно настройки, которое состоит из 3-х вкладок: «Контент», «Дизайн», «Дополнительно». С их помощью настраивается внешний вид слайдера.
Во вкладке «Контент» кликните Добавить слайд:
- Заголовок — введите имя слайда,
- Кнопка — введите текст, который будет размещён на кнопке,
- Тело — введите описание слайда.
- 6.
В блоке «Фон» нажмите на значок «Заливка» и выберите цвет или прозрачный фон:
- 7.
В блоке «Изображение» нажмите Фоновое изображение:
- 8.
Кликните Выберите файлы, найдите нужное изображение на вашем компьютере и нажмите Загрузить изображение:
- 9.
По необходимости включите параллакс-эффект. Параллакс-эффект — это создание изображения, которое выглядит статичным относительно фона сайта.
- 10.
В блоках «Размер фонового изображения», «Позиция фонового изображения», «Повторение фонового изображения», «Смешивание фонового изображения» выберите нужные значения:
В блоке «Текст» заполните поля:
Затем кликните на галочку:
Готово, мы сделали первый слайд.
Следующие слайды вы можете создать по такому же алгоритму.
Мы создали слайд во вкладке «Контент». При необходимости вы можете выставить для слайдов настройки во вкладках «Дизайн» и «Дополнительно».
На вкладке «Дизайн» вы также можете настроить дизайн каждого элемента на слайдере: цвет текста, кнопки и стрелок, положение и размер слайдера, наложить фильтр и тени, а также многое другое.
На вкладке «Дополнительно» вы можете настроить «Пользовательский CSS» и «Атрибуты». В блоке «Видимость» можно отключить модуль на определённом устройстве. Также на этой вкладке вы сможете настроить продолжительность и задержку перехода между слайдами.
Да
раз уже
помогла
Почему слайдер на сайте убивает конверсию | Блог YAGLA
Практически каждая вторая компания в России ставит слайдер на сайте. Последние несколько лет карусель из картинок в верхней части страницы стала чуть ли не обязательным элементом. Но чем руководствуются разработчики, угождая сомнительной моде?
Основной аргумент «за» – привлечение внимания. При том, что многие маркетологи приводят несколько сильных аргументов «против». Вплоть до того, что слайдер называют «убийцей конверсии». Почему?
Низкая кликабельность
Сайт парижского университета Notre Dam за последний год посетили 3 755 000 человек. Из них на слайдер кликнули 1,15%. Выходит, разработчики используют самую важную область страницы впустую. Интересно, что 89% кликов пришлось на первое изображение. Остальные 4 поделили 10%.
Форма слайдера напоминает рекламные баннеры. Пользователи их игнорируют. Об этом свидетельствуют тепловые карты.
На следующем примере верхняя часть экрана не удостоилась внимания:
Отсутствие адаптации к мобильным устройствам
Привлекательность слайдера на сайте заключается в крупном, качественном изображении. На экране айфона эффект пропадает. Почему это так важно? Статистика посещений с мобильных устройств и стационарных компьютеров практически сравнялась.
Кроме того, «карусель» сильно тормозит загрузку. Получается, половина вашей аудитории не оценит красоту меняющихся картинок.
Проблема со скоростью переключения изображений
Подобрать оптимальную частоту смены слайдов невероятно сложно. На многих ресурсах она составляет 1,5-2 секунды. В этом случае невозможно осмысленно воспринять информацию, что раздражает. Если переключение, наоборот, с длительным промежутком, посетители просто не заметят слайдер и прокрутят страницу вниз.
Любая задержка чревата высоким процентом отказов. Помните правило 5 секунд? Пользователи не собираются тратить время на ожидание загрузки динамических изображений.
Даже возможность листать слайды самостоятельно не спасает.
В лучшем случае внимание захватывает первый из них. Начиная со второго, внимание катастрофически падает.
Вред для SEO оптимизации
На правильной с точки зрения SEO странице указывается единственный тег h2 (заголовок). А в слайдере каждое изображение прописывается под h2. Дублирование ведет к снижению релевантности. Кроме того, текст на картинках не читается поисковиками. Все это отрицательно сказывается на позициях сайта в Яндекс и Google.
Проблема с юзабилити
Слайдер на сайте, как правило, содержит кликабельные призывы перейти к более подробному изучению предложения. В этом и состоит проблема с юзабилити (удобством восприятия информации).
Допустим, пользователь кликнул на одно изображение. Дальше он должен вернуться обратно, дождаться следующего слайда и проделать ту же операцию.
Несколько офферов (торговых предложений), заключенных в одном блоке, убивают конверсию. Гораздо эффективнее не складывать все в кучу, а разделить их по принципу «1 страница – 1 оффер – 1 целевое действие».
Перечисленные факторы относятся к хедеру (верхняя часть страницы). Первый экран слишком важен, и если хоть какую-то часть аудитории вы потеряете из-за проблем со слайдером, вы потеряете прибыль.
Высоких вам продаж!
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
Лучшие примеры сайтов-слайдеров и бесплатные дизайны
Сделано в WebflowsliderAllAnimationInteractionsCMSEcommercePortfolio
Самые популярные
Только клонируемые сайты Продемонстрируйте свой сайт Подробнее T.RI CKS Menu + Slider Тимоти Рикс Подробнее Клонируемый интерактивный шаблон CMS Ty Hughey Подробнее Simple Snap Scroll с FullPage.
js Dominik Fojcik Подробнее Динамический слайдер героев! — Dribbble Series ft. Strive Джош Джейкобс Подробнее Форма регистрации Webflow (полная страница) Flowbase Подробнее Пользовательский слайдер — Двойной слайдер hack SketchzLab Подробнее Многошаговая форма Webflow Flowbase Подробнее Custom Animated Hero Slider — CMS Noah Raskin Подробнее Коллекция Carousel Slider Timothy Ricks Подробнее Swiper Showcase Example CJ Hersh Подробнее Loeven Morcel 90 002 Джонатан Морин Подробнее Слайдер изображений Webflow до и после Flowbase Подробнее Захватывающий дух слайдер с преобразованием эллипса в квадрат Halo Lab Подробнее NEW Slider Interactions! — Серия Dribbble Ft. М С Брар Джош Джейкобс Подробнее MM—008: Слайдер с учетом направления Кевин Хааг Подробнее Слайдеры Webflow CMS Swiper — можно клонировать бесплатно 9000 2 Flow Ninja Подробнее Слайдер изображений WebGL CJ Hersh Подробнее MM—016: Snapping 3D Slide Transition Kevin HaagСлайдер «До и после» — бесплатно и работает на любом веб-сайте
Привлекайте пользователей интерактивными изображениями «до» и «после»
Создать слайдерЗачем использовать виджет «До и после слайдера»?
Повышение вовлеченности благодаря взаимодействию
С помощью ползунка «До и после» вы можете повысить вовлеченность на своем веб-сайте, предлагая пользователям интерактивную функцию для взаимодействия.
Большее участие повышает интерес и, следовательно, улучшает процесс принятия решений, который превращает любопытных посетителей в платящих клиентов.
Захватывающее визуальное повествование
С помощью виджета «Слайдер «До и после» вы можете передать убедительную историю, используя правильные изображения. Продемонстрируйте, как глобальное потепление влияет на природу, покажите мощные трансформации людей, представьте интересные результаты реставрации предметов и многое другое!
Эффектная демонстрационная презентация
Слайдер «До и после» позволяет наиболее эффективно продемонстрировать преимущества вашего продукта или услуги — наглядное сравнение. Покажите, как вы восстановили полный рот кривых зубов, или как ваш продукт очистил ту же вещь, только лучше, или как вы превратили ветхий дом в прекрасную обитель — варианты безграничны!
Направление горизонтального и вертикального ползунка
Виджет «Ползунок до и после» позволяет создавать горизонтальные или вертикальные ползунки, что позволяет раскрыть всю мощь вашего творчества.
Имея возможность создавать горизонтальные или вертикальные ползунки, вы сможете адаптировать свои ползунки в соответствии с потребностями вашего проекта, независимо от того, являетесь ли вы дизайнером, фотографом или владельцем бизнеса. инструмент, который поможет вам продемонстрировать свою работу уникально и привлекательно.
Несколько ползунков
С помощью виджета «Ползунок до и после» вы можете создать столько ползунков, сколько пожелаете, что дает вам возможность рассказать полную визуальную историю, адаптированную к вашим потребностям, независимо от того, хотите ли вы продемонстрировать ход строительства. проект, преобразование ремонта дома или изменение внешнего вида человека или животного с течением времени.
Полностью настраиваемый
Виджет «Ползунок «До и после» имеет все возможности настройки, что дает вам возможность легко редактировать дизайн в соответствии с эстетикой вашего веб-сайта. Вы можете изменить цвета ползунка, кнопок и меток, чтобы они соответствовали вашему фирменному стилю.
Вы также можете выбрать один из различных вариантов шрифта и настроить размер, стиль и цвет шрифта, чтобы создать целостный и профессиональный вид. В дополнение к этим вариантам дизайна вы также можете настроить интервал между виджетами, чтобы он идеально вписался в макет вашего веб-сайта.
Простота использования
Виджет «Ползунок «До и после» прост в использовании и не требует знаний программирования. Наша интуитивно понятная панель инструментов с функцией перетаскивания позволит вам настроить виджет так, как вы хотите, всего за несколько простых кликов.
Позиция метки
У вас есть возможность настроить положение меток в виджете «Ползунок до и после». Это позволяет настроить расположение меток в соответствии с дизайном и макетом вашего веб-сайта или приложения.
Соотношение изображения
Независимо от того, является ли ваше изображение альбомным, портретным или квадратным форматом, у вас есть возможность определить соотношение изображения для оптимального отображения.
Идеально отзывчивый виджет «До и после»
Виджет «До и после» — ценный инструмент для любого веб-сайта. Он не только полностью адаптивен, то есть легко подстраивается под размер экрана любого устройства, но также имеет элегантный и современный дизайн, который улучшит общий вид вашего сайта. В мире, где все больше и больше людей выходят в Интернет через свои телефоны и планшеты, крайне важно иметь веб-сайт, оптимизированный для просмотра на мобильных устройствах. Виджет «До и после» позволит вам сделать это, дав вам преимущество перед конкурентами.
До и после Пользовательский CSS
Наш расширенный редактор — это мощный инструмент, который дает вам полный контроль над внешним видом виджета «До и после». С помощью этой функции вы можете легко настроить каждый аспект внешнего вида виджета, от цветов и шрифтов до макета и расположения. Но если вы чувствуете себя особенно творчески, вы можете поднять свою настройку на новый уровень, отредактировав CSS напрямую.
Это дает вам возможность вносить в виджет еще более сложные изменения, позволяя вам сделать его своим. Если вы хотите внести несколько простых изменений или сделать все возможное с расширенными настройками, наш расширенный редактор поможет вам.
Простота встраивания До и после
Чтобы встроить виджет «До и после» на свой веб-сайт, просто скопируйте и вставьте предоставленный фрагмент кода в HTML-код своей веб-страницы. Кроме того, виджет предназначен для самообновления, а это означает, что любые изменения, которые вы вносите в редактор «До и после», будут автоматически отражены на вашем веб-сайте без необходимости каких-либо дополнительных обновлений вручную.
Доверено
Почему я должен использовать виджеты Common Ninja?
Надежная поддержка
Мы ценим наших клиентов и предлагаем первоклассную поддержку и быстрое время ответа. Мы обещаем, что вы не останетесь без проблем.
Интуитивно понятный редактор
Наши виджеты поставляются с простым в использовании интуитивно понятным редактором, который позволяет перетаскивать элементы внутри виджетов и редактировать их с абсолютной легкостью.
Пользовательская аналитика включена
Мы добавляем пользовательскую аналитику в каждое приложение, чтобы вы могли получать ценную информацию, включая количество установок, показов, просмотров, показатели взаимодействия и многое другое!
Полностью настраиваемый
Наши виджеты полностью настраиваемые и предлагают широкий выбор вариантов дизайна. Шрифты, цвета, формы, размеры и многое другое — изменяйте любой элемент дизайна в соответствии с вашими потребностями.
Соответствует GDPR
Мы ценим вашу конфиденциальность и права на личные данные. С этой целью все наши виджеты соответствуют требованиям GDPR и CCPA для защиты вашей конфиденциальности. Вы можете узнать больше о нашем
Высокая безопасность
Наши серверы, код и API постоянно проверяются, чтобы убедиться, что наши виджеты безопасны. Мы также усиливаем это, создавая виджеты высокого качества и проверенных разработчиков.
Perfectly Responsive
Наши виджеты полностью адаптивны и будут работать на любом устройстве.
В мире мобильных устройств эта функция дает вам сильное преимущество перед конкурентами.
Постоянное совершенствование
Мы постоянно работаем над улучшением наших виджетов и добавляем к ним новые функции и возможности, чтобы все необходимое было у вас под рукой.
Навыки программирования не требуются
Наши виджеты не требуют абсолютно никаких знаний программирования. Отредактируйте приложение по своему вкусу, скопируйте его HTML-код и вставьте в нужное место. Вот и все.
Что думают наши пользователи
Часто задаваемые вопросы
Можно ли сделать разделитель «До и после» под углом?
Да, разделитель можно сделать угловым.
Могу ли я изменить направление ползунка с горизонтального на вертикальное?
Да, вы можете легко изменить направление ползунка на вкладке « Content ».
Как начать использовать виджет Common Ninja «До и после слайдера»?
Использовать виджет «Ползунок до и после» очень просто.
Просто зарегистрируйтесь и начните использовать бесплатную версию. Вам не нужно беспокоиться о сложных процессах настройки или установки, так как виджет «До и после слайдера» разработан таким образом, чтобы быть удобным и простым в использовании. После регистрации вы получите доступ ко всем основным возможностям и функциям виджета, которые вы можете использовать для улучшения своего веб-сайта и улучшения своего присутствия в Интернете. Оттуда вы можете перейти на платную версию, если хотите получить доступ к более продвинутым функциям и возможностям. Независимо от того, какую версию вы выберете, вы обнаружите, что виджет — это мощный и простой в использовании инструмент, который может помочь вам вывести свое присутствие в Интернете на новый уровень.
Является ли виджет Common Ninja «До и после слайдера» бесплатным?
Виджет Common Ninja Before & After Slider — это бесплатный инструмент с функциями и опциями. Хотя этот виджет можно использовать бесплатно, у него есть ограничение на количество просмотров, которые он может обрабатывать.
С какими разработчиками веб-сайтов совместим виджет Common Ninja’s Before & After Slider?
Виджет «Слайдер до и после» от Common Ninja — это универсальный инструмент для любого конструктора веб-сайтов. Это означает, что вы можете легко добавить этот виджет на свой веб-сайт или в магазин, независимо от того, какую платформу вы используете для создания своего веб-сайта. Виджет «Слайдер до и после» будет без проблем работать с вашей платформой, независимо от того, используете ли вы популярный конструктор веб-сайтов или что-то более специализированное.
Как встроить виджет «Слайдер до и после» на свой веб-сайт?
Встроить виджет Common Ninja «Слайдер до и после» на свой веб-сайт очень просто. Этот процесс состоит из двух шагов: на вкладке «Добавить на сайт» на панели виджета.
Соответствует ли виджет «Ползунок до и после» GDPR?
Виджет «Ползунок «До и после» разработан в соответствии с Общим регламентом по защите данных (GDPR), набором правил ЕС, защищающих личные данные и конфиденциальность. Используя виджет «Слайдер до и после», вы можете быть уверены, что он не будет собирать и хранить личные данные, которые могут нарушить правила GDPR. Это гарантирует, что ваш бизнес соответствует этим правилам и может защитить конфиденциальность данных ваших клиентов.
Нужно ли уметь программировать, чтобы использовать виджет «Ползунок до и после»?
Нет необходимости в навыках программирования. Наш виджет «Слайдер до и после» прост в использовании даже для тех, у кого ограниченный технический опыт. Виджет имеет удобный интерфейс, который позволяет легко настраивать виджет без знаний программирования. Вы можете полностью настроить слайдер «До и после» в соответствии с вашим брендом. Когда вы закончите, просто скопируйте предоставленный код и вставьте его на свой веб-сайт. Это так просто!
Сложно ли встроить виджет «Ползунок до и после»?
Встраивание виджета «Ползунок до и после» на ваш веб-сайт — это простой процесс. Просто скопируйте предоставленный код и вставьте его в нужное место на вашем сайте. Виджет легко интегрируется на ваш сайт, позволяя вам использовать его возможности и функции.
Никаких технических знаний или знаний в области программирования не требуется — просто скопируйте и вставьте код, чтобы начать. Этот простой процесс позволяет легко добавить виджет на ваш веб-сайт и улучшить его функциональность без каких-либо хлопот.
У меня есть запрос на функцию, как я могу поделиться им?
Да. Мы с нетерпением ждем вашего запроса. Пожалуйста, обратитесь к этой странице.
Зачем мне использовать виджет «Слайдер до и после» на моем веб-сайте?
Вы можете захотеть использовать виджет ползунка до и после на своем веб-сайте по нескольким причинам.
Во-первых, виджет ползунка «до» и «после» может быть полезным способом демонстрации результатов вашей работы или продуктов. Отображая изображение до и после в формате слайдера, вы можете четко продемонстрировать улучшения или изменения, которые вы сделали, и представить ощутимые доказательства ценности вашей работы или продуктов.
Во-вторых, использование виджета ползунка «до» и «после» может помочь улучшить взаимодействие с пользователем на вашем веб-сайте, сделав его более интерактивным и привлекательным.