Как меньше копаться в коде темы WordPress-сайта
Хотите получать удовольствие от создания сайтов, сосредоточиться на сложных задачах и быстрее реализовывать проекты? Elementor помогает именно в этом. Он позволяет уменьшить необходимость ручного изменения кода темы сайта и освобождает время для работы над более интересными и полезными частями дизайна.
Elementor Page Builder
Что, если мы возьмем самую популярную в мире CMS, и разработаем для нее самый продвинутый конструктор страниц? Именно так и появился Elementor 1.0 для WordPress. Вот несколько функций этого инструмента, о которых стоит упомянуть:
- Интерактивное редактирование. Инструмент поставляется с интерактивным drag-and-drop интерфейсом. Это позволяет создавать макет в режиме реального времени.
- Elementor поставляется с огромным количеством виджетов наиболее распространенных элементов сайта. Кроме этого, существуют десятки дополнений Elementor, созданных сообществом: https://wordpress.org/plugins/search/elementor/.
- Адаптивный дизайн из коробки. Контент, который вы создадите с помощью Elementor, автоматически адаптируется к мобильным устройствам.
- Mobile-first дизайн. Elementor позволяет создавать адаптивные сайты совершенно новым способом. Используйте разные размеры шрифтов, отступы и поля для различных устройств, упорядочивайте столбцы для пользователей, просматривающих ваш сайт с помощью мобильных устройств.
- История ревизий. Elementor включает в себя журнал, который позволяет перемещаться вперед и назад по истории изменений. Это дает возможность экспериментировать с макетом, не опасаясь потерять результаты проделанной работы.
- Возможность добавления пользовательского CSS-кода. Elementor позволяет добавлять пользовательский CSS для каждого элемента и видеть происходящие изменения в редакторе в режиме реального времени.
- Независимость от темы. С Elementor вы не привязаны к одной теме. Можно изменить тему оформления, но контент останется прежним.
- Подробное описание кода и множество пособий. Elementor - это решение с открытым исходным кодом и его полным описанием. Если заинтересованы в создании собственных решений для Elementor, вам стоит посетить сайт https://developers.elementor.com. Здесь доступно много полезных руководств и пояснений.
Когда Elementor будет полезен для веб-разработчиков:
- Когда нужно быстро создать интерактивный прототип. Elementor может помочь в ситуациях, когда необходимо предоставить интерактивное решение, но не хватает времени для написания его кода.
- Когда веб-разработчики не хотят участвовать в проекте после завершения разработки. Elementor идеально подходит для ситуаций, когда клиент хочет самостоятельно вносить дальнейшие изменения в сайт без необходимости написания кода.
Представляем Elementor Pro 2.0 Theme Builder
Несмотря на все преимущества, Elementor 1.0 имел два серьезных ограничения:
- Отдельные части WordPress-сайта нельзя было настраивать. Вы были ограничены определенной областью сайта: содержимым, которое находится между заголовком и футером. Чтобы изменить другие части сайта (например, футер или заголовок), нужно было работать с кодом.
- Невозможность создания динамического контента.
В попытке решить эти проблемы команда проекта выпустила Elementor 2.0 Theme Builder с полным функционалом для создания тем.
Elementor Pro 2.0 предоставляет новый способ создания и настройки сайтов без необходимости редактирования исходного кода.
Как работает Theme Builder?
Этот инструмент позволяет создавать заголовок, футер, шаблоны одиночных записей или архивов, используя продуманный интерфейс Elementor. Он реализует концепцию глобальных шаблонов. Шаблоны - это единицы дизайна. Они позволяют настраивать каждую область сайта.
Процесс создания шаблона прост:
- Выберите тип шаблона.
- Создайте структуру страницы.
- Задайте условия, которые определяют, где именно нужно применять шаблон.
Рассмотрим каждый из этих этапов более подробно. В следующем разделе мы создадим сайт компании с пользовательским заголовком и футером, а также динамическим контентом (блог и архив).
Но прежде чем мы начнем, убедитесь, что у вас установлена последняя версия WordPress с плагином Elementor Pro.
Пользовательский заголовок и футер
Мы создадим стандартный заголовок с логотипом компании и основным меню. Процесс начинается с выбора шаблона. Чтобы создать новый шаблон, нужно перейти в «Elementor» → «Мои шаблоны» → «Добавить новый».
Появится диалоговое окно «Выбор типа шаблона». Выберите в списке значение «Заголовок».
Выберите тип шаблона, который хотите создать. Это может быть заголовок, футер, одиночная запись или архив
После выбора типа создаваемого шаблона Elementor отобразит список блоков, соответствующих этому типу контента. Блоки представляют собой макеты, предоставляемые Elementor. Они экономят ваше время, реализуя базовые шаблоны проектирования, которые вы можете изменить. А также создать шаблон с нуля.
Выберите предустановленный блок для заголовка или создайте меню с нуля
Выберем первый вариант из списка («Metro»). После этого вы увидите, что в верхней части макета страницы появился созданный заголовок.
Теперь нужно настроить заголовок. Давайте выберем логотип и определим меню. Нажмите на «Выберите изображение» и выберите логотип из галереи. Стоит отметить, что шаблон встраивает логотип. Если вы когда-нибудь измените этот логотип на уровне сайта, заголовок автоматически обновится на всех страницах. Затем выберите главное меню.
Когда процесс настройки будет завершен, добавьте измененный заголовок на сайт. Нажмите кнопку «Опубликовать». В панели «Условия отображения» будет предложено выбрать, где применять шаблон.
Выберите, где будет отображаться заголовок
Условия отображения определяют, к каким страницам будет применен созданный шаблон. Можно выводить заголовок на всех страницах, на определенных страницах или исключить некоторые страницы.
Выберите, где отображать заголовок
После публикации шаблона Elementor распознает его как заголовок и будет использовать на сайте.
Теперь пришло время создать футер. Процесс довольно похожий. Разница заключается в том, что на этот раз нужно выбрать шаблон с названием «Футер» и задать макет из списка доступных блоков. Выберем первый вариант из списка («Stay in Touch»).
Выбор блока для футера
Затем нам нужно настроить футер. Измените цвет фона и текста надписи под фразой «Stay in Touch». Давайте повторно используем цвет заголовка для футера.
Теперь нужно выбрать условия отображения. Подобно заголовку, мы зададим отображение футера для всего сайта.
Мы только что создали новый заголовок и футер для сайта, не написав ни строчки кода. И вам не нужно беспокоиться о том, как дизайн будет выглядеть на мобильных устройствах. Elementor сделает это за вас.
Одиночная запись для блога
Давайте создадим страницу блога. В отличие от статичных страниц, таких как «О нас», в блоге содержится динамический контент. Elementor 2.0 позволяет создавать фреймворк для контента. Каждый раз, когда вы создаете новую запись в блоге, контент будет автоматически добавляться в структуру дизайна.
Процесс создания страницы блога начинается с выбора шаблона. Для единичной записи выберите тип шаблона с именем «Single».
Выбор блока для единичной записи
Выбранный блок содержит все необходимые виджеты, поэтому ничего не нужно менять. Но вы сможете легко настроить шаблон.
Единичная запись состоит из динамических виджетов, таких как заголовок записи, контент записи, метаданные и т. д. В отличие от статичных виджетов, отображающих содержимое, которое вы вводите вручную, динамические виджеты выводят контент с текущих страниц, где они применяются. Эти виджеты находятся на панели «Элементы» в категории «Элементы темы».
Список динамических элементов. Динамический виджет изменяется в зависимости от используемой страницы
Когда вы работаете с динамическим контентом, таким как единичная запись, вам нужно посмотреть, как он выглядит в разных записях. Elementor предоставляет режим предварительного просмотра.
Чтобы перейти в режим предварительного просмотра, нужно нажать на иконку глаза, расположенную в нижней левой части макета, а затем выбрать пункт «Настройки».
Используйте режим предварительного просмотра, чтобы увидеть, как ваши шаблоны будут выглядеть на сайте
Чтобы увидеть, как будет выглядеть созданная страница, когда она будет заполнена содержимым, выберите источник контента (например, записи из категории «Новости»).
Заполните свой шаблон контентом с сайта, чтобы увидеть, как будет выглядеть результат
После того, как закончите создавать динамический контент, нужно выбрать, когда будет применен шаблон. Нажмите кнопку «Опубликовать», и вы увидите диалоговое окно, позволяющее определить условия использования.
Архив
Страница архива - это страница, на которой отображается список записей. Она упрощает просмотр всех материалов сайта. Также с ее помощью чаще всего отображаются результаты поиска.
Theme Builder позволяет создавать собственный архив с использованием пользовательской таксономии. Чтобы создать страницу архива, необходимо сгенерировать новый шаблон и выбрать для него блок. Пока Elementor поддерживает только один тип блока для этого шаблона (его можно видеть на изображении, приведенном ниже).
После выбора этого блока нужно задать источник данных или придерживаться выбора по умолчанию (отображение всех записей в блоге).
Мы успешно настроили заголовок, футер, одиночную запись и страницу архива сайта, и при этом не написали ни одной строчки кода.
Чего ожидать в ближайшем будущем
Команда Elementor планирует добавить интеграцию таких плагинов, как WooCommerce, Advanced Custom Fields (ACF) и Toolset.
Elementor предлагает непревзойденную гибкость визуального проектирования практически любого сайта. Не верите? Убедитесь в этом сами!
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!