Додавання мовного меню
Мовне меню — це специфічний елемент у шапці та підвалі сайту, який дозволяє відвідувачам переключатися між мовами на вашому багатомовному сайті. Після натискання цей елемент перенаправляє користувачів на вибрану мовну версію вашого сайту.
Підказка: дізнайтеся, як створити багатомовний сайт на нашій платформі в статті Створення багатомовного сайту.
Наразі на платформі доступно два варіанти цього елементу: це Мовне меню та Мовні посилання. Далі у статті ми розглянемо їхню різницю та ситуації, де краще використати той чи інший елемент.
Елемент Мовне меню для посилань в межах одного сайту.
Елемент Мовні посилання на сторонні сайти
Аби встановити мовне меню на вашому сайті, наведіть курсором на порожній контейнер та натисніть на «плюс», далі виберіть один з доступних елементів у вікні, що спливе:
Важливо: елемент Мовні посилання можна додати лише до шапки сайту або до рядків з горизонтальним потоком у підвалі вашого сайту. Елемент Мовне меню наразі доступний лише для шапки.
Елемент Мовне меню дозволяє вам уникнути налаштування переходів між різними версіями сторінки вручну, адже він синхронізується з налаштуваннями hreflang сторінок вашого сайту, які також проставляються автоматично при додаванні нової мовної версії чи копіюванні сторінки з однієї мовної версії в іншу.
Наведіть курсором на елемент та натисніть на «шестерню», аби відкрити його Налаштування:
У розділі Пункти ви можете бачити активні мови, та, за потреби, перейменувати їх для мовного меню:
Підказка: щоб посилання на необхідну мову відображалося у мовному меню, ця мовна версія сайту має бути видимою — для цього необхідно відкрити налаштування сайту і у розділі “Багатомовність” активувати перемикач навпроти необхідної мови, щоб біля нього було вказано “Видима”. Детальніше ви можете знайти у кроці №8 цього розділу інструкції.
У розділі Вигляд ви можете обрати структуру вашого мовного меню - чи воно буде горизонтальним, чи у формі випадного списку, та також обрати присутні у ньому елементи:
Відповідно до обраних у попередньому розділі параметрів, вам будут доступні різні Стилі цих параметрів, наприклад:
Підказка: натиснувши на шестерню біля налаштувань кольорів, ви відкриєте додаткові параметри.
Примітка: детальніше про роботу з тінями ви можете дізнатися у нашій статті.
У розділі Просунуті ви можете додавати власні CSS-класи до цього елементу, щоб за потреби звертатися до них у власному коді. Детальніше про додавання класів.
Важливо: рекомендуємо додавати нові сторінки мовних версій сайту шляхом спочатку створення сторінки однією мовою, після завершення роботи над сторінкою скопіювати її на необхідні мовні версії, де після цього їх перекладати на інші мови (див. крок №7 цієї статті). Цей метод не лише прискорить вашу роботу, але й таким чином сторінки будуть автоматично пов'язуватися між собою у мовному меню.
Якщо ви створювали нові сторінки мовної версії не шляхом копіювання сторінок іншої мовної версії сайту, то такі сторінки буде необхідно пов'язати вручну. Для цього необхідно перейти у налаштування сторінки, відкрити вкладку SEO та знизу у розділі hreflang натиснути кнопку Редагувати та вказати інші мовні версії цієї сторінки.
Примітка: якщо у налаштуваннях сторінки не вказано hreflang (посилання на інші мовні версії цієї сторінки), то на такій сторінці у мовному меню будуть посилання не на таку ж саму сторінку іншою мовою, а на головну сторінку іншої мовної версії сайту.
Підказка: ви можете дізнатися більше про hreflang у цій інструкції.
Цей елемент вже не синхронізується з налаштуваннями вашого сайту та сторінок - його потрібно налаштовувати повністю вручну, від списку мов до переходів на інші версії сторінок.
Важливо: даний елемент є менш рекомендованим, адже він є старішою версією мовного меню і нині призначений лише для створення багатомовного сайту в межах різних сайтів (на субдоменах). Це може бути доцільним лише у разі потреби створення багатомовного інтернет-магазину або блогу, що нині не є можливим у межах одного сайту.
Наведіть курсором на елемент та натисніть на «шестерню», аби відкрити його Налаштування:
У вікні, що спливе, ви можете вибрати Тип мовного меню — спосіб його відображення на сайті. За замовчуванням мовне меню виглядає як Випадний список. Оберіть опцію Горизонтальний, щоб змінити відображення мовного меню:
У налаштуваннях нижче ви також можете змінити Кількість мов у меню:
Важливо: максимальна кількість мов у мовному меню — 8.
У цих же налаштуваннях ви також можете змінити Стиль меню, який визначає, чи буде компонент відображати лише іконку мови, його назву або і те, й інше. Крім цього, ви можете налаштувати колір тексту при наведенні курсору:
Примітка: у типі меню Випадний список ви також можете встановити колір фону:
Ви можете редагувати іконку певної мови, натиснувши на саме зображення. Перегляньте статтю Налаштування іконок для отримання більш детальної інформації на цю тему.
Щоб відредагувати текст у меню, виділіть його та налаштуйте його відображення у вікні, що спливе. Натисніть на «ланцюжок», аби додати посилання на відповідну адресу сайту:
Важливо: при додаванні посилань до тексту у цьому елементі, потрібно, як й при роботі зі звичайним текстом, спочатку виділити його.
Після всіх змін, не забудьте опублікувати свій сайт, аби вони вступили в силу.
Важливо: якщо у вас немає можливості додати мовне меню у шапку або підвал сайту, це означає, що ви використовуєте застарілу версію блоку. Щоб отримати доступ до нових функцій та уникнути проблем із відображенням блоків на вашому сайті, додайте той самий блок наново з галереї.
Підказка: дізнайтеся, як створити багатомовний сайт на нашій платформі в статті Створення багатомовного сайту.
Наразі на платформі доступно два варіанти цього елементу: це Мовне меню та Мовні посилання. Далі у статті ми розглянемо їхню різницю та ситуації, де краще використати той чи інший елемент.
Елемент Мовне меню для посилань в межах одного сайту.
Елемент Мовні посилання на сторонні сайти
Додавання мовного меню
Аби встановити мовне меню на вашому сайті, наведіть курсором на порожній контейнер та натисніть на «плюс», далі виберіть один з доступних елементів у вікні, що спливе:
Важливо: елемент Мовні посилання можна додати лише до шапки сайту або до рядків з горизонтальним потоком у підвалі вашого сайту. Елемент Мовне меню наразі доступний лише для шапки.
Елемент Мовне меню для посилань в межах одного сайту
Елемент Мовне меню дозволяє вам уникнути налаштування переходів між різними версіями сторінки вручну, адже він синхронізується з налаштуваннями hreflang сторінок вашого сайту, які також проставляються автоматично при додаванні нової мовної версії чи копіюванні сторінки з однієї мовної версії в іншу.
Наведіть курсором на елемент та натисніть на «шестерню», аби відкрити його Налаштування:
У розділі Пункти ви можете бачити активні мови, та, за потреби, перейменувати їх для мовного меню:
Підказка: щоб посилання на необхідну мову відображалося у мовному меню, ця мовна версія сайту має бути видимою — для цього необхідно відкрити налаштування сайту і у розділі “Багатомовність” активувати перемикач навпроти необхідної мови, щоб біля нього було вказано “Видима”. Детальніше ви можете знайти у кроці №8 цього розділу інструкції.
У розділі Вигляд ви можете обрати структуру вашого мовного меню - чи воно буде горизонтальним, чи у формі випадного списку, та також обрати присутні у ньому елементи:
Відповідно до обраних у попередньому розділі параметрів, вам будут доступні різні Стилі цих параметрів, наприклад:
Підказка: натиснувши на шестерню біля налаштувань кольорів, ви відкриєте додаткові параметри.
Примітка: детальніше про роботу з тінями ви можете дізнатися у нашій статті.
У розділі Просунуті ви можете додавати власні CSS-класи до цього елементу, щоб за потреби звертатися до них у власному коді. Детальніше про додавання класів.
Важливо: рекомендуємо додавати нові сторінки мовних версій сайту шляхом спочатку створення сторінки однією мовою, після завершення роботи над сторінкою скопіювати її на необхідні мовні версії, де після цього їх перекладати на інші мови (див. крок №7 цієї статті). Цей метод не лише прискорить вашу роботу, але й таким чином сторінки будуть автоматично пов'язуватися між собою у мовному меню.
Якщо ви створювали нові сторінки мовної версії не шляхом копіювання сторінок іншої мовної версії сайту, то такі сторінки буде необхідно пов'язати вручну. Для цього необхідно перейти у налаштування сторінки, відкрити вкладку SEO та знизу у розділі hreflang натиснути кнопку Редагувати та вказати інші мовні версії цієї сторінки.
Примітка: якщо у налаштуваннях сторінки не вказано hreflang (посилання на інші мовні версії цієї сторінки), то на такій сторінці у мовному меню будуть посилання не на таку ж саму сторінку іншою мовою, а на головну сторінку іншої мовної версії сайту.
Підказка: ви можете дізнатися більше про hreflang у цій інструкції.
Елемент Мовні посилання на сторонні сайти
Цей елемент вже не синхронізується з налаштуваннями вашого сайту та сторінок - його потрібно налаштовувати повністю вручну, від списку мов до переходів на інші версії сторінок.
Важливо: даний елемент є менш рекомендованим, адже він є старішою версією мовного меню і нині призначений лише для створення багатомовного сайту в межах різних сайтів (на субдоменах). Це може бути доцільним лише у разі потреби створення багатомовного інтернет-магазину або блогу, що нині не є можливим у межах одного сайту.
Наведіть курсором на елемент та натисніть на «шестерню», аби відкрити його Налаштування:
У вікні, що спливе, ви можете вибрати Тип мовного меню — спосіб його відображення на сайті. За замовчуванням мовне меню виглядає як Випадний список. Оберіть опцію Горизонтальний, щоб змінити відображення мовного меню:
У налаштуваннях нижче ви також можете змінити Кількість мов у меню:
Важливо: максимальна кількість мов у мовному меню — 8.
У цих же налаштуваннях ви також можете змінити Стиль меню, який визначає, чи буде компонент відображати лише іконку мови, його назву або і те, й інше. Крім цього, ви можете налаштувати колір тексту при наведенні курсору:
Примітка: у типі меню Випадний список ви також можете встановити колір фону:
Ви можете редагувати іконку певної мови, натиснувши на саме зображення. Перегляньте статтю Налаштування іконок для отримання більш детальної інформації на цю тему.
Щоб відредагувати текст у меню, виділіть його та налаштуйте його відображення у вікні, що спливе. Натисніть на «ланцюжок», аби додати посилання на відповідну адресу сайту:
Важливо: при додаванні посилань до тексту у цьому елементі, потрібно, як й при роботі зі звичайним текстом, спочатку виділити його.
Після всіх змін, не забудьте опублікувати свій сайт, аби вони вступили в силу.
Важливо: якщо у вас немає можливості додати мовне меню у шапку або підвал сайту, це означає, що ви використовуєте застарілу версію блоку. Щоб отримати доступ до нових функцій та уникнути проблем із відображенням блоків на вашому сайті, додайте той самий блок наново з галереї.
Оновлено: 29/03/2024
Дякуємо!