Верхні та нижні колонтитули веб-сайту є важливими елементами. У більшості випадків заголовок містить навігаційні посилання, які спрощують навігацію до різних частин веб-сайту. З іншого боку, нижній колонтитул містить важливу інформацію, яка може знадобитися відвідувачам веб-сайту, наприклад, адреса компанії або контактна інформація, якщо згадати кілька amp .
Верхні та нижні колонтитули надаються поточною темою користувача на WordPress. Вони, як правило, добре спроектовані і придатні для більшості випадків використання. Однак, якщо ви хочете налаштувати свої теми, вам доведеться змінити код; Саме тоді стане в нагоді plugin Page Builder. Ви можете використовувати їх для створення та зміни компонентів веб-сторінки, не знаючи жодного коду.
Цей підручник навчить нас, як створити верхній і нижній колонтитул веб-сайту. Буде використано Elementor Pro (оскільки базова версія Elementor не включає функції, найважливіші для створення цих компонентів). Тому завантажте Elementor Pro і переконайтеся, що він увімкнено.
- Чому ви повинні вибрати Elementor як конструктор сторінок?
- Elementor дозволяє вибрати основний макет власного верхнього та нижнього колонтитулів.
- Що таке заголовок і що він робить?
- Що таке нижній колонтитул?
- Як зробити заголовок
- Розробка шаблону заголовка
- Внесення змін до меню заголовка
- Заголовок публікації
- Як зробити нижній колонтитул
- Розробка шаблону нижнього колонтитула
- Зміни нижнього колонтитула
- Закінчений продукт
- Перегляньте розділи верхнього та нижнього колонтитулів на реагування.
- Доведення справи до кінця
Чому ви повинні вибрати Elementor як конструктор сторінок?
Elementor — це найдосконаліший конструктор сторінок, що дозволяє користувачам використовувати преміальні елементи для створення чудових дизайнів і макетів. Це дуже корисно для новачків, які не мають попередніх знань з кодування. Редактор drag 'n' drop в Elementor дозволяє користувачам переміщувати віджети та елементи.
Elementor — це візуальний конструктор сторінок, який дозволяє користувачам бачити, як виглядають їхні сторінки без перемикання режимів.
Ще один вагомий аргумент для використання Elementor полягає в тому, що більшість робіт можна виконати без витрат. Їхня безкоштовна версія більш ніж здатна забезпечити належні можливості редагування сайту. Однак ми розглянемо як безкоштовну, так і платну версії, щоб ви могли вибрати те, що найкраще відповідає вашим потребам.
Нижче наведено деякі з важливих аспектів Elementor, які роблять його доцільним:
- Підтримується функція перетягування.
- Має велику кількість шаблонів.
- Всього понад 90 віджетів.
- Для реагування на підтримку кодування не потрібно.
- Доступні варіанти повторення та скасування.
- Доступне автозбереження.
Elementor дозволяє вибрати основний макет власного верхнього та нижнього колонтитулів.
Допомогло б, якщо б ви вирішили загальне розташування бажаних розділів верхнього та нижнього колонтитулів перед розробкою унікального заголовка. Перегляд попередньо зробленого макета розділу заголовка може дати вам багато варіантів.
Ви можете вибрати з різних розділів заголовка; найпоширеніший і найсучасніший заголовок містить логотип сайту в крайньому лівому кутку, панель навігації посередині та розділ рядка пошуку праворуч.
Є безмежні можливості, і ви можете створити будь-який макет, який забажаєте.
Я вибрав готовий шаблон заголовка № 7; Це найпоширеніший і простий підхід до використання заголовка на веб-сайті WordPress. Скопіюйте та вставте назву шаблону заголовка в Шаблони > Заголовок > Шаблон пошуку > вставте скопійовану назву заголовка .
Коли ви знайдете потрібний шаблон заголовка, виберіть «Редагувати за допомогою Elementor», і ви потрапите до розділу конструктора заголовків Elementor Pro.
Давайте розпочнемо цю вечірку.
Що таке заголовок і що він робить?
Верхня частина вашої веб-сторінки називається «заголовком веб-сайту». Заголовок зазвичай однаковий на всьому веб-сайті. Однак деякі веб-сайти використовують різні заголовки для різних частин сайту.
Дизайн заголовка дасть вашим користувачам перше враження про ваш веб-сайт, незалежно від того, чи перейшли вони на вашу домашню сторінку, сторінку інформації чи інший індивідуальний вміст. І, якщо він добре розроблений, він приверне увагу користувача та спонукатиме його продовжувати прокручувати та читати.
Заголовок також може допомогти у просуванні бренду вашої компанії.
Я використовую такі функції, як логотип компанії, шрифт, кольори та загальна мова бренду.
Навігація по сайту, пошук по сайту, кошик для покупок (для сайтів продажу), кнопки із закликом до дії (CTA) та інші функції, які покращують взаємодію з користувачами та підвищують коефіцієнт конверсії, – усе це можна знайти в заголовках.
Що таке нижній колонтитул?
Нижній колонтитул – це розділ веб-сторінки, який з’являється внизу сторінки. Зазвичай вони постійно відображаються на всьому веб-сайті, на всіх сторінках і в публікаціях, як заголовки.
Нижні колонтитули часто не помічають, що є марною тратою потенціалу, оскільки вони з’являються на кожній сторінці сайту. Вони однаково важливі для заголовків.
Дизайн нижнього колонтитула може відображати корисну та важливу інформацію, таку як реєстрація інформаційного бюлетеня, інформація про авторські права, умови використання та конфіденційність, карта сайту, контактна інформація, карти, навігація по веб-сайту та багато іншого, залежно від вибраних налаштувань.
Як зробити заголовок
У цьому розділі ми збираємося створити налаштований заголовок. Не хвилюйтеся, якщо це здається вам лякаючим; ми не почнемо з нуля. Замість цього ми будемо використовувати шаблони Elementór Pro, розроблені командою дизайнерів Elementor.
Розробка шаблону заголовка
На панелі адміністратора WordPress наведіть курсор на « Шаблони» та натисніть « Додати новий», щоб створити наш заголовок.
Модальне вікно з’явиться після того, як ви будете перенаправлені. Виберіть Заголовок у спадному меню, назвіть заголовок і натисніть « Створити шаблон »:
Це запустить редактор Elementor. Після цього вам буде представлено список шаблонів, з яких можна вибрати. Тому виберіть те, що вам подобається:
Він повинен з’явитися вгорі розділу редагування Elementor, як тільки ви виберете шаблон:
Створення логотипу: Першим кроком є створення логотипу. Встановіть логотип у Live Editor сайту, щоб розмістити його в заголовку. Виберіть логотип, натиснувши «Ідентифікація сайту».
Коли ви визначитеся з логотипом, натисніть Опублікувати .
Тепер логотип вашого сайту має бути в заголовку, якщо ви оновите інтерфейс Elementor:
Після цього ви можете вносити будь-які зміни.
Внесення змін до меню заголовка
Наступне, що ми повинні зробити, це змінити меню. Якщо ви створили меню, шаблон автоматично додасть його:
Ось наша структура меню, яку ви можете побачити в шаблоні заголовка:
Якщо у вас більше одного меню, ви можете оновити вміст, якщо це необхідно.
Ви можете редагувати його властивості, як і будь-який інший віджет.
Якщо нам потрібно додати більше елементів, ми можемо додати більше розділів до нашого заголовка:
Почнемо з додавання заголовка та деяких значків соціальних мереж:
Після цього ви можете вносити будь-які зміни, які вам подобаються. Ось як вийшло наше редагування:
Заголовок публікації
Тепер ви можете опублікувати заголовок, коли закінчите його змінювати. Ми будемо використовувати заголовок на всьому нашому сайті в amp нижче, тому ми виберемо цей вибір після вибору Додати умову:
А ось колишні amp ля сторінки з нашого живого сайту:
Як зробити нижній колонтитул
Розробка шаблону нижнього колонтитула
Процес створення нижнього колонтитула дуже схожий на процес створення заголовка. Щоб створити такий, створіть новий шаблон нижнього колонтитула, наприклад:
Потім визначтеся з шаблоном. Колонтитули бувають різних форм і розмірів. Деякі містять інформацію про фірму, а інші мають контактні форми. Виберіть шаблон, який відповідає вашим вимогам.
Шаблон, який ми обрали для нашого веб-сайту, виглядає наступним чином:
Зміни нижнього колонтитула
Ви побачите заголовок, щойно почнете редагувати (якщо встановите умову, щоб він з’являвся на всіх сторінках).
Змініть нижній колонтитул за потребою; Ось як виглядає наша редакція:
Опублікуйте нижній колонтитул після його завершення:
Закінчений продукт
Ось як виглядає готовий результат. На нашому веб-сайті тепер використовуються і верхній, і нижній колонтитул:
Перегляньте розділи верхнього та нижнього колонтитулів на реагування.
Це найважливіший етап, і ви повинні переконатися, що ваші розділи верхнього та нижнього колонтитулів реагують. Оскільки меню на повну ширину зазвичай не підходить для мобільного перегляду, ви повинні знати, як ваш дизайн відображатиметься на екрані мобільного пристрою. Відповідні перемикачі внизу розділу бічної панелі Elementor можуть змінювати версії для мобільних пристроїв і вкладок.
Ви можете перевірити чутливість свого верхнього та нижнього колонтитула різними способами. Для екс amp ля, ви можете використовувати такі інструменти , як Browserstack, Crossbrowser тестування і Google Resizer , щоб переконатися , що веб - сторінок є відгуком , наскільки це можливо. Ви також можете зробити це вручну, експериментуючи з різними пристроями.
Доведення справи до кінця
Сподіваюся, цей посібник допоміг вам швидко розробити унікальні розділи верхнього та нижнього колонтитулів за допомогою Elementor Pro. WordPress має багато функцій, але він допускає лише кілька модифікацій в розділах верхнього та нижнього колонтитулів, нарешті виправлених за допомогою конструктора сторінок Elementor Pro. Завдяки набагато кращому контролю над елементами сайту ви можете краще продемонструвати бачення свого сайту. Крім того, функціональність Elementor була покращена за допомогою безкоштовних доповнень, що дозволяє користувачам налаштовувати свої веб-сайти з більш розширеними можливостями.
