Как меньше копаться в коде темы WordPress-сайта

записки технаря

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

Elementor Page Builder

Что, если бы вы взяли самый популярный в мире тему и сделали ее для самого продвинутого конструктора страниц? Так родился Elementor 1.0 для WordPress . Вот некоторые особенности этого инструмента, о которых стоит упомянуть:

Интерактивное редактирование. Инструмент имеет интерактивный интерфейс перетаскивания . Это позволяет создавать макет в реальном времени. Elementor поставляется с огромным количеством виджетов для наиболее часто используемых элементов страницы. Кроме того, существуют десятки надстроек Elementor , созданных сообществом: https://wordpress.org/plugins/search/elementor/ . Адаптивный дизайн из коробка. Контент, который вы создаете с помощью Elementor , автоматически адаптируется к мобильным устройствам. Дизайн, ориентированный на мобильные устройства . Elementor позволяет создавать адаптивные веб-страницы совершенно по-новому. Используйте разные размеры шрифта, отступы и поля для разных устройств, упорядочивайте столбцы для пользователей, просматривающих ваш сайт на мобильных устройствах. История изменений. Elementor содержит журнал, который позволяет вам перемещаться вперед и назад по истории изменений. Это позволяет вам экспериментировать с макетом, не беспокоясь о потере работы. Можно добавить собственный код CSS . Elementor позволяет вам добавлять свои собственные для каждого элемента и видеть изменения в редакторе в реальном времени. Это независимо. С Elementor вы не зацикливаетесь на одной теме. Вы можете изменить тему, но содержание останется прежним. Подробный код и множество руководств. Elementor — это решение с открытым исходным кодом с его полным описанием . Если вы заинтересованы в разработке собственных решений Elementor, вам следует посетить https://developers.elementor.com . Доступно множество полезных руководств и объяснений.

Когда Elementor полезен для веб-разработчиков:

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

Представляем Elementor Pro 2.0 Theme Builder

Несмотря на все его преимущества, Elementor 1.0 имел два серьезных ограничения:

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

Невозможно было создать динамический контент.

В попытке исправить эти проблемы команда разработчиков выпустила < span> Elementor 2.0 Theme Builder с полной функциональностью тем.

Elementor Pro 2.0 предоставляет новый способ создания и настройки веб-сайтов без необходимости редактирования исходного кода.

Как работает Theme Builder?

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

Процесс создания шаблона прост:

Выберите тип шаблона. Создайте структуру.Страницы. Сенсовые условия, которые определяют, где вы хотите применить шаблон. Давайте посмотрим на каждый из этих шагов более подробно. В следующей части мы создадим страницу компании с нестандартным заголовком и нижним колонтитулом и динамическим содержанием (блог и архив). Перед началом начнете, убедитесь, что у вас есть последняя версия WordPress от plug Element Pro .

Мы сделаем стандартный заголовок и нижний колонтитул

выполнить стандартный заголовок с логотипом компании и главным меню. Процесс начинается с выбора шаблона. Чтобы создать новый шаблон, перейдите в "Элемент" → "Мои шаблоны" → "Добавить новый" .  Пользовательский заголовок и нижний колонтитул

Диалоговые окна" Выберите тип шаблона ". Выберите из списка «заголовок».

Собственный заголовок и ногой - 2

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

После выбора типа шаблона для создания элемента отображает список блоков, соответствующих этому типичному контенту. Блоки — это договоренности, поставляемые элементом . Они позволяют вам сэкономить время, внедряя базовые шаблоны дизайна, которые могут быть изменены. И создать шаблон с нуля. Как меньше копаться в коде темы WordPress-сайта

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

Выберите первый вариант из списка (" metro "). Затем вы увидите, что созданный заголовок появится в верхней части макета страницы.  width =

Теперь мы должны настроить заголовок. Выберите логотип и определите меню. Нажмите на «Выбрать изображение» и выберите свой логотип из галереи. Стоит отметить, что логотип встроен в шаблон. Если вы когда-нибудь измените этот логотип на уровне сайта, заголовок будет автоматически обновляться на всех страницах. Затем выберите главное меню. Как меньше копаться в коде темы WordPress-сайта

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

Выберите, где отображать заголовок

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

Выберите положение заголовка

При публикации элемента Он распознает его в качестве заголовка и использовать сайт.

Теперь время для создания ноги. Этот процесс очень похож. Разница в том, что на этот раз вы должны выбрать шаблон с именем «нижний колонтитул» и установить макет из списка доступных блоков. Выберите первый вариант из списка (« Оставайтесь в Touch »).

Выберите блок для нижнего колонтитула width =' height='1012

Тогда мы должны ступил. Изменить цвет фона и текст надписипод фразой « Оставайтесь на связи ». Давайте повторно используем цвет верхнего колонтитула для нижнего колонтитула.

Как меньше копаться в коде темы WordPress-сайта

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

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

 

Одиночная запись для блога

 

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

 

Процесс создания страницы блога начинается с выбора шаблона. Для одиночной записи выберите тип шаблона « Single ».

 Одна запись в блоге

Выбор блока для одной записи

 

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

 

Одно сообщение состоит из динамических виджетов, таких как заголовок сообщения, содержимое сообщения, метаданные и т. Д. В отличие от статических виджетов, которые показывают содержимое, введенное вручную, динамические виджеты показывают содержимое текущего страницы, на которых они применяются. Эти виджеты можно найти на панели «Элементы» в категории «Элементы темы».

 Одно сообщение в блоге - 2

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

 

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

 

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

Как меньше копаться в коде темы WordPress-сайта

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

 

Чтобы увидеть, как ваша созданная страница будет выглядеть при заполнении контентом, выберите источник контента (например, сообщения из Категория "Новости" ").

 Как меньше копаться в коде темы WordPress-сайта Как меньше копаться в коде темы WordPress-сайта

Заполните шаблон содержимым с веб-страницы, чтобы увидеть, как будет выглядеть результат

 

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

Как меньше копаться в коде темы WordPress-сайта

Архив

 

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

 

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

 Archive

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

 Архив - 2

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

 

Чего ожидать в ближайшем будущем

 

Команда Elementor планирует добавить интеграцию плагинов, таких как WooCommerce, Расширенные настраиваемые поля (ACF) и Toolset .

 

Elementor предлагает беспрецедентную гибкость визуального дизайна практически для любого веб-сайта. Вы не верите? Посмотреть на себя!

 

Оцените статью