گرادیان‌ها

در این فصل خواهید آموخت چگونه:

• یک گرادیان به یک section یا عنوان اضافه کنید.

• یک گرادیان سفارشی را به پالت ابزار ساخت وب‌سایت اضافه کنید.

استاندارد

به‌طور استاندارد، چندین گرادیان را می‌توان مستقیماً از ابزار ساخت وب‌سایت انتخاب کرد. با این حال، برای قالب‌های سفارشی، گرادیان‌ها باید مستقیماً در تگ 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/static/src/website_builder/gradients.js

import { ColorPickerGradientTab } from "@html_editor/main/font/color_picker_gradient_tab";
import { registry } from "@web/core/registry";
import { _t } from "@web/core/l10n/translation";

export class AirproofColorPickerGradientTab extends ColorPickerGradientTab {
   setup() {
      super.setup();
      this.DEFAULT_GRADIENT_COLORS = [
         ...this.DEFAULT_GRADIENT_COLORS,
         "linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)",
      ];
   }
}

const colorPickerTabs = registry.category("color_picker_tabs");

colorPickerTabs.remove("html_editor.gradient");
colorPickerTabs.add(
   "html_editor.gradient",
   {
      id: "gradient",
      name: _t("Gradient"),
      component: AirproofColorPickerGradientTab,
   },
   { sequence: 60 }
);

توجه

فایل JavaScript را به باندل website.website_builder_assets اضافه کنید تا ویرایشگر آن را بارگذاری کند.