* Fires before the builder's structure element classes are loaded.
do_action( 'et_builder_structure_elements_load' );
class ET_Builder_Section extends ET_Builder_Structure_Element {
* Sets up the element's properties.
$this->name = esc_html__( 'Section', 'et_builder' );
$this->plural = esc_html__( 'Sections', 'et_builder' );
$this->slug = 'et_pb_section';
$this->vb_support = 'on';
$this->settings_modal_toggles = array(
'title' => et_builder_i18n( 'Background' ),
'column_1' => array( 'name' => esc_html__( 'Column 1', 'et_builder' ) ),
'column_2' => array( 'name' => esc_html__( 'Column 2', 'et_builder' ) ),
'column_3' => array( 'name' => esc_html__( 'Column 3', 'et_builder' ) ),
'layout' => et_builder_i18n( 'Layout' ),
'title' => et_builder_i18n( 'Sizing' ),
'margin_padding' => array(
'title' => esc_html__( 'Spacing', 'et_builder' ),
'column_1' => array( 'name' => esc_html__( 'Column 1', 'et_builder' ) ),
'column_2' => array( 'name' => esc_html__( 'Column 2', 'et_builder' ) ),
'column_3' => array( 'name' => esc_html__( 'Column 3', 'et_builder' ) ),
'title' => esc_html__( 'CSS ID & Classes', 'et_builder' ),
'column_1' => array( 'name' => esc_html__( 'Column 1', 'et_builder' ) ),
'column_2' => array( 'name' => esc_html__( 'Column 2', 'et_builder' ) ),
'column_3' => array( 'name' => esc_html__( 'Column 3', 'et_builder' ) ),
'title' => et_builder_i18n( 'Custom CSS' ),
'column_1' => array( 'name' => esc_html__( 'Column 1', 'et_builder' ) ),
'column_2' => array( 'name' => esc_html__( 'Column 2', 'et_builder' ) ),
'column_3' => array( 'name' => esc_html__( 'Column 3', 'et_builder' ) ),
$this->advanced_fields = array(
'use_background_color' => 'fields_only',
'use_background_image' => true,
'use_background_color_gradient' => true,
'use_background_video' => true,
'use_background_color_reset' => 'fields_only',
'main' => 'div.et_pb_section%%order_class%%',
'background_color' => array(
'allow_player_pause' => array(
'default_on_front' => 'off',
'background_video_pause_outside_viewport' => array(
'default_on_front' => 'on',
'default_on_front' => 'off',
'parallax_method' => array(
'default_on_front' => 'on',
'module_alignment' => '%%order_class%%',
'module_alignment' => array(
'label' => esc_html__( 'Section Alignment', 'et_builder' ),
'main' => array( '%%order_class%% > .et_pb_row', '%%order_class%%.et_section_specialty > .et_pb_row' ),
'label' => esc_html__( 'Inner Width', 'et_builder' ),
'depends_show_if' => 'on',
'specialty_only' => 'yes',
'label' => esc_html__( 'Inner Max Width', 'et_builder' ),
'depends_show_if' => 'on',
'specialty_only' => 'yes',
'module_alignment' => array(
'label' => esc_html__( 'Row Alignment', 'et_builder' ),
'depends_show_if' => 'on',
'specialty_only' => 'yes',
'position_fields' => array(
$this->help_videos = array(
'name' => esc_html__( 'An introduction to Sections', 'et_builder' ),
* Get the settings fields data for this element.
public function get_fields() {
'label' => esc_html__( 'Show Inner Shadow', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'description' => esc_html__( 'Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'layout',
'default_on_front' => 'off',
'label' => esc_html__( 'Equalize Column Heights', 'et_builder' ),
'description' => esc_html__( 'Equalizing column heights will force all columns to assume the height of the tallest column in the row. All columns will have the same height, keeping their appearance uniform.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'specialty_only' => 'yes',
'use_custom_gutter' => array(
'label' => esc_html__( 'Use Custom Gutter Width', 'et_builder' ),
'description' => esc_html__( 'Enable this option to define custom gutter width for this section.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'specialty_only' => 'yes',
'label' => esc_html__( 'Gutter Width', 'et_builder' ),
'option_category' => 'layout',
'range_settings' => array(
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'specialty_only' => 'yes',
'validate_unit' => false,
'default_on_front' => (string) et_get_option( 'gutter_width', '3' ),
'description' => esc_html__( 'Gutter width controls the space between each column in a row. Lowering the gutter width will cause modules to become closer together.', 'et_builder' ),
'columns_background' => array(
'type' => 'column_settings_background',
'option_category' => 'configuration',
'toggle_slug' => 'background',
'specialty_only' => 'yes',
'columns_padding' => array(
'type' => 'column_settings_padding',
'option_category' => 'configuration',
'tab_slug' => 'advanced',
'toggle_slug' => 'margin_padding',
'specialty_only' => 'yes',
'default_on_front' => 'off',
'default_on_front' => 'off',
'affects' => array( 'inner_width', 'inner_max_width' ),
'type' => 'column_settings_css',
'option_category' => 'configuration',
'tab_slug' => 'custom_css',
'toggle_slug' => 'custom_css',
'columns_css_fields' => array(
'type' => 'column_settings_css_fields',
'option_category' => 'configuration',
'tab_slug' => 'custom_css',
'toggle_slug' => 'classes',
'custom_padding_last_edited' => array(
'tab_slug' => 'advanced',
'specialty_only' => 'yes',
'__video_background' => array(
'computed_callback' => array( 'ET_Builder_Module_Helper_ResponsiveOptions', 'get_video_background' ),
'computed_depends_on' => array(
'background_video_width',
'background_video_height',
'computed_minimum' => array(
'prev_background_color' => array(
'next_background_color' => array(
$column_fields = $this->get_column_fields(
'default_on_front' => 'off',
'parallax_method' => array(
'default_on_front' => 'on',
'background_color' => array(),
'background_size' => array(),
'background_position' => array(),
'background_repeat' => array(),
'background_blend' => array(),
'padding_top_bottom_link' => array(),
'padding_left_right_link' => array(),
'use_background_color_gradient' => array(),
'background_color_gradient_start' => array(),
'background_color_gradient_end' => array(),
'background_color_gradient_type' => array(),
'background_color_gradient_direction' => array(),
'background_color_gradient_direction_radial' => array(),
'background_color_gradient_start_position' => array(),
'background_color_gradient_end_position' => array(),
'background_color_gradient_overlays_image' => array(),
'background_video_mp4' => array(
'computed_affects' => array(
'background_video_webm' => array(
'computed_affects' => array(
'background_video_width' => array(
'computed_affects' => array(
'background_video_height' => array(
'computed_affects' => array(
'allow_player_pause' => array(
'computed_affects' => array(
'background_video_pause_outside_viewport' => array(
'computed_affects' => array(
'__video_background' => array(
'computed_callback' => array(
'get_column_video_background',
'computed_depends_on' => array(
'background_video_width',
'background_video_height',
'computed_minimum' => array(
'padding_top' => array( 'tab_slug' => 'advanced' ),
'padding_right' => array( 'tab_slug' => 'advanced' ),
'padding_bottom' => array( 'tab_slug' => 'advanced' ),
'padding_left' => array( 'tab_slug' => 'advanced' ),
'padding_top_bottom_link' => array( 'tab_slug' => 'advanced' ),
'padding_left_right_link' => array( 'tab_slug' => 'advanced' ),
'padding_%column_index%_tablet' => array(
'has_custom_index_location' => true,
'tab_slug' => 'advanced',
'padding_%column_index%_phone' => array(
'has_custom_index_location' => true,
'tab_slug' => 'advanced',
'padding_%column_index%_last_edited' => array(
'has_custom_index_location' => true,
'tab_slug' => 'advanced',
'module_id' => array( 'tab_slug' => 'custom_css' ),
'module_class' => array( 'tab_slug' => 'custom_css' ),
'custom_css_before' => array( 'tab_slug' => 'custom_css' ),
'custom_css_main' => array( 'tab_slug' => 'custom_css' ),
'custom_css_after' => array( 'tab_slug' => 'custom_css' ),
return array_merge( $fields, $column_fields );
* Get CSS fields transition of section.
public function get_transition_fields_css_props() {
$fields = parent::get_transition_fields_css_props();
// Section Dividers Height.
foreach ( array( 'top', 'bottom' ) as $placement ) {
// Inside sprintf, the double %% prints a literal '%' character.
'%%%%order_class%%%%.section_has_divider.et_pb_%1$s_divider .et_pb_%1$s_inside_divider',
$fields[ "{$placement}_divider_height" ] = array(
'background-size' => $selector,
* Check if current background is transparent background or not.
* @param string $background_color Background color.
* @return boolean Transparent color status.
public function is_transparent_background( $background_color = '' ) {
$page_setting_section_background = et_builder_settings_get( 'et_pb_section_background_color', get_the_ID() );
$is_empty_background_color = '' === $background_color && '' === $page_setting_section_background;
$is_layout_block = ET_GB_Block_Layout::is_layout_block() || ET_GB_Block_Layout::is_layout_block_preview();
return 'rgba(255,255,255,0)' === $background_color
|| ( $is_layout_block && $is_empty_background_color )
|| ( et_is_builder_plugin_active() && $is_empty_background_color );
* Check if current background should have initial background color.
* @param string $mode Preview mode.
public function is_initial_background_color( $mode = 'desktop' ) {
// Ensure $mode parameter not empty.
$mode = '' === $mode ? 'desktop' : $mode;
$device_suffix = 'desktop' !== $mode && 'hover' !== $mode ? "_{$mode}" : '';
$parallax = 'hover' === $mode ? et_pb_hover_options()->get_raw_value( 'parallax', $this->props ) : et_pb_responsive_options()->get_any_value( $this->props, "parallax{$device_suffix}", '', true );
$background_blend = 'hover' === $mode ? et_pb_hover_options()->get_raw_value( 'background_blend', $this->props ) : et_pb_responsive_options()->get_any_value( $this->props, "background_blend{$device_suffix}", '', true );
$use_gradient_value = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'use_background_color_gradient', $mode );
$background_image = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_image', $mode );
$bg_blend_default = self::$_->array_get( $this->fields_unprocessed, 'background_blend.default', '' );
$is_gradient_active = 'on' === $use_gradient_value;
$is_image_active = '' !== $background_image && 'on' !== $parallax;
$is_image_blend = '' !== $background_blend && $background_blend !== $bg_blend_default;
return $is_gradient_active && $is_image_active && $is_image_blend;
* Get parallax image background.
* @param string $base_name Background base.
* @return HTML Parallax backgrounds markup.
public function get_parallax_image_background( $base_name = 'background' ) {
$attr_prefix = "{$base_name}_";
$parallax_processed = array();
$parallax_background = '';
$hover_suffix = et_pb_hover_options()->get_suffix();
$preview_modes = array( $hover_suffix, '_phone', '_tablet', '' );
// Featured Image as Background.
$featured_placement = '';
$featured_image_src = '';
if ( $this->featured_image_background ) {
$featured_image = self::$_->array_get( $this->props, 'featured_image', '' );
$featured_placement = self::$_->array_get( $this->props, 'featured_placement', '' );
$featured_image_src_obj = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
$featured_image_src = isset( $featured_image_src_obj[0] ) ? $featured_image_src_obj[0] : '';