渐变¶
在本章中,您将了解如何:
在部分或标题中添加渐变效果。
将您自己的渐变色添加到网站构建器调色板中。
标准¶
在标准模式下,您可以直接从网站构建器中选择多个渐变色。然而,对于自定义主题,您必须在 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>
要为文本应用渐变效果,请使用带有 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>
自定义¶
你也可以向网站构建器中添加自己的自定义渐变色。这样,用户就可以轻松使用它们,而无需手动重新创建。
/网站防尘/数据/预设.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>