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( 'general' => array( 'toggles' => array( 'background' => array( 'title' => et_builder_i18n( 'Background' ), 'sub_toggles' => array( 'main' => '', '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' ) ), ), 'priority' => 80, ), ), ), 'advanced' => array( 'toggles' => array( 'layout' => et_builder_i18n( 'Layout' ), 'width' => array( 'title' => et_builder_i18n( 'Sizing' ), 'priority' => 65, ), 'margin_padding' => array( 'title' => esc_html__( 'Spacing', 'et_builder' ), 'sub_toggles' => array( 'main' => '', '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' ) ), ), 'priority' => 70, ), ), ), 'custom_css' => array( 'toggles' => array( 'classes' => array( 'title' => esc_html__( 'CSS ID & Classes', 'et_builder' ), 'sub_toggles' => array( 'main' => '', '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' ) ), ), ), 'custom_css' => array( 'title' => et_builder_i18n( 'Custom CSS' ), 'sub_toggles' => array( 'main' => '', '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( 'background' => 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', 'css' => array( 'important' => 'all', 'main' => 'div.et_pb_section%%order_class%%', ), 'options' => array( 'background_color' => array( 'default' => '', 'hover' => 'tabs', ), 'allow_player_pause' => array( 'default_on_front' => 'off', ), 'background_video_pause_outside_viewport' => array( 'default_on_front' => 'on', ), 'parallax' => array( 'default_on_front' => 'off', ), 'parallax_method' => array( 'default_on_front' => 'on', ), ), ), 'max_width' => array( 'css' => array( 'module_alignment' => '%%order_class%%', ), 'options' => array( 'module_alignment' => array( 'label' => esc_html__( 'Section Alignment', 'et_builder' ), ), ), 'extra' => array( 'inner' => array( 'css' => array( 'main' => array( '%%order_class%% > .et_pb_row', '%%order_class%%.et_section_specialty > .et_pb_row' ), ), 'options' => array( 'width' => array( 'label' => esc_html__( 'Inner Width', 'et_builder' ), 'depends_show_if' => 'on', 'specialty_only' => 'yes', ), 'max_width' => array( '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', ), ), ), ), ), 'fonts' => false, 'text' => false, 'button' => false, 'z_index' => array( 'default' => 'auto', ), 'position_fields' => array( 'default' => 'relative', ), ); $this->help_videos = array( array( 'id' => '3kmJ_mMVB1w', 'name' => esc_html__( 'An introduction to Sections', 'et_builder' ), ), ); } /** * Get the settings fields data for this element. * * @return array|array[] */ public function get_fields() { $fields = array( 'inner_shadow' => array( 'label' => esc_html__( 'Show Inner Shadow', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', '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', ), 'make_equal' => array( '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', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', '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', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'affects' => array( 'gutter_width', ), 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'specialty_only' => 'yes', ), 'gutter_width' => array( 'label' => esc_html__( 'Gutter Width', 'et_builder' ), 'type' => 'range', 'option_category' => 'layout', 'range_settings' => array( 'min' => 1, 'max' => 4, 'step' => 1, 'min_limit' => 1, 'max_limit' => 4, ), 'depends_show_if' => 'on', 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'specialty_only' => 'yes', 'validate_unit' => false, 'fixed_range' => true, 'default_on_front' => (string) et_get_option( 'gutter_width', '3' ), 'hover' => 'tabs', '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', 'priority' => 99, ), 'columns_padding' => array( 'type' => 'column_settings_padding', 'option_category' => 'configuration', 'tab_slug' => 'advanced', 'toggle_slug' => 'margin_padding', 'specialty_only' => 'yes', 'priority' => 99, ), 'fullwidth' => array( 'type' => 'hidden', 'default_on_front' => 'off', ), 'specialty' => array( 'type' => 'skip', 'default_on_front' => 'off', 'affects' => array( 'inner_width', 'inner_max_width' ), ), 'columns_css' => array( 'type' => 'column_settings_css', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'custom_css', 'priority' => 20, ), 'columns_css_fields' => array( 'type' => 'column_settings_css_fields', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'priority' => 20, ), 'custom_padding_last_edited' => array( 'type' => 'skip', 'tab_slug' => 'advanced', 'specialty_only' => 'yes', ), '__video_background' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Helper_ResponsiveOptions', 'get_video_background' ), 'computed_depends_on' => array( 'background_video_mp4', 'background_video_webm', 'background_video_width', 'background_video_height', ), 'computed_minimum' => array( 'background_video_mp4', 'background_video_webm', ), ), 'prev_background_color' => array( 'type' => 'skip', ), 'next_background_color' => array( 'type' => 'skip', ), ); $column_fields = $this->get_column_fields( 3, array( 'parallax' => array( 'default_on_front' => 'off', ), 'parallax_method' => array( 'default_on_front' => 'on', ), 'background_color' => array(), 'bg_img' => 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( '__video_background', ), ), 'background_video_webm' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_width' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_height' => array( 'computed_affects' => array( '__video_background', ), ), 'allow_player_pause' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_pause_outside_viewport' => array( 'computed_affects' => array( '__video_background', ), ), '__video_background' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Column', 'get_column_video_background', ), 'computed_depends_on' => array( 'background_video_mp4', 'background_video_webm', 'background_video_width', 'background_video_height', ), 'computed_minimum' => array( 'background_video_mp4', 'background_video_webm', ), ), '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. $selector = sprintf( '%%%%order_class%%%%.section_has_divider.et_pb_%1$s_divider .et_pb_%1$s_inside_divider', $placement ); $fields[ "{$placement}_divider_height" ] = array( 'height' => $selector, 'background-size' => $selector, ); } return $fields; } /** * Check if current background is transparent background or not. * * @param string $background_color Background color. * * @return boolean Transparent color status. * @since 3.24.1 */ 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. * * @since 3.24.1 * * @param string $mode Preview mode. * * @return boolean */ 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. * * @since 3.24.1 * @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_image = ''; $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] : ''; } foreach ( $preview_modes as $suffix ) { $is_hover = $hover_suffix === $suffix; // A. Bail early if hover or responsive settings disabled on mobile/hover. if ( '' !== $suffix ) { // Ensure responsive settings is enabled on mobile. if ( ! $is_hover && ! et_pb_responsive_options()->is_responsive_enabled( $this->props, $base_name ) ) { continue; } // Ensure hover settings is enabled. if ( $is_hover && ! et_pb_hover_options()->is_enabled( $base_name, $this->props ) ) { continue; } } // Prepare preview mode. $mode = '' !== $suffix ? str_replace( '_', '', $suffix ) : 'desktop'; $mode = $is_hover ? 'hover' : $mode; // B.1. Get inherited background value. $background_image = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$attr_prefix}image", $mode, $base_name, $this->fields_unprocessed ); $parallax = $is_hover ? et_pb_hover_options()->get_raw_value( 'parallax', $this->props ) : et_pb_responsive_options()->get_any_value( $this->props, "parallax{$suffix}", '', true ); $parallax_method = $is_hover ? et_pb_hover_options()->get_raw_value( 'parallax_method', $this->props ) : et_pb_responsive_options()->get_any_value( $this->props, "parallax_method{$suffix}", '', true ); // B.2. Set default value for parallax and parallax method on hover when they are empty. if ( $is_hover ) { $parallax = empty( $parallax ) ? et_pb_responsive_options()->get_any_value( $this->props, 'parallax', '', true ) : $parallax; $parallax_method = empty( $parallax_method ) ? et_pb_responsive_options()->get_any_value( $this->props, 'parallax_method', '', true ) : $parallax_method; } // B.3. Override background image with featured image if needed. if ( 'on' === $featured_image && 'background' === $featured_placement && '' !== $featured_image_src ) { $background_image = $featured_image_src; } // C.1. Parallax BG Class to inform if other modes exist. $parallax_classname = array(); if ( ( '_tablet' === $suffix || '' === $suffix ) && in_array( '_phone', $parallax_processed, true ) ) { $parallax_classname[] = 'et_parallax_bg_phone_exist'; } if ( '' === $suffix && in_array( '_tablet', $parallax_processed, true ) ) { $parallax_classname[] = 'et_parallax_bg_tablet_exist'; } if ( in_array( $hover_suffix, $parallax_processed, true ) ) { $parallax_classname[] = 'et_parallax_bg_hover_exist'; } // C.2. Set up parallax class and wrapper. if ( '' !== $background_image && 'on' === $parallax ) { $parallax_classname[] = 'et_parallax_bg'; if ( 'off' === $parallax_method ) { $parallax_classname[] = 'et_pb_parallax_css'; $inner_shadow = $this->props['inner_shadow']; if ( 'off' !== $inner_shadow ) { $parallax_classname[] = 'et_pb_inner_shadow'; } } // Parallax BG Class with suffix. if ( '' !== $suffix ) { $parallax_classname[] = "et_parallax_bg{$suffix}"; } $parallax_background .= sprintf( '
', esc_attr( implode( ' ', $parallax_classname ) ), esc_url( $background_image ) ); // set `.et_parallax_bg_wrap` border-radius. et_set_parallax_bg_wrap_border_radius( $this->props, $this->slug, '%%order_class%%' ); } // C.3. Hover parallax class. if ( '' !== $background_image && $is_hover ) { $this->add_classname( 'et_pb_section_parallax_hover' ); } array_push( $parallax_processed, $suffix ); } // Added classname for module wrapper. if ( '' !== $parallax_background ) { $this->add_classname( 'et_pb_section_parallax' ); } return $parallax_background; } /** * Generates the structure module's HTML output based on {@see ET_Builder_Section::$props}. * * @param array $atts List of unprocessed attributes. * @param mixed $content Content being processed. * @param string $function_name Slug of module that is used for rendering output. * * @return string The module's HTML output. */ public function render( $atts, $content, $function_name ) { $multi_view = et_pb_multi_view_options( $this ); $hover = et_pb_hover_options(); $sticky = et_pb_sticky_options(); $background_video_mp4 = $this->props['background_video_mp4']; $background_video_webm = $this->props['background_video_webm']; $inner_shadow = $this->props['inner_shadow']; $parallax = $this->props['parallax']; $parallax_method = $this->props['parallax_method']; $fullwidth = $this->props['fullwidth']; $specialty = $this->props['specialty']; $background_color_1 = $this->props['background_color_1']; $background_color_2 = $this->props['background_color_2']; $background_color_3 = $this->props['background_color_3']; $bg_img_1 = $this->props['bg_img_1']; $bg_img_2 = $this->props['bg_img_2']; $bg_img_3 = $this->props['bg_img_3']; $background_size_1 = $this->props['background_size_1']; $background_size_2 = $this->props['background_size_2']; $background_size_3 = $this->props['background_size_3']; $background_position_1 = $this->props['background_position_1']; $background_position_2 = $this->props['background_position_2']; $background_position_3 = $this->props['background_position_3']; $background_repeat_1 = $this->props['background_repeat_1']; $background_repeat_2 = $this->props['background_repeat_2']; $background_repeat_3 = $this->props['background_repeat_3']; $background_blend_1 = $this->props['background_blend_1']; $background_blend_2 = $this->props['background_blend_2']; $background_blend_3 = $this->props['background_blend_3']; $parallax_1 = $this->props['parallax_1']; $parallax_2 = $this->props['parallax_2']; $parallax_3 = $this->props['parallax_3']; $parallax_method_1 = $this->props['parallax_method_1']; $parallax_method_2 = $this->props['parallax_method_2']; $parallax_method_3 = $this->props['parallax_method_3']; $padding_top_1 = $this->props['padding_top_1']; $padding_right_1 = $this->props['padding_right_1']; $padding_bottom_1 = $this->props['padding_bottom_1']; $padding_left_1 = $this->props['padding_left_1']; $padding_top_2 = $this->props['padding_top_2']; $padding_right_2 = $this->props['padding_right_2']; $padding_bottom_2 = $this->props['padding_bottom_2']; $padding_left_2 = $this->props['padding_left_2']; $padding_top_3 = $this->props['padding_top_3']; $padding_right_3 = $this->props['padding_right_3']; $padding_bottom_3 = $this->props['padding_bottom_3']; $padding_left_3 = $this->props['padding_left_3']; $padding_1_tablet = $this->props['padding_1_tablet']; $padding_2_tablet = $this->props['padding_2_tablet']; $padding_3_tablet = $this->props['padding_3_tablet']; $padding_1_phone = $this->props['padding_1_phone']; $padding_2_phone = $this->props['padding_2_phone']; $padding_3_phone = $this->props['padding_3_phone']; $padding_1_last_edited = $this->props['padding_1_last_edited']; $padding_2_last_edited = $this->props['padding_2_last_edited']; $padding_3_last_edited = $this->props['padding_3_last_edited']; $gutter_width = $this->props['gutter_width']; $gutter_width_hover = $this->get_hover_value( 'gutter_width' ); $make_equal = $this->props['make_equal']; $global_module = $this->props['global_module']; $use_custom_gutter = $this->props['use_custom_gutter']; $module_id_1 = $this->props['module_id_1']; $module_id_2 = $this->props['module_id_2']; $module_id_3 = $this->props['module_id_3']; $module_class_1 = $this->props['module_class_1']; $module_class_2 = $this->props['module_class_2']; $module_class_3 = $this->props['module_class_3']; $custom_css_before_1 = $this->props['custom_css_before_1']; $custom_css_before_2 = $this->props['custom_css_before_2']; $custom_css_before_3 = $this->props['custom_css_before_3']; $custom_css_main_1 = $this->props['custom_css_main_1']; $custom_css_main_2 = $this->props['custom_css_main_2']; $custom_css_main_3 = $this->props['custom_css_main_3']; $custom_css_after_1 = $this->props['custom_css_after_1']; $custom_css_after_2 = $this->props['custom_css_after_2']; $custom_css_after_3 = $this->props['custom_css_after_3']; $custom_css_before_1_hover = $this->get_hover_value( 'custom_css_before_1' ); $custom_css_before_2_hover = $this->get_hover_value( 'custom_css_before_2' ); $custom_css_before_3_hover = $this->get_hover_value( 'custom_css_before_3' ); $custom_css_main_1_hover = $this->get_hover_value( 'custom_css_main_1' ); $custom_css_main_2_hover = $this->get_hover_value( 'custom_css_main_2' ); $custom_css_main_3_hover = $this->get_hover_value( 'custom_css_main_3' ); $custom_css_after_1_hover = $this->get_hover_value( 'custom_css_after_1' ); $custom_css_after_2_hover = $this->get_hover_value( 'custom_css_after_2' ); $custom_css_after_3_hover = $this->get_hover_value( 'custom_css_after_3' ); $custom_css_before_1_sticky = $sticky->get_value( 'custom_css_before_1', $this->props, '' ); $custom_css_before_2_sticky = $sticky->get_value( 'custom_css_before_2', $this->props, '' ); $custom_css_before_3_sticky = $sticky->get_value( 'custom_css_before_3', $this->props, '' ); $custom_css_main_1_sticky = $sticky->get_value( 'custom_css_main_1', $this->props, '' ); $custom_css_main_2_sticky = $sticky->get_value( 'custom_css_main_2', $this->props, '' ); $custom_css_main_3_sticky = $sticky->get_value( 'custom_css_main_3', $this->props, '' ); $custom_css_after_1_sticky = $sticky->get_value( 'custom_css_after_1', $this->props, '' ); $custom_css_after_2_sticky = $sticky->get_value( 'custom_css_after_2', $this->props, '' ); $custom_css_after_3_sticky = $sticky->get_value( 'custom_css_after_3', $this->props, '' ); $use_background_color_gradient_1 = $this->props['use_background_color_gradient_1']; $use_background_color_gradient_2 = $this->props['use_background_color_gradient_2']; $use_background_color_gradient_3 = $this->props['use_background_color_gradient_3']; $background_color_gradient_type_1 = $this->props['background_color_gradient_type_1']; $background_color_gradient_type_2 = $this->props['background_color_gradient_type_2']; $background_color_gradient_type_3 = $this->props['background_color_gradient_type_3']; $background_color_gradient_direction_1 = $this->props['background_color_gradient_direction_1']; $background_color_gradient_direction_2 = $this->props['background_color_gradient_direction_2']; $background_color_gradient_direction_3 = $this->props['background_color_gradient_direction_3']; $background_color_gradient_direction_radial_1 = $this->props['background_color_gradient_direction_radial_1']; $background_color_gradient_direction_radial_2 = $this->props['background_color_gradient_direction_radial_2']; $background_color_gradient_direction_radial_3 = $this->props['background_color_gradient_direction_radial_3']; $background_color_gradient_start_1 = $this->props['background_color_gradient_start_1']; $background_color_gradient_start_2 = $this->props['background_color_gradient_start_2']; $background_color_gradient_start_3 = $this->props['background_color_gradient_start_3']; $background_color_gradient_end_1 = $this->props['background_color_gradient_end_1']; $background_color_gradient_end_2 = $this->props['background_color_gradient_end_2']; $background_color_gradient_end_3 = $this->props['background_color_gradient_end_3']; $background_color_gradient_start_position_1 = $this->props['background_color_gradient_start_position_1']; $background_color_gradient_start_position_2 = $this->props['background_color_gradient_start_position_2']; $background_color_gradient_start_position_3 = $this->props['background_color_gradient_start_position_3']; $background_color_gradient_end_position_1 = $this->props['background_color_gradient_end_position_1']; $background_color_gradient_end_position_2 = $this->props['background_color_gradient_end_position_2']; $background_color_gradient_end_position_3 = $this->props['background_color_gradient_end_position_3']; $background_color_gradient_overlays_image_1 = $this->props['background_color_gradient_overlays_image_1']; $background_color_gradient_overlays_image_2 = $this->props['background_color_gradient_overlays_image_2']; $background_color_gradient_overlays_image_3 = $this->props['background_color_gradient_overlays_image_3']; $background_video_mp4_1 = $this->props['background_video_mp4_1']; $background_video_mp4_2 = $this->props['background_video_mp4_2']; $background_video_mp4_3 = $this->props['background_video_mp4_3']; $background_video_webm_1 = $this->props['background_video_webm_1']; $background_video_webm_2 = $this->props['background_video_webm_2']; $background_video_webm_3 = $this->props['background_video_webm_3']; $background_video_width_1 = $this->props['background_video_width_1']; $background_video_width_2 = $this->props['background_video_width_2']; $background_video_width_3 = $this->props['background_video_width_3']; $background_video_height_1 = $this->props['background_video_height_1']; $background_video_height_2 = $this->props['background_video_height_2']; $background_video_height_3 = $this->props['background_video_height_3']; $allow_player_pause_1 = $this->props['allow_player_pause_1']; $allow_player_pause_2 = $this->props['allow_player_pause_2']; $allow_player_pause_3 = $this->props['allow_player_pause_3']; $background_video_pause_outside_viewport_1 = $this->props['background_video_pause_outside_viewport_1']; $background_video_pause_outside_viewport_2 = $this->props['background_video_pause_outside_viewport_2']; $background_video_pause_outside_viewport_3 = $this->props['background_video_pause_outside_viewport_3']; $prev_background_color = $this->props['prev_background_color']; $next_background_color = $this->props['next_background_color']; $is_background_responsive = et_pb_responsive_options()->is_responsive_enabled( $this->props, 'background' ); global $et_pb_rendering_specialty_section; // Check Background Image. $background_image = $this->props['background_image']; if ( '' === $background_image && $is_background_responsive ) { $background_image_tablet = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_image', 'tablet' ); $background_image_phone = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_image', 'phone' ); $background_image = '' !== $background_image_tablet ? $background_image_tablet : $background_image_phone; } // Background Color. $background_color = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_color', 'desktop' ); $background_color_tablet = ''; $background_color_phone = ''; $processed_background_color = $this->is_initial_background_color() ? 'inherit' : $background_color; $processed_background_color_tablet = ''; $processed_background_color_phone = ''; if ( $is_background_responsive ) { $background_color_tablet = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_color', 'tablet' ); $background_color_phone = et_pb_responsive_options()->get_inheritance_background_value( $this->props, 'background_color', 'phone' ); $processed_background_color_tablet = $this->is_initial_background_color( 'tablet' ) ? 'inherit' : $background_color_tablet; $processed_background_color_phone = $this->is_initial_background_color( 'phone' ) ? 'inherit' : $background_color_phone; } if ( '' !== $global_module ) { $global_content = et_pb_load_global_module( $global_module, '', $prev_background_color, $next_background_color ); if ( '' !== $global_content ) { return do_shortcode( et_pb_fix_shortcodes( wpautop( $global_content ) ) ); } } $gutter_class = ''; $gutter_hover_data = ''; if ( 'on' === $specialty ) { global $et_pb_all_column_settings, $et_pb_rendering_column_content, $et_pb_rendering_column_content_row; $et_pb_all_column_settings_backup = $et_pb_all_column_settings; $et_pb_all_column_settings = ! isset( $et_pb_all_column_settings ) ? array() : $et_pb_all_column_settings; if ( 'on' === $make_equal ) { $this->add_classname( 'et_pb_equal_columns' ); } if ( 'on' === $use_custom_gutter && '' !== $gutter_width ) { $gutter_width = '0' === $gutter_width ? '1' : $gutter_width; // set the gutter to 1 if 0 entered by user. $gutter_class .= ' et_pb_gutters' . $gutter_width; if ( et_builder_is_hover_enabled( 'gutter_width', $this->props ) && ! empty( $gutter_width_hover ) && $gutter_width !== $gutter_width_hover ) { $gutter_class .= ' et_pb_gutter_hover'; $gutter_hover_data = sprintf( ' data-original_gutter="%1$s" data-hover_gutter="%2$s"', esc_attr( $gutter_width ), esc_attr( $gutter_width_hover ) ); } } // Column hover backgrounds. $column_hover_backgrounds = array(); $column_sticky_backgrounds = array(); for ( $i = 0; $i <= 3; $i ++ ) { $column_hover_backgrounds = array_merge( $column_hover_backgrounds, array( "column_{$i}_color_hover" => $hover->get_value( "background_color_{$i}", $this->props, false ), "column_{$i}_color_hover_enabled" => $hover->is_enabled( "background_color_{$i}", $this->props ), ) ); $column_sticky_backgrounds = array_merge( $column_sticky_backgrounds, array( "column_{$i}_color_sticky" => $sticky->get_value( "background_color_{$i}", $this->props, false ), "column_{$i}_color_sticky_enabled" => $sticky->is_enabled( "background_color_{$i}", $this->props ), ) ); } $et_pb_column_backgrounds = array( array( 'color' => $background_color_1, 'color_hover' => $column_hover_backgrounds['column_1_color_hover'], 'color_hover_enabled' => $column_hover_backgrounds['column_1_color_hover_enabled'], 'color_sticky' => $column_sticky_backgrounds['column_1_color_sticky'], 'color_sticky_enabled' => $column_sticky_backgrounds['column_1_color_sticky_enabled'], 'image' => $bg_img_1, 'image_size' => $background_size_1, 'image_position' => $background_position_1, 'image_repeat' => $background_repeat_1, 'image_blend' => $background_blend_1, ), array( 'color' => $background_color_2, 'color_hover' => $column_hover_backgrounds['column_2_color_hover'], 'color_hover_enabled' => $column_hover_backgrounds['column_2_color_hover_enabled'], 'color_sticky' => $column_sticky_backgrounds['column_2_color_sticky'], 'color_sticky_enabled' => $column_sticky_backgrounds['column_2_color_sticky_enabled'], 'image' => $bg_img_2, 'image_size' => $background_size_2, 'image_position' => $background_position_2, 'image_repeat' => $background_repeat_2, 'image_blend' => $background_blend_2, ), array( 'color' => $background_color_3, 'color_hover' => $column_hover_backgrounds['column_3_color_hover'], 'color_hover_enabled' => $column_hover_backgrounds['column_3_color_hover_enabled'], 'color_sticky' => $column_sticky_backgrounds['column_3_color_sticky'], 'color_sticky_enabled' => $column_sticky_backgrounds['column_3_color_sticky_enabled'], 'image' => $bg_img_3, 'image_size' => $background_size_3, 'image_position' => $background_position_3, 'image_repeat' => $background_repeat_3, 'image_blend' => $background_blend_3, ), ); $et_pb_column_backgrounds_gradient = array( array( 'active' => $use_background_color_gradient_1, 'type' => $background_color_gradient_type_1, 'direction' => $background_color_gradient_direction_1, 'radial_direction' => $background_color_gradient_direction_radial_1, 'color_start' => $background_color_gradient_start_1, 'color_end' => $background_color_gradient_end_1, 'start_position' => $background_color_gradient_start_position_1, 'end_position' => $background_color_gradient_end_position_1, 'overlays_image' => $background_color_gradient_overlays_image_1, ), array( 'active' => $use_background_color_gradient_2, 'type' => $background_color_gradient_type_2, 'direction' => $background_color_gradient_direction_2, 'radial_direction' => $background_color_gradient_direction_radial_2, 'color_start' => $background_color_gradient_start_2, 'color_end' => $background_color_gradient_end_2, 'start_position' => $background_color_gradient_start_position_2, 'end_position' => $background_color_gradient_end_position_2, 'overlays_image' => $background_color_gradient_overlays_image_2, ), array( 'active' => $use_background_color_gradient_3, 'type' => $background_color_gradient_type_3, 'direction' => $background_color_gradient_direction_3, 'radial_direction' => $background_color_gradient_direction_radial_3, 'color_start' => $background_color_gradient_start_3, 'color_end' => $background_color_gradient_end_3, 'start_position' => $background_color_gradient_start_position_3, 'end_position' => $background_color_gradient_end_position_3, 'overlays_image' => $background_color_gradient_overlays_image_3, ), ); $et_pb_column_backgrounds_video = array( array( 'background_video_mp4' => $background_video_mp4_1, 'background_video_webm' => $background_video_webm_1, 'background_video_width' => $background_video_width_1, 'background_video_height' => $background_video_height_1, 'background_video_allow_pause' => $allow_player_pause_1, 'background_video_pause_outside_viewport' => $background_video_pause_outside_viewport_1, ), array( 'background_video_mp4' => $background_video_mp4_2, 'background_video_webm' => $background_video_webm_2, 'background_video_width' => $background_video_width_2, 'background_video_height' => $background_video_height_2, 'background_video_allow_pause' => $allow_player_pause_2, 'background_video_pause_outside_viewport' => $background_video_pause_outside_viewport_2, ), array( 'background_video_mp4' => $background_video_mp4_3, 'background_video_webm' => $background_video_webm_3, 'background_video_width' => $background_video_width_3, 'background_video_height' => $background_video_height_3, 'background_video_allow_pause' => $allow_player_pause_3, 'background_video_pause_outside_viewport' => $background_video_pause_outside_viewport_3, ), ); // Column hover paddings. $column_hover_paddings = array(); $column_sticky_paddings = array(); for ( $i = 0; $i <= 3; $i++ ) { $column_hover_paddings = array_merge( $column_hover_paddings, array( "column_{$i}_padding_hover_enabled" => $hover->is_enabled( "padding_{$i}", $this->props ), "column_{$i}_padding_top" => $hover->get_compose_value( "padding_top_{$i}", "padding_{$i}", $this->props ), "column_{$i}_padding_right" => $hover->get_compose_value( "padding_right_{$i}", "padding_{$i}", $this->props ), "column_{$i}_padding_bottom" => $hover->get_compose_value( "padding_bottom_{$i}", "padding_{$i}", $this->props ), "column_{$i}_padding_left" => $hover->get_compose_value( "padding_left_{$i}", "padding_{$i}", $this->props ), ) ); $sticky_padding_values = explode( '|', $sticky->get_value( "padding_{$i}", $this->props, '|||' ) ); $column_sticky_paddings = array_merge( $column_sticky_paddings, array( "column_{$i}_padding_sticky_enabled" => $sticky->is_enabled( "padding_{$i}", $this->props ), "column_{$i}_padding_top" => $sticky_padding_values[0], "column_{$i}_padding_right" => $sticky_padding_values[1], "column_{$i}_padding_bottom" => $sticky_padding_values[2], "column_{$i}_padding_left" => $sticky_padding_values[3], ) ); } $et_pb_column_paddings = array( array( 'padding-top' => $padding_top_1, 'padding-right' => $padding_right_1, 'padding-bottom' => $padding_bottom_1, 'padding-left' => $padding_left_1, 'padding-hover-enabled' => $column_hover_paddings['column_1_padding_hover_enabled'], 'padding-top-hover' => $column_hover_paddings['column_1_padding_top'], 'padding-right-hover' => $column_hover_paddings['column_1_padding_right'], 'padding-bottom-hover' => $column_hover_paddings['column_1_padding_bottom'], 'padding-left-hover' => $column_hover_paddings['column_1_padding_left'], 'padding-sticky-enabled' => $column_sticky_paddings['column_1_padding_sticky_enabled'], 'padding-top-sticky' => $column_sticky_paddings['column_1_padding_top'], 'padding-right-sticky' => $column_sticky_paddings['column_1_padding_right'], 'padding-bottom-sticky' => $column_sticky_paddings['column_1_padding_bottom'], 'padding-left-sticky' => $column_sticky_paddings['column_1_padding_left'], ), array( 'padding-top' => $padding_top_2, 'padding-right' => $padding_right_2, 'padding-bottom' => $padding_bottom_2, 'padding-left' => $padding_left_2, 'padding-hover-enabled' => $column_hover_paddings['column_2_padding_hover_enabled'], 'padding-top-hover' => $column_hover_paddings['column_2_padding_top'], 'padding-right-hover' => $column_hover_paddings['column_2_padding_right'], 'padding-bottom-hover' => $column_hover_paddings['column_2_padding_bottom'], 'padding-left-hover' => $column_hover_paddings['column_2_padding_left'], 'padding-sticky-enabled' => $column_sticky_paddings['column_2_padding_sticky_enabled'], 'padding-top-sticky' => $column_sticky_paddings['column_2_padding_top'], 'padding-right-sticky' => $column_sticky_paddings['column_2_padding_right'], 'padding-bottom-sticky' => $column_sticky_paddings['column_2_padding_bottom'], 'padding-left-sticky' => $column_sticky_paddings['column_2_padding_left'], ), array( 'padding-top' => $padding_top_3, 'padding-right' => $padding_right_3, 'padding-bottom' => $padding_bottom_3, 'padding-left' => $padding_left_3, 'padding-hover-enabled' => $column_hover_paddings['column_3_padding_hover_enabled'], 'padding-top-hover' => $column_hover_paddings['column_3_padding_top'], 'padding-right-hover' => $column_hover_paddings['column_3_padding_right'], 'padding-bottom-hover' => $column_hover_paddings['column_3_padding_bottom'], 'padding-left-hover' => $column_hover_paddings['column_3_padding_left'], 'padding-sticky-enabled' => $column_sticky_paddings['column_3_padding_sticky_enabled'], 'padding-top-sticky' => $column_sticky_paddings['column_3_padding_top'], 'padding-right-sticky' => $column_sticky_paddings['column_3_padding_right'], 'padding-bottom-sticky' => $column_sticky_paddings['column_3_padding_bottom'], 'padding-left-sticky' => $column_sticky_paddings['column_3_padding_left'], ), ); $et_pb_column_paddings_mobile = array( array( 'tablet' => explode( '|', $padding_1_tablet ), 'phone' => explode( '|', $padding_1_phone ), 'last_edited' => $padding_1_last_edited, ), array( 'tablet' => explode( '|', $padding_2_tablet ), 'phone' => explode( '|', $padding_2_phone ), 'last_edited' => $padding_2_last_edited, ), array( 'tablet' => explode( '|', $padding_3_tablet ), 'phone' => explode( '|', $padding_3_phone ), 'last_edited' => $padding_3_last_edited, ), ); $et_pb_column_parallax = array( array( $parallax_1, $parallax_method_1 ), array( $parallax_2, $parallax_method_2 ), array( $parallax_3, $parallax_method_3 ), ); $et_pb_column_css = array( 'css_class' => array( $module_class_1, $module_class_2, $module_class_3 ), 'css_id' => array( $module_id_1, $module_id_2, $module_id_3 ), 'custom_css_before' => array( $custom_css_before_1, $custom_css_before_2, $custom_css_before_3 ), 'custom_css_main' => array( $custom_css_main_1, $custom_css_main_2, $custom_css_main_3 ), 'custom_css_after' => array( $custom_css_after_1, $custom_css_after_2, $custom_css_after_3 ), 'custom_css_before_hover' => array( $custom_css_before_1_hover, $custom_css_before_2_hover, $custom_css_before_3_hover ), 'custom_css_main_hover' => array( $custom_css_main_1_hover, $custom_css_main_2_hover, $custom_css_main_3_hover ), 'custom_css_after_hover' => array( $custom_css_after_1_hover, $custom_css_after_2_hover, $custom_css_after_3_hover ), 'custom_css_before_sticky' => array( $custom_css_before_1_sticky, $custom_css_before_2_sticky, $custom_css_before_3_sticky ), 'custom_css_main_sticky' => array( $custom_css_main_1_sticky, $custom_css_main_2_sticky, $custom_css_main_3_sticky ), 'custom_css_after_sticky' => array( $custom_css_after_1_sticky, $custom_css_after_2_sticky, $custom_css_after_3_sticky ), ); $internal_columns_settings_array = array( 'keep_column_padding_mobile' => 'on', 'et_pb_column_backgrounds' => $et_pb_column_backgrounds, 'et_pb_column_backgrounds_gradient' => $et_pb_column_backgrounds_gradient, 'et_pb_column_backgrounds_video' => $et_pb_column_backgrounds_video, 'et_pb_column_parallax' => $et_pb_column_parallax, 'et_pb_columns_counter' => 0, 'et_pb_column_paddings' => $et_pb_column_paddings, 'et_pb_column_paddings_mobile' => $et_pb_column_paddings_mobile, 'et_pb_column_css' => $et_pb_column_css, ); $current_row_position = $et_pb_rendering_column_content ? 'internal_row' : 'regular_row'; $et_pb_all_column_settings[ $current_row_position ] = $internal_columns_settings_array; $et_pb_rendering_specialty_section = true; if ( $et_pb_rendering_column_content ) { $et_pb_rendering_column_content_row = true; } } else { $et_pb_rendering_specialty_section = false; } $background_video = $this->video_background(); $parallax_image = $this->get_parallax_image_background(); // Background Color. $background_color_values = array( 'desktop' => 'rgba(255,255,255,0)' !== $processed_background_color ? esc_html( $processed_background_color ) : '', 'tablet' => 'rgba(255,255,255,0)' !== $processed_background_color_tablet ? esc_html( $processed_background_color_tablet ) : '', 'phone' => 'rgba(255,255,255,0)' !== $processed_background_color_phone ? esc_html( $processed_background_color_phone ) : '', ); et_pb_responsive_options()->generate_responsive_css( $background_color_values, '%%order_class%%.et_pb_section', 'background-color', $function_name, ' !important;', 'color' ); // Background hover styles. $hover_background_color = $hover->get_value( 'background_color', $this->props, $background_color ); $hover_background_selector = '%%order_class%%.et_pb_section:hover'; if ( $hover_background_color !== $background_color ) { $el_style = array( 'selector' => $hover_background_selector, 'declaration' => sprintf( 'background-color:%s !important;', esc_attr( $hover_background_color ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } // Background sticky styles. $sticky_background_color = $sticky->get_value( 'background_color', $this->props, $background_color ); if ( $sticky_background_color !== $background_color ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%.et_pb_section', $this->is_sticky_module ), 'declaration' => sprintf( 'background-color:%s !important;', esc_attr( $sticky_background_color ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); // Add hover style in sticky state. if ( $hover_background_color !== $background_color ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( $hover_background_selector, $this->is_sticky_module ), 'declaration' => sprintf( 'background-color:%s !important;', esc_attr( $hover_background_color ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } // Transparent is default for Builder Plugin, but not for theme. $is_transparent_background = $this->is_transparent_background( $background_color ); $is_transparent_background_tablet = $this->is_transparent_background( $background_color_tablet ); $is_transparent_background_phone = $this->is_transparent_background( $background_color_phone ); $is_background_color = ( '' !== $background_color && ! $is_transparent_background ) || ( '' !== $background_color_tablet && ! $is_transparent_background_tablet ) || ( '' !== $background_color_phone && ! $is_transparent_background_phone ); if ( ! empty( $background_video ) || $is_background_color || '' !== $background_image ) { $this->add_classname( 'et_pb_with_background' ); } // Background UI. if ( 'on' === $parallax ) { $this->add_classname( 'et_pb_section_parallax' ); } // CSS Filters. $this->add_classname( $this->generate_css_filters( $function_name ) ); if ( 'on' === $inner_shadow && ! ( '' !== $background_image && 'on' === $parallax && 'off' === $parallax_method ) ) { $this->add_classname( 'et_pb_inner_shadow' ); } if ( 'on' === $fullwidth ) { $this->add_classname( 'et_pb_fullwidth_section' ); } if ( 'on' === $specialty ) { $this->add_classname( 'et_section_specialty' ); } else { $this->add_classname( 'et_section_regular' ); } if ( $is_transparent_background || $is_transparent_background_tablet || $is_transparent_background_phone ) { $this->add_classname( 'et_section_transparent' ); } // Setup for SVG. $bottom = ''; $top = ''; $divider = ET_Builder_Module_Fields_Factory::get( 'Divider' ); // pass section number for background color usage. $divider->count = $this->render_count(); // Check if animation is enabled. $animation_enabled = $this->_features_manager->get( 'section_divider_enabled', function() { return $this->is_section_divider_enabled(); } ); if ( $animation_enabled ) { // Divider Placement. foreach ( array( 'bottom', 'top' ) as $placement ) { // Divider Responsive. foreach ( array( 'desktop', 'tablet', 'phone' ) as $device ) { // Ensure responsive settings for style is active on tablet and phone. $is_desktop = 'desktop' === $device; $is_responsive_style = et_pb_responsive_options()->is_responsive_enabled( $this->props, "{$placement}_divider_style" ); // Get all responsive values if it's exist and not empty. $values = array(); if ( ! $is_desktop ) { $values = et_pb_responsive_options()->get_any_responsive_values( $this->props, array( "{$placement}_divider_color" => '', "{$placement}_divider_height" => '', "{$placement}_divider_repeat" => '', "{$placement}_divider_flip" => '', "{$placement}_divider_arrangement" => '', ), false, $device ); } // Get Divider Style. $divider_style = $is_desktop || ! empty( $values ) ? et_pb_responsive_options()->get_any_value( $this->props, "{$placement}_divider_style" ) : ''; if ( ! $is_desktop && $is_responsive_style ) { $divider_style = et_pb_responsive_options()->get_any_value( $this->props, "{$placement}_divider_style", '', true, $device ); } // Check if style is not default. if ( '' !== $divider_style ) { // get an svg for using in ::before. $breakpoint = ! $is_desktop ? $device : ''; $divider->process_svg( $placement, $this->props, $breakpoint, $values ); // Get the placeholder for the bottom/top. if ( 'bottom' === $placement && '' === $bottom ) { $bottom = $divider->get_svg( 'bottom' ); } elseif ( 'top' === $placement && '' === $top ) { $top = $divider->get_svg( 'top' ); } // add a corresponding class. $this->add_classname( $divider->classes ); } } } } // Position Options. if ( $multi_view->has_value( 'positioning', 'absolute' ) ) { $this->add_classname( 'et_pb_section--absolute' ); } if ( $multi_view->has_value( 'positioning', 'fixed' ) ) { $this->add_classname( 'et_pb_section--fixed' ); } $muti_view_attributes = $multi_view->render_attrs( array( 'classes' => array( 'et_pb_section--absolute' => array( 'positioning' => 'absolute', ), 'et_pb_section--fixed' => array( 'positioning' => 'fixed', ), ), ) ); // Remove automatically added classnames. $this->remove_classname( 'et_pb_module' ); // Save module classes into variable BEFORE processing the content with `do_shortcode()` // Otherwise order classes messed up with internal sections if exist. $module_classes = $this->module_classname( $function_name ); $output = sprintf( ' %9$s %7$s %2$s %5$s %1$s %6$s %10$s ', do_shortcode( et_pb_fix_shortcodes( $content ) ), // 1 $background_video, // 2 $module_classes, // 3 $this->module_id(), // 4 ( 'on' === $specialty ? sprintf( '
', $gutter_class, et_core_esc_previously( $gutter_hover_data ) ) : '' ), // 5 ( 'on' === $specialty ? '
' : '' ), // 6 $parallax_image, // 7 $this->get_module_data_attributes(), // 8 et_core_esc_previously( $top ), // 9 et_core_esc_previously( $bottom ), // 10, et_core_esc_previously( $muti_view_attributes ) ); if ( 'on' === $specialty ) { // reset the global column settings to make sure they are not affected by internal content. $et_pb_all_column_settings = $et_pb_all_column_settings_backup; if ( $et_pb_rendering_column_content_row ) { $et_pb_rendering_column_content_row = false; } } return $output; } /** * Process box shadow CSS styles of section. * * @since 4.10.0 */ public function is_section_divider_enabled() { // Divider Responsive. foreach ( array( 'desktop', 'tablet', 'phone' ) as $device ) { // Get Divider Style. $divider_style_enabled = et_pb_responsive_options()->get_any_value( $this->props, 'top_divider_style', false ) || et_pb_responsive_options()->get_any_value( $this->props, 'bottom_divider_style', false ) || et_pb_responsive_options()->get_any_value( $this->props, 'top_divider_style', false, true, $device ) || et_pb_responsive_options()->get_any_value( $this->props, 'bottom_divider_style', false, true, $device ); return $divider_style_enabled; } return false; } /** * Process box shadow CSS styles of section. * * @param string $function_name Module slug. */ public function process_box_shadow( $function_name ) { /** * Instance of BoxShadow module field. @var ET_Builder_Module_Field_BoxShadow $box_shadow */ $box_shadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' ); $style = $box_shadow->get_value( $this->props ); $hover_style = $box_shadow->get_value( $this->props, array( 'hover' => true ) ); if ( ! empty( $style ) && 'none' !== $style && false === strpos( $style, 'inset' ) ) { // Make section z-index higher if it has outer box shadow #4762. $el_style = array( 'selector' => '%%order_class%%', 'declaration' => 'z-index: 10;', ); self::set_style( $function_name, $el_style ); } if ( ! empty( $hover_style ) && 'none' !== $hover_style && false === strpos( $hover_style, 'inset' ) ) { // Make section z-index higher if it has outer box shadow #4762. $el_style = array( 'selector' => '%%order_class%%:hover', 'declaration' => 'z-index: 10;', ); self::set_style( $function_name, $el_style ); } parent::process_box_shadow( $function_name ); } /** * Box shadow back compatibility. * * @param string $function_name Module slug. * * @return string */ private function _keep_box_shadow_compatibility( $function_name ) { /** * Instance of box shadow field factory. @var ET_Builder_Module_Field_BoxShadow $box_shadow */ $box_shadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' ); $utils = ET_Core_Data_Utils::instance(); $atts = $this->props; $style = $box_shadow->get_value( $atts ); if ( ! empty( $style ) && ! is_admin() && version_compare( $utils->array_get( $atts, '_builder_version', '3.0.93' ), '3.0.94', 'lt' ) && ! $box_shadow->is_inset( $box_shadow->get_value( $atts ) ) ) { $class = '.' . self::get_module_order_class( $function_name ); return sprintf( '', sprintf( '%1$s { z-index: 11; %2$s }', esc_html( $class ), esc_html( $style ) ) ); } return ''; } } new ET_Builder_Section(); /** * Class used to process row element(module). * * @since 4.6.2 */ class ET_Builder_Row extends ET_Builder_Structure_Element { /** * Sets up the element's properties. */ public function init() { $this->name = esc_html__( 'Row', 'et_builder' ); $this->plural = esc_html__( 'Rows', 'et_builder' ); $this->slug = 'et_pb_row'; $this->vb_support = 'on'; $this->child_slug = 'et_pb_column'; $this->child_item_text = esc_html__( 'Column', 'et_builder' ); $this->advanced_fields = array( 'background' => array( 'use_background_color' => true, 'use_background_image' => true, 'use_background_color_gradient' => true, 'use_background_video' => true, 'options' => array( 'background_color' => array( 'default' => '', 'hover' => 'tabs', ), 'allow_player_pause' => array( 'default_on_front' => 'off', ), 'parallax' => array( 'default_on_front' => 'off', ), 'parallax_method' => array( 'default_on_front' => 'on', ), ), ), 'max_width' => array( 'css' => array( 'module_alignment' => '%%order_class%%.et_pb_row', ), 'options' => array( 'width' => array( 'default' => '80%', ), 'max_width' => array( 'default' => '1080px', 'range_settings' => array( 'min' => 0, 'max' => 2560, 'step' => 1, ), ), 'module_alignment' => array( 'label' => esc_html__( 'Row Alignment', 'et_builder' ), 'mobile_options' => true, 'description' => esc_html__( 'Rows can be aligned to the left, right or center. By default, rows are centered within their parent section.', 'et_builder' ), 'default_sticky' => 'center', ), ), 'toggle_slug' => 'width', 'toggle_title' => esc_html__( 'Alignment', 'et_builder' ), 'toggle_priority' => 50, ), 'margin_padding' => array( 'css' => array( 'main' => '%%order_class%%.et_pb_row', 'important' => 'all', ), ), 'fonts' => false, 'text' => false, 'button' => false, 'position_fields' => array( 'default' => 'relative', ), 'z_index' => array( 'important' => true, ), ); $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'column_structure' => array( 'title' => esc_html__( 'Column Structure', 'et_builder' ), 'priority' => 1, 'always_open' => true, ), ), ), 'advanced' => array( 'toggles' => array( 'width' => array( 'title' => et_builder_i18n( 'Sizing' ), 'priority' => 65, ), ), ), ); $this->help_videos = array( array( 'id' => 'R9ds7bEaHE8', 'name' => esc_html__( 'An introduction to Rows', 'et_builder' ), ), ); } /** * Get the settings fields data for this element. * * @return array|array[] */ public function get_fields() { $fields = array( 'column_structure' => array( 'label' => esc_html__( 'Column Structure', 'et_builder' ), 'description' => esc_html__( 'Here you can choose the Column Structure for this Row.', 'et_builder' ), 'type' => 'column-structure', 'default' => '4_4', 'options' => array( '4_4' => et_pb_get_column_svg( '4_4' ), '1_2,1_2' => et_pb_get_column_svg( '1_2,1_2' ), '1_3,1_3,1_3' => et_pb_get_column_svg( '1_3,1_3,1_3' ), '1_4,1_4,1_4,1_4' => et_pb_get_column_svg( '1_4,1_4,1_4,1_4' ), '1_4,1_4,1_4,1_4' => et_pb_get_column_svg( '1_4,1_4,1_4,1_4' ), '1_5,1_5,1_5,1_5,1_5' => et_pb_get_column_svg( '1_5,1_5,1_5,1_5,1_5' ), '1_6,1_6,1_6,1_6,1_6,1_6' => et_pb_get_column_svg( '1_6,1_6,1_6,1_6,1_6,1_6' ), '2_5,3_5' => et_pb_get_column_svg( '2_5,3_5' ), '3_5,2_5' => et_pb_get_column_svg( '3_5,2_5' ), '1_3,2_3' => et_pb_get_column_svg( '1_3,2_3' ), '2_3,1_3' => et_pb_get_column_svg( '2_3,1_3' ), '1_4,3_4' => et_pb_get_column_svg( '1_4,3_4' ), '3_4,1_4' => et_pb_get_column_svg( '3_4,1_4' ), '1_4,1_2,1_4' => et_pb_get_column_svg( '1_4,1_2,1_4' ), '1_5,3_5,1_5' => et_pb_get_column_svg( '1_5,3_5,1_5' ), '1_4,1_4,1_2' => et_pb_get_column_svg( '1_4,1_4,1_2' ), '1_2,1_4,1_4' => et_pb_get_column_svg( '1_2,1_4,1_4' ), '1_5,1_5,3_5' => et_pb_get_column_svg( '1_5,1_5,3_5' ), '3_5,1_5,1_5' => et_pb_get_column_svg( '3_5,1_5,1_5' ), '1_6,1_6,1_6,1_2' => et_pb_get_column_svg( '1_6,1_6,1_6,1_2' ), '1_2,1_6,1_6,1_6' => et_pb_get_column_svg( '1_2,1_6,1_6,1_6' ), ), 'toggle_slug' => 'column_structure', ), 'use_custom_gutter' => array( 'label' => esc_html__( 'Use Custom Gutter Width', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'affects' => array( 'gutter_width', ), 'description' => esc_html__( 'Enable this option to define custom gutter width for this row.', 'et_builder' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'width', ), 'gutter_width' => array( 'label' => esc_html__( 'Gutter Width', 'et_builder' ), 'type' => 'range', 'option_category' => 'layout', 'range_settings' => array( 'min' => 1, 'max' => 4, 'step' => 1, 'min_limit' => 1, 'max_limit' => 4, ), 'depends_show_if' => 'on', 'description' => esc_html__( 'Adjust the spacing between each column in this row.', 'et_builder' ), 'validate_unit' => false, 'fixed_range' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'default_on_front' => (string) et_get_option( 'gutter_width', '3' ), 'hover' => 'tabs', ), 'padding_mobile' => array( 'label' => esc_html__( 'Keep Custom Padding on Mobile', 'et_builder' ), 'type' => 'skip', // Remaining attribute for backward compatibility. 'tab_slug' => 'advanced', 'toggle_slug' => 'margin_padding', 'default_on_front' => '', ), 'make_equal' => array( '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', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'width', ), 'column_padding_mobile' => array( 'label' => esc_html__( 'Keep Column Padding on Mobile', 'et_builder' ), 'tab_slug' => 'advanced', 'type' => 'skip', // Remaining attribute for backward compatibility. 'default_on_front' => '', ), 'custom_padding_last_edited' => array( 'type' => 'skip', 'tab_slug' => 'advanced', ), '__video_background' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Helper_ResponsiveOptions', 'get_video_background' ), 'computed_depends_on' => array( 'background_video_mp4', 'background_video_webm', 'background_video_width', 'background_video_height', ), 'computed_minimum' => array( 'background_video_mp4', 'background_video_webm', ), ), ); $column_fields = $this->get_column_fields( 6, array( 'background_color' => array(), 'bg_img' => array(), 'padding_top_bottom_link' => array(), 'padding_left_right_link' => array(), 'parallax' => array( 'default_on_front' => 'off', ), 'parallax_method' => array( 'default_on_front' => 'on', ), 'background_size' => array(), 'background_position' => array(), 'background_repeat' => array(), 'background_blend' => 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( '__video_background', ), ), 'background_video_webm' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_width' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_height' => array( 'computed_affects' => array( '__video_background', ), ), 'allow_player_pause' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_pause_outside_viewport' => array( 'computed_affects' => array( '__video_background', ), ), '__video_background' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Column', 'get_column_video_background', ), 'computed_depends_on' => array( 'background_video_mp4', 'background_video_webm', 'background_video_width', 'background_video_height', ), 'computed_minimum' => array( 'background_video_mp4', 'background_video_webm', ), ), '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 row. * * @since 3.23 Add form field options group and background image on the fields list. */ public function get_transition_fields_css_props() { $fields = parent::get_transition_fields_css_props(); for ( $i = 1; $i <= 6; $i ++ ) { $selector = "%%order_class%% > .et_pb_column:nth-child({$i})"; $fields[ "background_color_{$i}" ] = array( 'background-color' => $selector ); $fields[ "padding_{$i}" ] = array( 'padding' => $selector ); } return $fields; } /** * Generates the structure module's HTML output based on {@see ET_Builder_Row::$props}. * * @param array $atts List of unprocessed attributes. * @param mixed $content Content being processed. * @param string $function_name Slug of module that is used for rendering output. * * @return string The module's HTML output. */ public function render( $atts, $content, $function_name ) { $custom_padding = $this->props['custom_padding']; $custom_padding_tablet = $this->props['custom_padding_tablet']; $custom_padding_phone = $this->props['custom_padding_phone']; $custom_padding_last_edited = $this->props['custom_padding_last_edited']; $column_padding_mobile = $this->props['column_padding_mobile']; $make_equal = $this->props['make_equal']; $padding_mobile = $this->props['padding_mobile']; $gutter_width = $this->props['gutter_width']; $gutter_width_hover = $this->get_hover_value( 'gutter_width' ); $global_module = $this->props['global_module']; $use_custom_gutter = $this->props['use_custom_gutter']; $hover = et_pb_hover_options(); global $et_pb_all_column_settings, $et_pb_rendering_column_content, $et_pb_rendering_column_content_row; $et_pb_all_column_settings = ! isset( $et_pb_all_column_settings ) ? array() : $et_pb_all_column_settings; $et_pb_all_column_settings_backup = $et_pb_all_column_settings; $keep_column_padding_mobile = $column_padding_mobile; if ( '' !== $global_module ) { $global_content = et_pb_load_global_module( $global_module, $function_name ); if ( '' !== $global_content ) { return do_shortcode( et_pb_fix_shortcodes( wpautop( $global_content ) ) ); } } $custom_padding_responsive_active = et_pb_get_responsive_status( $custom_padding_last_edited ); $padding_mobile_values = $custom_padding_responsive_active ? array( 'tablet' => explode( '|', $custom_padding_tablet ), 'phone' => explode( '|', $custom_padding_phone ), ) : array( 'tablet' => false, 'phone' => false, ); $internal_columns_settings_array = array( 'keep_column_padding_mobile' => $keep_column_padding_mobile, 'et_pb_columns_counter' => 0, ); $current_row_position = $et_pb_rendering_column_content ? 'internal_row' : 'regular_row'; $et_pb_all_column_settings[ $current_row_position ] = $internal_columns_settings_array; if ( $et_pb_rendering_column_content ) { $et_pb_rendering_column_content_row = true; } if ( 'on' === $make_equal ) { $this->add_classname( 'et_pb_equal_columns' ); } $gutter_hover_data = ''; if ( 'on' === $use_custom_gutter && '' !== $gutter_width ) { $gutter_width = '0' === $gutter_width ? '1' : $gutter_width; // set the gutter width to 1 if 0 entered by user. $this->add_classname( 'et_pb_gutters' . $gutter_width ); if ( et_builder_is_hover_enabled( 'gutter_width', $this->props ) && ! empty( $gutter_width_hover ) && $gutter_width !== $gutter_width_hover ) { $this->add_classname( 'et_pb_gutter_hover' ); $gutter_hover_data = sprintf( ' data-original_gutter="%1$s" data-hover_gutter="%2$s"', esc_attr( $gutter_width ), esc_attr( $gutter_width_hover ) ); } } $padding_values = explode( '|', $custom_padding ); if ( ! empty( $padding_values ) ) { // old version of Rows support only top and bottom padding, so we need to handle it along with the full padding in the recent version. if ( 2 === count( $padding_values ) ) { $padding_settings = array( 'top' => isset( $padding_values[0] ) ? $padding_values[0] : '', 'bottom' => isset( $padding_values[1] ) ? $padding_values[1] : '', ); } else { $padding_settings = array( 'top' => isset( $padding_values[0] ) ? $padding_values[0] : '', 'right' => isset( $padding_values[1] ) ? $padding_values[1] : '', 'bottom' => isset( $padding_values[2] ) ? $padding_values[2] : '', 'left' => isset( $padding_values[3] ) ? $padding_values[3] : '', ); } foreach ( $padding_settings as $padding_side => $value ) { if ( '' !== $value ) { $element_style = array( 'selector' => '%%order_class%%.et_pb_row', 'declaration' => sprintf( 'padding-%1$s: %2$s;', esc_html( $padding_side ), esc_html( $value ) ), ); // Backward compatibility. Keep Padding on Mobile is deprecated in favour of responsive inputs mechanism for custom padding // To ensure that it is compatibility with previous version of Divi, this option is now only used as last resort if no // responsive padding value is found, and padding_mobile value is saved (which is set to off by default). if ( in_array( $padding_mobile, array( 'on', 'off' ), true ) && 'on' !== $padding_mobile && ! $custom_padding_responsive_active ) { $element_style['media_query'] = ET_Builder_Element::get_media_query( 'min_width_981' ); } ET_Builder_Element::set_style( $function_name, $element_style ); } } } if ( ! empty( $padding_mobile_values['tablet'] ) || ! empty( $padding_values['phone'] ) ) { $padding_mobile_values_processed = array(); foreach ( array( 'tablet', 'phone' ) as $device ) { if ( empty( $padding_mobile_values[ $device ] ) ) { continue; } $padding_mobile_values_processed[ $device ] = array( 'padding-top' => isset( $padding_mobile_values[ $device ][0] ) ? $padding_mobile_values[ $device ][0] : '', 'padding-right' => isset( $padding_mobile_values[ $device ][1] ) ? $padding_mobile_values[ $device ][1] : '', 'padding-bottom' => isset( $padding_mobile_values[ $device ][2] ) ? $padding_mobile_values[ $device ][2] : '', 'padding-left' => isset( $padding_mobile_values[ $device ][3] ) ? $padding_mobile_values[ $device ][3] : '', ); } if ( ! empty( $padding_mobile_values_processed ) ) { et_pb_responsive_options()->generate_responsive_css( $padding_mobile_values_processed, '%%order_class%%.et_pb_row', '', $function_name, ' !important; ' ); } } $parallax_image = $this->get_parallax_image_background(); $background_video = $this->video_background(); // CSS Filters. $this->add_classname( $this->generate_css_filters( $function_name ) ); // Remove automatically added classnames. $this->remove_classname( 'et_pb_module' ); if ( self::contains( $content, array( 'et_pb_menu', 'et_pb_fullwidth_menu' ) ) ) { $this->add_classname( 'et_pb_row--with-menu' ); } // Save module classes into variable BEFORE processing the content with `do_shortcode()` // Otherwise order classes messed up with internal rows if exist. $module_classes = $this->module_classname( $function_name ); // Inner content shortcode parsing has to be done after all classname addition/removal. $inner_content = do_shortcode( et_pb_fix_shortcodes( $content ) ); $content_dependent_classname = '' === trim( $inner_content ) ? ' et_pb_row_empty' : ''; // reset the global column settings to make sure they are not affected by internal content // This has to be done after inner content's shortcode being parsed. $et_pb_all_column_settings = $et_pb_all_column_settings_backup; // Reset row's column content flag. if ( $et_pb_rendering_column_content_row ) { $et_pb_rendering_column_content_row = false; } $output = sprintf( ' %1$s %6$s %5$s ', $inner_content, $module_classes, esc_html( $function_name ), $this->module_id(), $background_video, $parallax_image, $content_dependent_classname, et_core_esc_previously( $gutter_hover_data ) ); return $output; } } new ET_Builder_Row(); /** * Class used to process inner row element(module). * * @since 4.6.2 */ class ET_Builder_Row_Inner extends ET_Builder_Structure_Element { /** * Sets up the element's properties. */ public function init() { $this->name = esc_html__( 'Row', 'et_builder' ); $this->plural = esc_html__( 'Rows', 'et_builder' ); $this->slug = 'et_pb_row_inner'; $this->vb_support = 'on'; $this->child_slug = 'et_pb_column_inner'; $this->child_item_text = esc_html__( 'Column', 'et_builder' ); $this->advanced_fields = array( 'background' => array( 'use_background_color' => true, 'use_background_image' => true, 'use_background_color_gradient' => true, 'use_background_video' => true, ), 'margin_padding' => array( 'css' => array( 'main' => '%%order_class%%.et_pb_row_inner', 'important' => 'all', ), ), 'max_width' => array( 'css' => array( 'main' => '%%order_class%%.et_pb_row_inner', ), 'options' => array( 'module_alignment' => array( 'label' => esc_html__( 'Row Alignment', 'et_builder' ), 'description' => esc_html__( 'Rows can be aligned to the left, right or center. By default, rows are centered within their parent section.', 'et_builder' ), 'default_sticky' => 'center', ), ), ), 'fonts' => false, 'text' => false, 'button' => false, 'position_fields' => array( 'default' => 'relative', ), ); $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'column_structure' => array( 'title' => esc_html__( 'Column Structure', 'et_builder' ), 'priority' => 1, 'always_open' => true, ), ), ), 'advanced' => array( 'toggles' => array( 'width' => array( 'title' => et_builder_i18n( 'Sizing' ), 'priority' => 65, ), ), ), ); $this->help_videos = array( array( 'id' => 'R9ds7bEaHE8', 'name' => esc_html__( 'An introduction to Rows', 'et_builder' ), ), ); } /** * Get the settings fields data for this element. * * @return array|array[] */ public function get_fields() { $fields = array( 'column_structure' => array( 'label' => esc_html__( 'Column Structure', 'et_builder' ), 'description' => esc_html__( 'Here you can choose the Column Structure for this Row.', 'et_builder' ), 'type' => 'column-structure', 'default' => '4_4', 'options' => array( '4_4' => et_pb_get_column_svg( '4_4' ), '1_2,1_2' => et_pb_get_column_svg( '1_2,1_2' ), '1_3,1_3,1_3' => et_pb_get_column_svg( '1_3,1_3,1_3' ), '1_4,1_4,1_4,1_4' => et_pb_get_column_svg( '1_4,1_4,1_4,1_4' ), ), 'toggle_slug' => 'column_structure', ), 'padding_mobile' => array( 'label' => esc_html__( 'Keep Custom Padding on Mobile', 'et_builder' ), 'type' => 'skip', // Remaining attribute for backward compatibility. 'tab_slug' => 'advanced', 'toggle_slug' => 'margin_padding', ), 'use_custom_gutter' => array( 'label' => esc_html__( 'Use Custom Gutter Width', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'affects' => array( 'gutter_width', ), 'description' => esc_html__( 'Enable this option to define custom gutter width for this row.', 'et_builder' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'width', ), 'gutter_width' => array( 'label' => esc_html__( 'Gutter Width', 'et_builder' ), 'type' => 'range', 'option_category' => 'layout', 'range_settings' => array( 'min' => 1, 'max' => 4, 'step' => 1, 'min_limit' => 1, 'max_limit' => 4, ), 'depends_show_if' => 'on', 'description' => esc_html__( 'Adjust the spacing between each column in this row.', 'et_builder' ), 'validate_unit' => false, 'fixed_range' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'default_on_front' => (string) et_get_option( 'gutter_width', '3' ), 'hover' => 'tabs', ), 'make_equal' => array( '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', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'width', ), 'column_padding_mobile' => array( 'label' => esc_html__( 'Keep Column Padding on Mobile', 'et_builder' ), 'tab_slug' => 'advanced', 'type' => 'skip', // Remaining attribute for backward compatibility. ), 'custom_padding_last_edited' => array( 'type' => 'skip', 'tab_slug' => 'advanced', ), ); $column_fields = $this->get_column_fields( 4, array( 'background_color' => array(), 'bg_img' => array(), 'padding_top_bottom_link' => array(), 'padding_left_right_link' => array(), 'parallax' => array( 'default_on_front' => 'off', ), 'parallax_method' => array( 'default_on_front' => 'on', ), 'background_size' => array(), 'background_position' => array(), 'background_repeat' => array(), 'background_blend' => 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( '__video_background', ), ), 'background_video_webm' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_width' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_height' => array( 'computed_affects' => array( '__video_background', ), ), 'allow_player_pause' => array( 'computed_affects' => array( '__video_background', ), ), 'background_video_pause_outside_viewport' => array( 'computed_affects' => array( '__video_background', ), ), '__video_background' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Column', 'get_column_video_background', ), 'computed_depends_on' => array( 'background_video_mp4', 'background_video_webm', 'background_video_width', 'background_video_height', ), 'computed_minimum' => array( 'background_video_mp4', 'background_video_webm', ), ), '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 inner row. */ public function get_transition_fields_css_props() { $fields = parent::get_transition_fields_css_props(); for ( $i = 1; $i <= 6; $i ++ ) { $selector = "%%order_class%% > .et_pb_column:nth-child({$i})"; $fields[ "background_color_{$i}" ] = array( 'background-color' => $selector ); $fields[ "padding_{$i}" ] = array( 'padding' => $selector ); } return $fields; } /** * Generates the structure module's HTML output based on {@see ET_Builder_Row_Inner::$props}. * * @param array $atts List of unprocessed attributes. * @param mixed $content Content being processed. * @param string $function_name Slug of module that is used for rendering output. * * @return string The module's HTML output. */ public function render( $atts, $content, $function_name ) { $gutter_width = $this->props['gutter_width']; $gutter_width_hover = $this->get_hover_value( 'gutter_width' ); $make_equal = $this->props['make_equal']; $custom_padding = $this->props['custom_padding']; $padding_mobile = $this->props['padding_mobile']; $custom_padding_tablet = $this->props['custom_padding_tablet']; $custom_padding_phone = $this->props['custom_padding_phone']; $custom_padding_last_edited = $this->props['custom_padding_last_edited']; $column_padding_mobile = $this->props['column_padding_mobile']; $global_module = $this->props['global_module']; $use_custom_gutter = $this->props['use_custom_gutter']; $hover = et_pb_hover_options(); global $et_pb_all_column_settings_inner, $et_pb_rendering_column_content, $et_pb_rendering_column_content_row; $et_pb_all_column_settings_inner = ! isset( $et_pb_all_column_settings_inner ) ? array() : $et_pb_all_column_settings_inner; $et_pb_all_column_settings_backup = $et_pb_all_column_settings_inner; $keep_column_padding_mobile = $column_padding_mobile; if ( '' !== $global_module ) { $global_content = et_pb_load_global_module( $global_module, $function_name ); if ( '' !== $global_content ) { return do_shortcode( et_pb_fix_shortcodes( wpautop( $global_content ) ) ); } } $custom_padding_responsive_active = et_pb_get_responsive_status( $custom_padding_last_edited ); $padding_mobile_values = $custom_padding_responsive_active ? array( 'tablet' => explode( '|', $custom_padding_tablet ), 'phone' => explode( '|', $custom_padding_phone ), ) : array( 'tablet' => false, 'phone' => false, ); $et_pb_columns_inner_counter = 0; $padding_values = explode( '|', $custom_padding ); if ( ! empty( $padding_values ) ) { // old version of Rows support only top and bottom padding, so we need to handle it along with the full padding in the recent version. if ( 2 === count( $padding_values ) ) { $padding_settings = array( 'top' => isset( $padding_values[0] ) ? $padding_values[0] : '', 'bottom' => isset( $padding_values[1] ) ? $padding_values[1] : '', ); } else { $padding_settings = array( 'top' => isset( $padding_values[0] ) ? $padding_values[0] : '', 'right' => isset( $padding_values[1] ) ? $padding_values[1] : '', 'bottom' => isset( $padding_values[2] ) ? $padding_values[2] : '', 'left' => isset( $padding_values[3] ) ? $padding_values[3] : '', ); } foreach ( $padding_settings as $padding_side => $value ) { if ( '' !== $value ) { $element_style = array( 'selector' => '.et_pb_column %%order_class%%', 'declaration' => sprintf( 'padding-%1$s: %2$s;', esc_html( $padding_side ), esc_html( $value ) ), ); // Backward compatibility. Keep Padding on Mobile is deprecated in favour of responsive inputs mechanism for custom padding // To ensure that it is compatibility with previous version of Divi, this option is now only used as last resort if no // responsive padding value is found, and padding_mobile value is saved (which is set to off by default). if ( in_array( $padding_mobile, array( 'on', 'off' ), true ) && 'on' !== $padding_mobile && ! $custom_padding_responsive_active ) { $element_style['media_query'] = ET_Builder_Element::get_media_query( 'min_width_981' ); } ET_Builder_Element::set_style( $function_name, $element_style ); } } } if ( ! empty( $padding_mobile_values['tablet'] ) || ! empty( $padding_values['phone'] ) ) { $padding_mobile_values_processed = array(); foreach ( array( 'tablet', 'phone' ) as $device ) { if ( empty( $padding_mobile_values[ $device ] ) ) { continue; } $padding_mobile_values_processed[ $device ] = array( 'padding-top' => isset( $padding_mobile_values[ $device ][0] ) ? $padding_mobile_values[ $device ][0] : '', 'padding-right' => isset( $padding_mobile_values[ $device ][1] ) ? $padding_mobile_values[ $device ][1] : '', 'padding-bottom' => isset( $padding_mobile_values[ $device ][2] ) ? $padding_mobile_values[ $device ][2] : '', 'padding-left' => isset( $padding_mobile_values[ $device ][3] ) ? $padding_mobile_values[ $device ][3] : '', ); } if ( ! empty( $padding_mobile_values_processed ) ) { et_pb_responsive_options()->generate_responsive_css( $padding_mobile_values_processed, '.et_pb_column %%order_class%%', '', $function_name, ' !important; ' ); } } $internal_columns_settings_array = array( 'keep_column_padding_mobile' => $keep_column_padding_mobile, 'et_pb_columns_inner_counter' => $et_pb_columns_inner_counter, 'et_pb_columns_counter' => 0, ); $current_row_position = $et_pb_rendering_column_content ? 'internal_row' : 'regular_row'; $et_pb_all_column_settings_inner[ $current_row_position ] = $internal_columns_settings_array; if ( 'on' === $make_equal ) { $this->add_classname( 'et_pb_equal_columns' ); } $gutter_hover_data = ''; if ( 'on' === $use_custom_gutter && '' !== $gutter_width ) { $gutter_width = '0' === $gutter_width ? '1' : $gutter_width; // set the gutter to 1 if 0 entered by user. $this->add_classname( 'et_pb_gutters' . $gutter_width ); if ( et_builder_is_hover_enabled( 'gutter_width', $this->props ) && ! empty( $gutter_width_hover ) && $gutter_width !== $gutter_width_hover ) { $this->add_classname( 'et_pb_gutter_hover' ); $gutter_hover_data = sprintf( ' data-original_gutter="%1$s" data-hover_gutter="%2$s"', esc_attr( $gutter_width ), esc_attr( $gutter_width_hover ) ); } } $parallax_image = $this->get_parallax_image_background(); $background_video = $this->video_background(); // CSS Filters. $this->add_classname( $this->generate_css_filters( $function_name ) ); // Remove automatically added classnames. $this->remove_classname( 'et_pb_module' ); if ( self::contains( $content, array( 'et_pb_menu', 'et_pb_fullwidth_menu' ) ) ) { $this->add_classname( 'et_pb_row--with-menu' ); } // Save module classes into variable BEFORE processing the content with `do_shortcode()` // Otherwise order classes messed up with internal rows if exist. $module_classes = $this->module_classname( $function_name ); // Inner content shortcode parsing has to be done after all classname addition/removal. $inner_content = do_shortcode( et_pb_fix_shortcodes( $content ) ); $content_dependent_classname = '' === trim( $inner_content ) ? ' et_pb_row_empty' : ''; // reset the global column settings to make sure they are not affected by internal content. $et_pb_all_column_settings_inner = $et_pb_all_column_settings_backup; $output = sprintf( ' %1$s %5$s %6$s ', $inner_content, $module_classes, esc_html( $function_name ), $this->module_id(), $parallax_image, $background_video, $content_dependent_classname, et_core_esc_previously( $gutter_hover_data ) ); return $output; } } new ET_Builder_Row_Inner(); /** * Class used to process column element(module). * * @since 4.6.2 */ class ET_Builder_Column extends ET_Builder_Structure_Element { /** * Sets up the element's properties. */ public function init() { $this->name = esc_html__( 'Column', 'et_builder' ); $this->plural = esc_html__( 'Columns', 'et_builder' ); $this->slug = 'et_pb_column'; $this->additional_shortcode_slugs = array( 'et_pb_column_inner' ); $this->child_title_var = 'admin_label'; $this->advanced_setting_title_text = esc_html__( 'Column', 'et_builder' ); $this->vb_support = 'on'; $this->type = 'child'; $this->advanced_fields = array( 'max_width' => false, 'fonts' => false, 'text' => false, 'margin_padding' => array( 'use_margin' => false, ), 'z_index' => array( 'default' => '2', 'important' => true, ), 'position_fields' => array( 'default' => 'relative', ), ); $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'admin_label' => array( 'title' => et_builder_i18n( 'Admin Label' ), 'priority' => 99, ), ), ), ); $this->help_videos = array( array( 'id' => 'R9ds7bEaHE8', 'name' => esc_html__( 'An introduction to the Column module', 'et_builder' ), ), ); } /** * Get the settings fields data for this element. * * @return array|array[] */ public function get_fields() { $fields = array( 'type' => array( 'default_on_front' => '4_4', 'type' => 'skip', ), 'specialty_columns' => array( 'type' => 'skip', ), 'saved_specialty_column_type' => array( 'type' => 'skip', ), 'module_id' => array( 'label' => esc_html__( 'CSS ID', 'et_builder' ), 'description' => esc_html__( "Assign a unique CSS ID to the element which can be used to assign custom CSS styles from within your child theme or from within Divi's custom CSS inputs.", 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), 'module_class' => array( 'label' => esc_html__( 'CSS Class', 'et_builder' ), 'description' => esc_html__( "Assign any number of CSS Classes to the element, separated by spaces, which can be used to assign custom CSS styles from within your child theme or from within Divi's custom CSS inputs.", 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), 'admin_label' => array( 'label' => et_builder_i18n( 'Admin Label' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ), 'toggle_slug' => 'admin_label', ), ); return $fields; } /** * Generates the structure module's HTML output based on {@see ET_Builder_Column::$props}. * * @param array $atts List of unprocessed attributes. * @param mixed $content Content being processed. * @param string $function_name Slug of module that is used for rendering output. * * @return string The module's HTML output. */ public function render( $atts, $content, $function_name ) { $type = $this->props['type']; $specialty_columns = $this->props['specialty_columns']; $saved_specialty_column_type = $this->props['saved_specialty_column_type']; $custom_css_class = ''; global $et_pb_all_column_settings, $et_pb_all_column_settings_inner, $et_specialty_column_type, $et_pb_rendering_column_content, $et_pb_rendering_column_content_row, $et_pb_rendering_specialty_section, $et_pb_column_completion; $is_specialty_column = 'et_pb_column_inner' !== $function_name && $et_pb_rendering_specialty_section; $gobal_column_settings_holder = 'et_pb_column_inner' === $function_name ? $et_pb_all_column_settings_inner : $et_pb_all_column_settings; $current_row_position = $et_pb_rendering_column_content_row ? 'internal_row' : 'regular_row'; $array_index = self::$_->array_get( $gobal_column_settings_holder, "{$current_row_position}.et_pb_columns_counter", 0 ); $keep_column_padding_mobile = self::$_->array_get( $gobal_column_settings_holder, "{$current_row_position}.keep_column_padding_mobile", 'on' ); $sticky = et_pb_sticky_options(); if ( $is_specialty_column ) { $et_specialty_column_type = $type; $backgrounds_array = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_backgrounds", array() ); $background_gradient = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_backgrounds_gradient.[{$array_index}]", '' ); $background_video = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_backgrounds_video.[{$array_index}]", '' ); $paddings_array = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_paddings", array() ); $paddings_mobile_array = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_paddings_mobile", array() ); $column_css_array = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_css", array() ); $column_parallax = self::$_->array_get( $et_pb_all_column_settings, "{$current_row_position}.et_pb_column_parallax", '' ); $background_color = isset( $backgrounds_array[ $array_index ]['color'] ) ? $backgrounds_array[ $array_index ]['color'] : ''; $background_img = isset( $backgrounds_array[ $array_index ]['image'] ) ? $backgrounds_array[ $array_index ]['image'] : ''; $background_size = isset( $backgrounds_array[ $array_index ]['image_size'] ) ? $backgrounds_array[ $array_index ]['image_size'] : ''; $background_position = isset( $backgrounds_array[ $array_index ]['image_position'] ) ? $backgrounds_array[ $array_index ]['image_position'] : ''; $background_repeat = isset( $backgrounds_array[ $array_index ]['image_repeat'] ) ? $backgrounds_array[ $array_index ]['image_repeat'] : ''; $background_blend = isset( $backgrounds_array[ $array_index ]['image_blend'] ) ? $backgrounds_array[ $array_index ]['image_blend'] : ''; $background_gradient_overlays_image = isset( $background_gradient['overlays_image'] ) ? $background_gradient['overlays_image'] : ''; $background_color_hover = isset( $backgrounds_array[ $array_index ] ) ? self::$_->array_get( $backgrounds_array[ $array_index ], 'color_hover' ) : ''; $background_color_hover_enabled = isset( $backgrounds_array[ $array_index ] ) ? self::$_->array_get( $backgrounds_array[ $array_index ], 'color_hover_enabled' ) : ''; $background_color_sticky = isset( $backgrounds_array[ $array_index ] ) ? self::$_->array_get( $backgrounds_array[ $array_index ], 'color_sticky' ) : ''; $background_color_sticky_enabled = isset( $backgrounds_array[ $array_index ] ) ? self::$_->array_get( $backgrounds_array[ $array_index ], 'color_sticky_enabled' ) : ''; $padding_values = isset( $paddings_array[ $array_index ] ) ? $paddings_array[ $array_index ] : array(); $padding_mobile_values = isset( $paddings_mobile_array[ $array_index ] ) ? $paddings_mobile_array[ $array_index ] : array(); $padding_last_edited = isset( $padding_mobile_values['last_edited'] ) ? $padding_mobile_values['last_edited'] : 'off|desktop'; $padding_responsive_active = et_pb_get_responsive_status( $padding_last_edited ); $parallax_method = isset( $column_parallax[ $array_index ][0] ) && 'on' === $column_parallax[ $array_index ][0] ? $column_parallax[ $array_index ][1] : ''; $custom_css_class = isset( $column_css_array['css_class'][ $array_index ] ) ? ' ' . $column_css_array['css_class'][ $array_index ] : ''; $custom_css_id = isset( $column_css_array['css_id'][ $array_index ] ) ? $column_css_array['css_id'][ $array_index ] : ''; $custom_css_before = isset( $column_css_array['custom_css_before'][ $array_index ] ) ? $column_css_array['custom_css_before'][ $array_index ] : ''; $custom_css_main = isset( $column_css_array['custom_css_main'][ $array_index ] ) ? $column_css_array['custom_css_main'][ $array_index ] : ''; $custom_css_after = isset( $column_css_array['custom_css_after'][ $array_index ] ) ? $column_css_array['custom_css_after'][ $array_index ] : ''; $custom_css_before_hover = self::$_->array_get( $column_css_array, "custom_css_before_hover.[$array_index]", '' ); $custom_css_main_hover = self::$_->array_get( $column_css_array, "custom_css_main_hover.[$array_index]", '' ); $custom_css_after_hover = self::$_->array_get( $column_css_array, "custom_css_after_hover.[$array_index]", '' ); $custom_css_before_sticky = self::$_->array_get( $column_css_array, "custom_css_before_sticky.[$array_index]", '' ); $custom_css_main_sticky = self::$_->array_get( $column_css_array, "custom_css_main_sticky.[$array_index]", '' ); $custom_css_after_sticky = self::$_->array_get( $column_css_array, "custom_css_after_sticky.[$array_index]", '' ); } else { $custom_css_id = self::$_->array_get( $this->props, 'module_id', '' ); $parallax_method = self::$_->array_get( $this->props, 'parallax_method', '' ); } // et_pb_columns_counter should be updated for all columns to calculate the last column correctly. if ( isset( $gobal_column_settings_holder[ $current_row_position ] ) ) { if ( 'et_pb_column_inner' === $function_name ) { $et_pb_all_column_settings_inner[ $current_row_position ]['et_pb_columns_counter']++; } else { $et_pb_all_column_settings[ $current_row_position ]['et_pb_columns_counter']++; } } // Get column type value in array. $column_type = explode( '_', $type ); // Just in case for some reason column shortcode has no `type` attribute and causes unexpected $column_type values. if ( isset( $column_type[0] ) && isset( $column_type[1] ) ) { // Get column progress. $column_progress = intval( $column_type[0] ) / intval( $column_type[1] ); if ( 0 === $array_index ) { $et_pb_column_completion = $column_progress; } else { $et_pb_column_completion = $et_pb_column_completion + $column_progress; } } // Last column is when sum of column type value equals to 1. Compare value as a string, comparing integers returns inconsistent results. $is_last_column = '1' === strval( $et_pb_column_completion ); // Still need to manually output this for Specialty columns. if ( $is_specialty_column ) { $background_images = array(); if ( '' !== $background_gradient && 'on' === $background_gradient['active'] ) { $has_background_gradient = true; $default_gradient = apply_filters( 'et_pb_default_gradient', array( 'type' => ET_Global_Settings::get_value( 'all_background_gradient_type' ), 'direction' => ET_Global_Settings::get_value( 'all_background_gradient_direction' ), 'radial_direction' => ET_Global_Settings::get_value( 'all_background_gradient_direction_radial' ), 'color_start' => ET_Global_Settings::get_value( 'all_background_gradient_start' ), 'color_end' => ET_Global_Settings::get_value( 'all_background_gradient_end' ), 'start_position' => ET_Global_Settings::get_value( 'all_background_gradient_start_position' ), 'end_position' => ET_Global_Settings::get_value( 'all_background_gradient_end_position' ), ) ); $background_gradient = wp_parse_args( array_filter( $background_gradient ), $default_gradient ); $direction = 'linear' === $background_gradient['type'] ? $background_gradient['direction'] : "circle at {$background_gradient['radial_direction']}"; $start_gradient_position = et_sanitize_input_unit( $background_gradient['start_position'], false, '%' ); $end_gradient_position = et_sanitize_input_unit( $background_gradient['end_position'], false, '%' ); $background_images[] = "{$background_gradient['type']}-gradient( {$direction}, {$background_gradient['color_start']} ${start_gradient_position}, {$background_gradient['color_end']} ${end_gradient_position} )"; } if ( '' !== $background_img && 'on' !== $parallax_method ) { $has_background_image = true; $background_images[] = sprintf( 'url(%s)', esc_attr( $background_img ) ); if ( '' !== $background_size ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( 'background-size:%s;', esc_attr( $background_size ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $background_position ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( 'background-position:%s;', esc_attr( str_replace( '_', ' ', $background_position ) ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $background_repeat ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( 'background-repeat:%s;', esc_attr( $background_repeat ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $background_blend ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( 'background-blend-mode:%s;', esc_attr( $background_blend ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } if ( ! empty( $background_images ) ) { if ( 'on' !== $background_gradient_overlays_image ) { // The browsers stack the images in the opposite order to what you'd expect. $background_images = array_reverse( $background_images ); } $background_images_declaration = sprintf( 'background-image: %1$s;', esc_html( implode( ', ', $background_images ) ) ); $el_style = array( 'selector' => '%%order_class%%', 'declaration' => esc_attr( $background_images_declaration ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $background_color && 'rgba(0,0,0,0)' !== $background_color && ! isset( $has_background_gradient, $has_background_image ) ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( 'background-color:%s;', esc_attr( $background_color ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); if ( $background_color_hover && $background_color_hover_enabled ) { $el_style = array( 'selector' => '%%order_class%%:hover', 'declaration' => sprintf( 'background-color:%s;', esc_attr( $background_color ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } // Sticky. if ( $background_color_sticky && $background_color_sticky_enabled ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%', $this->is_sticky_module ), 'declaration' => sprintf( 'background-color:%s;', esc_attr( $background_color_sticky ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); // Add hover styles in sticky state. if ( $background_color_hover && $background_color_hover_enabled ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:hover', $this->is_sticky_module ), 'declaration' => sprintf( 'background-color:%s;', esc_attr( $background_color_hover ) ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } } elseif ( isset( $has_background_gradient, $has_background_image ) ) { // Force background-color: initial. $el_style = array( 'selector' => '%%order_class%%', 'declaration' => 'background-color: initial;', ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( ! empty( $padding_values ) ) { $padding_hover_enabled = self::$_->array_get( $padding_values, 'padding-hover-enabled', false ); $padding_sticky_enabled = self::$_->array_get( $padding_values, 'padding-sticky-enabled', false ); $sticky_padding_selector = $sticky->add_sticky_to_selectors( '%%order_class%%', $this->is_sticky_module ); unset( $padding_values['padding-hover-enabled'], $padding_values['padding-sticky-enabled'] ); foreach ( $padding_values as $position => $value ) { if ( in_array( $position, array( 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ), true ) && ! empty( $value ) ) { $element_style = array( 'selector' => '%%order_class%%', 'declaration' => sprintf( '%1$s:%2$s;', esc_html( $position ), esc_html( et_builder_process_range_value( $value ) ) ), ); // Backward compatibility. Keep Padding on Mobile is deprecated in favour of responsive inputs mechanism for custom padding // To ensure that it is compatibility with previous version of Divi, this option is now only used as last resort if no // responsive padding value is found, and padding_mobile value is saved (which is set to off by default). if ( in_array( $keep_column_padding_mobile, array( 'on', 'off' ), true ) && 'on' !== $keep_column_padding_mobile && ! $padding_responsive_active ) { $element_style['media_query'] = ET_Builder_Element::get_media_query( 'min_width_981' ); } ET_Builder_Element::set_style( $function_name, $element_style ); } // Add padding hover styles. if ( $padding_hover_enabled && null !== self::$_->array_get( $padding_values, "{$position}-hover" ) && '' !== self::$_->array_get( $padding_values, "{$position}-hover" ) ) { $hover_value = $padding_values[ "{$position}-hover" ]; $element_style = array( 'selector' => '%%order_class%%:hover', 'declaration' => sprintf( '%1$s:%2$s;', esc_html( $position ), esc_html( et_builder_process_range_value( $hover_value ) ) ), ); ET_Builder_Element::set_style( $function_name, $element_style ); } // Sticky. $sticky_padding_value = self::$_->array_get( $padding_values, "{$position}-sticky", '' ); if ( $padding_sticky_enabled && ! empty( $sticky_padding_value ) ) { $element_style = array( 'selector' => $sticky_padding_selector, 'declaration' => sprintf( '%1$s:%2$s;', esc_html( $position ), esc_html( et_builder_process_range_value( $sticky_padding_value ) ) ), ); ET_Builder_Element::set_style( $function_name, $element_style ); } } } if ( $padding_responsive_active && ( ! empty( $padding_mobile_values['tablet'] ) || ! empty( $padding_values['phone'] ) ) ) { $padding_mobile_values_processed = array(); foreach ( array( 'tablet', 'phone' ) as $device ) { if ( empty( $padding_mobile_values[ $device ] ) ) { continue; } $padding_mobile_values_processed[ $device ] = array( 'padding-top' => isset( $padding_mobile_values[ $device ][0] ) ? $padding_mobile_values[ $device ][0] : '', 'padding-right' => isset( $padding_mobile_values[ $device ][1] ) ? $padding_mobile_values[ $device ][1] : '', 'padding-bottom' => isset( $padding_mobile_values[ $device ][2] ) ? $padding_mobile_values[ $device ][2] : '', 'padding-left' => isset( $padding_mobile_values[ $device ][3] ) ? $padding_mobile_values[ $device ][3] : '', ); } if ( ! empty( $padding_mobile_values_processed ) ) { $padding_mobile_selector = 'et_pb_column_inner' !== $function_name ? '.et_pb_row > .et_pb_column%%order_class%%' : '.et_pb_row_inner > .et_pb_column%%order_class%%'; et_pb_responsive_options()->generate_responsive_css( $padding_mobile_values_processed, $padding_mobile_selector, '', $function_name ); } } if ( '' !== $custom_css_before ) { $el_style = array( 'selector' => '%%order_class%%:before', 'declaration' => trim( $custom_css_before ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $custom_css_main ) { $el_style = array( 'selector' => '%%order_class%%', 'declaration' => trim( $custom_css_main ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $custom_css_after ) { $el_style = array( 'selector' => '%%order_class%%:after', 'declaration' => trim( $custom_css_after ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $custom_css_before_hover ) { $el_style = array( 'selector' => '%%order_class%%:hover:before', 'declaration' => trim( $custom_css_before_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $custom_css_main_hover ) { $el_style = array( 'selector' => '%%order_class%%:hover', 'declaration' => trim( $custom_css_main_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } if ( '' !== $custom_css_after_hover ) { $el_style = array( 'selector' => '%%order_class%%:hover:after', 'declaration' => trim( $custom_css_after_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } // Sticky. if ( ! empty( $custom_css_before_sticky ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:before', $this->is_sticky_module ), 'declaration' => trim( $custom_css_before_sticky ), ); ET_Builder_Element::set_style( $function_name, $el_style ); // Add hover styles in sticky state, in case some hover styles are overridden with sticky styles. if ( ! empty( $custom_css_before_hover ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:hover:before', $this->is_sticky_module ), 'declaration' => trim( $custom_css_before_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } if ( ! empty( $custom_css_main_sticky ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%', $this->is_sticky_module ), 'declaration' => trim( $custom_css_main_sticky ), ); ET_Builder_Element::set_style( $function_name, $el_style ); // Add hover styles in sticky state, in case some hover styles are overridden with sticky styles. if ( ! empty( $custom_css_main_hover ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:hover', $this->is_sticky_module ), 'declaration' => trim( $custom_css_main_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } if ( ! empty( $custom_css_after_sticky ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:after', $this->is_sticky_module ), 'declaration' => trim( $custom_css_after_sticky ), ); ET_Builder_Element::set_style( $function_name, $el_style ); // Add hover styles in sticky state, in case some hover styles are overridden with sticky styles. if ( ! empty( $custom_css_after_hover ) ) { $el_style = array( 'selector' => $sticky->add_sticky_to_order_class( '%%order_class%%:hover:after', $this->is_sticky_module ), 'declaration' => trim( $custom_css_after_hover ), ); ET_Builder_Element::set_style( $function_name, $el_style ); } } } if ( 'et_pb_column_inner' === $function_name ) { if ( '1_1' === $type ) { $type = '4_4'; } $et_specialty_column_type = '' !== $saved_specialty_column_type ? $saved_specialty_column_type : $et_specialty_column_type; switch ( $et_specialty_column_type ) { case '1_2': if ( '1_2' === $type ) { $type = '1_4'; } if ( '1_3' === $type ) { $type = '1_6'; } break; case '2_3': if ( '1_3' === $type ) { $type = '2_9'; } if ( '1_2' === $type ) { $type = '1_3'; } if ( '1_4' === $type ) { $type = '1_6'; } break; case '3_4': if ( '1_2' === $type ) { $type = '3_8'; } elseif ( '1_3' === $type ) { $type = '1_4'; } break; } } $video_background = ''; $parallax_image = ''; // Column background video. if ( $is_specialty_column ) { $video_background = trim( $this->video_background( $background_video ) ); if ( '' !== $background_img && '' !== $parallax_method ) { $parallax_image = sprintf( '
', esc_attr( $background_img ), ( 'off' === $parallax_method ? ' et_pb_parallax_css' : '' ) ); } if ( '' !== $parallax_method ) { $this->add_classname( 'et_pb_section_parallax' ); } } else { $video_background = trim( $this->video_background() ); $parallax_image = $this->get_parallax_image_background(); } // Remove automatically added classname. $this->remove_classname( 'et_pb_module' ); $this->add_classname( 'et_pb_column_' . $type, 1 ); if ( '' !== $custom_css_class ) { $this->add_classname( $custom_css_class ); } if ( $is_specialty_column && '' !== $specialty_columns ) { $this->add_classname( 'et_pb_specialty_column' ); } // CSS Filters. $this->add_classname( $this->generate_css_filters( $function_name ) ); if ( '' !== $video_background ) { $this->add_classname( array( 'et_pb_section_video', 'et_pb_preload', ) ); } if ( $is_last_column ) { $this->add_classname( 'et-last-child' ); } if ( self::contains( $content, array( 'et_pb_menu', 'et_pb_fullwidth_menu' ) ) ) { $this->add_classname( 'et_pb_column--with-menu' ); } // Module classname in column has to be contained in variable BEFORE content is being parsed // as shortcode because column and column inner use the same ET_Builder_Column's render // classname doesn't work in nested situation because each called module doesn't have its own class init. $module_classname = $this->module_classname( $function_name ); // Inner content shortcode parsing has to be done after all classname addition/removal. $inner_content = do_shortcode( et_pb_fix_shortcodes( $content ) ); // Inner content dependant class in column shouldn't use add_classname/remove_classname method. $content_dependent_classname = '' === trim( $inner_content ) ? ' et_pb_column_empty' : ''; $output = sprintf( '
%5$s %3$s %2$s
', $module_classname, $inner_content, $parallax_image, '' !== $custom_css_id ? sprintf( ' id="%1$s"', esc_attr( $custom_css_id ) ) : '', // 5 $video_background, $content_dependent_classname ); return $output; } } new ET_Builder_Column(); /** * Fires after the builder's structure element classes are loaded. * * @since 4.4.9 */ do_action( 'et_builder_structure_elements_loaded' );