Как использовать Elementor: полное руководство для начинающих

Опубликовано: 2022-03-08

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

Те дни прошли! После появления WordPress и его популярных конструкторов страниц, таких как Elementor, создание веб-сайта, несомненно, стало задачей каждого. Теперь даже вы можете создать веб-сайт с помощью WordPress и Elementor, независимо от того, являетесь ли вы юристом, учителем, студентом или предпринимателем с нулевыми знаниями в области программирования.

Все, что вам нужно, это целеустремленность, настойчивость и желание создать что-то удивительное. Теперь вопрос на миллион долларов: знаете ли вы, как использовать Elementor в WordPress?

Не смотри на меня так! Если вы не знаете, давайте начнем вместе с этого момента в поисках рекомендаций из этой статьи. Поскольку это статья об Elementor, которая касается каждого раздела и настройки Elementors. Итак, приступим!

Оглавление

  • Познакомьтесь с Elementor
  • Что делает Elementor самым популярным конструктором страниц для WordPress
  • Представляем панель инструментов Elementor
  • Как использовать Elementor с WordPress
  • Как использовать расширенные функции Elementor
  • Плюсы и минусы использования конструктора страниц Elementor на вашем сайте WordPress
  • Лучшие сторонние дополнения Elementor для улучшения вашего дизайна
  • Бесплатное руководство: создайте свой сайт электронной коммерции с помощью Elementor и Happy Addons
  • Элементор часто задаваемые вопросы
  • к вам

Познакомьтесь с Elementor

Get Familiar with Elementor

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

Узнайте об основных функциях Elementor

Elementor позволяет создавать что угодно, от целых веб-сайтов до конкретных целевых страниц. Вы можете создавать страницы продаж, рекламные страницы и даже настраиваемые формы. Если вы можете себе это представить, эта платформа может помочь вам спроектировать ее.

Чтобы позволить вам это сделать, Elementor поставляется с;

  • Конструктор тем : Конструктор тем поможет вам спроектировать каждую часть вашего сайта, такую ​​как верхний и нижний колонтитулы, страницу продукта и многое другое, прямо из редактора.
  • Конструктор всплывающих окон : помогает создавать всплывающие окна, которые выделяются и полностью соответствуют дизайну вашего сайта.
  • Более 80 виджетов: каждый виджет в Elementor предлагает расширенную настройку дизайна, поэтому вам не нужно устанавливать дополнительные плагины, чтобы выполнить свой дизайн.
  • Более 100 предварительно разработанных шаблонов и более 300 блоков: вы можете выбрать из более чем 100 полностраничных шаблонов WordPress и 300 блоков, чтобы мгновенно обогатить свой дизайн.

Бесплатный Elementor против Elementor Pro

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

Элементор Бесплатно Элементор Про
Конструктор веб-сайтов с функцией перетаскивания №1 да да
40+ основных виджетов да да
50+ профессиональных виджетов Нет да
Конструктор тем Нет да
Конструктор всплывающих окон Нет да
Эффекты движения, включая эффекты параллакса и мыши Нет да
VIP-поддержка, включая чат Нет да
Визуальный конструктор форм + популярные маркетинговые интеграции Нет да
WooCommerce Builder + более 15 виджетов магазина Нет да

Как новичок, мы рекомендуем сначала попробовать Elementor бесплатно, а затем перейти на Elementor pro, если это действительно необходимо для вас.

Что делает Elementor самым популярным конструктором страниц для WordPress

How to use Elementor in WordPress

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

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

Использование Elementor для создания веб-сайтов:

  • Сэкономьте свое время и помогите вам быстрее проектировать и итерировать свои веб-сайты.
  • Позвольте вам интегрировать сторонние виджеты, чтобы вы могли создать более всесторонний и полный веб-сайт, чтобы предоставить вашим посетителям положительный опыт работы в Интернете.
  • Уменьшите сложность своих веб-сайтов, устраните ошибки и упростите процесс обслуживания, когда речь идет об обновлениях и тестировании.
  • Сэкономьте деньги и упростите затраты, чтобы лучше определить цену проекта.

Для разработчиков WordPress это по-прежнему лучшая платформа с оптимизацией скриптов, настраиваемыми атрибутами и версиями отката.

Чтобы лучше понять, мы провели сравнение между лучшими конструкторами страниц WordPress. Давайте проверим это!

Elementor против Divi против Beaver Builder — сравнительная таблица

Помимо Elementor, есть несколько популярных конструкторов страниц WordPress. Среди этих конструкторов страниц Divi и Beaver являются самыми серьезными конкурентами Elementor. Вот почему мы создали сравнительную таблицу, чтобы выяснить, лучше ли Elementor, чем эти конструкторы страниц.

Элементор Диви бобер
Бесплатная версия? да Нет да
Стартовая цена для Pro 49 долларов $89 99 долларов
Визуальный конструктор? да да да
Официальные элементы 53 46 31
Оперативное редактирование? да да Нет
Готовые шаблоны 300+ 110+ 50+
Уникальные черты Встроить где угодно A/B-тестирование Бобр Темер
Активные установки бесплатной версии 5 млн+ Н/Д 300 тыс.+
Рейтинги пользователей 4,8/5 (рейтинг 5,7 тыс.+) Н/Д 4,8/5 (350+ оценок)

Проанализировав сравнительную таблицу, какой конструктор страниц вы считаете лучше для новичка? Это же Элементор! Вот почему мы выбрали Elementor среди других популярных конструкторов страниц. Итак, пришло время познакомиться с конструктором страниц Elementor.

Представляем панель инструментов Elementor

Elementor dashboard

Чтобы получить доступ к панели управления Elemnetor, сначала нам нужно установить Elementor на наш сайт WordPress. Установить Elementor очень просто. Выполните следующие шаги, чтобы установить и активировать Elementor в считанные минуты.

Как установить и активировать Elementor в WordPress?

  • Шаг 01: Перейдите на панель управления WordPress > Плагины > Добавить новый
Install Elementor
  • Шаг 02: Введите «Elementor» в поле поиска и найдите Elementor в результатах поиска. Затем нажмите кнопку Установить .
Search and install Elementor
  • Шаг 03: Наконец, нажмите кнопку « Активировать », чтобы активировать и использовать Elementor.
Activate Elementor

Настройки Элементора

После активации конструктора страниц Elementor вы перейдете к показанному ниже интерфейсу. Или перейдите на панель управления WP > Elementor , чтобы получить этот интерфейс.

Настройки :

Elementor settings
  • Общие: на вкладке «Общие» настроек Elementor вы сможете выбрать типы сообщений, которые вы планируете использовать, а также отключить цвета и шрифты по умолчанию.
  • Стиль: вы найдете параметры, которые включают установку общих шрифтов по умолчанию, точек останова для планшетов и мобильных устройств, а также флажок для включения лайтбокса изображения.
  • Дополнительно: вы найдете возможность установить метод печати CSS, переключить метод загрузчика при устранении неполадок с сервером и включить поддержку SVG.

Менеджер ролей :

Role Manager
  • Различные типы пользователей могут иметь разные уровни доступа к вашему веб-сайту в зависимости от их роли. Если у вас есть версия Pro, вы также можете ограничить доступ пользователей только к контенту.

Инструменты:

Elementor tools
  • Общие: общие инструменты позволят вам восстановить CSS на вашем веб-сайте и синхронизировать вашу библиотеку Elementor вручную, если вам нужно.
  • Заменить URL-адрес: вкладка «Заменить URL-адрес» — это место, где вы можете, как следует из названия, заменить URL-адреса, если вы изменили адрес сайта.
  • Режим обслуживания: на вкладке «Режим обслуживания» вы получаете все элементы управления режимом обслуживания веб-сайта, которые вам когда-либо понадобятся.
  • Font Awesome: он позволяет вам получить доступ к более чем 1500 удивительным значкам Font Awesome 5 и наслаждаться более высокой производительностью и гибкостью дизайна.

Панель инструментов Элементора

  • Чтобы получить доступ к панели управления Elementor, перейдите в Панель управления WordPress > Страницы > Добавить новую .
  • Затем введите заголовок страницы и выберите параметр Elementor Canvas в раскрывающемся списке шаблонов справа.
  • Наконец, нажмите кнопку « Редактировать с помощью Elementor » и начните работать с самым мощным компоновщиком страниц.
How to use Elementor canvas
  • Однако, если вы хотите отредактировать захватывающую страницу с помощью Elementor, перейдите в раздел «Все страницы»> «Наведение курсора на страницу» .
  • Затем появится кнопка « Редактировать с помощью Elementor ». Теперь нажмите на кнопку и начните редактировать свою страницу.
Edit with Elementor

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

Elementor interface

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

  • Вверху слева вы найдете значок гамбургера для некоторых настроек по умолчанию и глобальных настроек.
  • В правом верхнем углу вы найдете кнопку набора номера, чтобы вернуться на главную панель.
  • После этого появляется окно поиска, чтобы быстро найти перечисленные и необходимые виджеты.
  • Все полезные модули вы найдете на левой панели.
  • Внизу вы найдете несколько полезных значков для настроек страницы, быстрой навигации, истории, адаптивного режима и предварительного просмотра.
  • Также здесь вы получите кнопку «Опубликовать», чтобы опубликовать свою страницу или сохранить черновик/шаблон для последующего использования.

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

Таким образом, вы получите полный предварительный просмотр вашей страницы.

Бонус: вы можете улучшить свой опыт работы с Elementor, используя сторонние инструменты, такие как HappyAddons.

Happy Addons active installations

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

HappyAddons — это такой сторонний аддон, который может помочь вам создавать футуристические проекты нового уровня. HappyAddons, более 200 000 активных установок, является одним из самых популярных дополнений, которые безупречно работают с Elementor. Он поставляется с,

  • 100+ виджетов
  • 200+ готовых блоков
  • Междоменное копирование и вставка
  • Неограниченное вложение разделов
  • Маскирование изображения
  • Эффект счастливой частицы
  • Значок линии 500+
  • Одинаковая высота и многое другое.

Используя HappyAddons с Elementor, вы можете быстро придать своему сайту превосходный вид.

Дайте мне знать больше о HappyAddons

Как использовать Elementor с WordPress

Ways to use Elementor in WordPress

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

  1. Как использовать конструктор страниц Elementor
  2. Как использовать конструктор тем Elementor
  3. Как создать всплывающее окно в Elementor

Итак, в основном, наш учебник начнется с этого раздела. Ранее мы познакомились с Elementor, теперь будем работать с ним по-настоящему.

Как использовать конструктор страниц Elementor

Чтобы показать вам, как использовать конструктор страниц Elementor, теперь мы собираемся создать домашнюю страницу для веб-сайта о путешествиях . Выполните следующие шаги и попробуйте создать свою собственную домашнюю страницу в редакторе, чтобы быстро ее изучить.

Шаг 01: Создайте новую страницу

  • Перейдите в панель управления WordPress > Страницы > Добавить новую.
Create new page
  • Дайте этой странице имя. Здесь я назвал его Домашняя страница.
  • Установите шаблон по умолчанию на « Elementor Canvas », так как мы хотим построить всю страницу с помощью Elementor. Вы можете выбрать Elementor Full Width , что позволит вам настроить всю страницу без меню.
  • После этого опубликуйте страницу с правой боковой панели. Вы также можете сохранить его как черновик.
  • Нажмите « Редактировать с помощью Elementor », и вы будете перенаправлены на конструктор страниц Elementor.
Edit with elementor

Шаг 02: выберите подходящий шаблон для домашней страницы вашего туристического сайта

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

  • Нажмите кнопку «Добавить шаблон».
Add template
  • Вы получите кучу готовых шаблонов, из которых вы можете выбрать любой из шаблонов и настроить их в соответствии с вашими потребностями.
  • После выбора того, который вы хотите использовать, нажмите кнопку « Вставить ».
Insert template

Шаг 03: Добавьте заголовок на главную страницу

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

  • Мы начнем с добавления заголовка на страницу, который будет отображать название и слоган нашего веб-сайта. Вот как вы можете это сделать, просто перетащив и добавив немного стиля.
Add header

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

Шаг 04. Выделите удобства вашего отеля

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

  • Вы можете загрузить любые изображения из локального хранилища или заменить существующее изображение уже загруженными изображениями из раздела мультимедиа. Следуйте приведенному ниже gif-файлу, чтобы сделать это.
  • Вы можете настроить высоту, ширину, непрозрачность, поля, отступы и все остальное в параметрах редактирования.
  • Добавление кнопки, текста, описания возможно из опции редактирования.
Add hotel description

Шаг 05: Добавьте видео и отзыв

  • Вы можете добавить видео, чтобы показать, как выглядит ваше окружение и как люди наслаждаются вашим курортом, когда они здесь.
  • Добавление отзыва — это мудрое решение, позволяющее людям узнать мнение ваших клиентов о вас.
Add a video

Шаг 06: Добавьте контактную форму

  • Добавьте контактную форму, чтобы ваш посетитель мог связаться с вами. Укажите свои контактные номера, такие как номер телефона, адрес электронной почты или номер WhatsApp, на странице контактов, чтобы посетитель мог позвонить вам, если у него есть какие-либо вопросы.
  • Вы также можете добавить карту Google, чтобы люди могли найти вас, где бы вы ни находились.
Add a contact form

Шаг 07: Сделайте его адаптивным на разных платформах

  • Убедитесь, что ваша страница полностью адаптивна и корректно отображается на всех устройствах. Для этого выберите опцию « Отзывчивый режим ».
  • После завершения настройки нажмите кнопку « Обновить ».
Responsive options

Обзор нашей домашней страницы

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

Homepage

Как использовать конструктор тем Elementor

Top Elementor features you should have a look now

Конструктор тем Elementor меняет правила игры для всех, кто знаком с конструкторами страниц, поскольку он позволяет создавать собственные заголовки, нижние колонтитулы и другой динамический контент для вашего веб-сайта. Он даже позволяет вам переопределять аспекты вашей темы WordPress, поэтому вы можете сохранить то, что работает, и просто вносить нужные изменения!

В этом разделе мы покажем вам, как создавать красивые заголовки с помощью конструктора тем Elementor.

Примечание. Конструктор тем Elementor доступен в профессиональной версии. Бесплатная версия поставляется с очень ограниченным набором функций.

Шаг 01: выберите тип шаблона

  • Перейдите в панель управления WordPress > Шаблоны > Конструктор тем .
  • Затем нажмите кнопку « Добавить новый ». Если вы уже видели заголовок, который вам понравился, вы можете импортировать его, чтобы использовать в качестве отправной точки.
Add a template
  • После нажатия кнопки «Добавить новый» перед вами появится всплывающий экран. Там вы увидите раскрывающееся меню для выбора типа шаблона.
  • Выберите тип храма, здесь мы выбираем Заголовок.
  • Затем дайте ему имя.
  • И, наконец, нажмите кнопку « Создать шаблон ».
Choose a templte type

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

Шаг 02: настройте свой заголовок в Elementor

Вы можете создать свой собственный заголовок или выбрать любой из готовых из библиотеки шаблонов Elementor.

  • Нажмите на опцию « Добавить шаблон », чтобы загрузить готовый заголовок в ваш редактор.
Elementor theme builder editor

Если этот шаг кажется вам знакомым, то это потому, что это тот же самый редактор, который мы использовали ранее для создания полностраничного файла. Теперь используйте этот опыт здесь, чтобы создать заголовок для вашего веб-сайта.

После настройки заголовка и нажатия кнопки « Опубликовать » при желании вы можете установить условия для отображения заголовка.

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

Как создать всплывающее окно в Elementor

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

Примечание. Конструктор тем Elementor доступен только в профессиональной версии.

Шаг 01: Добавьте новый файл

  • Перейдите на панель управления WordPress > Шаблоны > Всплывающие окна. Затем нажмите кнопку « Добавить новый » в верхней части.
Add new popup
  • Дайте вашему всплывающему окну имя и нажмите кнопку СОЗДАТЬ ШАБЛОН .
Give popup a name
  • Выберите шаблон всплывающего окна, который вы хотите использовать. Наведите на него указатель мыши и нажмите кнопку « Вставить », чтобы перейти в редактор Elementor.
Choose a popup

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

Шаг 02: Настройте всплывающее окно

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

Мы уже показали вам, как настроить предварительно разработанный шаблон Elementor.

Как только вы закончите, нажмите кнопку ПУБЛИКАЦИЯ .

Шаг 03: Установите условия отображения и триггеры

На следующем шаге вам будет предложено установить условия отображения и триггеры. Существует также возможность установить расширенные правила.

  • Условия отображения: определите, на каких страницах вашего веб-сайта появляется всплывающее окно. Вы можете настроить всплывающее окно так, чтобы оно отображалось на всем веб-сайте, на определенных страницах, в определенных сообщениях, в определенных категориях и т. д.
  • Триггеры: триггер — это действие для отображения всплывающего окна. Elementor поддерживает 6 типов триггеров: при загрузке страницы, при прокрутке, при прокрутке до элемента, при нажатии, после бездействия, намерение выхода на странице.
  • Расширенные правила: для появления всплывающего окна необходимо выполнить требования. Например, вы можете настроить всплывающее окно, которое будет появляться, если посетитель заходит на ваш сайт через поисковую систему или определенный UR. Сам Elementor Popup Builder имеет 7 расширенных параметров правил, которые вы можете установить на выбор.

Если вы хотите отображать всплывающее окно, когда пользователь нажимает кнопку, откройте вкладку « Триггеры » и активируйте параметр « По щелчку». Затем нажмите Сохранить и закрыть .

Popup condition

Шаг 04: Свяжите всплывающее окно со страницей

Создайте новую страницу/публикацию и отредактируйте ее с помощью Elementor (вы также можете отредактировать существующую).

  • Добавьте виджет «Кнопка», перетащив его с левой панели в область холста. Или, если вы редактируете существующую страницу, которая уже содержит кнопку, щелкните виджет «Кнопка», чтобы перевести его в режим редактирования.
  • В опции « Кнопка » на вкладке « Содержимое » установите ссылку на « Всплывающее окно ». Для этого вы можете нажать « Динамический » в разделе « Ссылка ».
Button popup
  • Щелкните значок гаечного ключа в поле « Всплывающее окно» и выберите всплывающее окно, которое вы только что создали. Введите имя всплывающего окна, чтобы найти всплывающее окно.
Link popup

Нажмите « Опубликовать/обновить », когда закончите редактирование страницы.

Прежде чем нажать кнопку « Опубликовать/обновить », вы можете предварительно просмотреть свою страницу, чтобы убедиться, что всплывающее окно уже работает.

Как использовать расширенные функции Elementor

How to Use Advanced Features in Elementor

В этом разделе мы сосредоточимся в основном на двух разных темах. Они есть,

  • Как настроить страницу продукта WooCommerce в Elementor
  • Как импортировать шаблон Elementor из файла JSON

Итак, давайте начнем.

Как настроить страницу продукта WooCommerce в Elementor

Прежде чем вы сможете настроить страницу продукта WooCommerce, вам необходимо установить и активировать WooCommerce на панели инструментов WordPress. Вам также нужно будет добавить несколько продуктов на свой веб-сайт. Для этого вы можете обратиться за помощью к этому (пошаговому) руководству по настройке WooCommerce.

После настройки вы можете создать страницу продукта. Следуй этим шагам.

Шаг 1. Создайте шаблон единого продукта

  • На панели инструментов WordPress перейдите в Elementor > Мои шаблоны .
  • Нажмите кнопку « Добавить новый ».
  • Выберите « Один продукт » в качестве типа шаблона и нажмите «Создать шаблон ».
Create a single product template

Шаг 2. Выберите готовый шаблон страницы продукта или создайте его с нуля

  • Библиотека Elementor загрузится.
  • Затем выберите готовый шаблон страницы продукта или создайте его с нуля.
  • Если вы выбрали готовый шаблон страницы продукта, настройте его в соответствии со своими дизайнерскими навыками (теперь у вас есть опыт настройки дизайна, поскольку мы показали, как настроить страницу прямо перед этим разделом).
Choose a Pre-Designed Product Page Template

Шаг 03: добавьте различные виджеты продуктов, чтобы настроить свою страницу

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

Шаг 04: Опубликуйте страницу

  • Когда вы будете готовы просмотреть свою страницу, щелкните значок глаза на нижней левой панели.
  • Нажмите « Настройки » и выберите продукт, который хотите отобразить.
  • Чтобы опубликовать свою страницу, нажмите зеленую кнопку « Опубликовать » на нижней левой панели.

Это может выглядеть как на изображении ниже.

WooCommerce page

Как импортировать шаблон Elementor из файла JSON

Elementor позволяет импортировать шаблон из файла JSON. Чтобы позволить вам сделать это, есть два доступных способа. Давайте узнаем, как они работают!

1. Через библиотеку шаблонов

  • Нажмите на кнопку « Добавить шаблон ».
Add template
  • Нажмите на значок со стрелкой — Импорт шаблона .
  • Теперь нажмите кнопку ВЫБРАТЬ ФАЙЛ , чтобы выбрать файл JSON, который вы хотите импортировать.
Upload JSON file
  • Вы можете найти только что импортированный шаблон на вкладке Мои шаблоны в библиотеке шаблонов.
Uploaded JSON file

Перезагрузите шаблон, нажав значок перезагрузки, если только что импортированный шаблон не отображается. Наведите указатель мыши на шаблон и нажмите кнопку « Вставить », чтобы загрузить его на холст Elementor.

2. Через менеджер шаблонов

  • На панели инструментов WordPress перейдите в раздел «Шаблоны» > «Сохраненные шаблоны» .
  • Нажмите кнопку « Импорт шаблонов ».
  • Затем нажмите кнопку « Выбрать файл» , чтобы выбрать файл JSON.
  • Наконец, нажмите кнопку « Импортировать сейчас» , чтобы импортировать его.
Import template

Это два способа импорта шаблона Elementor из файла JSON. Вы можете выбрать любой из способов выполнения своей работы.

Плюсы и минусы использования конструктора страниц Elementor на вашем сайте WordPress

Pros and cons of Elementor

Очевидно, что у всего есть и темная сторона. Но с точки зрения Elementor, на самом деле это не темная сторона. Вместо этого мы можем сказать, что у него есть некоторые ограничения, которые могут быть улучшены с течением времени. Что это?

Ну, а перед этим давайте проверим его плюсы с первого взгляда.

Плюсы использования Elementor в WordPress

  • Это бесплатный плагин! Большинство пользователей могут полностью создавать свои сайты без необходимости перехода на профессиональную версию.
  • Для бесплатного плагина у него очень широкий набор функций. Набор функций в бесплатной версии конкурирует со многими платными плагинами.
  • Редактор в реальном времени позволяет вам вносить изменения на свой сайт и видеть, что происходит в режиме реального времени, поэтому вам не нужно постоянно переключаться между несколькими экранами.
  • Вы можете редактировать и просматривать несколько версий своего сайта, компьютеров, мобильных устройств и планшетов, а также вносить уникальные изменения в каждую из этих версий.

Минусы использования Elementor в WordPress

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

Лучшие сторонние дополнения Elementor для улучшения вашего дизайна

Top 3rd Party Elementor Addons to Enhance Your Design

Сторонние надстройки — это мощный инструмент Elementor. Несмотря на то, что Elementor предлагает более 80 фантастических элементов, вполне возможно, что вам может понадобиться что-то еще более продвинутое и уникальное. Именно поэтому сторонние разработчики решили расширить функциональные возможности Elementor и разработать свои собственные дополнения Elementor.

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

В результате Elementor теперь официально признает их своим автором, представив их на официальной странице Elementor. Среди них, вот список лучших сторонних надстроек Elementor, которые вы можете использовать при разработке своего веб-сайта WordPress.

  1. Happy Addons: поставляется с более чем 100 виджетами и более чем 200 блоками, чтобы вы могли получить полную свободу для разработки своего веб-сайта за меньшее время и с меньшим бюджетом.
  2. Премиум-аддоны для Elementor: он предлагает более 55 настраиваемых основных дополнений и виджетов Elementor, более 300 готовых шаблонов Elementor, которые помогут вам с легкостью создать веб-сайт за меньшее время.
  3. Эксклюзивные дополнения для Elementor: коллекция из более чем 700 готовых блоков и более 10 пригодных для использования шаблонов поможет вам создавать свои веб-сайты за меньшее время без программирования.
  4. PowerPack для Elementor: он предлагает более 60 креативных виджетов и расширений Elementor для улучшения вашего опыта работы с Elementor.

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

Бесплатное руководство: создайте свой сайт электронной коммерции с помощью Elementor и Happy Addons

Happy Addons for Elementor

Создать сайт электронной коммерции с помощью Elementor очень просто. А смешивание HappyAddons с Elementor делает разработку веб-сайта более увлекательной. Это что-то вроде безграничной гибкости для проектирования в соответствии с нашими требованиями. Давайте проверим, как легко спроектировать наш веб-сайт электронной коммерции с помощью Elementor и HappyAddons.

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

  1. Выберите доменное имя и план веб-хостинга
  2. Установите WordPress и WooCommerce
  3. Установить Элементор
  4. Наконец установите HappyAddons (бесплатно + Pro)

05: Выберите шаблон электронной коммерции

  • Перейдите в панель управления WordPress > Страницы > Добавить новую.
  • Дайте этой странице имя.
  • Установите шаблон по умолчанию на « Elementor Canvas », так как мы хотим построить всю страницу с помощью Elementor. Вы можете выбрать Elementor Full Width , что позволит вам настроить всю страницу без меню.
  • После этого опубликуйте страницу с правой боковой панели. Вы также можете сохранить его как черновик.
  • Нажмите « Редактировать с помощью Elementor », и вы будете перенаправлены на конструктор страниц Elementor.
Create a page for eCommerce site
  • Нажмите на знак HappyAddons, чтобы добавить предварительно разработанный шаблон для вашего сайта электронной коммерции.
HappyAddons premade design
  • Выберите готовый шаблон и нажмите кнопку « Вставить ».
Choose a pre-designed template

06: Настройте шаблон

Customize the premade design

Весь процесс настройки такой же, как вы показали в предыдущем разделе «Как использовать Elementor Page Builder». Выполните те же шаги, чтобы сделать свой дизайн.

Вы можете изменить логотип, цветовую схему, навигационные ссылки, копию веб-сайта и любые другие функции по вашему желанию. Вы также можете использовать виджеты Elementor и Happy Addons, чтобы добавить определенные функции на свой сайт.

Шаг 07: Опубликуйте страницу

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

  • Для предварительного просмотра сайта щелкните значок.
  • Если вы удовлетворены результатом, нажмите кнопку «Опубликовать/обновить».
  • Нажмите «Посмотреть», чтобы просмотреть опубликованную страницу.
Publish the page

Элементор часто задаваемые вопросы

1. Бесплатен ли Elementor для WordPress?

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

2. Замедляет ли Elementor работу вашего сайта?

Elementor замедляет работу вашего сайта, если вы выбираете плохой хостинг, используете большие медиафайлы, внешние скрипты и дополнительные плагины. В противном случае Elementor не замедлит работу вашего сайта WordPress.

3. Работает ли Elementor со всеми темами?

Да, Elementor работает со всеми темами, которые соответствуют стандартам кодирования WordPress, установленным его Кодексом.

4. Работает ли Elementor с другими плагинами WordPress?

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

5. Сколько стоит Elementor Pro?

Elementor Pro поставляется с 3 различными планами подписки. Например, «Личный», «Плюс» и «Эксперт». Это стоит всего 99 долларов, если вам нужна лицензия на три веб-сайта, и 199 долларов за неограниченную лицензию на веб-сайт.

6. Подходит ли Elementor для SEO?

Elementor — самый дружественный к SEO конструктор страниц для WordPress. Он был построен с учетом самых строгих стандартов кода и обеспечивает наилучшую производительность при создании дизайна страниц.

7. Кому принадлежит Elementor?

Йони Луксенберг. Он является генеральным директором и соучредителем Elementor.

8. Что произойдет, когда срок действия Elementor Pro истечет?

Вы не сможете создавать новые страницы с профессиональными функциями, если срок действия вашей профессиональной лицензии истек. Но все ваши существующие проекты останутся нетронутыми, а функции Pro, которые вы использовали в своих предыдущих проектах, продолжат работать, как и раньше.

9. Могу ли я редактировать страницу своего блога с помощью Elementor WordPress?

Да, вы можете редактировать страницу своего блога с помощью Elementor. Вам понадобится Theme Builder, чтобы отредактировать его.

10. Могу ли я создать свою собственную тему с помощью Elementor?

Вы можете разработать каждую часть своей темы по отдельности, используя шаблоны Elementor Pro, но вы не можете импортировать и экспортировать полную тему, которая объединяет все части темы. Однако вы можете импортировать и экспортировать каждую часть темы отдельно.

к вам

На самом деле использовать Elementor в WordPress не так уж и сложно. Было бы веселее, если бы у вас было полное руководство, подобное этому пошаговому руководству.

Просто следуйте этому руководству, продолжайте практиковаться, чтобы совершенствоваться, и подготовьтесь к тому, что вы станете маэстро Elementor. Это все, что вам нужно, чтобы использовать Elementor и создать веб-сайт WordPress за считанные минуты.

Если вы столкнулись с какими-либо трудностями при использовании Elementor или у вас есть какие-либо предложения относительно этого руководства по использованию Elementor в WordPress, сообщите нам об этом в поле для комментариев ниже. Удачи!

HappyAddons Pro Banner 970X90