Як використовувати конструктор верхнього, нижнього колонтитулів і стовпців Avada

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

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

На сторінці Конструктора макетів ви знайдете всі свої макети та будь-які умовні макети, які ви можете створити на додаток до глобального макета, створеного за замовчуванням. Тут також розташована область, де ви призначаєте розділи макетів своїм макетам і вказуєте умови, щоб ваші умовні макети набули чинності.

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

Дві частини розташовані в самому верху сторінки Конструктора макетів. Техніка заповнення розділів макета в глобальному макеті або генерування умовних макетів описана в першому розділі (підказка: ви можете закрити це за допомогою X), а в правій частині екрана є область, з якої ви можете безпосередньо створювати нові макети (див. нижче). Введіть назву нового макета, а потім натисніть «Створити новий макет», щоб завершити процес. У разі використання цього методу створюється порожній макет; не вказано жодних розділів макета чи умов.

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

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

Використання макета розділу

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

Макет нижнього колонтитула – це розділ макета, доданий до макета. amp , для користувацького нижнього колонтитула потрібен розділ макета нижнього колонтитула, який можна додати до загального чи користувацького макета. У наступному розділі ми розглянемо створення спеціального розділу макета нижнього колонтитула, але спочатку давайте розглянемо Представлення макетів Avada.

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

Налаштування макета

Цей розділ можна додати до глобального макета або умовного макета, який відображатиметься лише на певних видах настроюваних публікацій або на окремих сторінках. Глобальний макет уже існує, але спочатку нам потрібно розробити умовний макет.

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

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

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

На наступному зображенні показано, як створити розділ макета безпосередньо з макета. Розділи макета вашого сайту потрібно додати до макета. Спочатку існує просто глобальний макет. Отже, щоб створити глобальний настроюваний нижній колонтитул, додайте його до цього макета. Розділ користувацького макета нижнього колонтитула, а потім додайте умови до розділу користувацького макета нижнього колонтитула, щоб макет відображався відповідно до критеріїв.

У цьому немає нічого страшного, але життєво важливо враховувати ситуацію. Якщо макет наразі активний (тобто має умови або є глобальним макетом), усі нові розділи макета будуть активними негайно та порожніми. Доцільніше спочатку додати власний нижній колонтитул до глобального макета через сторінку конструктора розділів макета, а потім додати його до глобального макета.

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

Редагування власного макета

Редактор WordPress за замовчуванням з’являється під час редагування нового розділу макета; ви можете використовувати Avada Builder або Avada Live тут. Тут створюються власні розділи макета. Додаткову інформацію див. у розділі Створення вмісту розділу макета, але коротко кажучи, тут можна створити будь-що.

Ваш власний нижній колонтитул може містити все, що ви можете створити в Avada Builder. Ви можете мати численні колонки, фотографії тощо; Це забезпечує величезну гнучкість. У розділі «Макет» з’являтиметься матеріал нижнього колонтитула. Матеріал надходить від Builder, і ваша креативність є єдиним обмеженням.

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

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

Дизайн умовного макета

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

Умовний макет може містити лише існуючі розділи макета. Потім на вкладці «Вибір нижнього колонтитула» макета прокрутіть до «Існуючий», де ви можете додати розділ «Макет», як показано нижче.

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

Щоб додати умову, виберіть «Додати умову» в нижньому меню макета. З’явиться діалогове вікно, як показано нижче. Щоб отримати додаткові відомості про умовні макети, див. Розуміння умовних макетів, але для цього amp ми б вибрали «Усі публікації» на вкладці «Умови публікацій», як показано нижче.

Додавання стовпців із Avada Layout builder

Елемент Column, як і елемент Container, є важливим структурним компонентом при проектуванні сайту Avada.

За допомогою Avada Layout Builder додавати стовпці відносно легко.

  • Натисніть кнопку « + Контейнер », щоб додати контейнер на сторінку. Під час вставлення контейнера вам буде запропоновано вибрати стовпець або макет стовпця. Ви можете створити порожній контейнер, але зазвичай на цьому кроці ви додаєте стовпці.
  • Щоб додати нові стовпці до наявного контейнера, наведіть курсор на контейнер і натисніть кнопку « + Стовпець ». Щоб додати новий стовпець, натисніть тут.
  • У верхньому лівому куті стовпця клацніть піктограму «Змінити розмір стовпця». Зараз він матиме такий самий розмір, як ваша колонка. Наприклад , стовпець 1/4 відображатиметься як «1/4 » під параметром «Змінити розмір стовпця» amp
  • Перетягніть стовпці, щоб змінити їх порядок. Ви також можете перетягувати стовпці в контейнери.

Стовпець можна розмістити лише всередині елемента контейнера з однаковою шириною; Зазвичай це ширина сайту, яку ви встановлюєте для сайту. Таким чином, якщо ви встановите ширину сайту на 1200 пікселів, 1/2 стовпця матиме ширину 600 пікселів. Попередньо встановлені розміри стовпців показано нижче, коли їх додано на сторінку.

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

Користувацькі ширини знаходяться в розділі Стовпці > Дизайн > Ширина . Як показано нижче, використання числа у відсотках дозволяє вказати спеціальну ширину. Таким чином, позиціонування не обмежене

Авто – це новий параметр ширини. Замість фіксованої ширини стовпець займатиме простір найважливішого елемента всередині нього. Тому це працює лише в деяких випадках. Ви можете змінити батьківський стовпець на Auto, і розмір стовпця зміниться відповідно до ширини елемента.

Avada також додає адаптивні набори параметрів для контейнерів і стовпців. У верхній частині Builder ви можете побачити адаптивні піктограми на будь-яких стовпцях, як показано на зображенні нижче. 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: Газета проти Astra

Щоб створити чудовий сайт новин, не обов’язково ставати веб-дизайнером. Ми…

25 жовтня 2021 р

Створіть веб-сайт, пов’язаний із новинами, із газетною темою

Тема газети є однією з найважливіших тем WordPress, розроблена tagDiv,…

18 жовтня 2021 р

Як створити електронну комерцію за допомогою Avada WooCommerce Builder

Коли справа доходить до створення онлайн-магазину, WooCommerce – це найпопулярніший plugin . Це…

4 жовтня 2021 р

Як використовувати липкий заголовок і ефекти прокручування з Elementor

Заголовок, як правило, є першим, що бачить людина, коли відвідує ваш веб-сайт,...

21 вересня 2021 р