Enhance display of editor items in Elementor 1.5

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

Update: 28 June 2017

A big thank you to Joel Eade for this!

As you know, Elementor 1.5 introduced a new behavior for the editor icons for the Columns and Elements – you have to hover over them to see the other items. Another thing I had not noticed until Joel mentioned it was that the order of the icons for Elements is reversed; it doesn’t match the order of the Columns and Sections.

Thankfully Joel has provided a CSS fix for these two items and they are presented below:

/* Change Column and Element icons back to pre-1.5 behavior */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings .elementor-editor-element-trigger:not(.elementor-active)~.elementor-editor-element-setting { 
    width: 25px !important; font-size: 11px !important;
}

/* Reverse the Element icons order so that it matches the Sections and Columns order */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings { 
    flex-direction: row !important;
}
No-hover Column & Element icons and Reverse order of Element icons

The latest version of Elementor is in Release Candidate 2 stage at the time of this writing. One of the main User Interface (UI) changes is the display and functionality of the editor items within the Elementor editor area.

Many people, myself included, have found them to be quite small and difficult to see and access. That is why I came up with some custom CSS to help with that.

Here is what it looks like now, without the custom CSS:

image

This is what it’s like after entering the custom CSS, provided below, into Appearance > Customize > Additional CSS or, my favorite place, the Simple CSS plugin.

image

Notice that the Section items have been moved down and into the bounding box for the section. This can come in handy if your top Section is directly below your menu bar or header and you cannot access the controls. You may want to toggle that off if you don’t need it by commenting out the block of code that starts with /* Elementor 1.5 places section inside the box */ .

image

The result will be as shown below.

image

/* Elementor 1.5 places section inside the box */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings {
    top: 30px;
    left: 50%;
}

/* Elementor 1.5 changes the background color and icon size */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings .elementor-editor-element-setting {
    background-color: #1e73be;
    font-size: 20px;
}

/* Elementor 1.5 changes the icon container height */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings {
    height: 30px;
}

2 thoughts on “Enhance display of editor items in Elementor 1.5

  1. small graphic improvement 😀

    /* Elementor 1.5 places section inside the box */
    .elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings {
    top: 26px;
    left: 50%;
    border-radius: 0 0 4px 4px;
    }

    • Thanks, Daniele!
      That is a nice touch 🙂
      Another thing to try is top: 100%; which moves the controls to the bottom of the section box, as sometimes even the above code is not far enough down.
      Cheers!
      Lyle

Leave a Comment