Розділ 4 - Налаштування, частина II¶

Створення власної форми фону¶

Фігури – це декоративні елементи, які можна застосовувати до фону або зображень. Це SVG-файли, які можна анімувати та налаштовувати за допомогою різних кольорів.

Щоб краще відповідати бажаній атмосфері веб-сайту, створіть власну форму фону, яку клієнт може повторно використовувати на різних блоках.

Створіть власну фігуру, використовуючи наступні налаштування:
- Оголосіть свою фігуру. Ви можете знайти оригінальну SVG-фігуру тут.
- Встановіть базовий колір фігури на зелений колір теми та додайте її до списку доступних фігур.

Перегляньте також

Дивіться довідкову документацію щодо додавання власні форми фону.

Порада

Будьте обережні, є один трюк!
У вашому SVG-файлі форми вам потрібно використовувати кольори зі стандартної палітри Odoo.
Тут я хочу, щоб він відповідав моєму основному кольору 1 (#CEF8A1). Тому у SVG-файлі потрібно використовувати колір 3 з палітри Odoo за замовчуванням (#3AADAA).

Solutions

Знайдіть рішення в нашому прикладі герметичності для:

оголошення форми у файлі shapes.xml.
додавання форми до списку завдяки primary_variable.scss та option.xml.

Базуючись на дизайні Airproof , застосуйте щойно додану фігуру до будівельного блоку Text-Image на головній сторінці:
- Переконайтеся, що форма знаходиться в правильному положенні.
- Встановіть його колір на світло-блакитний, як у темі.

Перегляньте також

Див. довідкову документацію щодо використання фонові фігури.

Порада

На відміну від стандартних фігур Odoo, під час застосування власної фігури до розділу, замініть web_editor на illustration у класі фігури.

Solutions

/website_airproof/data/pages/home.xml¶

<!-- Text-image block & Background shape -->
<section class="s_text_image o_cc o_cc3 o_colored_level pt120 pb96"
data-snippet="s_image_text" data-name="Image - Text" style="background-color: rgb(41, 128,
187);" data-oe-shape-data="{'shape': 'illustration/airproof/waves', 'colors': {'c1': '#BBE1FA'},
'flip': ['x']}">
   <div class="o_we_shape o_illustration_airproof_waves o_we_flip_x" style="background-image:
   url('/web_editor/shape/illustration%2Fairproof%2Fwaves.svg?c2=%23BBE1FA');
   background-position: 100% 100%;"/>
   [...]
</section>

Додати градієнт фону¶

Застосуйте власний градієнт фону до блоку ”Останні продукти”, переходячи від синього rgb(11, 142, 230) до темно-синього rgb(41, 128, 187).

Перегляньте також

Див. довідкову документацію щодо використання Градієнти.

Solutions

/website_airproof/data/pages/home.xml¶

<!-- Latest products section -->
<section class="s_parallax o_colored_level o_cc o_cc5 s_parallax_no_overflow_hidden pt40 pb32"
data-scroll-background-ratio="0" data-snippet="s_parallax" data-name="Parallax"
style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)
!important;">
   [...]
</section>

Анімації¶

Клієнту подобається загальний дизайн, але сторінка здається дещо статичною. Покращте інтерактивність сторінки за допомогою анімації, такої як «плавне поява», «поворот», «підстрибування» тощо. Її можна застосовувати до колонок, зображень, текстів, кнопок…

На основі герметичного дизайну анімуйте такі елементи:

текст першого слайда каруселі.
наліпка та фото дрона з першого слайду.
4 колонки з іконками.

Налаштуйте затримки анімації для плавніших переходів.

Перегляньте також

Див. довідкову документацію щодо застосування Анімації.

Solutions

Знайдіть рішення в нашому прикладі Airproof на home.xml.

Анімація зображення¶

<img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute
x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s;
--wanim-intensity: 30;"/>

<img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate
o_anim_zoom_out o_visible" alt="Drone"/>

Анімація тексту¶

<span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One
step</span>

Анімація колонок¶

<div class="o_grid_item o_colored_level g-height-7 g-col-lg-3 col-lg-3 text-center
o_anim_fade_in o_animate o_anim_from_bottom o_visible" style="z-index: 2;
grid-area: 6 / 1 / 12 / 4; --wanim-intensity: 15;">
</div>

Форми¶

Форми в Odoo дуже потужні. Вони можуть надсилати електронні листи безпосередньо до особистої поштової скриньки або інтегруватися безпосередньо з іншими додатками Odoo. Це чудово, оскільки одним з головних пріоритетів вашого клієнта є післяпродажне обслуговування. Тому контактну форму необхідно правильно налаштувати.

На основі герметичного дизайну створіть сторінку контактів. Не забудьте вимкнути сторінку за замовчуванням і додати посилання на нову сторінку до меню. Клієнт має такі запити щодо своєї контактної форми:

Поля Ім’я та адреса електронної пошти.
Поле Назва компанії.
Поле Умовний ПДВ відображається, лише якщо заповнено поле Назва компанії.
Усі поля мають бути обов’язковими для заповнення, окрім Назви компанії.
Надсилання форми має ініціювати надсилання електронного листа.
Після надсилання форми thank-you message має залишатися видимим на сторінці контактів.

Перегляньте також

Див. довідкову документацію щодо того, як:

деактивувати сторінки за замовчуванням,

створити нову сторінку,

Англійська додати пункт меню,

створити форму.

Порада

Щоб визначити правильний код для вашої форми:

Створіть тестову сторінку за допомогою Конструктора веб-сайтів.

Перетягніть потрібний вам будівельний блок і застосуйте правильний дизайн.

Використайте код, згенерований за допомогою Редактор HTML/SCSS.
Ви також можете знайти оригінальний код будівельних блоків в Odoo: odoo/addons/website/views/snippets/s_website_form.xml.

Solutions

Знайдіть рішення в нашому прикладі Airproof на contact.xml.

Редагувати на GitHub