Web5X Блог

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

Web5X Блог

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

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

Основы работы с конструктором сайта

Обновлено: 14.12.2018
6 комментариев

Данная статья поможет вам сделать первые шаги при работе с конструктором сайтов Elementor.

Что такое Elementor ?

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

Для работы с Elementor вам не понадобятся технические знания, знания кода. Нужно только усердие и внимательность.

Выполним 7 простых шагов, чтобы получить результат.

  1. Запуск конструктора
  2. Изучить интерфейс конструктора
  3. Создать первую секцию
  4. Выбрать готовый шаблон
  5. Добавить колонки в секцию
  6. Вставить виджет
  7. Сделать сайт адаптивным

1. Запуск конструктора

Для того чтобы создать страницу в Elementor на необходимо перейти в редактировании вашей страницы или записи и нажать на кнопку редактирования "Редактировать в Elementor" как показано на рисунке

Далее через несколько секунд откроется окно конструктора страниц.

2. Изучаем интерфейс редактора

Конструктор состоит из основных рабочих зон:
1. Панель (Верхняя): Используется в основном для быстрого поиска виджета.
2. Виджеты / Настройки веджета: Выбор виджета и его настройка.
3. Кнопка просмотра: Включения предварительного просмотра. Один клик для скрытия или отображения панели.
4. Панель (Нижняя): Настройки страницы, Режим адаптивности, История, Предварительный просмотр и Сохранение страницы (обновление, сохранение как черновик или как шаблон).
5. Контентная часть: Потяни и брось виджет в область контента.
6. Добавление секции или шаблона: Добавь новую секцию или шаблон готового блока ( или страницы)

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

3. Создаем первую секцию

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

После чего появится область т.е Секция. Ее можно копировать, удалять, сохранять в шаблоны и менять местами с другими секциями. Так же вы можете просто перетянуть виджет в контентную область и секция с виджетом создастся автоматически.

4. Выбрать готовый шаблон

В предыдущем рисунке, как вы уже заметили есть кнопка "Добавить шаблон". Если мы нажмем на данную кнопку перед нами откроется окно с выбором шаблона для вставки на страницу.  Мы можем выбрать как готовые шаблоны, которые загружаются с сервера Elementor, а так же собственные сохраненные шаблоны.

5. Добавление колонок в секцию

Каждая секция состоит из одной или нескольких колонок. Вы можете добавить свой контент в любую колонку. Если необходимо поменять местами колонки, то просто перетащите их между собой. Так же доступны элементы управления для редактирования, удалении колонки, дублирования колонки.

Размер колонок вы можете менять в настройках секции или простым перетаскиванием границы колонки влево или вправо.

1. Управление секцией (добавление новой секции, перетаскивание и редактированиесекции и удаление)
2. Управление колонкой (редактирование свойств )
3. Граница колонки. Передвигая ее можно менять размер колонки
4. Контентная часть колонки для вставки виджета

5.1 Правый клик

Основное управление элементами (такими как виджеты, колонки, секции) происходит посредством правого клика мыши по нужному элементу.

или правый клик по виджету

6. Вставка виджета

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

  1. Для редактирования настроек виджета, кликните на иконку с карандашом.
  2. В верхней панеле, вы можете выбрать, что редактировать у виджета т.е контент или стили.
  3. У каждого виджета свои настройки, которые можно редактировать.
  4. Перед сохранением, вы можете посмотреть на страницу в действии нажав кнопку просмотра.
  5. Если вы закончили с редактированием, вы можете сохранить и опубликовать изменения на сайте..

7. Адаптивность дизайна

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

1. Кликните на иконку режима адаптивности
2.  Выберите нужный адаптивный режим
3. При необходимости изменить параметры виджета (иконка телефона рядом с параметром)

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

6 комментариев

  • Доброго Вам дня, Роман! У меня такой к Вам вопрос: допустим, я создал запись в элементоре на макете одиночной записи. Эта запись принадлежит определенной рубрике, рубрики, соответственно, созданы в админке сайта. В плагине элементор тоже есть раздел «рубрики». Как создать рубрики в элементоре и привязать к ним записи, а то получается, что если переходить по «хлебным крошкам» в рубрику, то из своего макета сайта я попадаю в макет установленной темы.
    P.S. Во написал, что сам с трудом это понял…

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

    • A

      Здравствуйте. Как раз секцию можно растянуть во всю ширину спокойно. Есть даже две настройки это «Растянуть секцию» (работает через js) или выбрав просто в выпадающем списке Ширина макета, вместо «Ограниченная», «Во всю ширину».

  • Здравствуйте. Я правильно понял, что есть два уровня для секций? Т.е только через виджет Колонка?

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