Как использовать Avada Header, Footer и компоновщик столбцов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактирование нестандартного макета

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

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

См. Исходный нижний колонтитул для демонстрации такси ниже; Это было сделано путем изменения параметров темы и виджетов нижнего колонтитула.

Такси Demo> Основная Footer»SRC =» https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0 "> Посмотрите на настраиваемый глобальный нижний колонтитул Avada Layouts.

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

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

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

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

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

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

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

Добавление столбцов из Avada Layout Builder

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

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

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

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

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

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

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

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

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

Вывод

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

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

Оставить комментарий

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