Хотите узнать и понять, как выглядит интерфейс Elementor? Тогда это руководство для вас.
Создание профессионально выглядящего веб-сайта было делом не для каждого, особенно учитывая сложившееся мнение, что для этого обязательно нужно быть профессионалом в программировании и веб-дизайне.
В настоящее время в экосистеме WordPress появляются новые инструменты, призванные упростить процесс создания веб-сайта даже для полных новичков.
Что касается дизайна макетов WordPress, мы уже должны были представить плагин Визуальный Композитор, который, безусловно, является одним из лучших инструментов для разработки макетов.
Следует, однако, отметить, что это решение подходит не всем. Поэтому в этом руководстве мы познакомим вас с плагином Elementor для WordPress, который является условно-бесплатным плагином (бесплатным, но расширяемым по подписке).
содержание
Где взять Elementor для WordPress
Мы серьезно подумываем о том, чтобы вы увидели потенциал этого плагина, и бесплатное решение поможет вам начать работу, не платя ни копейки. Это бесплатное решение доступно на WordPress.org. Поскольку это плагин для WordPress, он устанавливается как любой другой. плагин с приборной панели.
Если плагину удастся полностью удовлетворить вас, вы сможете получить полную лицензию со всеми функциями на сайте. официальный Элементор.
Основные характеристики Элементора
Elementor — один из самых популярных конструкторов страниц для WordPress, и это неспроста. Благодаря своим мощным функциям и интуитивно понятному интерфейсу он предлагает эффективное решение для создания профессиональных веб-сайтов без необходимости обладать навыками программирования. Вот краткий обзор ключевых функций Elementor, которые делают его незаменимым для любого пользователя WordPress:
Визуальный редактор перетаскивания : Elementor предлагает интуитивно понятный визуальный редактор, который позволяет создавать дизайн страниц путем перетаскивания элементов. Вы можете видеть изменения в режиме реального времени, что значительно упрощает персонализацию вашего веб-сайта.
Богатые виджеты Благодаря широкому выбору виджетов Elementor позволяет добавлять на страницы различные элементы, такие как кнопки, галереи, карусели, формы и многое другое. Версия Pro расширяет эту функциональность за счет расширенных виджетов, таких как контактные формы, слайдеры и портфолио.
Предопределенные шаблоны : Elementor предлагает библиотеку готовых шаблонов, которые можно использовать в качестве отправной точки для ваших страниц. Эти шаблоны охватывают различные стили и потребности, что позволяет легко создавать эстетически привлекательные и функциональные страницы.
Редактор тем С помощью Elementor Pro вы можете настраивать не только содержимое страниц, но и заголовки, нижние колонтитулы и другие глобальные элементы вашего сайта, используя встроенный редактор тем. Это позволяет создать визуальную согласованность на всем вашем веб-сайте.
Создание шаблонов сообщений : функция создания шаблонов сообщений позволяет создавать макеты для определенных типов сообщений, таких как сообщения в блогах или продукты WooCommerce. Этот параметр особенно полезен для создания единообразного дизайна для разных типов контента.
Конструктор всплывающих окон Elementor Pro включает в себя конструктор всплывающих окон, позволяющий создавать пользовательские всплывающие окна для рекламы, форм регистрации или других взаимодействий с посетителями. Вы можете задать условия отображения для точного таргетирования на вашу аудиторию.
Расширенные элементы управления макетом Elementor предлагает расширенные возможности управления типографикой, полями, интервалами и адаптивным дизайном. Вы можете настроить внешний вид своего сайта для различных типов устройств, обеспечивая оптимальное взаимодействие с пользователем на мобильных устройствах, планшетах и настольных компьютерах.
Поддержка и документация Elementor предоставляет всестороннюю поддержку, включая подробную документацию, онлайн-уроки и активное сообщество. Пользователи Pro-версии получают прямую премиум-поддержку, гарантирующую быструю и эффективную помощь в решении любых проблем.
Расширения и интеграции Elementor совместим с различными расширениями и интеграциями, что позволяет добавлять дополнительные функции на ваш сайт. Независимо от того, хотите ли вы интегрировать маркетинговые инструменты, SEO-плагины или решения для электронной коммерции, Elementor упрощает расширение возможностей вашего сайта.
Ниже представлена таблица с кратким описанием возможностей Elementor.
| Особенности | Elementor Бесплатно | Факир Pro |
| Перетащите редактор страниц | да | да |
| Предопределенные шаблоны | да | да |
| Основные виджеты | да | да |
| Виджеты Pro | не | да |
| Редактор верхнего и нижнего колонтитула | не | да |
| Создание шаблонов сообщений | не | да |
| Создание шаблонов WooCommerce | не | да |
| Конструктор всплывающих окон | не | да |
| Поддержка сторонних виджетов | не | да |
| Поддержка | не | да |
| Маркетинговые возможности (формы | не | да |
| Доступ к библиотеке премиум-шаблонов | не | да |
| Расширенные эффекты и анимация | не | да |
| Инструменты просмотра и резервного копирования | не | да |
| Создание форм | не | да |
| Расширенный контроль типографики | не | да |
| Адаптивный контроль макета | не | да |
| Доступ к регулярным обновлениям | да | да |
Обратите внимание, что это не исчерпывающий список различных функций, предлагаемых плагином. Более подробную информацию вы найдете в изучение их веб-сайта.
Начало работы с Elementor
Начать работу с Elementor можно быстро и легко, даже если вы новичок в создании сайтов WordPress. Выполните следующие шаги, чтобы настроить Elementor и начать создавать свои страницы как профессионал.
Мы не будем описывать здесь весь процесс установки. Поскольку это плагин для WordPress, процедура установки уже описана в [предыдущем разделе/ссылке]. предыдущий урок.
Установка Элементора
- Получите доступ к панели управления WordPress: Войдите в панель администратора WordPress.
- Перейдите к расширениям: Перейдите в раздел «Расширения», а затем нажмите «Добавить».
- Поиск Элементора: Введите "Elementor" в строку поиска. Вы найдете Elementor (бесплатную версию). Для начала установите и активируйте бесплатную версию.
- Установите Элементор: Нажмите «Установить сейчас», а затем «Активировать» после завершения установки.
Однако после установки вы попадете на главную страницу плагина.
Если вы видите эту страницу на экране, значит, вы правильно установили плагин Elementor. В данном руководстве мы используем полную версию, но интерфейс не должен сильно отличаться от бесплатной версии.
Прежде чем перейти к интерфейсу редактирования, я попрошу вас зарегистрировать лицензию. Это относится только к тем, кто выбрал версию Pro.
Если у вас бесплатная версия, вы можете получить доступ к следующему разделу. Чтобы зарегистрировать лицензию, вы увидите уведомление в WordPress, в котором вам будет предложено зарегистрировать лицензию.
Так что просто нажмите Обнови сейчас Чтобы перейти на страницу регистрации, нажмите на активировать.
Обычно вы увидите страницу подтверждения, если ваша лицензия Активных.
Если у вас нет доступа к этой странице, я рекомендую обратиться к разработчикам плагина за дополнительной информацией. помощь в решении проблемы.
Интерфейс Elementor
Интерфейс Elementor разработан для обеспечения плавной и интуитивно понятной работы пользователя, что упрощает создание и настройку страниц WordPress. Ниже представлен подробный обзор основных разделов интерфейса Elementor, а также визуальные примеры, которые помогут вам лучше понять каждый элемент.
Рабочая область (Область содержимого)
La Рабочая зонаили область контентаМакет — это центральная область, где вы создаёте и просматриваете свою страницу. Здесь вы добавляете и редактируете виджеты и разделы. Макет отображается в режиме реального времени, позволяя вам видеть изменения по мере их внесения.
Панель «Виджеты»
Le панель виджетов Он расположен в левой части интерфейса. Он содержит различные элементы, которые можно перетаскивать на рабочую область. Виджеты организованы по категориям, таким как «Общие», «Базовые», «Макет» и т. д., чтобы упростить поиск и добавление элементов на страницу.
Группы виджетов Elementor
Группы виджетов Elementor — это группы функциональных блоков, предлагаемых Elementor. Количество разделов зависит от того, используете ли вы полную версию и какую версию программы используете. WooCommerceYoast SEO или другие совместимые плагины.
В зависимости от этих условий у вас будет больше или меньше разделов в вашем интерфейсе. Поскольку мы используем полную версию с включенным плагином WooCommerce, наш интерфейс выглядит вот так.
Верхняя панель инструментов
La верхняя панель инструментов включает в себя такие важные опции, как:
- Логотип: Отображает в меню такие функции, как: конструктор тем, история, настройки учетной записи, сочетания клавиш и т. д.
- Кнопка «Добавить товары»: Позволяет отобразить панель виджетов, которые будут вставлены на страницы.
- Кнопка настроек сайта: Отображает множество глобальных настроек сайта.
- Кнопка структуры: Это позволяет увидеть общую структуру вашей страницы и легко перемещаться по ней. Если ваша страница содержит несколько вложенных разделов, эта функция будет очень полезна.
- Название страницы/статьи: Отображает заголовок страницы или статьи, а также её статус (черновик, опубликовано и т. д.).
- Меню мобильной навигации Позволяет переключаться между режимами просмотра для настольных компьютеров, планшетов и мобильных устройств. Это необходимо для обеспечения адаптивности дизайна и его хорошей совместимости со всеми типами устройств.
- Настройки страницы : доступ к настройкам страницы, включая параметры макета и настройки стиля.
- Публикация/обновление : сохраняет и публикует изменения, внесенные на страницу.
- предварительный просмотр : Обозначается глазом и позволяет увидеть, как ваша страница ведет себя в реальной ситуации.
Слева вы найдете различные виджеты, предлагаемые плагином, а справа — предварительный просмотр изменений в реальном времени. В этом уроке мы используем бесплатную тему Hello от Elementor.
Как использовать Elementor
Создание вашей первой страницы
Elementor работает со страницами и записями WordPress. Независимо от того, используете ли вы классический интерфейс или новый интерфейс Gutenberg, вы увидите кнопку, предлагающую использовать конструктор Elementor.
- Создайте новую страницу: Перейдите в раздел «Страницы» и нажмите «Добавить».
- Назовите свою страницу: Дайте своей странице название и опубликуйте ее.
- Редактировать с помощью Elementor: Нажмите кнопку «Редактировать с помощью Elementor», чтобы запустить визуальный редактор Elementor.
На практике вам не всегда понадобится редактировать статьи с помощью Elementor. Поэтому я рекомендую использовать плагин только на страницах.
Нажав на кнопку, вы получите доступ к интерфейсу дизайна Elementor, который выглядит привычно (для тех, кто использует WordPress Customizer).
Как добавить виджеты в редактор Elementor
Перетащите виджеты, такие как заголовки, изображения, кнопки и т. д., с левой панели в область содержимого. Вы можете настроить параметры каждого виджета, нажав на него.
Настройте виджеты: Нажмите на виджет, чтобы открыть параметры его настройки. Вы можете настроить текст, изображения, цвета, размеры и многое другое.
Используйте шаблоны: Чтобы ускорить процесс, используйте готовые шаблоны. Щелкните значок папки, чтобы получить доступ к библиотеке шаблонов, где вы можете выбрать шаблон и импортировать его одним щелчком мыши.
Практические случаи
Как разместить блок Elementor
После разворачивания раздела вы увидите виджеты Elementor. Различные виджеты Elementor размещаются путем перетаскивания их в область, выделенную пунктирными линиями.
Как выбрать макет раздела в Elementor
Перед добавлением виджета Elementor следует выбрать макет, нажав кнопку «+» в выделенной области.
В зависимости от ваших потребностей вы подберете наиболее подходящую планировку.
После выбора макета вы увидите его изображение в той же выделенной области. В этом разделе будет отображаться такое же количество столбцов, как и в вашем случае. В моем случае я выбрал макет с одним столбцом и двумя столбцами.
Различные столбцы, внутри которых находится знак «+», обозначают области, в которые можно вставлять виджеты Elementor.
Если вы добавите блок Elementor без предварительного выбора макета, по умолчанию будет выбран макет с одним столбцом.
Разделы Elementor можно переупорядочивать относительно друг друга, следуя тому же принципу "Перетаскивания".
Вы также можете удалить раздел, если больше не хотите им пользоваться.
Вот пример раздела, содержащего два блока: блок заголовка и текстовый блок.
Как использовать другие инструменты проектирования
После завершения работы над дизайном вам, скорее всего, захочется сохранить свою работу. Эта опция находится в самом низу раздела, отображающего различные разделы Elementor.
У вас есть выбор: сохранить напрямую (Опубликовать), сохранить как черновик или как шаблон. Мы подробнее рассмотрим эти варианты позже.
В процессе проектирования вы также можете захотеть предварительно просмотреть изменения без дополнительного интерфейса Elementor. Для этого достаточно нажать на значок глаза в верхней панели редактора Elementor.
Иногда в процессе проектирования случается ошибка (непреднамеренное действие).
В этом случае Elementor предлагает вам историю, которая позволяет вам перемещаться по всем вашим действиям.
Удалите из списка действия, которые хотите отменить.
Это позволит вам легко вернуться.
Кнопка "Настройки"Позволяет изменять определенные параметры страницы, такие как заголовок, изображение на главной странице, статус и другие."
FAQ
Что такое Элементор?
Elementor — это конструктор страниц для WordPress с функцией перетаскивания, позволяющий пользователям визуально создавать веб-сайты без программирования. Он предлагает интуитивно понятный интерфейс с инструментами перетаскивания для добавления и настройки элементов на ваших страницах.
Является ли Элементор бесплатным?
Elementor предлагает бесплатную версию с достаточным базовым функционалом для создания простых веб-страниц. Версия Pro, доступная по подписке, предлагает расширенные функции, такие как дополнительные виджеты, шаблоны премиум-класса и широкие возможности настройки.
Каковы преимущества Pro-версии Elementor?
Pro-версия Elementor предлагает расширенные виджеты, профессиональные шаблоны, более глубокие возможности дизайна и возможность создавать собственные верхние и нижние колонтитулы и архивы. Это также обеспечивает расширенную интеграцию со сторонними инструментами и маркетинговыми функциями.
Как установить Elementor на свой сайт WordPress?
Чтобы установить Elementor, перейдите на панель управления WordPress, нажмите «Расширения», затем «Добавить». Найдите «Elementor» в поле поиска, затем нажмите «Установить сейчас» и, наконец, «Активировать». Вы также можете установить Elementor Pro, загрузив ZIP-файл с веб-сайта Elementor и импортировав его через «Расширения» > «Добавить» > «Загрузить расширение».
Как использовать Elementor для создания страницы?
После установки Elementor перейдите на страницу или публикацию на панели управления WordPress и нажмите «Редактировать с помощью Elementor». Вы попадете в редактор Elementor, где сможете перетаскивать виджеты и разделы для оформления своей страницы. Используйте левые панели, чтобы добавлять и настраивать элементы на своей странице.
Совместим ли Elementor со всеми темами WordPress?
Да, Elementor совместим с большинством тем WordPress. Однако для оптимальной интеграции рекомендуется использовать темы, разработанные специально для Elementor, которые обеспечивают повышенную совместимость и гибкость.
Могу ли я использовать Elementor для создания сайта электронной коммерции?
Да, Elementor совместим с WooCommerce, что позволяет вам создавать и настраивать страницы продуктов, страницы магазинов и шаблоны страниц оформления заказа. Версия Pro предлагает специальные виджеты WooCommerce для улучшения внешнего вида вашего интернет-магазина.
Как я могу просмотреть изменения, внесенные с помощью Elementor?
Вы можете просмотреть свои изменения, нажав кнопку «Предварительный просмотр» в редакторе Elementor. Это позволит вам увидеть, как будет выглядеть ваша страница, прежде чем публиковать изменения в реальном времени.
Предлагает ли Elementor техническую поддержку?
Да, Elementor предлагает техническую поддержку через форумы, базу знаний и систему заявок для пользователей Pro. Вы также можете получить доступ к подробным руководствам и руководствам на официальном сайте Elementor.
Могу ли я использовать сторонние расширения с Elementor?
Да, Elementor совместим со многими сторонними расширениями, которые добавляют дополнительные функции и виджеты. Вы можете установить их как обычные плагины WordPress, чтобы расширить возможности Elementor.
Ресурсы, похожие на эту статью
- Как создать форму с Elementor бесплатноПолучить Elementor Pro сейчас !!!
- Как создавать всплывающие окна с помощью Elementor
- Elementor Бесплатно против Elementor Плюсы: подробное сравнение функций.
- Elementor : Как изменить изображение одним нажатием кнопки
- Как создать макет с помощью Elementor
Заключение
Elementor — мощное и универсальное решение для создания исключительных страниц WordPress без необходимости кодирования. Благодаря интуитивно понятному интерфейсу и надежным функциям он позволяет как новичкам, так и профессионалам в кратчайшие сроки создавать привлекательные и функциональные веб-сайты.
Понимая основные разделы интерфейса Elementor, вы сможете эффективно перемещаться по редактору, оптимально использовать виджеты и настраивать каждый аспект ваших страниц в соответствии с вашими конкретными потребностями.
. рабочие зоны, панели виджетовЭти инструменты разработаны для обеспечения максимальной гибкости при сохранении простоты использования. Благодаря бесшовной интеграции разделов и столбцов, а также использованию возможностей стиля и компоновки, вы можете воплотить свое видение в реальность.
Не забудьте воспользоваться функцией предварительного просмотра в реальном времени, чтобы убедиться, что ваши дизайны идеально выглядят на всех устройствах. С Elementor каждый проект становится возможностью создать потрясающий веб-сайт, который действительно выделяется.
Чтобы получать больше советов и руководств по использованию Elementor, подпишитесь на наш блог и будьте в курсе последних новостей и полезных советов. Поделитесь этой статьей с другими энтузиастами WordPress и веб-дизайна, чтобы помочь им раскрыть весь потенциал Elementor.
Начните изучать безграничные возможности Elementor прямо сейчас и воплотите свои идеи в захватывающий веб-дизайн!