Elementor

Elementor Pro Portfolio Filter Bar Label

Elementor Pro – Portfolio Widget Filter Bar Label

Currently the Elementor Pro Portfolio Widget does not have a label option for the Filter Bar. This tutorial shows you how to create one. It also show how to add a hover effect for the filter bar items. #my-port .elementor-portfolio__filters::before { content: “CLICK A CATEGORY TO SELECT THOSE POSTS \2192”; background-color: #0080c0; color: #ffffff; padding-top: …

Elementor Pro – Portfolio Widget Filter Bar Label Read More »

Elementor GeneratePress

Elementor Pro + GeneratePress Premium – Add Primary and Secondary Menus with Shortcodes

This video shows you how to incorporate the native GeneratePress Primary and Secondary navigation menus into content created with Elementor and to place those menus using Elementor Pro and the GeneratePress Premium GP Hooks option. Note that you may also use the free version of AnyWhere Elementor to do the same if you do not …

Elementor Pro + GeneratePress Premium – Add Primary and Secondary Menus with Shortcodes Read More »

Elementor GeneratePress AnyWhere Elementor

Elementor and GeneratePress Premium with the AnyWhere Elementor Plugin

Apologies for the length of this video, but there was a lot of ground to cover. Using the amazing recently released and updated AnyWhere Elementor plugin from Anand at WTS Business Solutions, the video shows how to use it to place content created with Elementor into the GeneratePress theme hook locations to provide for a …

Elementor and GeneratePress Premium with the AnyWhere Elementor Plugin Read More »

Elementor

Elementor – Overlay Elementor Content on an Elementor Image Carousel

This video shows you how to overlay content created with Elementor onto an Elementor Image Carousel. Elementor Pro is used in the video but the same process can be accomplished with the free AnyWhere Elementor plugin. Be advised though that some CSS will be required for this to behave on mobile. Resources Elementor: https://wordpress.org/plugins/elementor Elementor Pro: https://elementor.com/pro …

Elementor – Overlay Elementor Content on an Elementor Image Carousel Read More »

Elementor

Elementor – GeneratePress – GP Premium – AnyWhere Elementor – Switch Site Header

UPDATE: 29 JULY 2017 At the request of one of the commenters, I have added the code to use four different headers, one for each of four specific pages. In the code examples, I have the 4 pages: sample-page, text-flow, two-buttons, and nested-sections. Note that the preceding are the slugs for these pages. You will …

Elementor – GeneratePress – GP Premium – AnyWhere Elementor – Switch Site Header Read More »

Elementor

Elementor – Enhance Display of Column Width Percentage

With just a small block of CSS, you can greatly enhance the visibility of the Elementor column width percentage. Paste this CSS into your favourite CSS editor. Mine is Simple CSS from Tom Usborne. .elementor-editor-active .elementor.elementor-edit-mode .elementor-column .column-title { color: white; font-size: 22px; background-color: black; }

Central Color Palette

WordPress – Elementor – Central Color Palette Plugin

UPDATE: 05 January 2019 – Central Color Palette version 1.13 now includes support for Gutenberg. UPDATE: 19 March 2018 – Central Color Palette version 1.12 now includes support for the Beaver Builder page builder. See below video for usage with Beaver Builder. This tutorial video shows you how to install and setup the Central Color Palette …

WordPress – Elementor – Central Color Palette Plugin Read More »

Elementor Pro

Elementor Pro – Mobile Nav Menu Styling

This tutorial shows you how to add text next to the “hamburger” menu and how to style it. Adjust the CSS values to suit. .elementor-menu-toggle:before { position: relative; content: “Menu”; padding-right: 10px; bottom: 3px; color: red; } Set the background color to transparent and the icon bars to red. .elementor-menu-toggle { color: red; background-color: transparent; …

Elementor Pro – Mobile Nav Menu Styling Read More »

Elementor

Reverse column order for tablet

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

Elementor

Elementor and Cloudflares’ Rocket Loader do not play well together

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=* …

Elementor and Cloudflares’ Rocket Loader do not play well together Read More »

Scroll to Top