Created
May 1, 2017 16:31
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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