Độ dốc

Trong chương này, bạn sẽ khám phá cách:

• Thêm dải màu vào một phần hoặc tiêu đề.

• Thêm dải màu của riêng bạn vào bảng Trình tạo trang web.

Tiêu chuẩn

Theo tiêu chuẩn, bạn có thể chọn một số độ dốc trực tiếp từ Trình tạo trang web. Tuy nhiên, đối với các chủ đề tùy chỉnh, bạn phải thêm gradient trực tiếp vào thẻ phần bằng thuộc tính style.

Sử dụng

<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>

Để áp dụng gradient cho văn bản, hãy sử dụng thẻ phông chữ với lớp 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>

Phong tục

Bạn cũng có thể thêm độ dốc tùy chỉnh của riêng mình vào Trình tạo trang web. Bằng cách này, người dùng có thể dễ dàng sử dụng chúng mà không cần phải tạo lại chúng theo cách thủ công.

/website_airproof/data/presets.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="website_id">1</field>
    <field name="arch" type="xml">
        <xpath expr="//*[@data-name='predefined_gradients']/*" position="before">
            <button class="w-50 o_we_color_btn" style="background-image: linear-gradient(145deg, rgb(5, 85, 94) 0%, rgb(0, 131, 148) 100%);" data-color="linear-gradient(145deg, rgb(5, 85, 94) 0%, rgb(0, 131, 148) 100%)"></button>
        </xpath>
    </field>
</record>