Elementor – permanently open all toggles and accordions

Add this snippet of code in the WordPress Customizer/Custom CSS for global changes to all accordions and toggles on the site. To affect only a single toggle or accordion widget go the the Elementor’s Advanced tab’s Custom CSS. This will open all toggle and accordian items when a page loads.

.elementor-toggle .elementor-tab-content {
    display: block !important;
}
Continue ReadingElementor – permanently open all toggles and accordions

Elementor Text Editor Widget Not Changing Font Settings

Have you ever run into problems with the Elementor Text Editor Widget not being able to change the font size, line spacing etc.? At first I investigated whether there was a conflict with the theme but that didn’t appear to be the case. Even setting all fonts back to default and disabling Elementor fonts in Elementor settings didn’t work.

fix Elementor Text Widget not being able to change font size and font settings

This tiny piece of css added to WordPress/Customizer/Custom CSS did the trick.

.elementor-text-editor p{ font-size: inherit; line-height: inherit; letter-spacing: inherit; }
Continue ReadingElementor Text Editor Widget Not Changing Font Settings

Elementor Pro For Developers

Where to find common features for developers new to Elementor Pro.

Custom CSS:In Advanced tab of selection widget
elementor-pro-custom-css-how-to

Theme Builder Options:
Go to Wordpress Dashboard/Templates (under Elementor)
You can create custom Headers, Footers, Single Page and Archive templates.

To use existing blank templates built into Elementor Pro: Dashboard/Templates/Add New

Watch out for confusing templates organization in Elementor. You won’t be able to see all available templates under Theme Builder or Saved Templates.
To view ALL available template types:Dashboard/Templates/Add New then close the popup without creating a new template.
That will take you back to the WordPress dashboard where you can then see all the available templates in the My Templates page including Global Widgets and Sections.

how-to-view-all-elementor-templates

Section Blocks Can be Saved As Templates
Blocks hold widgets inside. Blocks containing customized widgets can be saved as templates. For instance a Block with multiple images and text blocks customized and arranged for sales items can be saved as a template. Right click the center icon with 6 dots at the top of the Block to “Save as Template”.
Elementor-save-as-global-template

Custom Global Widgets Can Be Created
You can customize an existing widget such as the text widget and then save it as a Global Widget by right clicking the widget’s pencil icon (top right corner) and “Save as Global”. You can reuse your custom Global widget in any other page you create.
Elementor-save-as-global-widget

Dynamic Fields
This is extremely useful. You can pull fields from WordPress’s page and post fields, even custom post types. For instance, style a Header Widget and have it display the blog post’s title. Look for the tiny disc drive platters icon at the right of certain fields show here.
elementor-pro-dynamic-elements

Continue ReadingElementor Pro For Developers

Force Elementor Pro Button Colours

Using OceanWP and Elementor Pro I added a popup button in the footer widget area. Even after turning off theme control over Elementor colors in Elementor>Settings>Disable Default Colors, the text colours were not correct.

Here is what I did to over ride any color settings other plugins may be inserting.

This may be a bit sloppy but put this in the OceanWP Custom CSS/JS section.
/* Footer Link Colours */
a.elementor-button-link.elementor-button.elementor-size-sm {color:#ffffff !important}
a.elementor-button-link.elementor-button.elementor-size-sm:hover {color:#282828 !important}

UPDATE

Well, it looks like I found the problem. Uploading some of the OceanWP Pro templates inserts CSS into the Customizer.

Found this when I scrolled up the Custom CSS/JS section so look in the CSS section if you’re experiencing color wonkiness.

/* Footer */
#footer-widgets .footer-box { text-align: center; }
#footer-widgets .social-widget .style-light li a, #footer-widgets .social-widget .style-dark li a,
#footer-widgets .social-widget .style-colored li a { background-color: #263036; color: #708e9f; border-color: #263036; width: 40px; height: 40px; line-height: 40px; }
#footer-widgets .social-widget .style-light li a:hover, #footer-widgets .social-widget .style-dark li a:hover,
#footer-widgets .social-widget .style-colored li a:hover { background-color: #0eb290; color: #fff !important; border-color: #0eb290 !important; }

Continue ReadingForce Elementor Pro Button Colours

Editing OceanWP Footer Widget Button Link Colors

I created a custom footer template in OceanWP using Elementor. I ran into this problem when Elementor Pro was not able to over ride some of the link colors in OceanWP’s footer widgets.

PS. You can disable your theme’s ability to override Elementor Pro’s colors by going to Elementor/Settings. Disable Default Colors, Disable Default Fonts.

Adding to the problem was a button created in Elementor Pro that had a hover color.

To lock in the colors add this to the Customizer’s Custom CSS/JS.

/* Footer Link Colors */
#footer-widgets a {color:#FA9100}
#footer-widgets a.button {color:#282828}
#footer-widgets a.button:hover {color:#282828}

Continue ReadingEditing OceanWP Footer Widget Button Link Colors