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