Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Слайды — виджет Elementor Pro

Обновлено: 17.02.2018
21 комментарий
заставка виджет слайды конструктор сайта

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

В конструкторе сайта Elementor для слайдов придуман виджет, который так и называется Слайды. Каждый слайд в виджете это группа  "элементы настроек" которые можно удалять, дублировать и назначать персонально стили. Разместив данный виджет на странице мы увидим готовый к применению элемент дизайна сайта.

слайды в конструкторе сайта elementor

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

элемент настроек виджета слайды в конструкторе страниц

Содержимое

- Слайды
- - Вкладки свойств элемента

  • Фон - на данной вкладке вы можете изменить фон слайда. В качестве фона вы можете выбрать цвет или изображение.
  • Содержимое - тут можно задать текстовое содержимое слайда, а именно заголовок, описание, текст кнопки и ссылка кнопки.
  • Стиль - на вкладке стиль вы можете включить опцию "Индивидуальный" и задать индивидуальные настройки свойств текста для слайда (выравнивание, позиция и цвет)

- Параметры слайдера

  • Навигация - выбор типа навигации, только точки, стрелки, все вместе или без навигации.
  • Пауза при наведении - будет останавливаться слайд при наведении мыши или нет.
  • Листать автоматически - автоматическое листание слайда. Если выключить то перейти на следующий слайд можно будет только через элементы навигации.
  • Скорость листания - задании скорости смены слайдов.
  • Зациклить листание - листание слайда по кругу т.е когда закончится показ последнего слайда, то начнется показ первого.
  • Переход - тип перехода слайда (листание или выцветание)
  • Длительность перехода (мс.) - дительность анимации перехода для вышеуказанной настройки.
  • Анимация содержимого - анимация текстового содержимого слайда.

Стиль

  • Слайды - группа настроек и свойст для общего изменения стиля текстового блока. Возможно поменять ширину блока, отступ внутри, позицию и выравнивание.
  • Заголовок - свойства для изменения оступа, цвета и типографики заголовка.
  • Описание - настройки для изменения оступа, цвета и типографики заголовка.
  • Кнопка - стандартные возможности изменения стилей кнопки (размер, цвет, типографика, толщина границы и скругление углов)
  • Навигация - цвет, размер и позиция элементов навигации (стрелки и точки)

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

21 комментарий

  • Добрый день) Подскажите пожалуйста, мне необходимо сделать слайдер с текстовой частью и кнопкой. Но есть одна проблема, на текст необходимо поставить анимацию. Как лучше это сделать. Возможно есть какой-то плагин? Спасибо.

    • A

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

  • а какой размер слайда по умолчанию?

  • Здравствуйте! А можно ли на разных слайдах сделать разное расположение содержимого?

    • A

      Здравствуйте. Да, в описание по виджету именно это и написано

      Стиль — на вкладке стиль вы можете включить опцию «Индивидуальный» и задать индивидуальные настройки свойств текста для слайда (выравнивание, позиция и цвет)

  • Спасибо вам за ответ! Но тогда получается, что это уже не слайдер… Вернее если я разделю на две колонки и запихну туда (в одну из колонок) несколько изображений, то они будут перелистоваться автоматом, а во второй колонке текст так и будет оставаться что и при первом что и при втором слайде…. А задумка чтоб и текст менялся тоже..
    Как то по другому еще можно реализовать?
    Вон у разрабов на оф сайте, сделано примерно так же, только видео почему то нельзя посмотреть…. http://prntscr.com/p1qs9u

    • A

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

  • Добрый день, подскажите а можно (и если можно то как!???) сделать такой слайдер? http://prntscr.com/p1alma , то есть чтоб изображение было либо слева либо справа (так еще и под «косую линию» обрезано), а то сейчас только на всю ширину окна встает и все, ни влево ни вправо не двигается….

    • A

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

  • Скажите пожалуйста! Срочно нужно! В слайдере, в разделе содержимое, кнопка, там ссылка!!! (Нет строки «Динамический» над ссылкой!). Не могу понять как на эту кнопку в слайдах поставить всплывающее окно от Elementor… ???????????????????????

    • A

      Можно только по селектору. Более подробно описано тут https://docs.elementor.com/article/472-popups

      • Спасибо за ответ… Но селектор не применяется Конкретно на кнопку или даже слайд… Он применяется на целый слайдер и все слайды… Че делать то, голову ломаю…
        Ребята выручайте! Купил элементом про из того что можно кнопки на слайдер делать…

        • A

          Напишите в поддержку Elementor support@elementor.com
          Если вы покупали, то они вам подскажут решение по данной проблеме или добавят возможность в след обновлении.

  • подскажите, а как слайд можно растянуть по всей ширине окна?

    • A

      По умолчанию слайд растягивается во всю ширину секции. Если у вас на сайте секция во всю ширину, то и слайд будет такой же. Так же и наоборот. Т.е вам нужно перейти в редактировании секции и в опции «Ширина макета» выбрать «Во всю ширину»

  • Здравствуйте. Спасибо за доку! Подскажите, вот в слайдер я могу html ку вставить, но не удобно, визуального редактора ведь нету. Как быть?

    • A

      Здравствуйте. Вам не обязательно вставлять html. Достаточно просто создать контент в виде секции и сохранить как шаблон. Далее просто берем шоткод шаблона из «Моя библиотека» и вставляем в поле содержимое слайдера. Сохраняем, обновляем. Видим результат. Конечно не всегда удобно, но в критических случаях можно воспользоваться.

      • копирую шорт код с ковычками и ничего не выходит — созданный заранее щабло не вставляется, появляется только запись- содержимое и прописан шорт код посередине слайда, можно как то сделать так что бы получался слайдер карусель из шаблонов?

        • A

          В последних версия шоткоды везде экранируются, кроме текстового редактора. Нужно добавить в function.php темы этот код
          add_filter( ‘elementor/widget/render_content’, ‘do_shortcode’);
          у меня работает так.

      • Спасибо. Все получилось.

Оставьте свой комментарий