Как использовать верхний и нижний колонтитулы Avada и конструктор макетов столбцов

Наш собственный конструктор страниц, Avada Builder, теперь доступен в двух интерфейсах: Avada Builder, который является нашим внутренним конструктором каркасных страниц, и Avada Live, который является нашим интерфейсным конструктором, который был представлен совсем недавно в Avada 6.0. .

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

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

Доступ к Layout Builder можно получить с информационной панели Avada, выбрав «Макеты» > «Layout Builder» в раскрывающемся меню. Один из самых простых способов описать макеты — сказать, что они представляют собой контейнеры, в которых размещаются четыре раздела макета страницы — раздел заголовка, раздел строки заголовка страницы, раздел контента и раздел нижнего колонтитула. Вы можете узнать больше о различиях между разделами макета и макетами, прочитав этот документ: Общие сведения о макетах и ​​разделах макета (PDF). Продолжайте читать, чтобы узнать больше о том, что вы можете делать на этой странице.

Две части расположены в самом верху страницы Layout Builder. Техника заполнения разделов макета в глобальном макете или создания условных макетов описана в первом разделе (подсказка: вы можете закрыть его с помощью X), а в правой части экрана находится область, из которой вы можете напрямую создавать новые макеты (см. ниже). Введите имя нового макета и нажмите «Создать новый макет», чтобы завершить процесс. При использовании этого метода создается пустой макет; Разделы макета или условия не указаны.

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

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

Использование макета раздела

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

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

На боковой панели WordPress или на панели управления Avada выберите Avada > Макеты. Здесь создаются и управляются макеты и разделы макетов Avada. Как показано ниже, глобальный макет изначально пуст и не имеет связанных с ним разделов макета.

Настройка макета

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

На странице «Макеты» добавьте имя и нажмите «Создать новый макет», как показано ниже.

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

На экране «Конструктор разделов макета» выберите тип раздела макета, введите имя (в данном amp «Нижний колонтитул», возможно, глобальный нижний колонтитул) и нажмите «Создать новый раздел макета», как показано ниже.

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

В этом нет ничего плохого, но важно учитывать ситуацию. Если макет в данный момент активен (т. е. имеет условия или является глобальным макетом), любые новые разделы макета будут активны немедленно и пусты. Имеет смысл сначала добавить пользовательский нижний колонтитул в глобальный макет через страницу «Конструктор разделов макета», а затем добавить его в глобальный макет.

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

Редактирование пользовательского макета

Редактор WordPress по умолчанию появляется при редактировании нового раздела макета; отсюда вы можете использовать Avada Builder или Avada Live. Здесь создаются пользовательские разделы макета. Дополнительную информацию см. в разделе «Создание содержимого раздела макета». Короче говоря, здесь вы можете создать что угодно.

Ваш пользовательский нижний колонтитул может содержать все, что вы можете создать в Avada Builder. У вас может быть множество колонок, фотографий и т. д.; Это обеспечивает огромную гибкость. В разделе «Макет» появится материал нижнего колонтитула. Материал исходит от Строителя, и ваше творчество является единственным ограничением.

См. исходный нижний колонтитул, созданный для демо-версии «Такси» ниже; Это было сделано путем изменения параметров темы и виджетов нижнего колонтитула.

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

Условный дизайн макета

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

Условный макет может содержать только существующие разделы макета. Затем на вкладке «Выбор нижнего колонтитула макета» прокрутите до пункта «Существующие», где вы можете добавить раздел «Макет», как показано ниже.

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

Чтобы добавить условие, выберите «Добавить условие» в нижнем меню макета. Появится диалоговое окно, как показано ниже. Дополнительную информацию об условных макетах см. в разделе «Общие сведения об условных макетах», но для этого amp мы бы выбрали «Все публикации» на вкладке «Условия публикаций», как показано ниже.

Добавление столбцов из конструктора макетов Avada

Элемент столбца, как и элемент контейнера, является важным структурным компонентом при проектировании сайта Avada.

Добавлять столбцы относительно легко с помощью Avada Layout Builder.

  • Нажмите кнопку « + Контейнер », чтобы добавить Контейнер на страницу. При вставке контейнера вам будет предложено выбрать столбец или макет столбца. Вы можете создать пустой контейнер, но обычно на этом этапе вы добавляете столбцы.
  • Чтобы добавить новые столбцы в существующий контейнер, наведите указатель мыши на контейнер и нажмите кнопку « + Столбец ». Чтобы добавить новый столбец, нажмите здесь.
  • В левом верхнем углу столбца нажмите значок «Изменить размер столбца». Теперь он будет такого же размера, как и ваша колонка. Например , столбец 1/4 будет отображаться как «1/4 » в разделе «Изменить размер столбца» amp
  • Перетащите столбцы, чтобы изменить их порядок. Вы также можете перетаскивать столбцы в контейнеры.

Столбец можно разместить только внутри элемента-контейнера той же ширины; Обычно это ширина сайта, которую вы установили для сайта. Таким образом, если вы установите ширину сайта 1200 пикселей, половина столбца будет иметь ширину 600 пикселей. Предустановленные размеры столбцов показаны ниже при добавлении на страницу.

В Avada вы можете устанавливать ширину столбцов (и более) отдельно для больших, средних и маленьких макетов. В разделе «Настройка порядка отображения и размера столбцов в адаптивных макетах» объясняется, как использовать эту замечательную новую функцию со столбцами.

Пользовательские ширины находятся в разделе «Столбцы» > «Дизайн» > «Ширина» . Как показано ниже, использование процентного числа позволяет указать пользовательскую ширину. Таким образом, позиционирование ничем не ограничено.

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

Avada также добавляет адаптивные наборы параметров для контейнеров и столбцов. В серверной части Конструктора вы можете увидеть адаптивные значки в любых столбцах, как показано на изображении ниже. Front-End Builder отображает адаптивные значки в параметрах.

Только новые Flex-контейнеры отображают адаптивные наборы параметров. Столбцы в устаревших контейнерах недоступны.

Заключение

Благодаря Avada Layouts возможность создавать собственный нижний колонтитул, верхний колонтитул и добавлять столбцы теперь стала реальностью и практически безграничной возможностью. Вы можете не только использовать возможности Avada Builder для создания практически любого нижнего колонтитула или заголовка, который только можете себе представить, но вы также можете использовать возможности условных макетов, чтобы показывать или скрывать их на любой странице, категории, пользовательском типе публикации или любой комбинации Критерии, которые вы можете придумать, используя Avada Builder.

Когда дело доходит до макетов WordPress, Avada Layouts меняет правила игры в самом буквальном смысле. Тот факт, что он обеспечивает такую ​​свободу дизайна и гибкость развертывания, означает, что процесс создания нижних колонтитулов никогда не будет прежним.

Хансон Ф.

Недавние Посты

Как использовать верхние и нижние колонтитулы с Elementor

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

6 января 2022 г.

Сравнение тем WordPress: Astra и OceanWP

Две самые популярные темы WordPress на рынке — Astra и OceanWP. Профессиональный…

2 января 2022 г.

Сравнение новостных тем WordPress: Newspaper vs. Астра

Чтобы создать отличный новостной сайт, вам не обязательно становиться веб-дизайнером. Мы…

25 октября 2021 г.

Создайте новостной веб-сайт с газетной темой.

Тема «Газета» — одна из самых важных тем WordPress, разработанная tagDiv,…

18 октября 2021 г.

Как создать электронную коммерцию с помощью конструктора Avada WooCommerce

Когда дело доходит до создания интернет-магазина, лучше всего plugin WooCommerce. Это…

4 октября 2021 г.

Как использовать липкий заголовок и эффекты прокрутки с Elementor

Заголовок – это, как правило, первое, что видит человек, когда посещает ваш сайт.

21 сентября 2021 г.