Elementor – Default Button Styles

Elementor logo

Until Elementor comes up with global settings for various elements such as buttons and the like, this is relatively easy to implement to have all your Elementor buttons be styled in the same way.

The Simple CSS plugin is used to enter the CSS.

CSS for this tutorial below the video.

.elementor-button {
	background-color: darkblue;
    color: white;
}

.elementor-button:hover {
	background-color: white;
    color: blue;
}
CSS for Default Elementor Buttons

 

Elementor + Astra Pro – Daily Banner Above Header

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

This video shows you how to have different Elementor created content displayed above the header using Astra Pro’s Custom Layouts.

Additional resources used:

Required code below video.

<?php  $weekday = date('l');

switch ($weekday) {
    case "Monday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
        break;
    case "Tuesday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
        break;
    case "Wednesday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "Thursday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "Friday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "Saturday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "Sunday":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
}
?>
Daily Banner Code
<?php  $month = date('F');

switch ($month) {
    case "January":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
        break;
    case "February":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
        break;
    case "March":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "April":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "May":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "June":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "July":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "August":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "September":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "October":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "November":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
	case "December":
        echo do_shortcode('[INSERT_ELEMENTOR id="XXX"]');
		break;
		
}
?>
Monthly Banner Code

WordPress – Elementor – Central Color Palette Plugin

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

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 plugin to enable a centralized location to set colors to be used in the WordPress editor (TinyMCE) as well as the theme customizer and the Elementor page builder.

It truly is one of my “Must Install” plugins!

Using the Central Color Palette plugin with Beaver Builder

Install and activate the plugin then enable the settings and setup your custom colors in Dashboard > Settings > Central Color Pallete

When using the color picker in Beaver Builder, select Color Presets

Your Central Color Palette colors are displayed, ready for you to select 🙂

Elementor Pro – Mobile Nav Menu Styling

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

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;
}
Add text before icon and set color

Set the background color to transparent and the icon bars to red.

.elementor-menu-toggle {
    color: red;
    background-color: transparent;
}
Transparent background with red bars

 

Elementor – Tabs title and description using shortcodes

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

Using shortcodes to display Elementor created content in the Tabs title as well as the Tabs description area opens up some interesting design possibilities. 

One should note that the same thing can be done with the Elementor Accordion and Toggle widgets as well.

Elementor – Sticky Floating Content Anywhere

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

Here is a simple and easy way to stick just about any content anywhere on your website. All you need is a bit of HTML and a tad of CSS.

This example uses the free versions of the following plugins, all available on the WordPress Plugin Repository:

Also used is the free Astra theme.

In the video, we will use the Elementor Social Icons and have them “stick” to the right side of the page and also to have them aligned vertically instead of horizontally.

CSS used in the video:

/* Positioning and vertical alignment */
#my-social {
    position: fixed;
    display: flex;
    z-index: 999;
    top: 20vh;
    right: 2vw;
    width: 50px;
}

/* Adds spacing between icons */
.elementor-shape-rounded .elementor-icon.elementor-social-icon {
	margin-top: 10px;
}
CSS used in the video

HTML for the After Header hook location (substitute your own ID for XXX):

<div id="my-social">[INSERT_ELEMENTOR id="XXX"]</div>
HTML for After Header hook location

Bonus: As mentioned in the video, here is the code used for the coffee cup next to the site title: &#9749;

Elementor – Style the tabs, accordion, and toggle widgets

Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

The tabs, accordion, and toggle widgets in Elementor can be styled from within Elementor, but those styles apply to all the respective items in each widget. 

There may be times when you would like to apply certain styles to the individual items, including perhaps, a background image.  That is what this tutorial shows you how to do using relatively simple CSS.

For each of the three widgets, all I did in Elementor was add an additional item and additional text in the second and third items.

It should be noted that if and when you add additional items, you will have to add an additional block of CSS for that widget type and increment the [data-tab] or [data-section] value accordingly.

The rest is done with CSS. I use the Simple CSS plugin and recommend that you do as well.

Color names are used instead of the hexadecimal values as it is easier for those who are not accustomed to them to be able to see what’s going on. The W3Schools HTML Color Names page is a good resource for those wanting to find out more on the subject.

Tabs Widget

/* Elementor Tabs Widget*/
#my-tabs1 [data-tab="1"] {
    background-color: lightblue;
}

#my-tabs1 [data-tab="2"] {
    background-color: lightgreen;
}

#my-tabs1 [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
	#my-tabs1 [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Tabs Widget CSS

Accordion Widget

/* Elementor Accordion Widget*/
#my-accordion [data-section="1"]{
	color: white;
    background-color: cadetblue;
}

#my-accordion [data-section="2"]{
	color: white;
    background-color: seagreen;
    
}

#my-accordion [data-section="3"]{
	color: white;
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
}

@media (min-width: 768px) {
	#my-accordion [data-section="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Accordion Widget

Toggle Widget

/* Elementor Toggle Widget*/
#my-toggle [data-tab="1"] {
    color: white;
    background-color: steelblue;
}

#my-toggle [data-tab="2"] {
    color: white;
    background-color: goldenrod;
}

#my-toggle [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
	#my-toggle [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Toggle Widget