Last active
October 16, 2024 09:13
-
-
Save iqbalrony/8e6643e1bb52983382b739dbd2cb61a0 to your computer and use it in GitHub Desktop.
Elementor coding tips tricks. (Exclude & Include example for elementor group control)
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 | |
/* | |
* Exclude & Include in group control | |
*/ | |
$this->add_group_control( | |
Group_Control_Background::get_type(), | |
[ | |
'name' => 'item_background', | |
'label' => __( 'Background', 'happy-addons-pro' ), | |
'types' => [ 'classic', 'gradient' ], | |
'exclude' => [ 'image' ], // remove image bg option | |
'selector' => '{{WRAPPER}} .post-item', | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Background::get_type(), | |
[ | |
'name' => 'item_background_image', | |
'types' => [ 'classic', 'gradient' ], | |
'exclude' => [ | |
'classic' => 'image' // remove image bg option | |
], | |
'selector' => '{{WRAPPER}} .carousel-item', | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Border::get_type(), | |
[ | |
'name' => 'item_border', | |
'label' => __( 'Border', 'happy-addons-pro' ), | |
'selector' => '{{WRAPPER}} .post-item', | |
'exclude' => ['color'], //remove border color | |
'fields_options' => [ | |
'border' => [ | |
'default' => 'solid', | |
], | |
'width' => [ | |
'label' => __( 'Width', 'text-domain' ), | |
'allowed_dimensions' => ['top', 'bottom', 'left', 'right'], | |
'size_units' => ['px'], | |
'default' => [ | |
'top' => '0', | |
'right' => '0', | |
'bottom' => '1', | |
'left' => '0', | |
'isLinked' => false, | |
], | |
'selectors' => [ | |
'{{WRAPPER}} .woocommerce-shipping-calculator :is(select, input, .select2-container)' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}', | |
], | |
], | |
'color' => [ | |
'default' => '#DEDFE2', | |
'alpha' => false, | |
], | |
], | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Image_Size::get_type(), | |
[ | |
'name' => 'featured_image', | |
'default' => 'thumbnail', | |
'exclude' => [ | |
'custom', //remove custom option | |
] | |
] | |
); | |
$repeater->add_group_control( | |
Group_Control_Typography::get_type(), | |
[ | |
'name' => 'text_typography', | |
'label' => __('Typography', 'happy-addons-pro'), | |
'exclude' => [ | |
'font_size', | |
'line_height', | |
'letter_spacing', | |
'text_transform', | |
], | |
'default' => [ | |
'font_family' => [ '' ], | |
'font_weight' => [''] | |
], | |
'selector' => '{{WRAPPER}}.item-number > {{CURRENT_ITEM}}, {{WRAPPER}} .item-number > {{CURRENT_ITEM}} i, {{WRAPPER}} .item-number > {{CURRENT_ITEM}} em', | |
] | |
); | |
$repeater->add_control( | |
'badge_icon', | |
[ | |
'label' => __( 'Badge Icon', 'text-domain' ), | |
'label_block' => false, | |
'type' => Controls_Manager::ICONS, | |
'skin' => 'inline', | |
'exclude_inline_options' => [ 'svg' ], | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Box_Shadow::get_type(), | |
[ | |
'name' => 'badge_box_shadow', | |
'exclude' => [ | |
'box_shadow_position', | |
], | |
'selector' => '{{WRAPPER}} .post-item', | |
] | |
); | |
$this->add_responsive_control( | |
'close_button_align', | |
[ | |
'label' => __( 'Alignment', 'essential-addons-elementor' ), | |
'type' => Controls_Manager::CHOOSE, | |
'default' => 'left', | |
'devices' => [ 'desktop', 'tablet', 'mobile' ], | |
'options' => [ | |
'left' => [ | |
'title' => __( 'Left', 'essential-addons-elementor' ), | |
'icon' => 'eicon-h-align-left', | |
], | |
'right' => [ | |
'title' => __( 'Right', 'essential-addons-elementor' ), | |
'icon' => 'eicon-h-align-right', | |
], | |
], | |
'selectors_dictionary' => [ | |
'left' => 'order: -1;', | |
'right' => '', | |
], | |
'selectors' => [ | |
'.xyzoc-offcanvas-content-{{ID}} .xyzoc-offcanvas-close-{{ID}}' => '{{VALUE}}', //here ID is widget id | |
], | |
'prefix_class' => 'item-align-', | |
] | |
); | |
$this->add_responsive_control( | |
'curved_body_translateZ', | |
[ | |
'label' => __( 'Translate Z', 'essential-addons-elementor' ), | |
'type' => Controls_Manager::SLIDER, | |
'size_units' => ['px'], | |
'range' => [ | |
'px' => [ | |
'min' => -10000, | |
'max' => 10000, | |
'step' => 1, | |
], | |
], | |
'default' => [ | |
'unit' => 'px', | |
'size' => -400, | |
], | |
'selectors' => [ //.xyzoc-offcanvas-container | |
'(desktop).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => ' transform: rotateY({{curved_body_rotateY.SIZE || 50}}deg) translateZ({{curved_body_translateZ.SIZE || -400}}px);', | |
'(tablet).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => ' transform: rotateY({{curved_body_rotateY_tablet.SIZE || 50}}deg) translateZ({{curved_body_translateZ_tablet.SIZE || -400}}px);', | |
'(mobile).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => ' transform: rotateY({{curved_body_rotateY_mobile.SIZE || 50}}deg) translateZ({{curved_body_translateZ_mobile.SIZE || -400}}px);', | |
], | |
] | |
); | |
// prefix_class option use only in RAW_HTML & HIDDEN control field | |
$this->add_control( | |
'responsive_description', | |
[ | |
'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ), | |
'type' => Controls_Manager::RAW_HTML, | |
'content_classes' => 'elementor-descriptor', | |
] | |
); | |
$this->add_control( | |
'screen_sm_width', | |
[ | |
'type' => Controls_Manager::HIDDEN, | |
'condition' => [ | |
'screen_sm' => [ 'custom' ], | |
], | |
'content_classes' => 'elementor-fasdsf', | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Box_Shadow::get_type(), | |
[ | |
'name' => 'box_shadow', | |
'fields_options' => [ | |
'box_shadow_type' => [ | |
'default' => 'yes', // turn on box shadow by default | |
], | |
'box_shadow' => [ | |
'default' => [ | |
'color' => '#000000', // any color code | |
'horizontal' => '', // any number | |
'vertical' => '', // any number | |
'blur' => 0, // any number | |
'spread' => '', // any number | |
], | |
], | |
'box_shadow_position' => [ | |
'default' => '', // '', inset | |
], | |
], | |
'selector' => '{{WRAPPER}} .class', | |
] | |
); | |
$this->add_group_control( | |
Group_Control_Typography::get_type(), | |
[ | |
'name' => 'content_typography', | |
'label' => __( 'Title Typography', 'text-domain' ), | |
'exclude' => ['font_family', 'text_decoration', 'font_style'], | |
'fields_options' => [ | |
'typography' => [ | |
'default' => 'yes' | |
//'default' => 'custom' | |
], | |
'font_family' => [ | |
'default' => 'Roboto', | |
], | |
'font_weight' => [ | |
'default' => '', // 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold | |
], | |
'font_size' => [ | |
'label' => __( 'Font Size', 'text-domain' ), | |
'size_units' => ['px'], | |
'default' => [ | |
'unit' => 'px', // px, em, rem, vh | |
'size' => '', // any number | |
], | |
], | |
'text_transform' => [ | |
'default' => '', // uppercase, lowercase, capitalize, none | |
], | |
'font_style' => [ | |
'default' => '', // normal, italic, oblique | |
], | |
'text_decoration' => [ | |
'default' => '', // underline, overline, line-through, none | |
], | |
'line_height' => [ | |
'label' => __( 'Line Height', 'text-domain' ), | |
'default' => [ | |
'unit' => 'px', // px, em | |
'size' => '', // any number | |
], | |
'size_units' => ['px'], | |
'tablet_default' => [ | |
'unit' => 'px', | |
], | |
'mobile_default' => [ | |
'unit' => 'px', | |
], | |
], | |
'letter_spacing' => [ | |
'default' => [ | |
'unit' => 'px', | |
'size' => '', // any number | |
], | |
], | |
], | |
'selector' => '{{WRAPPER}} .class', | |
] | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If I use group_control_border and I wanted to select solid option by default what will be the field option value?