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

Catch IDs

Catch IDs Logo

This is a handy “one-trick-pony” plugin. It’s only purpose in life is to display the ID of the page, post, or custom post type in the corresponding All Pages / All Posts listing.

Catch IDs is available in the WordPress Plugin Repository: https://wordpress.org/plugins/catch-ids/

image

There are many times when one needs the ID of the page, post, or custom post for other purposes. This plugin makes it ever so much handier than to hover over the page title, for example, and to look in the lower left corner of the browser to see what the ID is. Without needing your trifocals as I would.

All you have to do is install and activate it as you would any other WordPress plugin and it just goes ahead and does it’s thing.

A must have plugin in my book.

Change the size of the hamburger icon

GeneratePress 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

Use this CSS to change the size of the hamburger icon and text. Adjust font size as required.

/* Icon and text */
.menu-toggle {
font-size: 40px;
}
Change icon and text

Use this CSS to change the size of the hamburger icon only. Adjust font size as required.

/* Icon only */
.menu-toggle::before {
font-size: 40px;
vertical-align: middle;
}
Change icon only

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

Conditional display of Google Ads or other content

GeneratePress 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 may want to display Google Ads or other content on certain pages but not on others. For example, one generally does not display ads on the contact, disclaimer, privacy policy, and terms and conditions pages. Maybe the home page as well.

That’s where some conditional PHP comes in along with GP Hooks, part of the GeneratePress Premium add on.

In the first example, the responsive Google Ad will appear on all pages except the Home, Contact, Disclaimer, Privacy Policy, and Terms and Conditions pages. Both examples use the page slug in the array. Place the code in the desired GP Hooks location.

The second example shows an AnyWhere Elementor template shortcode.

Remember to tick the Execute PHP checkbox.

Note: the links in this post are NOT affiliate links. However, the items in the right sidebar are 🙂

<?php if ( ! is_page( array( 'home', 'contact', 'disclaimer', 'privacy-policy', 'terms-and-conditions' ) ) ) : ?>
    <div id="contentad"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyyyy"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<?php endif; ?>
Conditional Google Ads
<?php if ( ! is_page( array( 'home', 'contact', 'disclaimer', 'privacy-policy', 'terms-and-conditions' ) ) ) : ?>
    <?php echo do_shortcode('[INSERT_ELEMENTOR id="3248"]'); ?>
<?php endif; ?>
Conditional AnyWhere Elementor template

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.