Extend Elementor like a Pro: Creating a Custom Control

Creating a Custom Control Featured Image

Every Elementor’s widget is composed of different input types called a control. A control is used to construct the interface of a widget. Using controls allows us to customize and set our favorite settings for a widget and see a live preview of it.

Before diving headfirst into this article, we suggest that you check out the following articles.

Elementor control

In default, Elementor has several control types like Text, Color, Dimension, Select, Icon, Media, Typography and so on that meet most common usages. But sometimes we need to create a custom control to realize our needs.

Directory Structure of a Control

Normally, each control contains three files as PHP, JavaScript, and CSS:

  • control.php
  • js/control.js
  • css/control.css

PHP File

The PHP file generates HTML and constructs UI of control in Panel. To create the PHP file, we need to extend the Base_Control abstract class.

The Base_Control provides several methods.

  • get_type: retrieve the type of control.
  • content_template: render the HTML output in Panel.
  • enqueue: use to add CSS and JavaScript files to control.
  • get_default_settings: retrieve the default setting of control on initialisation.
  • get_default_value: retrieve the default value of control.
  • get_value: determine how the control returns its value.
  • get_style_value: interact with the CSS rule that passed with Selector argument.

Elementor allows for five base classes to extend Base_Control for different purposes. We can extend the following classes to create new controls. For more info, you can refer to this page about Elementor controls.

  • Base_UI_Control: creates a UI control that is visible in the panel and doesn’t return any value. For example, Heading control.
  • Base_Data_Control: a base class that returns a single value. For example, Number Control.
  • Control_Base_Multiple: a base class that returns multiple values. For example, Media control.
  • Control_Base_Units: a base class that returns unit based values. For example, Dimension control.
  • Group_Control_Base: a base class for creating group control. For example, Typography control.

JavaScript File

The JavaScript file is used for interacting between UI and live preview and manipulate events that are related to control.

The Elementor uses the Backbone.js library for JS manipulation. For more information about Backbone.js, you can check out backbonejs.org and https://www.javatpoint.com/backbonejs-tutorial

Also in Elementor, there is an exclusive JS file for each PHP file that interacts with them. For instance, the above base PHP classes have JS files such as:

  • base.js
  • base-data.js
  • base-multiple.js
  • base-units.js

To create a new control JS file, we need to extend one of the above JS files. You can find the source of the JS file at GitHub.

Note: For some reason, Elementor merges all JS files in the editor.js file. We can extend the above JS file from by using the elementor.modules.controls object.

CSS File

CSS allows us to style the UI of a control. In the following sections, we’ll go into detail about the actual usage of CSS.

Creating a Custom Control

Now that we have gained a basic understanding of an Elementor control, we are ready to create a custom control called MultiUnit, which is similar to Elementor’s Dimension control.

In the Dimension control, we can only set the same unit (px, em,…) for the top, right, bottom and left values, but in MultiUnit control, we can set a different unit for each value.

At the end of this article, we’re going to create the following control.

Default Values Return Values (Array)
[
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
‘top_unit’=>’px’,
‘right_unit’ =>’px’,
‘left_unit’ =>’px’,
‘bottom_unit’ =>’px’,
‘isLinked’ => true,
];
[
‘top’ => ”, //int
‘right’ => ”, //int
‘bottom’ => ”, //int
‘left’ => ”, //int
‘top_unit’=>”, //string
‘right_unit’ =>” //string
‘left_unit’ =>”, //string
‘bottom_unit’ =>”, //string
‘isLinked’ => ”, //bool
];

Directory Structure of a Custom Control

  • index.php
  • multi-unit.php
  • css/MultiUnit.css
  • js/MultiUnit.js

You can download the full source code from Github.

Creating the PHP File

To create a custom control, we need to have a unique type. For our control, we’ll choose spicy-multi-unit-control.

Our control extends Control_Base_Multiple and overrides essential functions, as well as creates custom functions to meet our needs.

In this section, we’ll go into detail of each function one-by-one:

1. The below function sets the control type.

public function get_type() {
     return 'spicy-multi-unit-control';
 }

2. This function returns the default values of the control.

public function get_default_value() {
     return [
         'top' => '',
         'right' => '',
         'bottom' => '',
         'left' => '',
         'top_unit'=>'px',
         'right_unit' =>'px',
         'left_unit' =>'px',
         'bottom_unit' =>'px',
         'isLinked' => true,
     ];
 }

3. The below function returns the default settings of the control.

protected function get_default_settings() {
   return [
       'size_units' => [ 'px' ],
       'label_block' => true,
       'range' => [
           'px' => [
               'min' => '',
               'max' => 100,
               'step' => 1,
           ],
           'em' => [
               'min' => 0.1,
               'max' => 10,
               'step' => 0.1,
               ],
           'rem' => [
               'min' => 0.1,
               'max' => 10,
               'step' => 0.1,
           ],
           '%' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
           'deg' => [
               'min' => 0,
               'max' => 360,
               'step' => 1,
               ],
           'vh' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
           'vw' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
       ],
   ];
}

4. This function is used for adding JavaScript and CSS files to the control:

public function enqueue() {
     wp_enqueue_script( 'spicy_multi_unit',plugins_url( '/js/MultiUnit.js', FILE ) );
     wp_enqueue_style( 'spicy_multi_unit' , plugins_url( '/css/MultiUnit.css', FILE ) );
 }

5. The below function renders a button that is used to sync all units together.

Creating a Custom Control 5
private function print_link_unit_template(){
    ?>
    <# if ( data.size_units && data.size_units.length > 1 ) { #>
                                                    Sync Unit                                    <# _.each( data.size_units, function( unit ) { #>                {{{unit}}}            <#});#>                    
     <#}#>
    <?php
 }

6. We’ll use the below function to create a unit for each input:

Creating a Custom Control 6
private function print_units_template($arg){
    ?>
    <# if ( data.size_units && data.size_units.length > 1 ) { #>
                    <# .each( data.size_units, function( unit ) {            if(unit=='px' && data.range.px.step < 1){                data.range.px.step=1;            }            #>                        {{{ unit }}}            <# } ); #>        
    <# } #>
    <?php
 } 

7. Finally, the essential function for creating the UI:

public function content_template() {        
    $dimensions = [
        'top' => __( 'Top', 'Spicy-extension' ),
        'right' => __( 'Right', 'Spicy-extension' ),
        'bottom' => __( 'Bottom', 'Spicy-extension' ),
        'left' => __( 'Left', 'Spicy-extension' ),
    ];
 ?>
   <div class="elementor-control-field">
    <label class="elementor-control-title">{{{ data.label }}}</label>
    <div class="spicy-control-input-wrapper">
     <div class="units-wrapper">
       <div>   
        <ul>
          <?php
            foreach ( $dimensions as $dimension_key => $dimension_title ) :
               echo '<li>';
          ?>
          <# if ( -1 !== _.indexOf( allowed_dimensions, '<?php echo $dimension_key; ?>' ) ) { #>
             <?php                      $this->print_units_template($dimension_key );
             ?>  
          <# } #>
                 <?php           
                   echo '</li>';
                   endforeach;
                 ?>
         </ul>
    </div>  
   </div>
            
   <div>
     <ul class="spicy-control-dimensions">
       <?php
         foreach ( $dimensions as $dimension_key => $dimension_title ) :
            $control_uid = $this->get_control_uid( $dimension_key );
       ?>
         <li class="spicy-control-multiunit">
         <#
          var unit=data.controlValue[<?php echo "'". $dimension_key.'_unit'."'"; ?>];
         #>
          <input id="<?php echo $control_uid; ?>" type="number"  data-name="{{data.name}}-<?php echo esc_attr( $dimension_key ); ?>" min="{{ data.range[unit].min}}" max="{{ data.range[unit].max}}" step="{{ data.range[unit].step}}" data-setting="<?php echo esc_attr( $dimension_key ); ?>"
    placeholder="<#
                   if ( _.isObject( data.placeholder ) ) {
                    if ( ! _.isUndefined( data.placeholder.<?php echo $dimension_key; ?> ) ) {
                       print( data.placeholder.<?php echo $dimension_key; ?> );
                       }
                      } else {
                              print( data.placeholder );
                             } 
                     #>"
                                
   <label for="<?php echo esc_attr( $control_uid ); ?>" class="spicy-control-multiunit-label"><?php echo $dimension_title; ?></label>
         </li>
       <?php endforeach; ?>
         <li>                    
          <div style="display: flex;">
           <button class="spicy-link-dimensions tooltip-target" data-tooltip="<?php echo esc_attr__( 'Link values together', 'Spicy-extension' ); ?>">
             <span id="spisy-{{data.name}}" class="spicy-linked">
               <i class="fa fa-link" aria-hidden="true"></i>
               <span class="elementor-screen-only"><?php echo __( 'Link values together', 'Spicy-extension' ); ?></span>
             </span>
             <span id="spisy-{{data.name}}" class="spicy-unlinked">
               <i class="fa fa-chain-broken" aria-hidden="true"></i>
               <span class="elementor-screen-only"><?php echo __( 'Unlinked values', 'Spicy-extension' ); ?></span>
             </span>
            </button>
            <?php       
             $this->print_link_unit_template();  
            ?>
           </li>
          </ul>
         </div>
        </div>
        </div>
        <# if ( data.description ) { #>
        <div class="elementor-control-field-description">{{{ data.description }}}</div>
        <# } #>
        <?php
    }

Creating the JavaScript File

Our JS file is named MultiUnit.js and extends the Elementor BaseMultiple module. This JS file contains a JavaScript class that has several functions, which are explained briefly below.

1. The below function defines the essential UI CSS selectors.

var ControlMultiUnitItemView=
    elementor.modules.controls.BaseMultiple.extend( {
    ui: function() {
     var ui = ControlBaseMultipleItemView.prototype.ui.apply( this, arguments );
         ui.controls = '.spicy-control-multiunit > input:enabled';
         ui.link = 'button.spicy-link-dimensions';
         ui.top_choices ='div.spicy-units-choices > input[type=radio][data-setting=top_unit]';   
         ui.right_choices = 'div.spicy-units-choices > input[type=radio][data-setting=right_unit]';
         ui.bottom_choices = 'div.spicy-units-choices > input[type=radio][data-setting=bottom_unit]';
         ui.left_choices = 'div.spicy-units-choices > input[type=radio][data-setting=left_unit]';
         ui.unitLink = '.spicy_link';
         ui.gear = '.spicy_link_first';
         ui.ranges_top = '.spicy-units-choices-label-top';
         ui.ranges_right = '.spicy-units-choices-label-right';
         ui.ranges_bottom = '.spicy-units-choices-label-bottom';
         ui.ranges_left = '.spicy-units-choices-label-left';
         ui.linked = '.spicy-linked';
         ui.unlinked = '.spicy-unlinked';
         return ui;
     }

2. This function defines the related event for each UI element.

events: function() {
  return _.extend( ControlBaseMultipleItemView.prototype.events.apply( this, arguments ), {
   'click @ui.ranges_top' : 'TopRangeToggle',
   'click @ui.ranges_right' : 'RightRangeToggle',
   'click @ui.ranges_bottom' : 'BottomRangeToggle',
    'click @ui.ranges_left' : 'LeftRangeToggle',
    'click @ui.link': 'onLinkDimensionsClicked',
    'change @ui.top_choices' : 'setTopInputRange',
    'change @ui.right_choices' : 'setRightInputRange',
    'change @ui.bottom_choices' : 'setBottomInputRange',
    'change @ui.left_choices' : 'setLeftInputRange',
    'click @ui.unitLink' : 'linkUnit',
    'click @ui.gear' : 'gearToggle',           
   } );
 }

3. This defines the essential variables.

defaultDimensionValue: 0,
 range_control:'',
 name_control:'',
 gear_check:true,
 range_all:true,
 Range_top:true,
 range_right:true,
 range_bottom:true,
 range_left:true,

4. This defines initial function for control initialization.

 initialize: function() {
 ControlBaseMultipleItemView.prototype.initialize.apply( this, arguments );
 this.model.set( 'allowed_dimensions', this.filterDimensions( this.model.get( 'allowed_dimensions' ) ) );
 this.range_control = this.model.get(['range']);
 this.name_control = this.model.get(['name']);
 }

5. We need a function to select the proper unit when it’s clicked. The below function is used for top_unit.

setTopInputRange : function( event ) {
  var val = $(event.target).val() ;
  var min = this.range_control[val].min;
  var max = this.range_control[val].max;
  var step = this.range_control[val].step;
        
  $('li.spicy-control-multiunit > input[type=number][data-name='+this.name_control+'-top]').attr({"min":min,"max":max,"step":step});
}

We’ve also declared similar functions for right_unit, bottom_unit, and left_unit that you can find in the source code.

6. We need other functions to show/hide units when clicked. The below function is used for the top_unit.

TopRangeToggle : function (event) {
  var cat = $(event.target).attr("data-cat");
  if(this.range_top==false){    $('.spicy-units-choices-label-top[data-cat='+cat+']').not(event.target).hide();
  this.range_top = true;
  }else if(this.range_top==true){
   $('.spicy-units-choices-label-top[data-cat='+cat+']').show();
   this.range_top=false;
 }   
 }

We also declared similar functions for right_unit, bottom_unit, and left_unit.

7. The function below syncs top_unit, right_unit, bottom_unit and left_unit together.

linkUnit : function(event) {
  var text=$(event.target).text();
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-top][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-right][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-bottom][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-left][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');  
  $('div.spicy-units-choices > input[class='+this.name_control+']').not(':checked').next().hide();
  $('div.spicy-units-choices > input[class='+this.name_control+']:checked').next().show();

this.allRangeToggle(event);
 }

Finally, we have other functions that are similar to the JS file of the Dimension control and other custom functions that we haven’t explained. But you can find them in source code.

Creating the CSS File

To style the UI of control in the panel, we need CSS rules as seen below.

ul.spicy-control-dimensions {
 width: 100%;
}

.spicy-control-input-wrapper ul li {
 width: 20%;
 float: left;
}

div.spicy-units-choices > input {
 display: none;
}

div.spicy-units-choices > input:checked+label {
 color:red;
}
.spicy-control-multiunit > label {
 font-size: 11px;
}

div.spicy-units-choices > input:not(:checked)+label {
 display:none;
}

.spicy-link-dimensions {
 width:90%;
 height: 30px;
 border: 1px solid;
 border-color: black;
 background-color: #7a8791;
}

div.spicy-units-choices > label { 
 border-radius:50%;
 padding:3px;
 font-size:9px;
 background-color:#ebebeb;
 line-height: 16px;
}

.units-wrapper {
 height :29px;
 margin-top: 5px;
}

.units-wrapper ul li {
 margin-bottom: 0px;
 margin-top: 4px;
}

div.spicy-units-choices {
position: absolute;
}

.spicy_linkAllUnit {
 position: relative;
 height:30px;
 font-size: 14px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 border: 1px solid;
 border-color: black;
 border-left: 0;
 background-color: #7a8791;
}

.spicy-control-multiunit > input {
 border-right : 0;
 border-radius: 0;
 border-color:rgb(58, 57, 57) !important;
 height:30px;
 padding-right: 0;
}

.spicy-control-dimensions >.spicy-control-multiunit:first-child input {
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
}

.spicy_link_first {
 display:block;
 border-radius:5px;
 padding:3px;
 font-size:13px;
 color: white;
}

.spicy_link {
 display:none;
 border-radius:50%;
 padding:3px;
 font-size: 12px;
 color: brown;
}

.spicy-unlinked {
 display: none;
}

.spicy_tooltip {
 width: max-content;
 background-color: #e6e9ec;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 10;
 top: -1px;
 right: 100%;
}

.spicy-units-choices-label-top {
 position:relative;
 z-index: 5;
}

.spicy-units-choices-label-right {
 position:relative;
 z-index: 4;
}

.spicy-units-choices-label-bottom {
 position:relative;
 z-index: 3;
}

.spicy-units-choices-label-left {
 position:relative;
 z-index: 2;
}
.spicy_link_first:hover .spicy_link_tooltiptext {
 visibility: visible;
}
.spicy_linkAllUnit .spicy_link_tooltiptext {
 visibility: hidden;
 width: 88px;
 background-color: #373434;
 color: #fff;
 text-align: center;
 border-radius: 4px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 right: 0;
 font-size: 9px;
 bottom: -26px;
}
.spicy_linkAllUnit .spicy_link_tooltiptext::after {
 content: " ";
 position: absolute;
 right: 5%;
 bottom: 94%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent transparent #373434 transparent;
}

How to Use the Custom Control

It’s time to put the control in action. Follow the steps below in order to use the control.

1. Register the custom control in our plugin using the following codes.

add_action( 'elementor/controls/controls_registered', [ $this,'init_controls']);

public function init_controls() {

  // Include Control files
  require_once( __DIR__ . '/controls/multi_unit.php' );

  // Register control
  \Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new Spicy_multi_unit());

}

2. Add the custom control to any widget. Now, it’s ready to use.

$this->add_responsive_control(
  'multiunit',
             [
              'label' => __( 'MultiUnit ', 'spicy' ),
              'type' => 'spicy-multi-unit-control',
              'size_units' => [ '%','em', 'px' ],
              'allowed_dimensions' =>'all',
              'selectors' => [
                '{{WRAPPER}} .elementor-widget-container' => 'padding: {{TOP}}{{TOP_UNIT}} {{RIGHT}}{{RIGHT_UNIT}} {{BOTTOM}}{{BOTTOM_UNIT}} {{LEFT}}{{LEFT_UNIT}};',
                             ],
            ]
 );

For more information, you can read this article.

Conclusion

In this article, we tried to explain how to create a custom control for Elementor. Also, we describe the essential files of control and the structure of them. Finally, we created a custom control named MultiUnit.

Feel free to share your experiences with us in the comments.

Extend Elementor like a pro: Creating a New Widget

Creating a New Widget Featured Image

Elementor is packed with various elements or widgets. Widgets allow us to build websites and display appropriate content. But sometimes we need specific functionality for our website. And to do this, we need to create a new widget or element.

What is a widget?

A widget or element is a section in the Graphical User Interface (GUI) that lets us display the information we want to showcase to users.

The Elementor widget is a combination of PHP, JavaScript, HTML and CSS codes that generate a custom output for us. We suggest visiting this link before reading this article.

Elementor Widgets

Each widget has custom controls like input, fields, buttons and more. With these controls, we can set our custom settings and see a live preview in the editor and render the final HTML in frontend.

Widget Structure

In order to create a new widget, we must extend the Widget_Base abstract class. This class has several methods that we first need to override.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

    public function get_name() {}

    public function get_title() {}

    public function get_icon() {}

    public function get_categories() {}

    protected function _register_controls() {}

    protected function render() {}

    protected function _content_template() {}
}

Widget Name

With the get_name() method, we can set the name of a widget and return the name of the widget.

public function get_name() {
    return 'Widget Name';
}

Widget Title

With the get_title() method, we can set the label of the widget.

public function get_title() {
    return __( 'Widget Title', 'Plugin Name' );
}

Widget Icon

The get_icon() method set the icon for our widget that displayed in the panel.

public function get_icon() {
    return 'eicon-gallery-grid';
}

Widget Categories

The get_categories() method set the category that our widget must be placed on the panel’s categories. In default, there are several categories including the following:

  • Basic
  • Pro-elements
  • General
  • Woocommerce-elements
  • WordPress
  • And so on.
public function get_categories() {
    return [ 'basic' ];
}

We can also create custom categories with the elementor/elements/categories_registered action.

<?php
function create_custom_categories( $elements_manager ) {

    $elements_manager->add_category(
        'custom-category',
        [
         'title' => __( 'Custom Category', 'plugin-name' ),
         'icon' => 'fa fa-plug',
        ]
    );
}
add_action( 'elementor/elements/categories_registered', 'create_custom_categories' );

Widget Controls

With the _register_controls() method, we can set essential sections and controls for the widget.

There are several controls that we can use for widget settings, such as the following:

  1. UI Controls
    • Button
    • Divider
    • Heading
    • Raw Html
  2. Data Controls
    • Text
    • Select
    • Choose
    • Gallery
    • Slider
    • Typography
    • And so on.
  3. Multiple Controls
    • Url
    • Media
    • Image Dimensions
  4. Unit Controls
    • Slider
    • Dimensions
  5. Group Controls
    • Typography
    • Text Shadow
    • Box Shadow
    • Border
    • Background

For more information on Elementor controls, you can check out this link.

Widget Template

The render() method allows creating a frontend HTML code with the PHP.

The _content_template() method generates a live preview for the widget in the editor by using the Backbone JavaScript library.

How to add controls to our widget

In default, there are three tabs in the Elementor panel, which are the Content Tab, Style Tab, and Advanced Tab. To add controls to our widget, we should first create a section and assign it to one of the tabs. Then we can add our favorite controls to the section. As mentioned above, we must put our code in the _register_controls() method.

Creating a Section

To create a section, we need to set the following essential parameters:

  • Section Name
  • Section Settings(label ,tab)
$this->start_controls_section(
     'section_name',//set unique name

          //set setting of section
        [
         'label' => __( 'Section Label', 'plugin-name' ),
         'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
 );

  //THE CONTROLS COME HERE

$this->end_controls_section();

We must set the following parameters for each control as seen below:

  • Control Name
  • Control Setting(label,type)

Adding a normal control

Use the following control to add a normal control.

$this->add_control(
    'control_name',//set unique name for control

           //set essential settings
         [
        'label' => __( 'Control Label', 'plugin-name' ),

            //CONTROL_TYPE can be TEXT, SLIDER, ...
        'type' => \Elementor\Controls_Manager::CONTROL_TYPE,
         ]
    );

Adding a responsive control

This control type includes different settings value for desktop, tablet, and mobile devices.

$this->add_responsive_control(
     'control_name',
       [
        'label' => __( 'Control Name', 'plugin-name' ),
           //CONTROL_TYPE can be TEXT, SLIDER, …

         type' => \Elementor\Controls_Manager::CONTROL_TYPE,
           //SET FAVORITE RANGE LIKE PX, %, EM

         'range' => [
                 'px' => [
                        'min' => 0,
                        'max' => 100,
                       ],
                ],
            // SET FAVORITE DEVICES
          'devices' => [ 'desktop', 'tablet', 'mobile' ],
        'desktop_default' => [
                        'size' => 30,
                        'unit' => 'px',
                         ],
          'tablet_default' =>  [
                        'size' => 20,
                        'unit' => 'px',
                         ],
          'mobile_default' =>  [
                        'size' => 10,
                        'unit' => 'px',
                         ],
                
                ],
            ]
        );

Adding a group control

This control groups several normal controls in one control such as typography.

$this->add_group_control(
//Group_Control_Class can be       Group_Control_Typography,Group_Control_Border or other group controls

  Group_Control_Class::get_type(),
  [
   'name' => 'control_name',
   'label' => __( 'control Label', 'plugin-name' ),
  ]
);

Adding control tabs

Create a tab area to add various controls.

//start tabs area container
$this->start_controls_tabs();

  // create first tab area
  $this->start_controls_tab();

    $this->add_control();

      $this->end_controls_tab();

     // create second tab area
      $this->start_controls_tab();

    $this->add_control();

      $this->end_controls_tab();

$this->end_controls_tabs();
//end tabs area container

Adding control popovers

Create a popover window will allow you to display various controls.

$this->add_control(
   'control_name',
    [
     'label' => __( 'Control Label', 'plugin-name' ),
     'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
     'label_off' => __( 'Default', 'plugin-name' ),
     'label_on' => __( 'Custom', 'plugin-name' ),
     'return_value' => 'yes',
    ]
  );

    $this->start_popover();

    $this->add_control();

    $this->add_control();

    $this->end_popover();

How to Display or Hide Sections and Controls in Widgets

At times, you might want to hide some sections or controls in your widget, but using if / else in the code is a hassle. Fortunately, now you can do this conveniently with the condition in the settings for sections or controls.

$this->start_controls_section(
  'my_section',
   [
    'label' => __( 'My Section', 'plugin-name' ),
    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    'condition' => [
                       'Name' => 'Value',
                      ]
      //name must be unique name of one control
      //Value must be the return value of control
   ]
);

Let’s say that we have one control named Choose_ Layout with two values first and second. After adding the code found below code to any section or control, our section or control will be displayed if the return value of the Choose_ Layout control is equal to first. And it will be hidden if the return value of Choose_ Layout control is equal to the second.

'condition' => [
                'Choose_ Layout' => 'first',
               ]

How to Change Widget Output Style Automatically from the Control Settings

One of Elementor’s amazing features is the ability to easily change the style of widget output with CSS code and selectors. For example, if we want to change the height of images in output, first we must assign a class attribute to our HTML tag. Then use this class with the selector in settings of control.

<img class="test-img">

$this->add_control(
          'test_height',
            [
             'label' => __( 'Height', 'Spicy-extension' ),
             'type' => \Elementor\Controls_Manager::SLIDER,
             'separator' => 'after',
             'show_label' => true,
             'selectors' => [
                '{{WRAPPER}} .test-img' => 'height: {{SIZE}}{{UNIT}};',
              ],
            ]
        );

How to Get Widget Settings

To create the final Html code in the render() method and live preview in the _content_template() we’ll need input the parameter from the widget controls like height, width, font-size and more. In Elementor, the input parameter is called Settings. We can arrange settings in render() using this method.

$widget_settings= $this->get_settings_for_display();
$widget_settings['control_name'];

For the _content_template() method the Elementor store setting in the settings variable.

settings.control_name

One important note that we must consider is the settings are saved in a multidimensional array. We can get an inner setting with the following code.

$widget_settings['control_name ']['option'];

settings.control_name.option 

Creating a Sample Widget

Below, we have illustrated how to build a gallery widget step-by-step so you can better understand how to cover the topics mentioned above and create an Elementor widget.

Our gallery widget is registered in the Spicy plugin and the root directory of the gallery widget is:

-Css
-gallery.css
-index.php
-widgets
-gallery.php
-index.php
-spicy.php
-index.php

Index.php file is an empty file that prevents a malicious hacker from directly accessing the plugin.
Spicy.php file is the main plugin file that we register our widget with.
Gallery.css file is a CSS file that sets the default style of a gallery widget.
Gallery.php is the main file that defines the functionality of a gallery widget.

Download the Source Code here.

Our gallery widget is based on the grid and has two layouts, which are classic and pro. Both layouts have the following controls:

  • Skin
  • Column gap
  • Row gap
  • Columns
  • Hover Animation
  • Box Shadow

The classic layout has a gallery control, and the image section contains the below controls:

  • Height
  • Image size behavior
  • Border type
  • Border radius

Also, the pro layout has an image repeater control with several sections such as the following:

  • Item section contains Border Type, Width, Color, and Border Radius controls.
  • Image section contains Height and Image Size behavior controls.
  • Text section contains Color, Typography, Alignment, and Spacing controls.
  • Avatar section contains Height, Width, Alignment, and Spacing controls.
  • Textarea section contains Color, Typography, Alignment, and Spacing controls.

Extending the Widget_Base Abstract Class

The main class of the gallery widget is similar to the code found below.

gallery.php
<?php
class Spicy_Gallery_Widget extends \Elementor\Widget_Base {
public function get_name() {
   return 'Gallery';
   }
public function get_title() {
    return __( 'Gallery', 'Spicy-extension' );
    }
public function get_icon() {
    return 'eicon-gallery-grid';
    }
public function get_categories() {
    return [ 'basic' ];
    }
protected function _register_controls() {

    //  start Content tab
        $this->start_controls_section(
            'content_section',
            [
             'label' => __( 'Content', 'Spicy-extension' ),
             'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        //add skin control
        $this->register_controls_skin();

        //add repeater for pro skin
        $this->register_controls_pro_repeater();

        //add gallery control
        $this->register_controls_Classic_gallery();

        //add column-gap slider
        $this->register_controls_column_gap();

        //add row-gap slider
        $this->register_controls_row_gap();


       
     
 //add columns number list
        $this->register_controls_column_number();

        $this->end_controls_section();
        // end content tab

        //start Style tab
        $this->register_controls_classic_style_image();

        //create pro item section
        $this->register_controls_pro_item();

      //create pro style section-image
        $this->register_controls_pro_style_image();

      //create pro style section-text
        $this->register_controls_pro_style_text();

      //create pro style section-avatar
        $this->register_controls_pro_style_avatar();

      //create pro style section-textarea
        $this->register_controls_pro_style_textarea();

      //Box Shadow
        $this->register_controls_pro_style_boxshadow();

        //hover animation
        $this->register_controls_pro_style_hoveranimation();
      //end style tab
    }

protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="spicy-gallery" width="100%">
        <?php
   
        if($settings['spicy_skin']=='classic'){
            $this->classic_render($settings);
        }else{
            $this->pro_render($settings);
  
                 }
        ?>
        </div>
        
        <?php
    }   

protected function _content_template() {
        ?>
        <div class="spicy-gallery">
        <#
         if(settings.spicy_skin=='classic'){
         _.each( settings.spicy_images, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">
         <img  class="spicy-img" id="{{image.id}}" src="{{image.url}}"/>
        </div>
        <# }); } else{
         _.each( settings.spicy_image_list, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">    
          <div class="spicy-pro-container">
            <img class="spicy-pro-img" src="{{image.spicy_pro_image.url}}" >
          </div>
          <p class="spicy-pro-text">{{image.spicy_pro_text}}</p>
          <div class="spicy-avatar-wrapper">
           <img class="spicy-avatar" src="{{image.spicy_pro_avatar.url}}" alt="Avatar">
          </div>
          <p class="spicy-pro-description">{{image.spicy_pro_description}}</p>
         </div>
        <# }); }#>
        </div>
     <?php
    }
?>

Creating Controls for a Gallery Widget

In the above code, you’ll see several functions in _register_controls() and render() functions.In fact, these methods assign sections and controls for the gallery widget. We can create these functions only for grouping codes and simplicity.

Common Controls

1. Skin control: This control’s type is Select with two options set as classic and pro. With this control, we have the ability to change the layout of the gallery widget.

protected function register_controls_skin(){
        $this->add_control(
               'spicy_skin',
               [
                'label' => __( 'Skin', 'spicy' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                'classic' => __( 'Classic', 'Spicy-extension' ),
                'pro' => __( 'Pro', 'spicy' ),
               ],
                'default' => 'classic',   
            ]
       );
}

2. Column Gap: This type of control is Slider, which allows us to change the space between columns of the gallery widget.

protected function register_controls_column_gap(){
        $this->add_responsive_control(
               'spicy_column_gap',
               [
                'label' => __( 'Column Gap', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%','em', 'px' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 0.5,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-gallery' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
    }

3. Row Gap: This type of control is Slider, which we can use to change the space between rows of the gallery widget.

protected function register_controls_row_gap(){
        $this->add_responsive_control(
               'spicy_row_gap',
               [
                'label' => __( 'row Gap', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','%' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 5,
                ],
                'show_label' => true,
                'selectors' => [
                  '{{WRAPPER}} .spicy-gallery' => ' grid-row-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
    }

4. Columns: The type of control is Select, which lets us alter the number of columns of the gallery widget.

protected function register_controls_column_number(){
        $this->add_responsive_control(
               'spicy_columns',
               [
                'label' => __( 'Columns', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 3,
                'options' => ['1'=>1,'1'=>1,'2'=>2,'3'=>3,'4'=>4,'5'=>5,'6'=>6,'7'=>7,'8'=>8,'9'=>9,'10'=>10],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                    'size' => '',
                ],
                'tablet_default' => [
                    'size' => '',
                ],
                'mobile_default' => [
                    'size' => '',
                ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-gallery' => 'grid-template-columns: repeat({{SIZE}},1fr);',
                ],
            ]
            
       );
    }

5. Box Shadow: This section is used to add a box shadow effect to gallery items.

protected function register_controls_style_boxshadow(){
        $this->start_controls_section(
               'spicy_box_shadow',
               [
                'label' => __( 'Box Shadow', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
               ]
        );
        $this->add_group_control(
               Elementor\Group_Control_Box_Shadow::get_type(),
               [
                'name' => 'box_shadow',
                'label' => __( 'Box Shadow', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-item',
               ]
        );
        $this->end_controls_section();
 }

6. Hover Animation: This section adds an animation effect to the gallery item.

protected function register_controls_style_hoveranimation(){
        $this->start_controls_section(
               'spicy_hover',
               [
                'label' => __( 'Hover Animation', 'Spicy-extension' ),
               'tab' => \Elementor\Controls_Manager::TAB_STYLE,
             ]
        );
        $this->add_control(
               'spicyhover',
               [
                'label' => __( 'Hover Animation', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
                'default'=>'',
               ]
            
        );
        $this->end_controls_section();
    }

Classic Layout

The following controls or sections are only displayed in the classic layout.

1. Gallery Control: used to select multiple images for the gallery and displayed in the Content Tab.

protected function register_controls_Classic_gallery(){
        $this->add_control(
               'spicy_images',
              [
                'label' => __( 'Add Images', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::GALLERY,
                'separator' => 'default',
                'show_label' => false,
                'condition' => [
                                'spicy_skin' => 'classic',
                               ],
                'dynamic' => [
                              'active' => true,
                             ]
              ]
        );
 }

2. Image sections: This is displayed in the Style Tab to change the style of the image.

protected function register_controls_classic_style_image(){
        $this->start_controls_section(
               'style_section',
               [
                'label' => __( 'Image', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'classic'
                             ]
               ]
        );
        //classic height image control
        $this->add_responsive_control(
               'spicy_height',
               [
                'label' => __( 'Height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'separator' => 'after',
                'size_units' => [ 'px','vw'],
                'range' => [
                            'px' => [
                                     'min' => 0,
                                     'max' => 500,
                                     'step' => 1,
                                    ],
                            'vw' => [
                                     'min' => 0,
                                     'max' => 100,
                                     'step' => 1,
                                    ],
                           ],
                'default' => [
                              'unit' => 'px',
                              'size' => 150,
                             ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        //image fitness classic
        $this->add_responsive_control(
               'spicy_image_fitness',
               [
                'label' => __( 'Image Size Behavior', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => ['cover'=> __( 'Cover', 'Spicy-extension' ),'fill'=>__( 'Fit', 'Spicy-extension' ),'contain'=>__( 'Contain', 'Spicy-extension' ),'scale-down'=>__( 'Scale Down', 'Spicy-extension' ),'none'=>__( 'None', 'Spicy-extension' )],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                                      'val' => '',
                                     ],
                'tablet_default' => [
                                      'val' => '',
                                    ],
                'mobile_default' => [
                                     'val' => '',
                                    ],
                'default' => 'cover',
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'object-fit: {{val}};',
                 ],
               ]
            
            );
        //border classic    
        $this->add_group_control(
               Elementor\Group_Control_Border::get_type(),
               [
                'name' => 'spicy_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-img',
               ]
        );
        //border radius classic
        $this->add_responsive_control(
               'spicy_image_border_radius',
               [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    }

Pro Layout

The following controls or sections are only displayed in the pro layout.

1. Repeater Section: This section has four controls, which are Image, Text, Avatar, and Textarea. It’s used for adding images individually and is displayed in the Content Tab.

protected function register_controls_pro_repeater(){
        $repeater = new \Elementor\Repeater();
        //add pro image control
        $repeater->add_control(
                   'spicy_pro_image',
                   [
                    'label' => __( 'Choose Image', 'Spicy-extension' ),
                    'type' => \Elementor\Controls_Manager::MEDIA,
                    'dynamic' => [
                                  'active' => true,
                                 ],
                    'default' => [
                     'url' => \Elementor\Utils::get_placeholder_image_src(),
                    ],
                  ]
        );
        //add pro text control
        $repeater->add_control(
                   'spicy_pro_text',
               [
                'label' => __( 'Text', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'label_block' => true,
                'placeholder' => __( 'Your Text', 'Spicy-extension' ),
                'default' => __( '', 'Spicy-extension' ),
                'dynamic' => [
                              'active' => true,
                             ],
               ]
        );
        //add avatar image control
        $repeater->add_control(
            'spicy_pro_avatar',
            [
                'label' => __( 'Choose Avatar', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
     );
        //pro textarea control
        $repeater->add_control(
               'spicy_pro_description',
               [
                'label' => __( 'Description', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'rows' => 5,
                'default' => __( '', 'Spicy-extension' ),
                'placeholder' => __( 'Type your description here', 'spicy' ),
               ]
        );

        //add repeater control
        $this->add_control(
               'spicy_image_list',
               [
                'label' => __('Images','Spicy-extension'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'label_block' => true,
                'separator' => 'default',
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{spicy_pro_text }}}',
                'condition' => [
                                'spicy_skin' => 'pro',
                            ],
             ]
        );
    }

2. Item Section: This is displayed in the Style Tab to change the border style of the gallery item.

protected function register_controls_pro_item(){
     $this->start_controls_section(
               'spicy_pro_item',
               [
                'label' => __( 'Item', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'pro'
                             ]
              ]
        );
        // pro item border
        $this->add_group_control(
               \Elementor\Group_Control_Border::get_type(),
               [
                'name' => 'spicy_item_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-item',
               ]
        );  
        //pro item border radius
        $this->add_responsive_control(
               'spicy_pro_item_border_radius',
               [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
               ]
        );
        $this->end_controls_section();
    }

3. Image Section: This is displayed in the Style Tab to change the image size.

protected function register_controls_pro_style_image(){
        $this->start_controls_section(
               'spicy_pro_style_image',
               [
                'label' => __( 'Image', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'pro'
                             ]
               ]
        );
        //pro image size
        $this->add_responsive_control(
               'spicy_pro_image_height',
               [
                'label' => __( 'height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                            'px' => [
                                     'min' => 0,
                                     'max' => 800,
                                     'step' => 1,
                                    ],
                            'vh' => [
                                     'min' => 0,
                                     'max' => 100,
                                     'step' => 1,
                                    ],
                            'em' => [
                                     'min' => 0,
                                     'max' => 10,
                                     'step' => 0.1,
                                    ],
                          ],
                'default' => [
                              'unit' => 'px',
                              'size' => 150,
                             ],
                'show_label' => true,
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-img' => ' height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        //pro image fitness
        $this->add_responsive_control(
            'spicy_pro_image_fitness',
            [
                'label' => __( 'Image Size Behavior', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => ['cover'=> __( 'Cover', 'Spicy-extension' ),'fill'=>__( 'Fill', 'Spicy-extension' ),'contain'=>__( 'Contain', 'Spicy-extension' ),'scale-down'=>__( 'Scale Down', 'Spicy-extension' ),'none'=>__( 'None', 'Spicy-extension' )],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                                      'val' => '',
                                     ],
                'tablet_default' => [
                                     'val' => '',
                                    ],
                'mobile_default' => [
                                     'val' => '',
                                    ],
                'default' => 'cover',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-img' => 'object-fit: {{val}};',
                ],
            ]
            
      );
        $this->end_controls_section();

4. Text Section: This is displayed in the Style Tab to change the style of the text item.

protected function register_controls_pro_style_text(){
        $this->start_controls_section(
                'spicy_pro_style_text',
                [
                 'label' => __( 'Text', 'Spicy-extension' ),
                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                 'condition'=>[
                    'spicy_skin' => 'pro'
                ]
            ]
        );

        //pro text color control
        $this->add_control(
               'spicy_pro_text_color',
               [
                'label' => __( 'Color', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'color: {{VALUE}};',
                 ],
                'scheme' => [
                             'type' => \Elementor\Scheme_Color::get_type(),
                             'value' => \Elementor\Scheme_Color::COLOR_1,
                            ],
               ]
        );

        //pro text typography
        $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                 'name' => 'spicy_pro_text_typography',
                 'selector' => '{{WRAPPER}} .spicy-pro-text',
                 'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                ]
        );

        //pro text alignment
        $this->add_responsive_control(
               'spicy_pro_text-_align',
               [
                'label' => __( 'Alignment', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                              'left' => [
                                          'title' => __( 'Left','Spicy-extension'),
                                          'icon' => 'fa fa-align-left',
                                        ],
                              'center' => [
                                            'title' => __( 'Center', 'Spicy-extension' ),
                                            'icon' => 'fa fa-align-center',
                                           ],
                              'right' => [
                                          'title' => __( 'Right', 'Spicy-extension' ),
                                          'icon' => 'fa fa-align-right',
                                         ],
                              'justify' => [
                                            'title' => __( 'Justified', 'Spicy-extension' ),
                                            'icon' => 'fa fa-align-justify',
                                           ],
                             ],
                'default' =>'',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'text-align: {{VALUE}};',
                ],
            ]
        );
        //pro text spacing control
        $this->add_responsive_control(
               'spicy_text_margin',
               [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
              ]
        );

        $this->end_controls_section();
    } 

5. Avatar Section: This is displayed in the Style Tab to change the style of the avatar.

protected function register_controls_pro_style_avatar(){
        $this->start_controls_section(
            'spicy_pro_style_avatar',
            [
                'label' => __( 'Avatar', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                    'spicy_skin' => 'pro'
                ]
            ]
        );
        //pro avatar height
        $this->add_responsive_control(
            'spicy_avatar_height',
             [
                'label' => __( 'height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vh' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => ' height: {{SIZE}}{{UNIT}};',
                ],
             ]
        );
        //pro avatar width
        $this->add_responsive_control(
            'spicy_avatar_width',
            [
                'label' => __( 'Width', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vh' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => ' width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        //pro avatar align control
        $this->add_responsive_control(
            'spicy_avatar_align',
            [
                'label' => __( 'Alignment', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-center',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar-wrapper' => ' text-align: {{VALUE}};',
                ],
            ]
        );
        //pro avatar spacing control
        $this->add_responsive_control(
            'spicy_avatar_spacing',
            [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        //pro border avatar
        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'spicy_avatar_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-avatar',
            ]
        );
        //pro border radius
        $this->add_responsive_control(
            'spicy_pro_border_radius',
            [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    }

5. Textarea Section: This is displayed in the Style Tab to change the style of Textarea.

protected function register_controls_pro_style_textarea(){
        $this->start_controls_section(
               'spicy_pro_style_textarea',
               [
                'label' => __( 'Textarea', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                  'spicy_skin' => 'pro'
                ]
              ]
        );
        //pro textarea color control
        $this->add_control(
               'spicy_pro_textarea-color',
               [
                'label' => __( 'Color', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'color: {{VALUE}};',
                ],
                'scheme' => [
                  'type' => \Elementor\Scheme_Color::get_type(),
                  'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
               ]
        );
        //pro textarea typography control
        $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                 'name' => 'spicy_pro_textarea_typography',
                 'selector' => '{{WRAPPER}} .spicy-pro-description',
                 'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
             ]
        );
        //pro textarea align control
        $this->add_responsive_control(
               'spicy_pro_textarea-align',
                [
                 'label' => __( 'Alignment', 'Spicy-extension' ),
                 'type' => \Elementor\Controls_Manager::CHOOSE,
                 'options' => [
                               'left' => [
                                          'title' => __( 'Left','Spicy-extension' ),
                                          'icon' => 'fa fa-align-left',
                                         ],
                               'center' =>[
                                           'title'=>__('Center','Spicy-extension' ),
                                           'icon' => 'fa fa-align-center',
                                          ],
                               'right' =>[
                                          'title' => __( 'Right','Spicy-extension'),
                                          'icon' => 'fa fa-align-right',
                                         ],
                               'justify'=>[
                                           'title' => __( 'Justified','Spicy-extension'),
                                           'icon' => 'fa fa-align-justify',
                                          ],
                              ],
                'default' =>'',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'text-align: {{VALUE}};',
                ],
            ]
        );
        //pro textarea spacing control
        $this->add_responsive_control(
               'spicy_textarea_spacing',
               [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    } 

Create Final Html Output

To render our gallery output in the frontend, we must create the render function as the following:

protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="spicy-gallery" width="100%">
        <?php
   
        if($settings['spicy_skin']=='classic'){
            $this->classic_render($settings);
        }
         else{
          $this->pro_render($settings);
         }
        ?>
        </div>        
        <?php
    }
protected function classic_render($settings){
        if($settings['spicy_images']){
            foreach ( $settings['spicy_images'] as $image ) {
            echo '<div class="spicy-item elementor-animation-'. $settings['spicyhover'] .' ">';
               echo '<img id="'. $image['id'].'" class="spicy-img" src="' . $image['url'] . '">';
               echo '</div>';
            }
      }  
    }
protected function pro_render($settings){
        if($settings['spicy_image_list']){
            foreach ( $settings['spicy_image_list'] as $image ) {
                    echo '<div class="spicy-item elementor-animation-'. $settings['spicyhover'] .' ">';
                    echo '<div class="spicy-pro-container">';   
                        echo '<img class="spicy-pro-img" src="'.$image['spicy_pro_image']['url'].'" >';     
                    echo '</div>';  
                    echo '<p class="spicy-pro-text">'.$image['spicy_pro_text'].'</p>';
                    echo'<div class="spicy-avatar-wrapper">';
                        echo '<img class="spicy-avatar" src="'.$image['spicy_pro_avatar']['url'].'" alt="Avatar">';
                    echo'</div>';
                    echo '<p class="spicy-pro-description">'.$image['spicy_pro_description'].'</p>';
                    
                    
                echo '</div>';
            }
        }
    }

Create Live Preview in Editor

To generate a live preview of the gallery output, we must create the _content_template() method by using Javascript:

protected function _content_template() {
       ?>
        <div class="spicy-gallery">
        <#
         if(settings.spicy_skin=='classic'){
         _.each( settings.spicy_images, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">
         <img  class="spicy-img" id="{{image.id}}" src="{{image.url}}"/>
        </div>
        <# }); } else{
            _.each( settings.spicy_image_list, function( image ) {
        #>
            <div class="spicy-item elementor-animation-{{settings.spicyhover}}">    
             <div class="spicy-pro-container">
                <img class="spicy-pro-img" src="{{image.spicy_pro_image.url}}" >
           </div>
              <p class="spicy-pro-text">{{image.spicy_pro_text}}</p>
                <div class="spicy-avatar-wrapper">
                 <img class="spicy-avatar" src="{{image.spicy_pro_avatar.url}}" alt="Avatar">
                </div>
                <p class="spicy-pro-description">{{image.spicy_pro_description}}</p>
            </div>
        <# }); }#>
        </div>
      <?php
    }

How to Register CSS Style to Widget

After creating a gallery widget, we need to register essential CSS style to our widget. To do this, we need to first create a CSS file, then register it in Spicy.php.

Gallery.css
.spicy-gallery{
 display:grid;
 grid-template-rows: auto;
 }
.spicy-gallery .spicy-img{
 width: 100%;
 object-fit: cover;
 margin: 0 auto;
 }

.spicy-gallery .spicy-pro-container{
 width:100%; 
 }
.spicy-gallery .spicy-pro-text{
 text-align:center;
 margin-top:-70px;
 margin-bottom: 10px;
 }
.spicy-gallery .spicy-pro-description{
 width:100%;
 text-align: center;
 padding-left: 10px;
 padding-right: 10px;
        
 }
.spicy-gallery .spicy-pro-img{
 width: 100%;
 }
.spicy-gallery .spicy-avatar{
 display:inline-block;
 margin-left:10px;
 margin-bottom: 20px;
 border-radius: 12px;
 }
.spicy-gallery .spicy-avatar.wrapper{
 display: block;
 }

In order to register our CSS file, we need to add below code to Spicy.php

// Register Widget Styles
add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );
public function widget_styles() {
 wp_enqueue_style( 'spicyPluginStylesheet', plugins_url( '/css/gallery.css', __FILE__ ) );
}

Classic layout output

Creating a New Widget Classic Layout Output

Pro layout output

Creating a New Widget Pro Layout Output

Conclusion

In this blog post, we described how to extend Elementor like a pro in detail and explained the structure of an Elementor widget. We also illustrated how to create a section and control, how to display/hide a section or control, how to change the widget style from controls, how to get settings and how to render the final output in frontend and Elementor editor.

Finally, we walked you through the steps of developing a gallery widget. Feel free to share your ideas and experiences in the comments section below.

Google Maps Alternatives: Good or Bad?

Google Maps Alternatives Featured Image

Many websites created by Jupiter users include a Google Map element. They’re particularly helpful for businesses who have a set location that they would like their visitors to know about and visit. But in using Google Maps, you might run into difficulties such as error messages as seen in the image below. In the next paragraph, we’ll explain in detail why you’ve received this message and how you can begin using alternatives to Google Maps!

The launch of Google Maps Platform

As of 11 June 2018, Google Maps changed its name to Google Maps Platform. With this change, any site that uses Google Maps is required to have a valid API key and a Google Cloud Platform billing account. Featuring Google Maps on your website is still possible, but you’ll have to make some modifications to how it is set up, including giving Google your credit card.

You can read more about the restructuring of Google Maps here.

Without an API key, sites with Google Maps will no longer be supported, and any Maps requests will now show only low-resolution maps watermarked with “for development purposes only” unless a credit card is associated with it.

If you are unwilling to create a billing account with Google, you can still find some Google Maps alternatives. We’ll list some of them.

Open Street Maps as a Google Maps Alternative

Tons of sites all around the world are working on OSM. The WP OSM Plugin is an open-source plugin with a free license and without any pro version or a business plan.

Features of the WP OSM Plugin include:

  • Add geolocation to a post or a page
  • Add GPX and KML files or just a single marker to a map
  • Add maps as shortcode or widget to a post/page
  • Fullscreen map, maps with markers linked to post/page with geolocation
  • OpenStreetMap, OpenSeaMap, Stamen maps, basemap, etc.
Google Maps Alternatives Features

You can read their FAQ and documentation on their official site.
Read the “Display a simple map” article to find out how to add a map to your WordPress site.

MapBox

Another alternative to Google Maps is MapBox. Mapbox is an online mapping service that allows users to customize maps – much more than Google Maps ever did. You can change backgrounds, road colors, and a lot more directly with a simple interface.

WP Mapbox GL JS Maps is the only plugin that enables you to make highly customized maps with 3D features, custom icons, zooming, custom filters, among many more options. It has a free and an inexpensive premium version, which adds custom markers, better control over directions, and more advanced control over marker and popup behavior.

To get started with MapBox, visit http://mapbox.com/ and click “Sign Up.” There are different pricing options you can select when signing up for MapBox. For now, go ahead and sign up for a free account, which comes with more than enough to get started. Read more here on how to use it.

The plugin provides you with a live preview while building the map, so you’ll always be able to see what the map will be before it’s published onto the main site. You can embed your map with a shortcode or publish it directly!

We’ll now show you how to use these alternatives to Google Maps on the Jupiter X site and describe the Open Street Map.

How to use Open Street Maps on Jupiter X

You’ll first need to install the OSM plugin in your WordPress dashboard via Plugins > Add New as described in this Jupiter X article.

Then follow the instructions from the OSM article:

1. Create a page or a post where you want to show a map and open it to edit.

2. Find the “WP OSM Plugin shortcode generator” section in the page editor and customize the map to your liking.

3. Below, you’ll see a map that you’ll need to adjust. Click on the place where you want to show a marker on the map. It will generate the map latitude and longitude based on where you placed the marker.

4. The last step is saving your marker and generating the shortcode.

Google Maps Alternatives Last Step

5. You’ll see a shortcode above the button.

6. Copy it to be able to add it to the page in the Elementor editor.

7. Once you’ve copied the shortcode, you can go and edit the page with Elementor.

8. Look for the “Shortcode” widget in the Elementor editor.

Google Maps Alternatives Elementor Editor

9. Drag it to the page and paste the OSM shortcode you copied in the previous step.

10. You’ll see the map as you styled it. Here is the result you’ll see on the frontend:

Google Maps Alternatives Result

Wrapping Up

Open Street Maps and MapBox are fantastic free plugins for placing detailed, interactive maps on your website. If you take the time to read the instructions for the plugins, you’ll find that they are a useful way of enhancing any post or page.

How to Create Custom Forms with Jupiter X Form Builder

Create Custom Forms Featured

Creating custom forms in WordPress has always been a hassle. Jupiter X has begun a new era in the form building experience. Now, you can create custom forms visually. Typically, site visitors come across forms such as signup, sign in, register, subscription, contact or any other custom forms.

Forms allow site visitors the ability to send information such as usernames, passwords, comments, emails, among other things to the server.

Forms contain fields such as dropdowns, checkboxes, text boxes, input, as well as submit and radio buttons. Nowadays forms play an integral role, particularly in digital marketing and social networks.

Form Builder in Depth

If you want to build a beautiful and secure form with Jupiter X, then you can use the Form Builder, which allows you to create custom forms in a few minutes with minimum effort.

Content Tab

This tab contains four sections such as Form Fields, Submit Button, Settings and Feedback Messages. Let’s go through each of them one by one.

Form Fields

In this section, we can create fields for our forms. Form Fields have two options:

  • Form: for setting the name of the form.
  • Items: each field in the form.
Create Custom Forms Screenshot 1
Create Custom Forms Screenshot 2

Furthermore, each item has its options like:

  • Type
  • Label
  • Placeholder
  • Required
  • Column Width
  • And more.

One of the important options of each field is the Type option, which defines the role of the field. The Jupiter X Form Builder has eleven types for fields:

  • Text: for creating the text input.
  • Email: for creating the email input.
  • Textarea: for creating the textarea input.
  • Tel: for creating only the phone number input.
  • Number: for creating only the number input.
  • Date: for creating the date picker.
  • Time: for creating the time picker.
  • Checkbox: for creating a checkbox element.
  • Radio: for creating a radio button element.
  • Acceptance: for creating an agreement for conditions or a term of use button.
  • reCAPTCHA: for creating the human testing Google service.
Create Custom Forms Screenshot 3

Submit Button

After clicking on the Submit Button, the information contained in the form is sent to the server. The Submit Button section has three options:

  • Text: for changing the bottom text.
  • Icon: for setting an icon for the Submit Button.
  • Column Width: for changing the Submit Button container.
Create Custom Forms Screenshot 4

Settings

The Settings section has three options:

  • Label: Show/Hide status for fields label.
  • Required Mark: Show/Hide * after fields label for required fields.
  • Add Action: Set the action in the form.
Create Custom Forms Screenshot 5

The Jupiter X Form Builder allows the user to choose from seven action fields. If you choose one of them, the options section of each action appears at the bottom of the setting section to where you can modify it.

1. Email: This action email form allows users to fill in their email address such as admin. We can set To, Email Subject, From Email, From Name, Reply-To, Cc, Bcc.

Create Custom Forms Screenshot 6
Create Custom Forms Screenshot 7

2. MailChimp: This is used for a subscription form. In order to use this, we must first have an API Key from MailChimp to manage our subscriber list. You can learn more about how to get a MailChimp API by clicking on this link.

In the MailChimp section, set the API Key, choose the Audience, and finally set the field mapping. In default, MailChimp has six fields including Email, Address, Birthday, First Name, Last Name, and Phone Number.

Create Custom Forms Screenshot 8
Create Custom Forms Screenshot 9

3. Redirect: With this, we can redirect our page to another URL.

Create Custom Forms Screenshot 10
Create Custom Forms Screenshot 11

4. Slack: this action allows us to send information from our form to Slack. In order to do this, we must first sign up for Slack, enable the incoming webhook, then set our information in the Slack setting section. For more info on how to do this, you can head over to this link.

Create Custom Forms Screenshot 12
Create Custom Forms Screenshot 13

5. HubSpot: One feature that Hubspot provides is allowing users to create a contact form and then to publish these forms on the internet. This allows us to directly submit our form data to the Hubspot form.

First, signup to HubSpot then go to Marketing > Forms and create a new form. After that, design a form and get a Portal ID and Form ID to enter in the HubSpot action settings in the form.

Create Custom Forms Screenshot 16
Create Custom Forms Screenshot 17

6. Download: This allows site visitors to download a file from your website.

Create Custom Forms Screenshot 18
Create Custom Forms Screenshot 19
Create Custom Forms Screenshot 20

7. Webhook: this enables us to integrate our form with Zapier webhooks. Zapier webhooks allows us to complete several tasks such as sending an email, connecting to Facebook, Twitter, and Slack, as well as accessing more than 1,500 apps.

To activate this action, go to Zapier, generate a zap, and copy the Webhook URL and paste it into the Webhook action setting. To find out more about how to do this, visit this link.

Feedback Messages

After a page visitor submits a form, they will be able to see a message on their screen. The Jupiter X Form Builder has four types of messages, including Successful Message, Error Message, Required Message and Subscriber Already Exists Message. In the Feedback Messages section, you can alter the messages tailored to fit your needs.

Create Custom Forms Screenshot 22

Style Tab

This tab contains six settings including General, Label, Field, Checkbox, Radio, Button. Let’s walk through each setting one by one.

General

In the general section, we have two options:

  • Column Spacing: this allows you to change the space between fields that are arranged horizontally.
  • Row Spacing: this enables you to adjust the space between fields that are arranged vertically.

Label

In the label section, we can set the below style for the label:

  • Color
  • Font family
  • Font size
  • Font weight
  • Transform
  • Style
  • Decoration
  • Line-height
  • Letter spacing
  • Space between the label and field.

Field

In the field section, we can set the below style in the normal and focused situation.

  • Background color
  • Border Type
  • Border Radius
  • Box Shadow

Also, we can set Color, Typography, and Padding of the placeholder and value.

Checkbox

In the section, we can set below style in the normal and checked situation.

  • Size
  • Color
  • Typography
  • Spacing between
  • Spacing
  • Background color
  • Border style
  • Box-shadow

Radio

In the section, we can set below style in the normal and checked situation.

  • Size
  • Color
  • Typography
  • Spacing between
  • Spacing
  • Background color
  • Border style
  • Box-shadow

Button

In this section, we can adjust the style for a button with the following settings:

  • Height
  • Color
  • Typography
  • Spacing
  • Alignment
  • Background Type
  • Icon color
  • Border style
  • Box-shadow

Creating a Custom Contact Form

Contact forms are a useful type of form commonly used on websites. Visitors to your page can fill out contact forms to send messages, ideas, questions or any other information to the site owner.

In creating this form, you have the option to include Email, Redirect, Slack and Webhook actions. At the end of this section, we will create a Contact Us form like in the image below:

1. Go to Elementor > Add New.

2. Create a Section that is named Contact Us.

Create Custom Forms Screenshot 24

3. Add a new section with one column and set the following:

  • This image as a background image.
  • In the Content tab, Content Width: 680px
  • In the Advanced tab, Padding top and Padding bottom: 100px

4. Add a Heading.

  • In the Content tab, set Title to Contact Us and Alignment to Center.
  • In the Style tab, set Color to #FFFFFF
  • In the Advanced tab, set Padding Bottom to 16px.

5. Add a Form element from Raven Elements, then set the name to contact.

6. Create a First Name Field.

Create Custom Forms Screenshot 25

7. Create a Last Name field.

Create Custom Forms Screenshot 26

8. Create an Email Field.

Create Custom Forms Screenshot 27

9. Create a Phone Number field.

Create Custom Forms Screenshot 28

10. Create a Message field.

Create Custom Forms Screenshot 29

11. In the Style tab, set:

  • Background Color to rgba(255,255,255,0.91)
  • Placeholder Color to #000000

Also, set the other settings as shown in the images below.

Create Custom Forms Screenshot 30
Create Custom Forms Screenshot 31

12. Go to Content tab > Submit Button section.

Create Custom Forms Screenshot 32

13. Go to Style Tab > Button Section. Set Background Color to #6073e0

Create Custom Forms Screenshot 33

14. Go to Content tab > Setting section. Set your preferred actions.

Create Custom Forms Screenshot 34

15. Change the settings like in the images below in the sections of each action.

Create Custom Forms Screenshot 35
Create Custom Forms Screenshot 36

 

In the end, when submitting the form, the data will be sent to my@example.com, the page will be redirected to www.artbees.net, the form data will be sent to our Slack channel and a new email will be sent to the Gmail account that we set up in our zap in Zapier.

Creating a Subscription Form

Subscription forms are popular on websites as it enables the site owner to send news and deals to their subscriber list.

In this section, we’ll go through and explain the MailChimp, Download and Hubspot actions in detail. Also at the end, we’ll create the subscription form shown in the following image.

1. Go to Elementor > Add New. Create a new section and call it “subscribe.”

2. Add a New Section with two columns then set:

  • Background Image to this image.
  • In the Layout tab, set content width to 800.
  • In the Advanced tab, set Padding to 100px.

3. Edit the left column. In the Advanced tab, set:

  • Padding-top to 19 %.
  • Padding-Right to 30%.

4. Add a Heading element in the left column the set following settings.

  • Title: Subscribe to our Feeds
  • Alignment: center
  • Text color : #FFFFFF
  • Size: 26

5. Add a Spacer element in the left column.

6. Add a Social Icons element in the left column with the following settings.

  • Shape : Circle
  • Alignment : Center
  • In style tab: Primary Color to rgba(255,255,255,0.54), Secondary Color to rgba(0,0,0,0.68), Size to 17, Spacing to 18.

7. Edit the Right column:

  1. In the Style tab, set background color to rgba(255,255,255,0.8).
  2. In the Advanced tab, set the following:
  • Padding-top to 10%.
  • Padding-Right to 5%.
  • Padding-left to 5%.
  • Padding-bottom to 4%.

8. Edit the Right column:

Add a Form Element. In the Content tab set Form to Subscribe.

9. Create the First Name and Last Name fields like in the images below:

 

10. Create the Email and Phone fields as seen in the following images:

11. Create a Birthday field like the images below:

Create Custom Forms Screenshot 46

Important Note: In your MailChimp account, the type of birthday field must be Date.

12. Change the Submit button and Settings sections like in the image below:

Create Custom Forms Screenshot 49
Create Custom Forms Screenshot 49

13. In the MailChimp section, set our API Key and create five fields in Field Mapping with the following values:

Field Mapping

MailChimp FieldForm Field
Phone NumberPhone
BirthdayBirthday
First NameFirst Name
Last NameLast Name
EmailEmail

14. In the Download section, set your URL for download.

15. In the Hubspot section, set the settings as seen in the following image:

Field Mapping

HubspotForm Field
firstnameFirst Name
lastnameLast Name
emailEmail

16. Edit the Form > Style Tab, set the following:

  • Column Spacing: 15
  • Row Spacing: 25

Finally, after submitting a form the download will begin, the data in the form will be sent to Hubspot, and users will be subscribed to MailChimp.

Securing the Form

There’s no doubt that security is one of the most vital factors when it comes to forms. The Jupiter X Form Builder has been built on top of standard security practices.

Frontend Validation

Frontend validation (HTML5 validation) is used on the client-side to ensure that the data is correct before sending. The data entered into a form needs to be in the right format and certain fields need to be filled in order to effectively send the submitted form. For example, if we enter a number in the email field, an error occurs and the data is not sent.

Backend validation

Backend validation runs on the server after the data from the form is sent to the server. Backend is more important than frontend validation because hackers can disable frontend validation and send malicious data to the server.

reCAPTCHA

reCAPTCHA is a free Google service that protects websites from spam and abuse. With this service, we can ensure that the data is sent by a human, not a robot.

To add this to our form, we must go to reCAPTCHA and get the Site Key and Secret Key, and then insert them into Elementor > Setting > Raven.

Then, create a field with reCAPTCHA type to use it.

Logging the Sent Emails

Being able to log and view the sent emails in WordPress admin is very helpful both for development purposes and in tracking the emails.

There are some plugins that allow us to log the emails.

1. Email Log

Email Log is a WordPress plugin that allows you to easily log and view all emails sent from WordPress.

The features of Email Log include the following:

  • See all sent emails.
  • Filtered or sorted based on the date, email, subject, etc.
  • Delete selected emails or bulk emails.
  • Resend emails.
  • Forward emails.
  • Export email logs.

2. WP Mail Logging

WP Mail Logging logs each email sent by WordPress. This can be useful if you don’t want to lose such mail content. It can also be useful for debugging purposes while developing.

Features

  • A complete list of sent emails.
  • Error status from mail implementation is logged.
  • Zero-configuration – just install and enjoy.
  • Log rotation – decide which emails you want to keep.
  • DevOP: IP of server sent the mail.

Conclusion

In this article, we took a deep dive into how you can create custom forms with the Jupiter X Form Builder. This post provided step-by-step instructions on how to create two types of forms: a contact form and a subscription form. Through looking at both of these examples, we also covered the Email, Redirect, Slack, MailChimp and Download actions that are found in them.

We took this post a step further and explained the significance of security and addressed frontend and backend validations, as well as reCAPTCHA. This post further examined two plugins that will allow you to log the emails that have been sent to your server from your site’s forms.

Feel free to share your ideas and experiences with us in the comments!

How to Create a Custom Footer with the Jupiter X Footer Builder

Create a Custom Footer Featured Image

Almost all of the themes out there provide you a way to customize the footer for the website they belong to. But have you ever wondered if there is a way to break the mold and build a brand new design to create a custom footer? This was a question frequently asked by Artbees users – now it’s possible with the new Jupiter X theme!

In this article, we’re going to discover how we can customize our footer area with the Jupiter X theme via the default options and then see how we can create a completely new footer design from scratch. The tools we need for this tutorial include:

  • A WordPress website
  • Jupiter X Pro theme
  • Elementor Page Builder
  • Raven Plugin (Exclusively developed by Artbees to extend Elementor free functionality)

Let’s have a quick overview of how we can customize our website footer with the default options first since it’s an easy and fast method for having a beautiful footer. After that, we’ll show you how to create a completely new footer from scratch.

Customizing the Default Footer in Jupiter X

The first method will use the Jupiter X Customizer settings. As mentioned, it’s powerful enough to build a completely customized footer. However, when using this method, you have only one footer for your entire website, and in case you need a different footer for other pages, you’ll need to create a custom footer and assign it to those pages. We’ll get to that later. For now, let’s look at how we can access the footer customizer and apply some changes on the prebuilt footer.

From the WordPress left sidebar click on Jupiter X > Customize.

Create a Custom Footer Jupiter X Customizer
Access to Jupiter X Customizer

Then find Footer from the list and click on it.

Create a Custom Footer Dashboard
Customizer Dashboard Menu

These settings will allow you to customize everything in your footer including static/fixed behavior, showing/hiding the sub footer, making it full width, and showing/hiding some other elements on the footer like Copyright text and menu.

Create a Custom Footer Choose Footer
Choose Footer from the customizer left dashboard

The cool part is the Widget Area option. As soon as you enable it, you’ll see how many layouts of widgets you can choose for your footer. You can then populate the footer widget areas from WordPress Appearance > Widgets.

Create a custom footer widget area enable
Enabling Widget Area option unveils a set of footer layouts

As soon as you enable the Widget Area, you’ll be able to see the widget styling options in the second tab. It has a set of options including Widgets Title, Texts, Links, Thumbnail, Container, Divider, and Container Styles which allows you to customize every single corner of your widget. And you can do all of it live.

Create a custom footer widget styling options
Widget Styling options in Jupiter X Footer Customizer

It’s pretty neat, isn’t it? Now, let’s see what we can build as a custom footer.

Creating a Custom Footer in Jupiter X

This is the part where you’ll need the Elementor and Raven plugins. Elementor will give you the ability to build fantastic layouts, and the Raven plugin will let you create custom footers and headers on Elementor (free version) and also will give you 22 new elements to use. You can find more information about Raven plugin here.

The great thing about a custom footer is that you are no longer limited to the WordPress widgets. You can put anything you want, anywhere you want in your footer. Also, Jupiter X Pro offers a set of bundled plugins that extends the number of elements and effects (such as Jet Elements and Jet Tricks) that you can use in Elementor. You can utilize them as well.

To use a custom footer on your website, you must:

  • Create your custom footer in Elementor.
  • Assign it to all pages on your website or to a specific page.

We’ll walk you through this process step-by-step.

Creating a new Custom Footer in Elementor

1. Like every other WordPress modification, the first step will start from the backend Side Dashboard. From the menu on the left in, click on Saved Templates beneath Elementor.

Create a custom footer saved templates
Click on Saved Templates to see the old templates and add a new one

2. Next to the Saved Templates title, click on the Add New button.

Create a customer footer add a new template
Add a new template to Elementor

Note: If you are using Elementor Pro, you may see your old footer templates in the Theme Builder instead of Saved Templates.

3. For the template type select Footer, give your footer a name and click on the Create Template button.

Crate a custom footer choosing a template
Choosing a template type while adding a new template to Elementor

4. You will now be redirected to the Elementor page editor where you can choose a footer template from the library or create a custom footer from scratch using Elementor. Some of the pre-made footers are part of Elementor Pro and, in order to use them, you must first purchase Elementor Pro. You can also use the pre-made Jupiter X templates, which are free.

To see the Jupiter X templates, simply click on Jupiter X. You can use your preferred template by clicking on the Insert button.

Create a custom footer Jupiter X footer templates for Elementor
Jupiter X Footer Templates for Elementor

If you don’t want to use pre-made templates and plan to create your custom footer from scratch, simply click on the “x” icon. That will redirect you to the Elementor page editor.

Create a custom footer closing templates modal
Closing the templates modal

5. If you’re using a pre-made template, you can customize it or add new widgets. In order to customize a brand new footer (without using a pre-made template), first determine how many columns you need for your footer template. Then add your desired Elementor’s widgets to it, such as Site Logo. Since this is same as creating any other content on your page, in case you needed more information about how to add and modify content on your template, you can check some Elementor Tutorials and the Jupiter X knowledge base.

Create a custom footer building template from scratch
Building up the template from scratch

You can also add WordPress widgets to your footer template by going to the WORDPRESS category in the Elementor widgets panel.

Create a custom footer widgets in Elementor
WordPress widgets in Elementor

6. Publish the template after customizing it.

Create a custom footer save changes
Save and Publish the changes

Important Notes!
1. In case you are using Elementor Pro for a footer template with Display Conditions, some of the Jupiter X footer customizations may not work properly. To fix this:

Make sure the Display Conditions are not provided for your footer templates.

Create a custom footer elementor display conditions
Elementor Display Conditions

Simply save a template without conditions.

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your footer template.

Create a custom footer section scrolling
Section Scrolling effect option.

Assigning a Custom Footer to your Website

Now it’s time to assign our beloved footer template to the website.

1. From the menu on the left in WordPress, go to Jupiter X > Customize.

2. From the dashboard on the left in Customizer, click on Footer.

3. For the Footer Type, select Custom and assign your footer from Template.

Create a custom footer customizer
Choosing the footer template in the Footer Customizer

4. Click on Close and Publish the changes.

You’re done! Now, refresh your page and see how your new footer looks on your website. One thing to mention is that you can add as many footer templates as you want and assign them to different pages. Have a look at this tutorial to find more!.

Summary

Footers are like the summary of an entire website. Having a good summary that contains relevant links and content at the end of a page will send your viewers to the right place.

In this article, we learned how to get rid of the technical coding stuff when creating a footer and easily build customized or new footers using the Jupiter X theme. Now, you can channel your energy into creating amazing your content instead of worrying about how to build a footer because every tool you need is ready for you!

How to Create a Custom Header with Jupiter X like on the Apple website

Custom Header Featured Image

With the Jupiter X theme, you can create a new custom header from scratch using Elementor. It allows you to use all of the Elementor elements to build a highly customized header, which is the first thing visitors will see when they enter your site.

Please note that the Raven plugin must be installed and activated among the bundled plugins before being able to use the Custom Header feature with the free edition of Elementor.

The difference between the old Header Builder in Jupiter 6 and the Custom Elementor Header Builder in Jupiter X

Simply put, the old header builder has limited options and styles, while the custom Elementor header has virtually unlimited customization due to its widgets. This means that you will be able to add any Elementor elements to the header, including buttons, images, headings, icons and much more.

The Header Builder in Jupiter 6 doesn’t have as many elements, meaning the design is simpler:

Custom Header Jupiter 6 Header Builder

If you’re looking for a more specific header design, Elementor will allow you to do just that:

Custom Header Elementor Header Design

What you can do with the Jupiter X Header Builder

With the power of the Elementor editor, you can design a custom header any way you like and be able to complete projects faster than ever before. You can also save a header template and reuse it for another project. With the Header Builder and the Raven plugin, things are going to be much simpler and faster.

Custom Header Template Library

You also have the option of choosing a header from a large selection of designer-made blocks, which are readily available in the Template Library. There, you’ll be able to find templates from Jupiter X and the Elementor Pro version. Customize it any way you like, and give it your own personal touch.

Note that to use the Elementor Pro templates, you’ll have to buy the Elementor Pro version as the Jupiter X theme only provides the free version of Elementor. However, there are several Jupiter X header templates for you to choose from, and the Pro version is not required.

Creating a custom header like on the Apple website

Creating a custom header can be done with ease and in no time at all as code editing is not required.

As an example, we’ll use a header from the Apple website:

Custom Header Apple Website Header

To create a similar header, make sure you have activated the Raven and Elementor plugins.

1. From the menu on the left side in WordPress, click on Templates and go to the Saved Templates menu

Custom Header First Step

2. Click on the Add New button next to the My Templates title.

Custom Header Second Step

3. For the template type, select Header, give your header a name and click on the Create Template button.

Custom Header Choose Template

4. Click on the + icon to add a new section and select the structure as a row without columns.

Custom Header Add New Section

5. Before adding a menu to the section, create it in Appearance > Menus. If you want to have the icon as the homepage instead of just a text as on the Apple site, you will also need to activate the Menu Icons plugin that is bundled in the theme. Then, in Appearance > Menus, create a menu, and select an icon for your homepage item:

Custom Header Create Menu

Select any icon you want. If you want to hide the Home text in the menu and only show an icon, you need to check the Hide Label option and set other settings. Then, click the Select button:

Custom Header Select Icon

6. Add other menu items from your pages or custom links to complete the menu.

7. When it’s saved, go back to your header template in Elementor editor and look for the Navigation Menu element from Raven (the blue one).

Custom Header Navigation Menu

8. Select your menu and enable the Menu Icons option in the Settings tab.

Custom Header Menu Icons

You’ll still see the Home label in the editor, but the icon will be shown on the frontend.

Custom Header Home Icon

9. You can then add a background color for the header. You’ll need to edit the Section settings, and set the background in the Style tab:

Custom Header Set Background Color

Also, style your Navigation Menu via the Style tab in the Navigation Menu settings.

Once you have made the needed changes to the header design, click Publish, and assign the custom header in Appearance > Customize > Header.

custom header result

That’s it! You’ll now be able to see your handcrafted header live on your site. You can easily create as many headers as you like, and spread them across the relevant pages with a single click.

Wrap Up

From now on, you don’t need to change your header.php file or hire a developer to customize the CSS header elements of your site. Jupiter X features make designing a header quick and straightforward. With the bundled plugins like Raven, Menu Icons and the main one Elementor, you’ll be able to create any custom design for your header.

How to Quickly Create a Landing Page Using Custom Blocks in Jupiter X

Elementor is an extremely powerful page builder. Among all its features, the ability to manage and create a landing page with custom blocks is quite handy. It allows you to build different parts of a website, then combine them into a page.

What is a custom block?

A custom block is similar to a piece of a puzzle or a brick of the wall. A landing page or complete website has several sections like a header, footer, hero, slider, testimonial, form, and so on. With the custom block feature, you can create each section separately and use each in any site or web page.

What are the benefits of a custom block?

  • Ability to use readymade block templates.
  • Creating a custom block once, then using it on several web pages or websites.
  • Ability to export/import the custom blocks.
  • Increasing the speed of creating a web page.

How to Create Custom Blocks

By using Elementor with the Jupiter X theme, you’ll be able to create different types of custom blocks: Page, Section, Header, Footer. With these types, you can create various custom blocks for any web page.

To create a custom block, follow the steps below:

1. From the left sidebar of the admin page, click on Elementor > Templates > Add New

Create a Landing Page Using Custom Blocks 1

2. Select the type of custom block, then enter a template name and click on the Create Template button.

3. In Elementor editor, add a new Section then add a widget.

4. There are two methods to save the custom block.
1). Right-click on the section button, then click on Save as Template.

2). Right-click on the Save Options button then click on Save as Template.

How to Export/Import Custom Blocks

Another valuable feature in Elementor, particularly when it comes to creating a landing page using custom blocks, is exporting/importing. With this feature, you can easily create custom blocks and export them. Also, you can import custom blocks that have been created by other people.

Exporting a custom block

There are two methods to export a custom block.

1. Go to Elementor > Templates > Saved Templates then click on the Export Template button.

2. In the Elementor editor, click on the Add Template button then click on the Export button in the Library popup.

Importing a custom block

To import a custom block from your computer, click on Elementor > Template on the left sidebar of the admin page. Then in a new window, click on Import Templates and choose your file to upload it.

How to Create a Landing Page Using Custom Blocks

A landing page (a.k.a static page, lander, lead capture page) is a standalone page that shows all the important content of any website on a single web page.

Creating a Header Block

The Header block is one of the moment sections on each website. In this case, it contains brand and social icons.

  1. Create a Template and set the type to Header.
  2. Add a new Section with two columns.
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Law <span style”color: rgb(248, 88, 88)”>.</span>
    • On the Style tab, set color to #000000
  4. Add a Social Icon element the set following settings.
    • On the Content tab, create 4 icons as: Facebook, Twitter, Google+, WordPress
    • Also set Shape to circle and Alignment to Right.

Creating a Hero Block

The Hero block is one of the most important elements when you create a landing page using custom blocks as it represents the leading message and the product promoted by your website. In this case, it contains two headings and a call-to-action button.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to Screen and Column Position to Middle
    • On the Style tab, set Background Color to #565656
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Expert Legal Solution, Alignment to Center
    • On the Style tab, set Color to #ffffff
  4. Right-click on the first Heading element, click on Duplicate, and then set the following settings.
    • On the Content tab, set Title to Defend Your Constitutional Right with Legal Help
  5. Duplicate the previous heading then set Title to Business Law
  6. Add Button then set following settings.
    • On the Content tab, set Text to Make An Appointment, Alignment to Center
    • On the Style tab, set Background color to #f85858, Border Radius to 28px
    • On the Style tab > Typography set Size to 18px, Weight to 300, Letter Spacing to 2.1
    • On the Advanced tab, set margin-top to 5%

Creating a Stats Block

Stats block is a section that allows you to input information and the statistics of your operations, followers, subscribers, delivered projects, among other data points. Typically, a web designer uses a counter, progress bar, and chart.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with one column then set the following settings.
    • On the Layout tab, set the Height setting to Min Height equal to 400.
    • On the Style tab, set the Background color to #efefef
  3. Add an Icon element then set the following settings.
    • On the Content tab, set Icon setting to user-o
    • On the Style tab, set Color to #f74242, Size to 60, and Alignment to Center
    • On the Advanced tab, set margin-top to 15px
  4. Add a Counter element then set the following settings.
    • On the Content tab, set Starting Number to 0, Ending Number to 27539, Animation Duration to 2000, Title to Satisfied Clients
    • On the Style tab > Number section, set the Text color to #000000, in Typography set: Size to 45, weight to 200, Line-Height to 1.6 EM
    • On the Style tab > Title section, set the Text color to rgb(0,0,0,0.36), in Typography set Line-Height to 4 EM
  5. Duplicate the first column three times, then set different icons and titles as explained before.

Creating an About Us Block

In web design, the aim of the About Us section is to introduce your team, experience, expertise, operations, services, and to briefly answer questions like: “who are we?” and “what do we do?”.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with two columns then set the following settings.
    • On the Layout tab, set Content Width to Full Width
  3. Edit the left Column then set the following settings.
    • On the Style tab, set Background Image to this image. Since you can’t see the background image, you need to add an element like Spacer element to the left column.
  4. Edit the right Column then set the following settings.
    • On the Style tab, set the Background color to #665e5c
    • On the Advanced tab, set Padding top to 27 and Padding bottom to 24
  5. Add an Inner Section element to the right column.
    • On the Layout tab, set Minimum Height to 450px.
  6. Add a Heading element then set the following setting.
    • On the Content tab, set Title to Why Choose Us?
    • On the Style tab > Typography, set the weight to 300
    • On the Advanced tab, set margin-top to 25
  7. Add a Text Editor element then set the following setting.
    • On the Style tab > Typography, set Line-Height to 1.6EM
    • On the Advanced tab, set margin-top to 5
  8. Add a Progress Bar element then set the following setting.
    • On the Content tab, remove Title, set Inner setting to Adoption Law, Percentage to 50
    • On the Advanced tab, set margin-top to 50
  9. Duplicate the previous Progress Bar then set the different settings as explained above.

Creating a Contact Us Block

The Contact Us section allows your visitors to view your business contact info. It’s also quite common to add a contact form to this section for easier communication.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Minimum Height to 500
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Contact Us, Alignment to Center
    • On the Style tab, set color to rgb(0,0,0,0.84), in Typography, set size to 47px
    • On the Advanced tab, set margin-top to 95px, margin-bottom 100px.
  4. Add an Inner Section element with two columns.
  5. In the left Column, add an Icon list element then set the following settings.
    • On the Content tab, create 4 items then set proper settings like Text to 198 West 21th Street, Suite 721 New York NY 10016, Icon to location-narrow. Repeat the same steps for other items with different settings.
    • On the Style tab > List, set Space between to 25, Divider to On, Style to solid, weight to 1
    • On the Style tab > Icon, set Color to #dd290d, size to 14
    • On the Style tab > Text, set Color to #9b2f14
  6. In right Column, add a Form element then set the following settings.
    • On the Content tab > Form Fields, create 3 fields then set the settings like Type to Text, Label to Name, Placeholder to Name, Column-width to 100%. Repeat the same steps for other items with different settings.
    • On the Content tab > Submit Button, set Text to Send, Icon to Send
    • On the Style tab > General, set column-spacing to 7, Row-spacing to 7
    • On the Style tab > Button, set Text color to #ededed, background color to #e8241e

Creating a Testimonials Block

The Testimonials Section showcases user feedback about your products.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to screen
    • On the Style tab, set Background Color to #efefef
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Testimonials, Alignment to Center.
    • On the Style tab, set Color to rgb(0,0,0,0.84),
    • On the Style tab > Typography, set Size to 45px, Weight to 300
    • On the Advanced tab, set margin-bottom to 75px
  4. Add a Testimonials element then set the following settings.
    • On the Content tab > Settings, set Slides to show to 1, Effect to slide, Animation speed to 5000, Show Dot Navigation to yes
    • On the Content tab > Items, add 3 items and set favorite data to Image, Comment, Name, Date.

Creating a Footer Block

The Footer Section normally contains small widgets that provide information about the website. It may also contain other widgets for additional information.

  1. Create a Template and set the type of it to Footer.
  2. Add a new Section with one column then set the following settings.
    • On the Style tab, set Background Color to #ffffff
    • On the Advanced tab, set Padding-top to 40, Padding-bottom to 20
  3. Add an Inner section element with 3 columns.
  4. Add a Heading element for the first column then set the following settings.
    • On the Content tab, set Title to Attorney’s Law, Alignment to left
    • On the Style tab, set color to #515151, in Typography, set the size to 24px, weight to 300
    • On the Advanced tab, set margin-top to 10px, margin-bottom 33px
  5. Add a Text Editor element in the left column then set your favorite text.
  6. Duplicate the Heading element in the first column and add it to the second column and set Title to Opening Hours and Alignment to center.
  7. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items then set settings like Text to Mon – Thu: 9:00 – 21 00. Repeat the same steps for other items with different settings.
    • On the style tab, set Space Between to 8, Alignment to center
  8. Duplicate the Heading element in the first column, add it to the third column, and set Title to Contact Information and Alignment to center.
  9. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items, then set the settings like Text to 198 West 21th Street, Suite 721 New York, Icon to Address-Book. Repeat the same steps for the other items with different settings.
  10. Add a Heading element then set the following settings.
    • On the Content tab, set Title to © 2019 Free HTML5. All Rights Reserved. Designed by FreeHTML5.co Demo Images: Unsplash, Alignment to Left.
    • On the Style tab, set Color to #545454, in Typography, set Size to 16px, Weight to 400

Combining all Blocks

After creating the necessary blocks, let’s combine them to create the final page.

1. Create a new Page from the left sidebar of the admin page.

2. In the new page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on the Edit with Elementor button.

3. In the Elementor editor, click on the Add Template button.

4. In the Library popup, click on the My Templates tab. In this tab, you can see your custom blocks (imported or created). Finally, click on insert.

5. Add the templates in the following order: Header, Hero, Status, About Us, Contact Us, Testimonials, Footer.

Note: After adding each custom block (template), the layout of the page may reset. To assign the correct layout, click on the Settings button and choose the proper layout.

Conclusion

In this article, we showed you how to create a landing page with custom blocks in Jupiter X. We further explained the process of building custom blocks from scratch. But don’t worry – if you need readymade custom blocks, you can check out Jupiter X readymade blocks.

How to Create Custom Search Results Page via Jupiter X

Create Custom Search Results Page via Jupiter X Featured Image

Customizing the search page is one of the biggest concerns for web designers. When it comes to WordPress, you need to modify your search page template in order to customize your search results. But what if you had the ability to customize your search results in a blink of an eye with a set of premade options?

Jupiter X uses a default search results page which mimics post archives. This is controlled in the theme by the jupiterx/lib/templates/fragments/search.php template file. There’s no option to create a custom template for a search results page, but you have the capability to customize the page with some settings.

By default, when users search for something on your website, it displays the results from all of the post types such as posts, pages, portfolios, and products. But, you may want to filter the search results in your website and show the results from just a specific post type like posts or pages.

It’s especially useful in e-commerce websites when you want to show particular products in the search result page. You can even specify how many posts should be shown per page. Let’s see how easy it is to create a custom search results page via Jupiter X.

Create Custom Search Results Page via Jupiter X

1. From your WordPress left menu, go to Jupiter X > Customize.

Create Custom Search Results Page via Jupiter X 1

2. Select the Pages option.

Create Custom Search Results Page via Jupiter X 2

3. Choose Search, then a new window will show up with the Search settings.

Create Custom Search Results Page via Jupiter X 3

By Disabling/Enabling the post types from the Display section, you can customize the search results. You can change the number of posts per page as well.

Create Custom Search Results Page via Jupiter X 4

4. Close the Search settings panel and then Publish the changes.

Editing Search Result Text

  • Using Poedit software

When you check the search results page, you may want to edit or translate some titles like “Search Results for:”, “New Search”, etc.

Create Custom Search Results Page via Jupiter X 5

It can be done with the Poedit software, which is used for translation. You can read more about Poedit in the article “Translating the theme”.

Just create a .po file as described in the linked article above and name it with your language prefix. If you want just to edit the text in English, you need to name the file en_US.po. This way, you’ll be able to edit any Jupiter X text in the English language.

  • Using the child theme

Another way to override default text is to make changes in the child theme. You’ll need to override the functions of the necessary titles.

You can edit the files through your WordPress dashboard in Appearance > Editor.

1. Look for the file search.php in the parent theme jupiterx/lib/templates/fragments directory.

2. Copy the function name, for example, jupiterx_new_search_title_text if you want to change the text “New search” on a search results page.

Create Custom Search Results Page via Jupiter X 6

3. Go to the child theme folder and open the file functions.php and add this code:

add_filter( 'jupiterx_new_search_title_text_output', function() {

   return 'Some new text of yours';

} );

4. Save the file, and you’re done. The changes will be visible on the frontend.

You can do the same with other functions you find in the file. For example, to change the subtitle text, you can use the same code. Just edit the function name to the one you need, e.g. jupiterx_new_search_subtitle_text for the subtitle, and the code will be:

add_filter( 'jupiterx_new_search_subtitle_text_output', function() {

   return 'If you are not happy with the below results, you may try another keyword.';

} );

Adding a Sidebar on a Search Results page

You can also add or remove the sidebar when you create custom search results page via Jupiter X. To do this, you’ll need to edit Sidebar section in Jupiter X > Customize. You can get comprehensive instructions about how to add a sidebar in this article. It will be applied to all pages, but if you want to add or remove it only for the search result page, do the following:

  1. From the WordPress left dashboard, go to Jupiter > Customize.
  2. From the Customizer left dashboard, go to the Sidebar menu.

In the Sidebar popup, there’s an Exceptions setting which allows you to edit the sidebar for different post types, such as Page, Blog, Search, Shop, Archive, and Portfolio. In our case, we’ll select Search as an exception and configure the sidebar settings to the ones you need.

For how to add widgets to sidebar areas, refer to the article “Adding widgets to a sidebar”.

Customizing Your Search Results Page is Quick and Easy with Jupiter X!

In this article, we learned how we to create custom search results page via Jupiter X. To reiterate, you can customize the search to include/exclude different post types and also change the number of items in the result page. We also explained how to change the text using translation plugins and in the end, we overviewed how we can modify the search page using the powerful Jupiter X API.

In general, with the Jupiter X API, there is nothing you can’t customize. In future posts, we will go through some approaches on how you can easily add or edit some sections using Jupiter X API.

Learn How To Get The Leading Edge On WordPress Customization

wordpress customization-feature image

A unique and distinguished website will keep users hooked on your site. Thus, customizing your website to make it attractive and functional is a must-do. Although WordPress customization may seem a bit daunting if you are new to WordPress, but there are many simple ways you can take advantage of to achieve the perfect look on your website.

Continue reading