Skip to content

Instantly share code, notes, and snippets.

@iqbalrony
Last active October 16, 2024 09:13
Show Gist options
  • Save iqbalrony/8e6643e1bb52983382b739dbd2cb61a0 to your computer and use it in GitHub Desktop.
Save iqbalrony/8e6643e1bb52983382b739dbd2cb61a0 to your computer and use it in GitHub Desktop.
Elementor coding tips tricks. (Exclude & Include example for elementor group control)
<?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',
]
);
@rasibweb
Copy link

If I use group_control_border and I wanted to select solid option by default what will be the field option value?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment