Obecné téma vzhledu¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
Примітка
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s Background by:
Click Save to apply the changes to the website.
Кольори¶
Editor webu Odoo obsahuje dva hlavní typy barev: barvy tématu a stavové barvy.
Кольори теми¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
Порада
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
Примітка
Зміна кольорової схеми автоматично оновлює кольори як типової схеми, так і будівельних блоків, які її використовують.
Кольори статусу¶
Кольори статусу вказують на статус певних дій (наприклад, Успішно, Попередження тощо). Вони використовуються у спливаючих повідомленнях, які з’являються для надання зворотного зв’язку користувачам і відвідувачам вебсайту. Щоб налаштувати Кольори статусу вебсайту, прокрутіть донизу до розділу Розширені налаштування і клацніть на крапки, щоб змінити їхній колір.
Example
Інформація про успішну дію на вебсайті відображається зеленим кольором.
Шрифти¶
Odoo дозволяє налаштувати сімейство шрифтів і розмір шрифту елементів вебсайту, включаючи абзаци та заголовки, кнопки та поля введення.
Розмір шрифту: у розділах Абзац, Заголовки, Кнопка та Поля введення використовуйте поле Розмір шрифту, щоб встановити типовий розмір. Клацніть значок (Перемкнути додаткові параметри), щоб розгорнути розділ і визначити власні розміри (наприклад, залежно від рівня заголовка, розміру кнопки тощо).
Сімейство шрифту: У розділах Абзац, Заголовки і Кнопка виберіть шрифт з випадаючого меню.
Примітка
Якщо вибрано Системні шрифти, Odoo використовує рідні шрифти, які вже встановлені в операційній системі відвідувача. Наприклад, Android використовує Roboto як типовий системний шрифт.
Спеціальні шрифти¶
Щоб додати власний шрифт, який не доступний типово в Odoo, клацніть спадне меню Сімейство шрифтів і виберіть Додати власний шрифт внизу. У спливаючому вікні Додайте шрифт Google або завантажте власний шрифт:
Щоб додати шрифт Google, відкрийте спадне меню Виберіть шрифт Google і виберіть потрібний шрифт. Вимкніть параметр Завантажувати шрифт із серверів Google, якщо ваш вебсайт працює з місця, де регуляторні вимоги потребують відповідності законам, таким як, але не обмежуючись ними, GDPR Європейського Союзу. Це гарантує, що шрифт Google зберігатиметься на сервері вебсайту, а не на серверах Google.
Щоб завантажити Власний шрифт зі свого комп’ютера, клацніть Вибрати файл.
Після завершення клацніть Зберегти та перезавантажити.
Порада
Попередній перегляд вибраного шрифту відображається в правій частині вікна.
Стилі¶
Зовнішній вигляд елементів вебсайту можна додатково налаштувати. Наприклад, ви можете налаштувати абзаци та заголовки, кнопки, посилання та поля введення.
Абзаци та заголовки¶
Розділи Абзац і Заголовки пропонують додаткові параметри стилю для цих текстових елементів. Ви можете:
Змінити налаштування шрифту.
Налаштувати Висоту рядка, щоб визначити відстань між рядками тексту.
Налаштувати Поля, щоб визначити відстань навколо абзаців і заголовків.
Кнопки¶
Щоб налаштувати стиль основних і додаткових кнопок вебсайту, перейдіть до розділу Кнопка і відредагуйте відповідні параметри:
Відкрийте спадне меню поруч із полями Основний стиль або Додатковий стиль, щоб змінити стиль для кожного типу кнопок, наприклад Заповнення, Контур або Плоска. Під час вибору Контур нижче з’являється параметр Ширина межі, який дозволяє налаштувати ширину контуру кнопки.
Змінити налаштування шрифту.
Налаштуйте Відступи, щоб змінити проміжки навколо міток кнопок.
Використовуйте опцію Округлення кутів, щоб налаштувати радіус меж кнопок.
Додайте анімацію при натисканні кнопки в розкривному меню Ефект при натисканні.
Порада
Щоб визначити власні розміри Маленький та Великий для Відступів, Розміру шрифту та Округлення кутів кнопок, натисніть значок (Перемкнути додаткові параметри), а потім використовуйте відповідні поля.
Посилання¶
У розділі Посилання відкрийте спадне меню поруч із Стиль посилання, щоб вибрати зовнішній вигляд посилань на веб-сайті. Ви можете вибрати:
Без підкреслення;
Підкреслення при наведенні; або
Завжди підкреслено.
Поля введення¶
Щоб налаштувати стиль полів введення веб-сайту, перейдіть до розділу Поля введення і відредагуйте відповідні параметри:
Налаштуйте Відступи, щоб змінити проміжки навколо полів.
Змінити налаштування шрифту.
Налаштуйте Ширину межі навколо полів.
Визначте Радіус межі, щоб округлити кути полів.
Виберіть колір Фону, щоб заповнити поля.
Розширені налаштування¶
Додаткові налаштування можна налаштувати в розділі Розширені, наприклад показ або приховування заголовка, використання Вставки коду для підтвердження веб-сайту через HTML-тег та налаштування кольорів статусу і Відтінків сірого.
Ви також можете налаштувати Google Maps для відображення карт і ввімкнення функцій геолокації на веб-сайті, наприклад, на сторінці Зв’яжіться з нами та в певних фрагментах. Щоб налаштувати цей параметр:
Перейдіть до вашого облікового запису Google.
Увімкніть Maps Static API, Maps JavaScript API та Places API.
Важливо
Не вмикайте Places API (New), оскільки він ще не підтримується Odoo.
Використання Google APIs може вимагати оплати Google.
Створіть ключ API і скопіюйте його.
У редакторі веб-сайту Odoo перейдіть на вкладку Тема, і в розділі Додатково натисніть Власний ключ поруч з Google Map.
Вставте згенерований ключ API в поле Ключ API.
Натисніть Зберегти.