Reverse column order for tablet

Elementor logo

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

While the option exists to reverse the column order for mobile, there is not a setting to do the same for tablet. 

So while we wait for that to arrive, you can use the following CSS:

/* reverse column order for tablet */
@media (max-width:768px) {
  .elementor .elementor-row {
  flex-wrap:wrap-reverse;
 }
}
Reverse column order for tablet

Enhance display of first add column bounding box

Elementor logo

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

Some of us (myself included) find that the dashed outline for the column bounding box when first added can be a bit difficult to readily see because of it’s light color and thin width.

This little bit of CSS will let you change it to suit your fancy.

Thanks to Christian Nelson for the suggestion.

.elementor-editor-active .elementor.elementor-edit-mode .elementor-first-add {
    border: 2px dashed red;
}
Enhance first add column bounding box display

image
Elementor default

image
With CSS applied

Add text before the author meta when using AnyWhere Elementor Pro

Elementor logo

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

If you are using AnyWhere Elementor Pro to create a single post template (or anywhere else you would use the author meta), you can use this bit of CSS to add text before the author’s name.

In this example, I am adding the word By and a space so that the author meta looks like this – By Sniffle Valve – instead of just – Sniffle Valve.

Change the text between the double quotes to fit your needs.

/* Add text before author meta */
.ae-element-post-author:before {
    content: "By "
}
Add text before author meta

Enhance display of draggable column width percentage display in Elementor 1.5 and up

Elementor logo

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

You would have thought that with the very welcome addition of manual column widths in Elementor 1.5 that I would have been satisfied.

Well, yes and no.

Yes, in that the feature is now available but no, because the draggable display is still very small for when one still wants to drag the column widths.

Some CSS to the rescue. Adjust the values to suit.

/* Enhance draggable column width percentage display */
.elementor-column-percents-tooltip {
    color: white;
    font-size: 16px;
    width: 55px;
}
Enhance draggable column width percentage display

 

Enhance display of editor items in Elementor 1.5

Elementor logo

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;
}

Elementor and Cloudflare’s Rocket Loader do not play well together

Elementor logo

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:

Thanks to Chris and David from the Elementor FB group for this!

All you have to do is set up the Page Rules in Cloudflare. The free accounts give you three and that’s all that I need for this site:

  • All Elementor pages, including the Home Page:
    • Site URL/*elementor*
  • Elementor library templates:
    • Site URL/?elementor_library=*
  • AnyWhere Elementor templates:
    • Site URL/?elementor_library=*

Example: http://snifflevalve.com/*elementor*

For each Page Rule, select Disable Performance from the “Then the settings are” drop down.

After over two hours of trying to track down why – “all of sudden” –  none of my Elementor pages would load, I finally found the culprit. It was Cloudflare’s Rocket Loader option.

image

I had made changes to a few Elementor pages the day before with no problems and had just finished doing updates to a bunch of pages, but in the WordPress editor. Then I thought, hey, why not check GTmetrix to see how the numbers are after those changes. Hmm, could be better so off to Cloudflare to snoop around, specifically in the Speed section.

Oh, look at this! Let’s try that!

image

Yep, made a nice difference. Scrolling down the Speed page some more brought me to Rocket Loader. Interesting. Let’s set it to Automatic and see what that does.

WOW! What a difference. Cool. Or so I thought.

But later when I went to edit an Elementor page, the dreaded “won’t finish loading” scenario. Any page. Any template. Did the standard troubleshooting methods to no avail. Even rolled back Elementor to the previous version because I had recently updated it.

Long story short, I came back to the Speed page in Cloudflare and turned Rocket Loader off and lo and behold, I was back in business.

Although it does make a nice enhancement to the GTmetrix numbers, I do believe I will leave Rocket Loader off until a fix is found for the Automatic setting or I take the time to figure out how to set up the Manual method. If anyone reading this knows how to do so, would you be so kind as to post it in the comments.

So if you are experiencing the “won’t finish loading” issue and have that site on Cloudflare, check that Rocket Loader has not “somehow” been turned on. And add Page Rules if it has.

All items closed on page load for the Elementor Accordion widget

Elementor logo

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

Sometimes you would like to have all the items closed on page load when using the Elementor Accordion widget. By default, the first, or top, item is open. Many suggest to use the Elementor Toggle widget instead, but it’s just not the same thing.

Thanks to Zulfikar Nore from WPDevHQ there is an easy solution. Add the following code to a Code Snippet snippet and set the snippet to ‘Run everywhere’.

function elementor_accordion_title() { ?>
	<script>
		jQuery(document).ready(function() {
			jQuery( '.elementor-accordion-title' ).removeClass( 'active' );
			jQuery( '.elementor-accordion-content' ).css( 'display', 'none' );
		});
	</script>
<?php }
add_action( 'wp_footer', 'elementor_accordion_title', 99 );