Верхні та нижні колонтитули веб-сайту є важливими елементами. У більшості випадків заголовок надає навігаційні посилання, які спрощують навігацію до різних частин веб-сайту. З іншого боку, нижній колонтитул містить важливу інформацію, яка може знадобитися відвідувачам веб-сайту, наприклад адресу компанії або контактну інформацію, щоб згадати кілька 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 Testing і Google Resizer, щоб переконатися, що ваші веб-сторінки максимально адаптивні. Ви також можете зробити це вручну, експериментуючи з різними пристроями.
Доведення справи до кінця
Сподіваюся, цей посібник допоміг вам швидко розробити унікальні розділи верхнього та нижнього колонтитулів за допомогою Elementor Pro. WordPress має багато функцій, але він дозволяє вносити лише деякі зміни в розділи верхнього та нижнього колонтитулів, остаточно виправлені за допомогою конструктора сторінок Elementor Pro. Маючи набагато кращий контроль над елементами свого сайту, тепер ви можете краще продемонструвати бачення свого сайту. Крім того, функціональні можливості Elementor було покращено завдяки використанню безкоштовних аддонів, що дозволяє користувачам налаштовувати свої веб-сайти з більш розширеними можливостями.
