Учебное пособие по WordPress Elementor | Пошаговое руководство в 2024 году

Вы хотите начать работу с Elementor и ищете Учебное пособие по WordPress Elementor? Ваш поиск заканчивается здесь. В этой статье я расскажу вам обо всем, что вам нужно знать об Elementor.

Начиная с установки и заканчивая созданием очень стильной страницы, все ваши сомнения разрешатся, если вы прочитаете эту статью. Уверяю вас; чтение не пройдет даром!

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

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

Хотите узнать больше об Elementor, тогда ознакомьтесь с моим подробным описанием. Elementor Обзор.

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

Что ж, есть два способа установить Elementor на WordPress. 

• Через официальный сайт Elementor

Перейдите на официальный сайт Elementor и нажмите кнопку «Бесплатная загрузка», показанную на сайте. 

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

Вы найдете zip-файл, загруженный на ваш ноутбук/ПК. Теперь перейдите на панель управления WordPress и нажмите раздел «Плагины» > «Добавить новый плагин» > «Загрузить плагин».

Выберите файл Elementor и загрузите его в WordPress.

• Через панель управления WordPress

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

В правом верхнем углу вы найдете строку поиска, введите Elementor в строке поиска. Самый первый результат — это то, что вам нужно установить в свой WordPress. Просто нажмите «Установить» и дождитесь установки плагина. Активируйте плагин, и у вас есть отличный конструктор веб-сайтов, готовый к развертыванию.

Теперь, когда Elementor установлен на вашей панели управления WordPress, давайте посмотрим на предоставляемые им функции.

Возможности Elementor и их использование при создании веб-страницы

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

Существует два плана: Elementor The Free и The Pro. Как следует из названия плана Pro, вам придется играть, но есть несколько функций, которые есть и в бесплатном плане.

Я начну с обсуждения функций сначала бесплатного плана, а затем Pro.

Особенности бесплатного плана Elementor

Важные особенности:

• Перетаскивание

Функция перетаскивания в Elementor работает очень быстро и помогает быстрее создавать веб-страницы. От создания макета веб-страницы до тонкой настройки — все это можно выполнить простым перетаскиванием.

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

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

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

Есть 3 варианта сохранения вашего дизайна: удаление и создание резервной копии. Вы можете повторить/отменить созданные вами проекты. Это дает вам возможность провести A/B-тестирование страницы на основе ваших наблюдений. 

Вы можете просмотреть все версии на вкладке «Редакция», т. е. вы можете просмотреть все виды дизайнов, которые вы пробовали до сих пор, на своей веб-странице, а также выбрать более раннюю версию, если вам не нравится текущая веб-страница. 

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

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

Все функции перетаскивания доступны в левой части страницы сразу после ее создания.

После создания страницы в WordPress и присвоения ей названия просто нажмите «Редактировать с помощью Elementor», и вы перейдете в действующий редактор Elementor, который выглядит как изображение ниже.

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

• Шаблоны дизайна

С Elementor вы получаете встроенные шаблоны дизайна. Не просто 5 или 10, но Elementor предоставляет вам более 100 шаблонов дизайна, которые можно использовать бесплатно, и многое другое при обновлении до версии Pro.

Как выбрать нужный шаблон для библиотеки шаблонов Elementor

Когда вы впервые откроете страницу конструктора Elementor, вы увидите что-то вроде того, что показано ниже:

Изображение взято с сайта Elementor и говорит само за себя.

Как только вы нажмете на опцию «Папка», вы увидите всплывающее окно, показанное ниже.

• Виджеты

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

• Внутренний раздел: Давайте разделим раздел на две части.
• Заголовок: перетащите это поле на свою веб-страницу, чтобы добавить привлекательный заголовок.
• Изображение: разместите изображения на своей веб-странице с помощью этого виджета.
• Текстовый редактор: вводите текст на свою веб-страницу с помощью виджета текстового редактора.
• Видео: вы можете использовать виджет «Видео», чтобы разместить качественные видеоролики на своей странице. Это повысит удобство использования
• Кнопка. Призыв к действию очень важен практически для всего сайта. С помощью кнопок вы можете разместить призыв к действию на своей странице и связать его с целевой страницей вашего продукта.
• Звездный рейтинг: Звездный рейтинг полезен для любого веб-сайта электронной коммерции, поскольку позволяет дать оценку нескольким различным продуктам, которые он может предложить.
• Разделитель: помогает сделать отступы на вашей веб-странице и создает пустое пространство для удобства пользователей.
• Значки: с помощью виджета значков вы можете разместить броские значки социальных сетей, а также различных сервисов, чтобы ваша страница выглядела более привлекательно.
• Счетчик: создайте таймер обратного отсчета для ваших продуктов или ограниченных дополнительных услуг, чтобы создать срочность.
• Отзывы: добавьте отзывы о своих продуктах и ​​услугах, чтобы завоевать доверие посетителей вашего сайта.

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

Взгляните на некоторые виджеты Elementor ниже на изображении.

Как использовать виджеты Elementor

Для использования виджетов Elementor:

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

• Адаптивное проектирование и редактирование

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

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

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

Как узнать отзывчивость ваших веб-страниц на мобильных устройствах

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

Особенности рабочего процесса:

• Нет требований к кодированию

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

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

• Панель навигатора

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

Как использовать панель навигации

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

• Горячие клавиши

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

• Функция встроенного редактирования

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

Особенности дизайна

• Глобальные шрифты

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

• Глобальные цвета

Аналогично, поскольку установлен шрифт Global, вы можете при необходимости установить одинаковый цвет всего текста вашего сайта.

• Фоновые градиенты

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

• Фоновые видео

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

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

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

• Другие особенности
• Применить наложение фона
• Поместить слайд-шоу в фоновом режиме
• Создайте холст, чтобы ваша страница выглядела живой.
• Используйте режимы наложения
• CSS-фильтры стилей
• Разделители формы
• Тень коробки
• Иконки
• Экспортируйте значки SVG с других веб-сайтов.

Особенности макета

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

Вы также можете настроить поля и отступы, что является очень важной функцией на веб-странице. 

Возможности плана Elementor Pro

Предметы первой необходимости

Помимо бесплатной функции, Elementor Pro предлагает еще две функции.

1. Конструктор всплывающих окон

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

Эта функция, как и другие виджеты, присутствует на панели управления Elementor.

С помощью конструктора всплывающих окон вы можете создавать следующие всплывающие окна:

• E-mail подписка
• Всплывающие окна формы входа
• Всплывающие баннеры для продвижения и продаж
• Захват свинца
• Блокировка контента и отображение всплывающих окон
• Объявления
• Выход из положения
• Всплывающие окна типа приветственного коврика
• Сопутствующий продукт и дополнительные продажи

2. Конструктор тем

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

Вы можете управлять верхним и нижним колонтитулом на той же странице, на которой разрабатываете дизайн. Благодаря мощной интеграции WooCommerce вы также можете оптимизировать страницы своих продуктов.

Особенности дизайна

1. Пользовательский CSS

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

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

2. Эффекты движения

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

Как использовать функцию дизайна в Elementor

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

Маркетинг

Эти функции отсутствуют в бесплатной версии Elementor.

• Виджет формы

С помощью конструктора форм Elementor вы можете вносить различные изменения и делать формы интересными и привлекательными для заполнения.

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

• Виджет "Карусель отзывов"

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

Как использовать виджет «Карусель отзывов» в Elementor Pro

• Найдите слайдер отзывов в строке поиска панели управления. Откройте виджет, и вы сразу же сможете приступить к созданию слайдера. Есть два скина на выбор: по умолчанию и пузырь. Выбирайте тот, который вам нужен по стилю.
• Выровняйте и доработайте макет ваших отзывов, что можно сделать с помощью 5 вариантов: изображение в строке, изображение в стопке, изображение выше, изображение слева и изображение справа.
• Выберите стиль и дизайн в соответствии с вашей цветовой гаммой и добавьте контент в слайдер.
• Вы можете автоматически воспроизводить слайды на слайдере, приостанавливать его, когда пользователи нажимают на него, или устанавливать определенное время для параметра смены слайдов. Я предпочитаю использовать паузу при взаимодействии с моими ползунками отзывов.
• Ссылки на действия

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

Как использовать ссылки действий в Elementor Pro

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

Функция построителя тем

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

Как использовать динамический контент с Elementor Pro

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

1. Откройте текстовый редактор и введите текст, который вы хотите разместить на своей веб-странице. Теперь нажмите на значок в правом верхнем углу редактора, как показано на изображении ниже.
2. Нажав на значок, вы увидите список опций, которые появляются в раскрывающемся списке. Они подразделяются на публикации, архивы и сайты. Выберите нужный вариант и немедленно приступайте к работе.
3. Теперь, чтобы дополнительно отредактировать заголовок вашей страницы, вам следует щелкнуть значок гаечного ключа, как показано на изображении ниже.

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

Другие функции конструктора тем в Elementor Pro

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

Содержимое темы

• Виджет строки меню навигации

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

Как использовать виджет строки меню навигации

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

• Виджет поиска

Виджет поиска имеет три скина: виджет поиска по умолчанию, минимальный и полноэкранный.

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

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

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

• Другие функции контента темы, которые вы получаете с Elementor Pro

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

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

Цены на Elementor Pro

Отзывы пользователей 

Быстрые ссылки:

• Учебное пособие по Elementor Pro
• ЛУЧШИЕ ДОПОЛНЕНИЯ ДЛЯ ЭЛЕМЕНТОРОВ
• Привязка меню Elementor
• Дуда против Элементора

Часто задаваемые вопросы по учебнику WordPress Elementor

Читайте также:

• Бобровый строитель против Диви
• Бобровый строитель против Элементора

Заключение: Учебное пособие по WordPress Elementor 2024

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

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

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

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

Итак, попробуйте Elementor и дайте мне знать о своем опыте, оставив комментарий ниже! 

Элементор Популярные видео

Elementor в социальных сетях

Саммит конструкторов страниц 2021 (@summit_camp) начинается завтра! Получите БЕСПЛАТНЫЙ билет и поговорите с более чем 35 экспертами отрасли, включая @bpines1 . Рад быть спонсором этого замечательного мероприятия. Увидимся там! 💻🎉https://t.co/gDtFpUJLBH

— Элементор (@elemntor) 9 мая 2021

Отойдите в сторону и поприветствуйте нашу презентацию в апреле 2021 года. 🏆🌷 В этом месяце мы аплодируем 10 дизайнерским агентствам со всего мира. В этой разнообразной коллекции собраны талантливые веб-разработчики Elementor со всего мира. 🌎 https://t.co/bwwOUDQCuu

— Элементор (@elemntor) 19 мая 2021