Skip to content

Instantly share code, notes, and snippets.

@carasmo
Created May 1, 2017 16:31
Show Gist options
  • Save carasmo/58fb8e5ea796ec56e8cb87f1f4fc2e38 to your computer and use it in GitHub Desktop.
Save carasmo/58fb8e5ea796ec56e8cb87f1f4fc2e38 to your computer and use it in GitHub Desktop.
Add Select to Section in Elementor for user to choose column stacking and 100% based on your specific theme.
<?php
/**
*
* Elementor Custom Breakpoint/Stacking Select
* Issue: https://github.com/pojome/elementor/issues/418/
*/
defined( 'ABSPATH' ) || exit;
if ( ! class_exists( 'Elementor\Plugin' ) ) return; //* exit early if Elementor not active/installed
/**
*
* Theme Name Elementor Added Controls
*
*/
function yourprefix_elementor_controls( $section, $section_id, $args ) {
//* Section Controls
if( $section->get_name() == 'section' && $section_id == 'section_layout' ) :
$section->add_control(
'yourprefix_column_breakpoint' ,
[
'label' => __( 'Column Breakpoint', 'text-domain' ), //change text domain to yours
'description' => __( 'At what width do the columns stack and become 100% wide?', 'text-domain' ), //change text domain to yours
'type' => Elementor\Controls_Manager::SELECT,
'default' => '',
'options' => array(
' ' => ' ',
'width-900' => '900px',
'width-1000' => '1000px',
'width-1024' => '1024px',
'width-1200' => '1200px',
),
'prefix_class' => 'themeslug-break-point-', //change themeslug
'label_block' => true,
]
);
endif; // Section Custom Controls
}
add_action( 'elementor/element/before_section_end' , 'yourprefix_elementor_controls', 10, 3 );
/*
*
* Stacking/Breakpoints CSS wp_add_inline_style and minified
*
* change themeslug to match the control prefix_class
*/
function yourprefix_elementor_column_breakpoints() {
$css = "@media (max-width: 900px) {
.elementor-inner .themeslug-break-point-width-900 .elementor-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elementor-inner .themeslug-break-point-width-900 .elementor-column {
width: 100%;
}
}
@media (max-width: 1000px) {
.elementor-inner .themeslug-break-point-width-1000 .elementor-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elementor-inner .themeslug-break-point-width-1000 .elementor-column {
width: 100%;
}
}
@media (max-width: 1024px) {
.elementor-inner .themeslug-break-point-width-1024 .elementor-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elementor-inner .themeslug-break-point-width-1024 .elementor-column {
width: 100%;
}
}
@media (max-width: 1200px) {
.elementor-inner .themeslug-break-point-width-1200 .elementor-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elementor-inner .themeslug-break-point-width-1200 .elementor-column {
width: 100%;
}
}";
global $post;
$handle = 'elementor-post-' . $post->ID;
$css = str_replace( array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css );
wp_add_inline_style( $handle, $css );
}
add_action( 'wp_enqueue_scripts', 'yourprefix_elementor_column_breakpoints', 11 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment