کنترل Background

کنترل Background به شما امکان می‌دهد ویژگی‌های پس‌زمینه زیر را تنظیم کنید:

• رنگ پس زمینه
• تصویر پس زمینه
• ویدئوی پس‌زمینه (به اسکریپت bricksBackgroundVideoInit نیاز دارد. نمونه کد زیر را ببینید)

تنظیمات مختلفی برای تصویر و ویدیوی پس‌زمینه وجود دارد. می‌توانید تنظیمات رنگ/تصویر/ویدیو را از طریق پارامتر exclude حذف کنید.

از آنجایی که کنترل Background به احتمال زیاد به‌عنوان یک تنظیم CSS عمل می‌کند، مثال زیر نشان می‌دهد که چگونه پارامتر css را برای اعمال آن در المان‌های HTML .prefix-test-wrapper تنظیم کنید.

برای افزودن یک ویدیوی پس‌زمینه، باید اسکریپت bricksBackgroundVideoInit را بارگیری کنید و از روش BricksFrontend::get_element_background_video_wrapper() برای ارائه آن استفاده کنید.

توجه

وقتی فقط می‌خواهید رنگ پس‌زمینه را تنظیم کنید، بهتر است از کنترل Color استفاده کنید. هنگام استفاده از تصویر پس‌زمینه یا ویدیو در بالای رنگ، کنترل پس‌زمینه راحت‌تر است.

class Prefix_Element_Background extends \Bricks\Element {
  // Required for background video
  public $scripts = ['bricksBackgroundVideoInit'];

  // Set builder controls
  public function set_controls() {
    $this->controls['exampleBackground'] = [ // Setting key
      'tab' => 'content',
      'label' => esc_html__( 'Background', 'bricks' ),
      'type' => 'background',
      'css' => [
        [
          'property' => 'background',
          'selector' => '.prefix-background-wrapper',
        ],
      ],
      'exclude' => [
        // 'color',
        // 'image',
        // 'parallax',
        // 'attachment',
        // 'position',
        // 'positionX',
        // 'positionY',
        // 'repeat',
        // 'size',
        // 'custom',
        // 'videoUrl',
        // 'videoScale',
      ],
      'inline' => true,
      'small' => true,
      'default' => [
        'color' => [
          'rgb' => 'rgba(255, 255, 255, .5)',
          'hex' => '#ffffff',
        ],
      ],
    ];
  }

  // Render element HTML
  public function render() {
    echo '<div class="prefix-background-wrapper">';

    // Background video
    echo BricksFrontend::get_element_background_video_wrapper(
      ['settings' => $settings],
      'exampleBackground' // Setting key
    );

    echo get_bloginfo( 'name' );

    echo '</div>';
  }
}