Градієнти¶

У цьому розділі ви дізнаєтеся, як це зробити:

Додайте градієнт до розділу або заголовка.
Додайте власний градієнт до палітри Конструктора веб-сайтів.

Standard¶

Стандартно, кілька градієнтів можна вибрати безпосередньо з конструктора веб-сайтів. Однак для користувацьких тем градієнти потрібно додавати безпосередньо в тег section з атрибутом style.

Використання

<section class="s_text_image" data-snippet="s_text_image" data-name="Text - Image" style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) !important;">
    <!-- Content -->
</section>

Щоб застосувати градієнт до тексту, використовуйте тег font з класом text-gradient.

<h2>
    <font class="text-gradient" style="background-image: linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%);">A Section Subtitle</font>
</h2>

Користувацький¶

Додайте власний градієнт до конструктора веб-сайтів. Таким чином, користувач зможе легко використовувати його, не створюючи вручну повторно.

/website_airproof/data/gradients.xml¶

<record id="colorpicker" model="ir.ui.view">
   <field name="key">website_airproof.colorpicker</field>
   <field name="name">Custom Gradients</field>
   <field name="type">qweb</field>
   <field name="inherit_id" ref="web_editor.colorpicker"/>
   <field name="arch" type="xml">
      <xpath expr="//div[@data-name='predefined_gradients']/t[@t-set='gradients']" position="after">
         <t t-set="gradients" t-value="gradients + ['linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)']" />
      </xpath>
   </field>
</record>

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