: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
$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 ),
$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] : '',
$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 ) {
'selector' => '.et_pb_column %%order_class%%',
'declaration' => sprintf(
esc_html( $padding_side ),
// 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' ) ) && '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] ) ) {
$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_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' );
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_hover)
$parallax_image = $this->get_parallax_image_background();
$background_video = $this->video_background();
$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;
'<div%4$s class="%2$s%7$s"%8$s>
esc_html( $function_name ),
$content_dependent_classname,
et_core_esc_previously( $gutter_hover_data )
new ET_Builder_Row_Inner;
class ET_Builder_Column extends ET_Builder_Structure_Element {
$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->advanced_fields = array(
'margin_padding' => array(
'position_fields'=> array(
$this->settings_modal_toggles = array(
'title' => et_builder_i18n( 'Admin Label' ),
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Column module', 'et_builder' ),
'default_on_front' => '4_4',
'specialty_columns' => array(
'saved_specialty_column_type' => 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' ),
'option_category' => 'configuration',
'tab_slug' => 'custom_css',
'toggle_slug' => 'classes',
'option_class' => 'et_pb_custom_css_regular',
'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' ),
'option_category' => 'configuration',
'tab_slug' => 'custom_css',
'toggle_slug' => 'classes',
'option_class' => 'et_pb_custom_css_regular',
'label' => et_builder_i18n( 'Admin Label' ),
'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',
function render( $atts, $content = null, $function_name ) {
$type = $this->props['type'];
$specialty_columns = $this->props['specialty_columns'];
$saved_specialty_column_type = $this->props['saved_specialty_column_type'];
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' );
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" ) : '';
$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_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']++;
$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] ) ) {
$column_progress = intval( $column_type[0] ) / intval( $column_type[1] );
if ( 0 === $array_index ) {
$et_pb_column_completion = $column_progress;
$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 = $background_gradient['type'] === 'linear' ? $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(
{$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(
esc_attr( $background_img )
if ( '' !== $background_size ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => sprintf(
esc_attr( $background_size )
if ( '' !== $background_position ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => sprintf(
'background-position:%s;',
esc_attr( str_replace( '_', ' ', $background_position ) )
if ( '' !== $background_repeat ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => sprintf(
esc_attr( $background_repeat )
if ( '' !== $background_blend ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => sprintf(
'background-blend-mode:%s;',
esc_attr( $background_blend )
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 );
$backgorund_images_declaration = sprintf(
'background-image: %1$s;',
esc_html( implode( ', ', $background_images ) )
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => esc_attr( $backgorund_images_declaration ),
if ( '' !== $background_color && 'rgba(0,0,0,0)' !== $background_color && ! isset( $has_background_gradient, $has_background_image ) ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => sprintf(
esc_attr( $background_color )
if ( $background_color_hover && $background_color_hover_enabled ) {
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%:hover',
'declaration' => sprintf(
esc_attr( $background_color_hover )
} else if ( isset( $has_background_gradient, $has_background_image ) ) {
// Force background-color: initial
ET_Builder_Element::set_style( $function_name, array(
'selector' => '%%order_class%%',
'declaration' => 'background-color: initial;'
if ( ! empty( $padding_values ) ) {
$padding_hover_enabled = self::$_->array_get( $padding_values, 'padding-hover-enabled', false );
unset( $padding_values['padding-hover-enabled'] );
foreach( $padding_values as $position => $value ) {
if ( in_array( $position, array('padding-top', 'padding-right', 'padding-bottom', 'padding-left' ) ) && !empty( $value ) ) {
'selector' => '%%order_class%%',
'declaration' => sprintf(
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' ) ) && '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 );