Топ-100 Как установить и настроить Elementor - Разработка сайтов на WordPress

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

В этой статье я покажу вам, как установить, активировать и настроить плагин Elementor, как в его бесплатной, так и в премиум-версии.

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

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

Давайте перейдем к процессу, ради которого вы это читаете…

Установка и активация Elementor

Чтобы установить Elementor, просто выполните следующие действия:

  • Перейдите в Plugins > Add New и найдите Elementor в окне поиска плагинов.
  • Нажмите на Установить, а затем Активировать.
  • Вот и все, у вас установлен Elementor free. Просто.

Теперь, если вы хотите установить Elementor Pro, вам придется купить лицензию и загрузить ее с той же страницы плагинов WordPress.

Конфигурация Elementor

После того как вы установили Elementor, давайте посмотрим, как его настроить.

В зависимости от того, устанавливаете ли вы только БЕСПЛАТНУЮ версию или FREE + PRO, в меню WordPress вы увидите различные опции для настройки Elementor.

Ниже, я расскажу вам, как настроить каждую вкладку, и в каждой из них я скажу, относится ли эта опция к той или иной версии.

Настройки

В подразделе «Настройки» вы увидите 4 вкладки, и в каждой из них вы сможете настроить различные вещи:

  • Общие сведения
  • Интеграции
  • Расширенный
  • Эксперименты

Общий

Настройте отсюда некоторые общие параметры, как видно из названия.

  • Типы контента: здесь вы можете определить, активировать ли Elementor для постов, страниц, продуктов Woocommerce (если у вас есть магазин) и других типов контента, которые есть на вашем сайте.
  • Отключить цвета по умолчанию: если вы отметите эту опцию, Elementor примет цвета темы по умолчанию.
  • Отключить шрифты по умолчанию: то же самое, что и с цветами, но для шрифтов.

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

Вкладка «Интеграции

На этой вкладке вы можете добавить ключи интеграции (API) нескольких известных инструментов, таких как reCaptcha от Google в различных версиях, Facebook SDK, Mailchimp, ActiveCampaign, WooCommerce и другие.

Вкладка «Дополнительно

Здесь вы можете изменить некоторые более серьезные параметры…

К ним относятся:

  • Метод печати CSS: выберите, хотите ли вы сохранить код CSS во внешнем файле или «Inline». Я рекомендую внешние.
  • Изменить метод загрузки редактора: используется для диагностики проблем конфликта конфигурации сервера. По умолчанию он отключен, и я даже не прикасаюсь к нему.
  • Разрешить загрузку нефильтрованных файлов: если вы включите эту опцию, вы сможете загружать файлы SVG в Elementor, что WordPress по умолчанию не позволяет. Обратите внимание, что файлы SVG могут содержать вредоносный код, поскольку они представляют собой изображения с содержимым, встроенным в XML-код. Загружайте эти файлы, только если вы уверены в их происхождении и безопасности.
  • Загрузка Google Fonts: здесь вы можете настроить метод загрузки шрифтов Google Fonts на ваш сайт.
  • Загрузить совместимость с Font Awesome 4: эта опция сделает иконки Font Awesome 4, которые вы ранее использовали в Elementor, совместимыми с версией Font Awesome 5.

Вкладка «Эксперименты

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

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

Вкладка «Стиль» (устаревшая)

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

Это были опции, которые можно было настроить:

  • Общие шрифты по умолчанию: Elementor будет использовать список шрифтов по умолчанию, которые загружаются, если настроенный вами шрифт в какой-то момент не загрузится правильно. Типографский план B.
  • Ширина контента: по умолчанию Elementor отображает свои разделы шириной 1140px для настольной версии. Здесь вы можете изменить эти пиксели.
  • Расстояние между виджетами: по умолчанию Elementor назначает 20px разделения между виджетами, которые вы используете для дизайна. Здесь вы можете изменить этот параметр.
  • Расширение до размера раздела: когда вы устанавливаете раздел Elementor на полную ширину, он по умолчанию соответствует ширине тела. Если вы хотите, чтобы он соответствовал другому CSS-селектору, вы можете указать его здесь.
  • Селектор заголовка страницы: если вы хотите скрыть заголовок страницы H1 с помощью Elementor, идентификатор и класс по умолчанию обычно ‘h1.entry-title’, но если ваша тема использует другой класс, вам следует указать его здесь, иначе Elementor не будет знать, что его нужно скрыть.
  • Точка останова планшета: здесь вы можете установить разрешение, при котором веб-страница переходит в планшетную версию. По умолчанию он составляет 1025px.
  • Mobile breakpoint: как и в предыдущем пункте, здесь вы можете определить, при каких пикселях мобильная версия будет переходить. По умолчанию используется значение 768px.
  • Image lightbox: с этой опцией все изображения, открываемые по ссылке, будут открываться в лайтбоксе. ОСТОРОЖНО, потому что иногда это может привести к несовместимости с темой, если она также имеет эту опцию.

Shipping (PRO)

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

Эти данные собраны в этом разделе под названием «Представления».

Custom Fonts (PRO)

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

пользовательские шрифты elementor

Вот форматы, которые можно загружать:

  • WOFF
  • WOFF2
  • TTF
  • SVG
  • EOT

Custom icons (PRO)

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

Платформы таковы:

  • Fontello
  • IcoMoon
  • Fontastic

Custom code (PRO)

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

Благодаря этому новому разделу вы сможете добавить сюда напрямую, без использования дополнительных плагинов: пиксели Facebook или Google Ads, мета-теги и любые другие скрипты (например, Google Analytics).

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

Можно такие добавить условия отображения.

По сути, это то же самое, что и раздел Hooks, который поставляется с некоторыми лучшими темами WordPress.

пользовательский код elementor

Менеджер профиля

Если доступ к вашему сайту WordPress имеют несколько пользователей и вы хотите ограничить их использование Elementor, вы можете сделать это здесь.

менеджер профилей elementor

Основные существующие роли (могут быть увеличены, например, за счет добавления WooCommerce):

  • Редактор
  • Автор
  • Вкладчик
  • Абонент

Параметры ограничения, которые вы можете настроить для каждого профиля, следующие:

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

Если вы ничего не проверите, они получат доступ ко всему.

Инструменты

В этом разделе вы можете выполнять различные действия над поведением плагина.

Вкладка Общие

элемент общего инструмента

Регенерация CSS и данных: вы можете регенерировать код CSS, чтобы он адаптировался к последним стандартам, выпущенным на рынок.

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

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

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

Вкладка «Заменить URL

Если вам нужно сделать полную замену веб-домена или перейти с HTTP на HTTPS (технически это называется «301 редирект»), вы можете сделать это с этой вкладки.

  • инструменты elementor заменить url
  • Вкладка Контроль версий
  • инструменты elementor контроль версий
  • Возврат к предыдущей версии: бывают случаи, когда при обновлении плагина Elementor происходит сбой, крах или как вы хотите это назвать. Если это произойдет с вами, вы можете вернуться к предыдущей версии, пока не выйдет новое обновление, в котором проблема будет решена. Вы можете сделать это как в БЕСПЛАТНОЙ, так и в ПРО версии.
  • Стать бета-тестером: если вы хотите стать бета-тестером Elementor, вы можете активировать эту опцию здесь.

Вкладка «Режим обслуживания

режим обслуживания инструментов elementor

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

Вкладка «Набор для импорта/экспорта».

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

комплект для импорта/экспорта elementor-tools

Информация о системе

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

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

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

Получение помощи

Если у вас возникли вопросы или проблемы с Elementor, эта опция приведет вас в раздел поддержки на их сайте: https://elementor.com/support/.

Лицензия (PRO)

Эта опция появится только в том случае, если у вас платная версия. Если у вас БЕСПЛАТНАЯ версия, раздел будет переименован в «Перейти на PRO версию», что перенаправит вас прямо в раздел официального сайта Elementor Page Builder, где вы сможете оформить покупку.

Заключение

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

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

VECHNOST
VECHNOST
Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач! Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Добавить комментарий

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

восемнадцать − 10 =

Заказ услуги
Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?