Simple & Easy Help
for WordPress Beginners

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

Fix for horizontal wiggle on iPhone with Elementor and GeneratePress

GeneratePress with 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

For those of you who have experienced a sort of “wiggle” on an iPhone when viewing your Elementor created pages using the GeneratePress theme, this is the fix.

The issue is not that it creates a horizontal scroll bar, but that you are able to move the page horizontally back and forth a bit.

Add this custom CSS to where you add your custom CSS (Simple CSS is my preferred location) and your Elementor created pages in GeneratePress will be rock solid.

A big thanks to Nicholas in the GP forum for this.

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
Fix iPhone wiggle

For those of you who use the Autoptimize and Async JavaScript combination

GeneratePress with 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

I hope that this will help some of you avoid what I recently went through. I spent the entire Canada Day 150 long weekend trying to track down what was going on with my site!

The setup:
I have the above mentioned products installed on the site.

The issue:
I also have Pastacode installed to nicely display the code snippets I provide, including my *must have option* – display line numbers.

When the above-mentioned two were setup with the recommended settings, the following was happening:
– I could not get the line numbers to display
– the mobile menu (GP + GPP) was hit and miss; mostly miss

I tried every conceivable combination (or so I thought) of settings to see if I could get them to all play together nicely. Nope. It was one or the other: line numbers and flakey mobile menu, or awesome mobile menu and no line numbers.

Finally in frustration, I did the unthinkable … I read the instructions! LOL

Turns out it was ONE checkbox in Async that I had completely not paid attention to as it was a default setting. And that was the fix: Un-check the “Enable Autoptimize Support”!  Presto! I have my line numbers, my mobile menu works like a charm, and, no console errors!  Happy camper

Here are the settings that work for me:
image

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 Cloudflares’ 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

Update 4: Friday 08 DEC 2017

Thanks again to Zulfikar Nore for coming up with a fix! The updated code is posted below.


Update 3: Friday 08 DEC 2017

It has been noted that the updated code for Elementor 1.8 and above creates an unwanted side effect. If the Elementor Tabs widget is used anywhere on the site, the contents of the first tab will not be displayed nor the tabs outline. A fix is being investigated and will be posted here when tested and available. In the meantime, do NOT use this code if you also have the Tabs widget on your site.


Update 2: Thursday 09 NOV 2017

The updated code for this to work in Elementor 1.8 and above is located below. Thanks again to Zulfikar Nore.


Update: Thursday 09 NOV 2017

Unfortunately, this no longer works in Elementor 1.8 and above. I will investigate a fix and post back if one is found.


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’. 

NOTE: Make sure you click the “Save Changes and Activate” button!

function elementor_accordion_title() { ?>
	<script>
		jQuery(document).ready(function() {
			jQuery( '.elementor-accordion .elementor-tab-title' ).removeClass( 'elementor-active' );
			jQuery( '.elementor-accordion .elementor-tab-content' ).css( 'display', 'none' );
		});
	</script>
<?php }
add_action( 'wp_footer', 'elementor_accordion_title', 99 );
08 DEC 2017: Updated code for Elementor 1.8 and above

 

Set no title and full width for every Elementor page with GeneratePress

GeneratePress with 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:

You can also set this up so that every Elementor page is set to Contained instead of Full Width. The updated code is below the Full Width code.

NOTE: be SURE to have only ONE snippet activated if your create a new one for this instead of modifying the existing Full Width code!

If you are sure that every page you are going to create with Elementor will have the Disable Elements > Content Title disabled and the Page Builder Container set to Full Width, then add the code below to a Code Snippets snippet. Set the snippet to ‘Run snippet everywhere’. Pages or posts created with the WordPress editor will not be affected.

Thanks to Tom Usborne from GeneratePress for this.

image

image

add_action( 'template_redirect','tu_add_elementor_filter', 999 );
function tu_add_elementor_filter() {
	if ( in_array( 'elementor-page elementor-page-' . get_the_ID(), get_body_class() ) ) {
		add_filter( 'body_class', 'tu_add_elementor_classes' );
		add_filter( 'generate_show_title','__return_false' );
	}
}

function tu_add_elementor_classes( $classes ) {
	$classes[] = 'full-width-content';
	return $classes;
}
Full Width and No Title
add_action( 'template_redirect','tu_add_elementor_filter', 999 );
function tu_add_elementor_filter() {
	if ( in_array( 'elementor-page elementor-page-' . get_the_ID(), get_body_class() ) ) {
		add_filter( 'body_class', 'tu_add_elementor_classes' );
		add_filter( 'generate_show_title','__return_false' );
	}
}

function tu_add_elementor_classes( $classes ) {
	$classes[] = 'contained-content';
	return $classes;
}
Contained and No Title