Пропустить

Учебник Elementor: введение в интерфейс

Divi: самая простая тема WordPress для использования

Divi: лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуемые]

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

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

Где получить Elementor для WordPress

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

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

Основные характеристики элемента

Перед началом учебного курса с презентацией плагина мы познакомим вас с основными функциями плагина (бесплатная версия и полная версия).

версия FreeПолная версия
Несколько столбцовМеню навигации, пункт
Модули Тексты, заголовкиМодуль WooCommerce (продукты, категории)
Видеомодули, изображения, карусели, галереи, SoundcloudИнтеграция с Facebook (страница, кнопка, комментарии)
Модуль совместного доступацены Таблица
Модуль HTMLПортфолио, форма
Модуль для виджета WordPressМодуль поиска

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

Начало работы с Elementor

Здесь мы не рассмотрим весь процесс установки. Поскольку это плагин WordPress, процедура установки уже объяснена в предыдущий учебник, Однако после установки вы получите доступ к домашней странице плагина.

презентационная страница delementor.png

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

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

плагин уведомления elementor.png

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

регистрация лицензии elementor.png

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

Легко создать свой сайт с Elementor

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

Активная лицензия elementor.png

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

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

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

Конструктор elementor.png

На практике вам не всегда нужно редактировать свои статьи с помощью Elementor. Я предлагаю вам использовать плагин только на страницах. Нажатие на кнопку приведет вас к интерфейсу дизайна Elementor, который даст вам воздух déjà vu (для тех, кто использует WordPress Customizer).

интерфейс презентации elementor.png

Таким образом, у вас есть левые различные элементы управления, предлагаемые плагином и справа, у вас есть предварительный просмотр ваших изменений. В этом уроке мы используем тему «Двадцать шестнадцать» WordPress.

Секции Elementor

Разделы Elementor - это группы функциональных блоков, которые предлагает Elementor. Количество разделов зависит от того, используете ли вы полную версию и используете ли вы WooCommerce, Yoast SEO или другие совместимые плагины. В зависимости от этих условий в вашем интерфейсе будет больше или меньше разделов. Поскольку мы используем полную версию с включенным плагином WooCommerce, вот как выглядит наш интерфейс.

раздел elementor.png

Как разместить блок Elementor

Разработав раздел, вы увидите блоки Elementor. Различные блоки Элементатора помещаются «перетаскиванием» на выделенную область пунктирными линиями.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress от Envato и легко создайте свой веб-сайт. Уже более 49.720.000 XNUMX XNUMX загрузок. [ЭКСКЛЮЗИВ]

добавить блоки elementors.png

Как выбрать макет на Elementor

Перед добавлением блока в Elementor вы должны подумать о выборе макета, нажав кнопку «+» в выделенном разделе.

выберите макет elementor.png

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

раздел элемента с зоной .png

Различные блоки со знаком «+» внутри - это области, которые могут принимать блоки Элементатора. Если вы добавите блок Elementor без предварительного выбора макета, по умолчанию будет выбран макет с одним столбцом.

Секции Elementor могут быть переупорядочены друг к другу, следуя тому же принципу «Drag & Drop». Вы также можете удалить раздел, если вы больше не хотите его использовать.

перемещение элемента elementor.png

Ниже приведен пример раздела, содержащего блоки 2, а именно блок заголовка и текстовый блок.

элемент секции с 2 blocs.png

Как использовать другие инструменты проектирования

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

Резервное копирование elementor.png

У вас есть выбор между прямой записью (Публикация) и сохранением в качестве черновика или в качестве шаблона. Мы рассмотрим эти моменты позже.

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

Предварительный просмотр изменений elementor.png

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

действия elementor.png

Легко создать свой интернет-магазин

Скачайте бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать физические и цифровые продукты на WordPress. [Рекомендуемые]

Это позволит вам легко вернуться.

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

опция браузера elementor.png

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

Настройки elementor.png

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

Эта статья содержит комментарии 0

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

Ваш электронный адрес не будет опубликован. Обязательные поля обозначены *

Этот сайт использует Akismet для уменьшения спама. Узнайте больше о том, как используются ваши данные обратной связи.

Вверх
12 акции
доля6
чирикать3
Регистрация3