Налаштування меню заголовка та Divi; налаштування заголовка

Оновлено 16.07.2019 | Опубліковано 23.01.2019 | 136 відгуків

Як створити меню в WordPress, Як? 'Або' Що налаштувати заголовок сайту, створеного за темою Divi, де знайти варіанти налаштування тощо ... Так багато запитань, на які відповімо в цій статті. Я пропоную вам повний файл на Заголовки та меню Divi. Ось програма:

Оголошення: Ця стаття містить партнерські посилання, які ви легко впізнаєте. Класичні посилання мають фіолетовий колір, а спонсоровані - рожевий .

1 - Створіть головне меню свого веб-сайту WordPress

Перш ніж змогти налаштувати заголовок та меню Divi, ви повинні володіти елементами, які відображатимуться в головна навігація вашого сайту. Такими елементами можуть бути:

• сторінки,
• статей,
• посилання,
• категорії,
• теги.

Крок 1: Створіть пункти меню

Першим кроком є створювати сторінки (прийом, послуги, контакти, про тощо ...) і, можливо, категорії блогу. Ці елементи повинні мають статус "опубліковано" щоб можна було використовувати в головному меню. Тому ви не зможете додавати до свого меню сторінки з статус "чернетки".

Крок 2: Створіть своє головне меню

Перейдіть на вкладку Зовнішній вигляд> Меню. Просто введіть назву свого меню у спеціальне поле та натисніть на "Створити меню".

Після створення меню ви зможете перевірити елементи, які потрібно додати до свого меню. Список доступних елементів знаходиться зліва на екрані. Ці елементи класифікуються за типом (сторінки, статті, персоналізовані посилання, категорії).

Просто перевірте потрібні елементи (ті, що ви опублікували/створили вище за течією), а потім натисніть Додати до меню.

Крок 3: організуйте структуру головного меню

Ви можете перетягувати кожен пункт меню, щоб змінити їх порядок. Найвищим елементом буде крайній лівий пункт головного меню - найнижчим буде крайній правий елемент.

Якщо ви змістите один зі своїх елементів праворуч, він стане а підпункт.

Крок 4: призначте розташування своєму меню

Не забудьте призначити місце для свого меню. Без цього ваше меню не буде видно на лицьовій стороні (на стороні відвідувача). Поставте прапорець " Головне меню ".

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

Щоб краще зрозуміти, перегляньте це коротке відео:

Примітка: створення головного меню для сайту не залежить від теми, це вбудована функція WordPress. З іншого боку, вигляд основної навігації залежить від теми, яку ви використовуєте. І це ми побачимо в іншій частині цієї статті.

Чи знали ви, що ви можете протестувати Divi безкоштовно? Перейдіть на цю сторінку та натисніть "Спробувати БЕЗКОШТОВНО"

2 - Видаліть логотип Divi та додайте свій

Тепер, коли ваше головне меню створено, ви зможете його налаштувати.

Потім перейдіть на вкладку Divi> Параметри теми> Логотип. Натисніть на Завантажити і виберіть своє зображення з бібліотеки або завантажте його з комп’ютера.

Цей крок надзвичайно простий ...

3 - Виберіть тип заголовка, запропонований Divi

Тепер у вас є всі карти в руках, щоб почати визначати тип заголовка, який ви віддаєте перевагу.

Перейдіть на вкладку Зовнішній вигляд> Налаштування> Заголовок та навігація> Формат заголовка.

У спадному меню Divi пропонує 5 типів заголовків:

• За замовчуванням
• Центр
• Вбудований логотип з центром
• Вставте
• Повноекранний

З вашого вибору виникнуть різні варіанти конфігурації, які ми детально розглянемо.

3.1 - Заголовок за замовчуванням

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

Цей заголовок за замовчуванням надає кілька варіантів:

Варіант 1: "Сховати панель навігації, якщо прокрутка відсутня"

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

Коли користувач знаходиться у верхній частині сторінки, навігація зникає.

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

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

Варіант 2: "Активувати вертикальну навігацію"

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

3.2 - Центрований заголовок

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

Заголовок із центром також пропонує ті самі параметри, що і заголовок за замовчуванням, а саме:

• "Активувати вертикальну навігацію": у цьому випадку бічне меню буде виглядати як бічне меню за замовчуванням, за винятком того, що елементи навігації будуть центровані замість вирівнювання за лівим краєм.
• "Сховати панель навігації, якщо немає прокрутки"

3.3 - Центрований вбудований заголовок логотипу

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

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

3.4 - Заголовок слайда

Заголовок Slide In, як випливає з назви, пропонує меню, яке ковзає праворуч, коли користувач натискає піктограму меню (гамбургер). Крім того, якщо вам не подобається цей бургер, ви можете скористатися безкоштовним плагіном, щоб змінити його вигляд.

За замовчуванням фон цього меню синій, але не хвилюйтесь, ви можете налаштувати це меню на вкладці Зовнішній вигляд> Персоналізація> Верхній колонтитул та навігація> Налаштування слайдів та повноекранні налаштування заголовка.

У параметрах меню «Слайд в» ви можете:

1. Показувати чи ні рядок пошуку
2. Встановіть ширину меню
3. Визначте розмір різних шрифтів
4. Виберіть шрифт меню
5. Виберіть колір тла, а також колір посилань у меню.

3.5 - Повноекранний заголовок

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

Параметри налаштування такі ж, як у меню Slide In. Ви також можете визначити непрозорість кольору фону.

Потрібні додаткові ресурси на Divi? Відвідайте блог ElegantThemes, який наповнений ідеями та навчальними посібниками !

4 - Визначте вигляд пунктів меню Divi

Тепер, коли ви вибрали тип заголовка, ви зможете визначити вигляд елементів у вашому меню.

Більшість опцій, пропонованих Divi, можна знайти на вкладці Зовнішній вигляд> Налаштування> Заголовок та навігація> Основна панель меню. На цій вкладці ви зможете:

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

Для заголовків "Slide In" та "Full Screen" ви знайдете деякі з цих параметрів на вкладці Зовнішній вигляд> Налаштування> Заголовок та навігація> Вставте та налаштування заголовка на весь екран.

5 - Кілька порад щодо налаштування головного меню Divi

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

Порада No1: видаліть сіру лінію під меню

Ви помітили, що не так? Ця тонка сіра лінія, яка обмежує меню Divi ... Ви хочете від неї позбутися? Це дуже просто, перейдіть на вкладку Зовнішній вигляд> Налаштування> Додатковий CSS і додайте цей простий шматок коду:

Порада No2: додайте фонове зображення в головне меню

Все ще на вкладці Зовнішній вигляд> Налаштування> Додатковий CSS Ви можете додати цей код. Зверніть увагу, що ви можете адаптувати його до потреб вашого фонового зображення:

Порада №3: ​​додайте ефект до наведення курсора на пункти меню

За допомогою цього простого фрагмента коду CSS ви можете відобразити рядок, який з’являється при наведенні курсора на кожен елемент, що становить меню Divi:

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

Порада No4: додайте зображення до мега-меню

Щоб додати зображення до мега-меню Divi, перейдіть до цього посібника або зверніться до офіційної документації щодо створення простого мега-меню (без зображень).

Порада 5: повністю видаліть головне меню

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

Порада 6: встановіть меню у верхній частині екрана лише на прокрутку

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

Порада № 7: виправте головне меню внизу екрана

У тому ж дусі, що і попередній підручник, ви можете легко виправити головне меню свого сайту внизу екрана. Це дуже просто: дотримуйтесь цього підручника, щоб отримати меню з фіксованим дном.

6 - Ресурси для модифікації меню Divi

Іноді простих маленьких шматочків коду CSS недостатньо, щоб досягти того, що ви хочете ... Ось деякі інші шляхи для вивчення:

• Мммм - Могутній виробник заголовків і меню: цей плагін для Divi пропонує вам робити надзвичайні речі. Ви можете вибрати з десяти різних заголовків Divi. Є безліч варіантів зміни значка гамбургер, створення мега-меню та іншого! Див. Приклад на відео вище | Відкрийте плагін.
• Інтегруйте конструктор Divi у заголовок Divi: PavéNum пропонує підручник з того, як інтегрувати використання Divi Builder у заголовок Divi завдяки хукам. Запрошую вас відвідати цю сторінку, якщо ви хочете дізнатись більше.
• Чотиримісне меню: цей плагін дозволяє створити власне мега-меню для ваших проектів Divi. Відкрийте плагін.
• Додайте піктограми в меню Divi: Michèle від Divi Soup пропонує безкоштовно завантажити персоналізований макет заголовка із значками Font Awesome. Завантажте тут.
• Використовуйте заголовок Divi за замовчуванням одночасно з заголовком Slide In: Michèle від Divi Soup (знову!) Пропонує вам підручник з поєднання двох типів меню одночасно. Відкрийте підручник.

---