GeneratePress — лучший вариант при выборе бесплатной и качественной темы WordPress. GeneratePress и Elementor отлично сочетаются, если Вы ищите быструю и интуитивно понятную комбинацию конструктора страниц и темы WordPress.
В этом руководстве мы рассмотрим, как создать качественную главную страницу, а затем адаптировать ее с помощью набора инструментов Mobile Editing в Elementor. Мы также изменим дизайн другой страницы, чтобы ее цветовая палитра соответствовала GeneratePress.
🔗 Скачать тему | 🔗 Скачать плагин
Зачем использовать Elementor с GeneratePress?
Elementor плавно работает с темой GeneratePress, как с Lite, так и с Pro версиями. Версию Pro стоит попробовать, так как в ней много полезных дополнений и функций, которых нет в базовой версии, например управление темой «шапкой», цветами, типографикой и т. п.
GeneratePress отлично оптимизирована под поисковые системы и служит одной из самых легких и компактных тем, доступных на WordPress. Она очень популярна, и количество загрузок превышает отметку в 700 000 загрузок. В сочетании с Elementor она сохраняет свою легкость, но при этом становится более производительной и предоставляет больше контроля над разметкой, стилями, цветами и другими элементами темы.
Вот несколько преимуществ, которые дает совместное использование Elementor и GeneratePress:
Создание страницы в реальном времени
С помощью Elementor вы можете перенести GeneratePress на новый уровень в плане дизайна. Вы можете создавать продвинутые и прекрасно оформленные страницы и публикации в реальном времени через интерфейс сайта.
Полный контроль над макетом, контентом и стилями
По умолчанию в GeneratePress используется базовый редактор WordPress. А вместе с Elementor вы получаете возможность настраивать сетку страницы, интервалы и поля, колонки, шрифты, цвета и все остальные элементы дизайна.
Вставка виджетов в GeneratePress
Elementor поддерживает массу полезных виджетов, включая галерею, иконочный шрифт Font Awesome, социальные иконки, слайдер и т. п., позволяющие сделать страницу GeneratePress более привлекательной и динамичной.
Начальные настройки Elementor и GeneratePress
Если вы откроете GeneratePress на WordPress.org в режиме предварительного просмотра, то можете получить неправильное представление о ней и посчитать ее очередной темой для блога. На самом деле эту тему можно использовать для создания любого сайта, от портфолио до бизнес-сайтов.
Мы начнем с создания демо-версии главной страницы, на которой будет «шапка» с фоновым видео и заголовком, разделы с описанием услуг, таблицей цен, кнопкой призыва к действию и слайд-шоу с логотипами клиентов. Все это мы сделаем без использования CSS, написания кода и даже без установки дочерней темы.
Удаление заголовка страницы
Так как нам не нужно, чтобы на домашней странице отображался заголовок, мы используем опцию GeneratePress ‘Disable Elements’ (Отключить элементы), чтобы убрать его.
Интеграция конструктора страниц
Как я писал выше, нет необходимости как-то подготавливать тему GeneratePress. В ней есть удобный флажок под названием Page Builder Integration (Интеграция конструктора страниц), который учитывает полную ширину страницы.
Расположение Sidebar (Боковая панель)
Часто мы будем работать со страницами в полную ширину, поэтому полезно установить в настройках расположения боковой панели ‘Content (No Sidebars)’.
Создание адаптивной домашней страницы
В видео мы показываем, что очень легко создать с нуля красивую главную страницу с помощью темы GeneratePress.
Во второй части видео мы демонстрируем, что также просто можно адаптировать главную страницу под планшеты и мобильные устройства с помощью набора инструментов Mobile Editing в Elementor.
Возьмите в привычку после создания каждой страницы с помощью Elementor просматривать ее в режиме планшета и телефона и проверять, чтобы каждый виджет, колонка и раздел выглядели хорошо.
Настройка шаблона под цвета GeneratePress
В следующей части видео мы вставили один из наших шаблонов страницы и быстро настроили цвета, чтобы они подходили под черно-белую цветовую схему GeneratePress. В GeneratePress можно использовать и другие цвета, если применить дополнение Colors.
Важно отметить, что каждый из дюжины бесплатных шаблонов в Elementor можно настроить под любую цветовую схему также просто, как это сделали мы в видео.
Знакомство с Elementor
Если вы хотите начать использовать Elementor, посмотрите эти 4 основных руководства:
- Как установить Elementor на WordPress?
- Как создать базовую разметку страницы?
- Как использовать Mobile Editing для адаптивного дизайна?
- Как использовать Library, чтобы вставить шаблоны?
Заключение
Как мы видим, GeneratePress и Elementor — отличная пара.
- Они очень быстрые и легкие, отлично работают в отношении поисковой оптимизации и скорости загрузки страниц.
- Они предоставляют эффективные инструменты для создания страниц, адаптированных под мобильные устройства.
- Они интуитивно понятны и просты в использовании.
Мы коснулись лишь малой доли их функциональности. Варианты сайтов, которые можно создать на WordPress с помощью Elementor, безграничны.
