How to Create a Multi-color Gradient Button in Elementor

By default, Elementor has a feature to create a gradient color for your button, but it’s limited only to two colors (dual color). This article will show you how to create a multi-color gradient button in Elementor without the help of any add-on, only using Elementor Custom CSS.

Adding a multi-color gradient to your button can make your button looks attractive and also give a natural feel. Maybe you are wondering, “Is it possible to create a multi-color gradient button on your site?”. Well, everything is possible in Elementor. With Elementor, you can create a multi-color gradient button easily.

How to Create a Multi-color Gradient Button in Elementor

Before we start the tutorial, we want to inform you that this tutorial will work with Elementor Custom CSS. The Custom CSS feature is only available on Elementor Pro; ensure you’ve upgraded to the pro version.

Alright, go to your Elementor editor. We will start everything from scratch, so create a section with a single column. Afterward, please select the button widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the button widget, you can edit and style up the widget to your preference.

On the widget settings, navigate to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then copy it into the Custom CSS field.

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

If you are happy with the multi-color gradient that has been applied (as in the image above), you can keep it like this and save your project if you want to. But, if you want to customize it, you can do that by editing the CSS snippet more specifically on the declaration block of the CSS.

Declaration block CSS begins with a left curly brace (‘{‘) and ends when a matching right curly brace (‘}‘) is reached.

To get the declaration block, you can create a gradient using CSS gradient online tools. Click here to see some CSS gradient tools that we recommend. Once you finish creating the gradient, copy the CSS and replace the existing declaration block with a new one by pasting the CSS.

Note: You can also make the text on your button gradient. Please click this link for our article about creating gradient text in Elementor.

The Bottom Line

This article shows how easily you can create a multi-color gradient button in Elementor. If you’re using Elementor as a page builder for your WordPress site and want to make a stunning button with a multi-color gradient, this article might be your solution.

The buttons with a single or dual color may look plain and boring. But be careful about creating a multi-color gradient to your button. Please pay attention to blending and mixing the color tones you use so that your buttons don’t look weird and annoying.

4 Ideas to Display Email Subscription Popup for a Better Reading Experience

User experience really matters for a blog. Even for merely displaying a popup. Readers really hate it when they get interrupted by a popup when reading your posts. Let alone when the popup takes a large portion of the screen.

No matter how great your post is, readers will likely go away instead of continue reading your post when they are interrupted by an annoying popup.

There are a bunch of popup builder plugins available for WordPress, but not all of them allow you to fully control the design as well as the behavior of your popup. In this post, we will show you some ideas of how to display a popup on your WordPress blog without bothering the reading experience.

Why Reading Experience Matters

To answer the question, let’s position yourself as a reader. You definitely feel annoyed by the emergence of a popup when you are reading an article on a blog. Especially when the popup has an overlay that covers the whole area of the screen like the one below.

Your feeling will get even worse when you find the popup shows up immediately once the page is loaded — without a delay.

Displaying a popup without a delay is not a good practice when it comes to reading experience. You need to give your reader a chance to read your article first before showing up the popup.

Mistakenly displaying a popup has a big impact on form conversion as well. In the context of collecting email subscribers, you will find a fact that your form collects fewer subscribers if you display your popup the wrong way. We have proved it.

Before adopting the current popup style (which shows up in a slide-in mode on the bottom-right corner), we adopted a popup style like the one on the image above: a popup that appears on the center area of the screen — with an overlay. The conversion was extremely bad. After adopting the current popup style, we managed to collect email subscribers by threefold!

Tips to Displaying an Email Subscription Popup

The purpose of displaying an email subscription popup is to collect leads (email subscribers in this case). You need these email subscribers to send email campaigns such as newsletters, new post notifications, and so on.

Even so, you also need to care about your readers by not displaying a popup that bothers their reading experience. Some tips you can apply to display an acceptable popup:

  • Add a delay to give your readers a chance to read your article first
  • Avoid displaying a popup on the center area of the screen. Readers hate it when the article they are reading is suddenly covered by a popup
  • Disable the overlay to keep your article be visible (unless the popup is created for a specific purpose — e.g., content locker)
  • Target readers coming from specific sources (e.g., search engine)
  • Use a decent design

Recommended Popup Builder Plugins

1. Elementor Pro

Elementor is one of the best plugins to create a WordPress website that focus on design. While it has a main function to create pages, you can also use Elementor to create the supporting elements of your website, including popup.

You can use the popup builder feature of Elementor to create a wide range of popups. From a notification popup to an email subscription popup. You have unlimited design options as the popup creation process is done via the Elementor editor. You can add any widget to your popup, including the Form widget which you can connect with plugins and services like MailPoet, MailerLite, to ActiveCampaign.

When creating a popup with Elementor, you can easily disable the overlay and place the popup to any area of the screen. From center, bottom, top, or corner. The display condition feature allows you to set where the popup to appear. To show the popup, you have several trigger type options to choose from as below:

  • On page load
  • On scroll
  • On click
  • On exit intent
  • After inactivity
  • On scroll to element

2. Breakdance

Breakdance is of one of the best Elementor alternatives in the page builder segment. It has nearly all features Elementor offers, including a popup builder. In Breakdance, the popup creation process is also done via its visual editor just like Elementor. Meaning that you can create a beautiful popup using your own design. You can also disable the overlay and place your popup to any area of your screen.

Breakdance comes with three design elements dedicated specifically to add a form: Form Builder, Login Form, Register Form. You can use the Form Builder element to create the email subscription form. The Form Builder element of Breakdance supports integration with ActiveCampaign, ConverKit, MailerLite, GetResponse, and MailChimp.

To show the popup, you can choose from the following trigger types:

  • On page load
  • On page scroll
  • On page scroll up
  • After inactivity
  • On exit intent
  • On click

You can also set the popup to show up on specific page(s) on your website thanks to the display condition feature.

3. Bloom

Bloom is another recommended plugin to create an email subscription popup. It supports integration with 20 email marketing plugins and services. Bloom also supports display condition to allow you to display a popup on specific page(s) on your website. Also, you can set the popup to appear based on the following trigger types:

  • On page load with a delay
  • After inactivity
  • After commenting
  • On page scroll
  • After purchasing a WooCommerce product
  • On click

Bloom comes with built-in statistics feature to allow you to track the performance of your popup. Unfortunately, it has no front-end editor like Elementor and Breakdance above. The plugin itself is developed by Elegant Themes, but it doesn’t use Divi Builder to create the popup. Instead, it uses its own popup customizer has fewer design options.

4 Ideas to Display Email Subscription Popup on Your WordPress Blog

Finally, here are four ideas you can adopt to display an email subscription popup on your blog without interrupting the reading experience. Remember again: never display a popup without a delay.

1. Display a Popup in Slide-In Style on the Bottom-Right Corner

This is the popup style we personally adopt on our blog. We adopted this popup style to replace the previous popup style (the one on the center area — with an overlay) which had a bad conversion. Actually, the initial purpose of switching to a slide-in popup was to improve reading experience on our blog. Turn out, the conversion rate is way better than the previous one.

By placing the popup on the bottom-right side of the screen, the content area will keep visible so that your readers won’t be too annoyed by the popup. Just make sure to disable the popup overlay.

All three popup builders above allow you to create a slide-in popup. Here is an example of a slide-in popup.

2. Prompt User to Click a Button to Show the Popup

You can also involve user interaction to show the popup by prompting your users to click a button to show a popup. You can place the button on the bottom-right corner or any other area on your screen. If you choose this method, make sure to make the button visible to users. Otherwise, no one will click it.

Here is an example of this method.

You can adopt the tip above in Elementor Pro and Breakdance. Bloom has no feature to display a popup like the one above.

3. Display the Popup as the Bottom/Top Bar

Another option to display an email subscription popup without interrupting reading experience is by placing the popup as a bottom bar or top bar. For this option, you can use an inline form design by placing the form fields and button side by side. This way, your popup won’t be too high so that it doesn’t take a large portion of the screen. Here is an example.

4. Display the Popup on Exit Intent

If you really don’t want to bother your readers when they are reading your content, you can hide your popup until they are done reading your content. Afterward, you can display the popup when your readers are attempting to close your page. The three popup builders above allow you to show a popup on exit intent.

What is exit intent?

In the context of popup, exit intent is based on the user behavior with the mouse device. The popup will show up when a user points the cursor out of the page area with an intention of closing the page. Take a look at the example below:

The three popup builders above support exit intent trigger. In exit intent, you can assume your users are done reading your content. That being said, you can enable the popup overlay.

The Bottom Line

Popup is great to generate leads. If you are a blogger, you can use a popup to collect email addresses of your visitors. However, there are some things you need to notice before you create an email subscription popup. Basically, most people hate popups so that you need to arrange a strategy to display a popup on your blog.

For an editorial content-based website like a blog, the most important thing you need to keep in mind when creating a popup is to keep the content area visible. You can do it by eliminating the popup overlay. The popup placement is also crucial. Avoid displaying a popup on the area that potentially disrupt reading experience. On the center area, for instance. You can try one of the tips we have just covered above to figure which one works best.

How to Turn Divi Blog Module into Carousel Blog Posts

In Divi, there’s a Blog Module that can display your blog posts dynamically and you can also style them in two layouts selection right off the bat, the Fullwidth layout which displays vertically stacked posts so only one post appears on a single row, and the Grid layout that places the blog posts in multiple columns thus creating a grid. If you’ve been using the module for a while, chances are, you may want to have another style besides the Grid and Fullwidth layout for your blog posts.

Previously, we also made some articles that you can try to style up your blog posts. One of them is about moving the content of the blog posts over the featured image for the grid layout blog module and another one is for turning your blog posts with full-width layout into the List Layout.

And this time, we want to show you one more customization to style up your blog posts: turning the blog posts into a carousel with draggable functionality on PC and swipeable on mobile to navigate through the blog posts like the following animation.

Turning Divi Blog Module into a Carousel

Step 1: Create a Page or Edit an Existing Page

To start turning your Divi blog module into a carousel, add a new page to the website or edit an existing page then edit it with the Divi Builder visual editor. For this tutorial, we will create a new page and use the Blog Layout from Charter Boat premade layout packs.

Step 2: Create Previous and Next Button for the Carousel

Once you’ve loaded the layout, the blog module will load your blog posts dynamically. The next step is to create the previous and next buttons to allow the user to go back and forth between posts.

Add a New Row for the Navigation Buttons

Start by adding a new row and move it just above the blog module row, then use the following column structure.

Without adding any modules yet, open the Row Settings then set the width of the row to 100% of the section width by navigating to the Design tab Sizing block and setting both the Width and Max Width to 100%.

Add the Blurb Modules for The Buttons

Once the row is ready, add a blurb module for the first button to navigate the posts. We choose the blurb module for the button as it has many options to style up the icon.

Open up the Blurb Settings once you’ve added the module applies the following settings to the module:

  • Change the Title to “Previous”
  • Remove the Body text
  • Open up the Image & Icon block, toggle the Use Icon option to Yes, and select the left arrow icon.
  • Move to the Design tab then open up the Image & Icon block to change the icon settings as follows:
    • Icon Color: #000000
    • Image/Icon Background Color : #f2f2f2
    • Image/Icon Rounded Corner: 50px for all corner
  • Open up the Title Text block to style the title text as follows:
    • Title Font Weight: Semi Bold
    • Title Text Alignment: Center
  • Change the module sizing option across different screen sizes and adjust its alignment to the right by going to the Sizing block then modify its settings as follows:
    • Width : Desktop = 10%, Tablet = 20%, Phone = 30%
    • Module Alignment: Right
  • Add a custom CSS Class to the module to trigger the carousel action later by moving to the Advanced tab CSS ID & Classes block then add the “back-button” custom CSS class to the CSS Class field.
  • Change the cursor into a pointer by adding the following CSS snippet to the Custom CSS → Main Element:
    • cursor: pointer;

Clone the Button Row and Move it Below the Blog Row

Once the previous button is set, let’s clone its row and module included so we don’t have to repeat the steps, move the row below the blog posts row and just change some settings on the cloned blurb module for the icon, the title, and the custom CSS class for the next button. The changed settings are as follows:

  • On the Content tab change the value of:
    • Title: Next
    • Icon: Right Arrow
  • Then move to the Advanced tab to change the CSS class
    • CSS ID & Classes CSS Class: next-button

Step 3: Get the Blog Module Ready

Prepare the Row for the Carousel Blog posts

Before touching the module, let’s prepare the row of the blog module first before we turn it into carousel blog posts. Start by opening the Blog Row Settings then make changes in the settings as follows:

  • Go to the Design tab Sizing block then set the:
    • Width: 100%
    • Max Width: 100%
  • Move to the Advanced tab Visibility block:
    • Horizontal Overflow: Hidden
    • Vertical Overflow: Hidden

The above settings will ensure that the carousel won’t cause any horizontal scroll bar to appear within your page.

Prepare the Blog Module

Once you’ve prepared the row, then it’s time to start tweaking the blog module. Start with opening the Blog Settings then make changes in the settings as follows:

  • On the Content tab Elements block set the Show Pagination setting to No
  • Move to the Design tab Layout block to change the blog post layout to full-width
    • Layout: Fullwidth
  • Then add an overlay by adding the following values on the Overlay block
    • Featured Image Overlay: On
    • Overlay Icon Color: #ffffff
    • Overlay Background Color: rgba(1,0,66,0.33)
  • Still on the Design tab, open up the Image block and select one of the box shadow effects from the Image Box Shadow option to add a shadow effect to the featured image and use the following color:
    • rgba(1,0,66,0.33)
  • Move to the Advanced tab, add a custom CSS class to the blog module to enable the carousel later by opening up the CSS ID & Classes block then add the following CSS class:
    • CSS Class: wpblog-module
  • Add some space between the featured image and the title and also some space between the post meta and the excerpt by adding some margins, To do so, add the following CSS snippet to the Custom CSS block:
    • Title: margin-top: 10px;
    • Post Meta: margin-bottom: 30px;

And that’s it for the blog module settings. Let’s turn it into a draggable and swipeable carousel, shall we?

Step 4: Turn the Blog posts into a Draggable and Swipeable Carousel

Once the blog module settings are set, now is time to turn the blog posts into a draggable and swipeable carousel. To do so, we need to add a Slick JS library and some custom codes to make it work.

Add Slick JS Functionality and Slide CSS

Slick JS is a jQuery plugin for creating fully customizable, responsive, and mobile-friendly carousels. To add the functionality of Slick JS, add a code module to any column on the page, or you can add the following script with URL to the head of your website by going to the Divi Divi Theme Options Integrations:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

For this tutorial, we use the code module and place the above code into it, then we add the following slide CSS code just below the end of the script tag.

<Style>
	.slick-slide {
	float: left;
	margin: 2vw;
	}
</style>

Let the Carousel Take its Form

To finally let the draggable and swipeable carousel take its form, you’ll need to add the following JQuery code. You can place the code after the previous slide CSS code. Without further ado here’s the code:

<script>
  jQuery(function($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 
 
$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
   
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

The code above also makes the Previous and Next buttons work properly as the navigation buttons. You can look at the picture below for our code placement in the code module.

Step 5: Watch Your Carousel Blog Posts Live

Now, all the required codes are in place already, however, the blog module is still in the full-width layout in our Divi builder. How come?

Don’t worry, save the page and exit the visual builder to see your blog posts from the front end. And voila, your blog posts are turned into a draggable and swipeable carousel with the next and previous buttons to give you another way for navigating through the carousel blog posts.

The Bottom Line

If you’ve been using the blog module for a while, chances are, you may want to have another style besides the Grid and Fullwidth layout for your blog posts which are the default layout that you can get right off the bat. This tutorial showed you how to turn your blog posts into a draggable and swipeable carousel which give you more option to style up your website elements such as blog page or related posts.

How to Start with a Blank Page When Creating a Page in Divi (Without Header and Footer)

By default, when you edit a page with Divi Builder, you will get a full site editing (FSE) which allows you to edit the page itself plus the custom header and footer template that you’ve created with the Divi Theme Builder at the same time.

While FSE is good for saving us time in editing the page design in one go, there may be many times we don’t need to edit the custom header and footer template we’ve created. Fortunately, Divi has the option to disable the feature if you want. As for the header and footer that are from your theme, they are also displayed in the builder too, however, you won’t be able to edit them even if the FSE option is enabled.

What if I want to create a page from a blank page without any pre-existed header and footer or any other widget?

Some of you may already have an answer to the above question. For those that still wondering how to create a page from a blank page, don’t worry, we will show you how in this tutorial.

Start Creating a Page from a Blank Page in Divi

To create a page from a blank state, first, edit the page you want to start with the blank page using the default WordPress editor. Once it is opened, proceed to open the Settings Page tab, then navigate to the Layout block to select the Blank Page option. Click Update to apply the changes.

That’s it. Now, when you try to edit the page with the Divi Builder, you won’t see any header or footer on the editor, instead, you will get a blank canvas ready to be painted as you wish.

The Bottom Line

While FSE is good for saving us time in editing the page design in one go, there may be many times we don’t need to edit the custom header and footer template we’ve created. There are even times when we want to create a page without any preexisting object on the editor. In Elementor, we can just change the layout to Elementor canvas from the editor setting to have a blank page layout (read: Elementor vs Divi). Thankfully, in Divi, we still can achieve it albeit need to set it from the WordPress default page editor.

How to Add a Label to Menu Item in WordPress

Have you ever thought of highlighting your menu item/s on your website? If the answer is no, maybe you don’t know how important it is. Let’s say you want to increase sales or introduce new products or services on your site. Highlighting the menu items might be helpful to you.

There are several things that you can do to highlight your menu item/s, as below:

  • Adding a different background color
  • Adding a different text color
  • Adding a label
  • Etc.

This article will show you how to highlight menu items, more specifically, add a corner label inside of particular menu items in WordPress without the help of any plugin.

Steps to Add a Label to Menu Item in WordPress

Step 1: Add the CSS Snippet

First, we will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

.subscriber-highlight {
    vertical-align:super;
    background-color:#EA0808;
    border-radius: 4px
    color: inherit;
    font-size: 7px;
    padding: 2px 4px;
    text-decoration: none;
    white-space: nowrap;
}

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

Step 2: Edit the Navigation Label

Next, we will edit the menu item. On your WordPress dashboard, navigate to Appearance -> Menus.

Once you enter the menus settings screen, select the menu item/s to which you want to add a label, then go to the Navigation Label by clicking the dropdown button.

Alright, we are going to start to edit the navigation label. Please copy the simple code below, paste it into the Navigation Label field and then edit the code based on the name of your menu item and label.

Example:

  • Menu Item: Hotel
  • Label: SALE
Hotel <span class="subscriber-highlight">SALE</span>

Once you’ve finished editing the navigation label/s, apply it by clicking the Save Menu button.

To see how it works, go to your site by opening a new window.

Note: You can customize the label to your preference. To do that, go back to the Additional CSS and edit the code snippet. You can edit the background and text color of the label, font size, padding, etc.

In this example, we’ve changed the label’s background color to blue by editing the hex color code (see the image).

The Bottom Line

This article shows you how easily add a label to the menu item in WordPress. Adding a label is the best way to highlight your different menu items without complicated navigation inside your menu.

Adding a label to your menu item has many benefits, as we mentioned at the beginning of this article. But, we want to remind you that please use this method (labeling menu items) wisely. Because when you use this method too much, it can be overused and looks annoying.

How to Remove Unwanted Space on the Elementor Text Editor Widget

Some Elementor users experience an issue with the Text Editor widget. They find an unwanted space at the bottom of the widget after adding the widget to the canvas area. Although the issue doesn’t affect the design at large as you can fix it by setting the bottom margin, it is quite annoying.

How to fix the issue?

First thing first, here is the screenshot of the issue.

As you can see, there is a white space — about 20 pixels — at the bottom side of the widget. There are two options you can choose to fix the issue.

Option One

First, drag the Text Editor widget to the canvas area just like usual. Next, go to the settings panel. On the Text Editor area, switch to the Text mode.

Delete the last character (dot) and you should see the space gone.

The method above only works for the current Text Editor widget. When you add a new Text Editor widget, the space will revert back.

Option Two

This is a better option if you really want to remove the unwanted space on the Text Editor widget on your website. First, login to your WordPress dashboard and go to theme customizer (Appearance -> Customize).

Open the Additional CSS block on theme customizer panel.

Paste the following CSS snippet and click the Publish button to apply it.

The code:

p:last-child {
margin-bottom: 0;
}

The code above tells Elementor to set the default bottom margin of the Text Editor to 0 pixels. So, every time you add a new Text Editor widget to the canvas area, the bottom margin will be set to 0 pixels (no space).

The Bottom Line

The Text Editor widget of Elementor is aimed at adding a longer text to your design. It is perfect to be used on a certain section on your design that requires an extra description. You can apply some stylings to the text, including applying a gradient text if you like gradient.

If you find your Text Editor widget has an unwanted space after you add it to the canvas area, you can fix it using one of the methods above.

How to Create a Gradient Text in Elementor

Playing around with gradient is really fun when designing a page with Elementor. Once you managed to find the perfect color combination of the gradient, you will feel like you are an artist — greater than van Gogh.

Elementor has a built-in feature to add a gradient. Unfortunately, you can only apply a gradient to a background (section and column) and button. Plus, you can only add maximum of two colors to your gradient.

Is there a way to apply a gradient to a text a in Elementor?

Of course.

In this post, we will show you how to create a gradient text in Elementor. Step by step.

What Type of Text You Can Apply a Gradient to?

Elementor has some widgets that you can use to add a text to your design. To add a heading text, you can use the Heading widget. To add a regular text, you can use the Text Editor widget. In addition to these two widgets, there are also widgets like Ico List, Price List, Reviews, to Testimonials that contain text element.

In Elementor you can apply a gradient to all widgets containing text element, including:

  • Heading
  • Text Editor
  • Button Text
  • Icon List
  • Posts
  • Animated headline
  • Price List
  • Flip Box
  • Call to Action
  • Reviews
  • Testimonials

Here is the example:

How to a Gradient Text in Elementor

Each Elementor widget (and its elements) has a unique CSS selector (class). You can figure out the selector of a widget by inspecting the associated widget. If you use Google Chrome or Firefox, you can right-click on a certain widget and select Inspect to inspect it (inspecting an Elementor widget can only be done on a live page).

Or you can visit this post to find out the list of Elementor widget selectors.

In CSS, selector is used to target a specific HTML element to apply the styling to. In the context of Elementor, you can use a selector to apply a custom styling to a widget (or a specific element of the widget) via CSS code. You can apply any styling you want, including gradient.

Here is how to apply a CSS gradient to a text in Elementor.

Step 1: Specify a Text You Want to Apply the Gradient to and Find Out Its Selector

As mentioned earlier above, there are some Elementor widgets that contain text element. First, you need to specify to which widget you want to apply the gradient to. Next, you need to find out the selector of text element of the widget.

Say you want to apply the gradient to the text of a button. In such a case, your selector is .elementor-button-text.

Again, you can check the list of the Elementor widget selectors here if you have no idea how to inspect a HTML element in web browser.

Step 2: Create the CSS Gradient

Once you got the selector of the text element you want to apply the gradient to, the next step is to create the CSS gradient. There are a bunch of online tools to create a CSS gradient. One of which is Gradienta. Once done creating the gradient with Gradienta (or any tool of your choice), copy the generated CSS code.

We also have some CSS gradient collections in case you are interested:

Step 3: Add the CSS Code of Gradient to Your Element

Now that you already have the selector and the CSS code of the gradient. The next step is to add the CSS code to the widget you want to apply the gradient to.

Simply select the widget to edit it and go to the Advanced tab on the settings panel and open the Custom CSS tab.

On the custom CSS field, type selector [selector name]{} and paste the CSS code of the gradient between the curly brackets. Example:

selector .elementor-button-text {
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
}

Step 4: Apply the Gradient to the Text

Your job is not done yet. The CSS code above will only add the gradient to the background of your element. To lift it, you need to add the following CSS code right after the gradient code.

-webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;

So, your final CSS code would look like this:

selector .elementor-button-text {
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}

The result.

The Bottom Line

Each Elementor widget — and its elements — has a unique CSS selector which you can use to apply a custom styling via CSS code. If a widget contains text element (e.g., the Button widget), you can inspect the widget to find the CSS selector of the text element to apply a custom styling via custom CSS. Once you found the selector, you can apply any styling, including gradient as we have shown above.

Custom CSS itself is only available on Elementor Pro. In other words, you need to have Elementor Pro activated on your Elementor-powered WordPress site to add custom CSS (read: Elementor Free vs Pro).

How to Hide/Show a Widget Based on User Status (Logged In/Logged Out) in Elementor (without Add-on)

Alright, this article might be helpful if you want to hide/show widget/s on your website based on user status to give exclusivity to your user who logged in or subscribed to your website. Some websites require users to log in to access a contained part or the whole website.

Maybe you are wondering, “Is it possible to hide or show widget/s based on user status in Elementor?” Well, everything is possible in Elementor. The combination of WordPress and Elementor, you can hide and show your widgets seamlessly.

Steps to Hide/Show Widget based on User Status (Logged In or Logged Out) in Elementor (without Add-on)

Step 1: Add the Code Snippet to the functions.php File

Here, we will add the simple PHP snippet into the functions.php file to hide or show widgets based on user status.

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can use the Code Snippets plugin to add a custom function in WordPress. Read here to learn more.

On your WordPress dashboard, go to Appearance -> Theme File Editor.

Once enter the Theme File editor page, select the functions.php and paste the code snippet below:

Note: Paste the code snippet at the end of the functions file content.

// Add CSS class for logged in and logged out users
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}

Once you’ve added the code snippet, update the theme file by clicking the Update File button.

Step 2: Add the CSS Snippet

Next, we will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress Dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings, go to Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

/* Logged in & out conditions */
.logged-in-condition .hide-logged-in {
	display: none!important;
}
.logged-out-condition .hide-logged-out {
	display: none!important;
} 

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

Step 3: Add the Elementor CSS Classes

Go to your Elementor editor; you can create new content or select the existing one. Prepare the widget/s that you want to hide/show based on user status.

You can see from the image above we have three widgets that we want to hide and show to users based on their status.

  1. Subscribe Now: Hide for logged-in users.
    • It means when the user is logged in to the website, this widget will not appear (hidden).
  2. Start Course: Hide for logged-out users
    • This widget will appear only for users logged in to the website.
  3. Buy Only this Course $12.00: Hide for logged-in users.
    • It means when the user is logged in to the website, this widget will not appear (hidden).

Next, we want to add the CSS Class for each widget. The name of CSS Classes depends on whether you want the widgets will appear or not appear (based on user status).

Select any widgets you want to hide or show; on the widget settings panel, navigate to the Advanced tab -> Layout -> CSS Classes.

CSS Class to Hide Widgets for Logged-out Users

Type hide-logged-out if you want your widget to show only for logged-in users.

CSS Class to Hide Widgets for Logged-in Users

Type hide-logged-in if you want your widget to hide when the user is logged in.

That’s it. Don’t forget to save or publish your project. To see how it works, go to your site and open it on a new window. Please log out from your WordPress site if you want to test whether the widgets already hide when the user is logged out.

The Results

  • User Status: Logged In
  • User Status: Logged Out

The Bottom Line

This article shows how easily you can hide and show the widgets based on user status (logged in/logged out) in Elementor without the help of any add-ons. But if you want a more straightforward way, we recommend you use the help of some Elementor’s add-ons. Such as Happy Addons, Essential Addons and JetEngine. Using the help of Elementor add-ons to show/hide widgets based on users’ status is easier because you don’t need to add any code.

Elementor Widget Selectors List

One of the features available on Elementor Pro is the ability to add custom CSS (Read: Elementor Free vs Pro). The feature allows you to go beyond as you can apply any styling when the styling you want is not available on the list of setting options. To add custom styling via custom CSS to a certain Elementor widget (or widget’s elements), you need to know the selector of the associated widget. We have collected the list of Elementor widget selectors to ease your job.

Every Elementor widget — and its elements — has a CSS selector which you can use to target the associated widget when you want to add custom CSS to achieve a certain styling. You can figure out the selector by inspecting the widget you want to add the custom CSS to.

Since inspecting a widget can only be done on a live page, it will be time consuming to inspect every one of them. That’s what led us to create this list.

How to Use a Selector

Say you want to apply a different size between the icon and text on a button. Since the default setting option doesn’t allow you to set a different size between the button icon and text, you can achieve it via custom CSS. You can either target the icon or text to apply a custom CSS to.

First, select the selector of the element you want to target (e.g., button icon). On the Elementor settings panel, go to the Advanced tab and open the Custom CSS block.

Type selector [selector name] {} on the custom CSS field. Here is the example.

Next, add your CSS content (declaration) inside the curly brackets. Here is the example.

Note: Each Elementor widget has a parent element (wrapper). Typing selector {} (without the selector name) means target the wrapper.

Elementor Widget Selectors List

Accordion

The Widget.elementor-accordion
Accordion Title.elementor-accordion-title
Accordion Description.elementor-tab-content
Accordion Icon Open.elementor-accordion-icon
Accordion Icon Closed.elementor-accordion-icon-closed

Alert

The Widget.elementor-alert
Alert Title.elementor-alert-title
Alert Description.elementor-alert-description
Dismiss Icon.elementor-alert-dismiss

Animated Headline

The Widget.elementor-headline
Static Text.elementor-headline-plain-text
Dynamic Text.elementor-headline-dynamic-wrapper

Archive Description

Archive Text.elementor-heading-title

Archive Posts

The Widget.elementor-widget-container
Post Item.elementor-grid-item
Featured Image.elementor-post__thumbnail
Badge on Cards Skin.elementor-post__badge
Avatar on Cards Skinimg.avatar
Text Content Area.elementor-post__text
Post Title.elementor-post__title
Post Excerpt.elementor-post__excerpt
Read More.elementor-post__read-more
Post Meta Area.elementor-post__meta-data
Post Date.elementor-post-date
Post Author.elementor-post-author
Post Time.elementor-post-time
Post Comment.elementor-post-avatar
Pagination.elementor-pagination
Previous Label.page-numbers.prev
Next Label.page-numbers.next
Pagination Number.page-numbers
Active Pagination Number.page-numbers.current
Load More Button.elementor-button-link
Load More Button Icon.elementor-button-icon

Author Box

The Widget.elementor-author-box
Avatar.elementor-author-box__avatar
Author Name.elementor-author-box__name
Author Bio.elementor-author-box__bio
Archive Button.elementor-author-box__button
The Widget.elementor-image-gallery
Gallery Item.gallery-item
Caption.wp-caption-text

Blockquote

The Widget.elementor-blockquote
Blockquote Content.elementor-blockquote__content
Blockquote Author.elementor-blockquote__author
Tweet Icon.elementor-blockquote__tweet-button
Tweet Label.elementor-blockquote__tweet-label

Button

The Widget.elementor-button
Button Text.elementor-button-text
Button Icon.elementor-button-icon

Call to Action

The Widget.elementor-cta
Header Image.elementor-cta__bg
Ribbon.elementor-ribbon
Ribbon Text.elementor-ribbon-inner
Content Title.elementor-cta__title
Content Description.elementor-cta__description
Content Button.elementor-cta__button

Countdown

The Widget.elementor-countdown-wrapper
Days.elementor-countdown-days
Hours.elementor-countdown-hours
Minutes.elementor-countdown-minutes
Seconds.elementor-countdown-seconds
Countdown Label.elementor-countdown-label

Counter

The Widget.elementor-counter
Number Prefix.elementor-counter-number-prefix
Number.elementor-counter-number
Number Suffix.elementor-counter-number-suffix
Title.elementor-counter-title

Divider

The Widget.elementor-divider
Separator.elementor-divider-separator
Text/Icon Element.elementor-divider__element

Flip Box

The Widget.elementor-flip-box
Front Container.elementor-flip-box__front
Back Container.elementor-flip-box__back
Content Container.elementor-flip-box__layer__inner
Content Title.elementor-flip-box__layer__title
Content Description.elementor-flip-box__layer__description
Content Button.elementor-flip-box__button

Form

The Widget.elementor-form
Step Container.e-form__indicators
Steps Number.e-form__indicators__indicator
Field Label.elementor-field-label
Field Text.elementor-field-textual
Text Field Label.elementor-field-type-text
Text Area Field Label.elementor-field-type-textarea
Email Field Label.elementor-field-type-email
URL Field Label.elementor-field-type-url
Tel Field Label.elementor-field-type-tel
Radio Field Label.elementor-field-type-radio
Select Field Label.elementor-field-type-select
Checkbox Field Label.elementor-field-type-checkbox
Acceptance Field Label.elementor-field-type-acceptance
Date Field Label.elementor-field-type-date
Time Field Label.elementor-field-type-time
Number Field Label.elementor-field-type-number
File Upload Field Label.elementor-field-type-upload
Next Buttone-form__buttons__wrapper__button-next
Previous Button.e-form__buttons__wrapper__button-previous
Submit Button.elementor-button
Gallery Title (for Multiple Gallery).elementor-gallery-title
Gallery Item.elementor-gallery-item
Description (on Overlay).elementor-gallery-item__description

Heading

The Widget.elementor-heading-title

Icon

The Widget.elementor-icon

Icon Box

The Widget.elementor-icon-box-wrapper
Icon.elementor-icon
Content Container.elementor-icon-box-content
Content Title.elementor-icon-box-title
Content Description.elementor-icon-box-description

Icon List

List Icon.elementor-icon-list-icon
List Text.elementor-icon-list-text

Image

Imageimg
Caption.wp-caption-text

Image Box

Image.elementor-image-box-img
Text Content Container.elementor-image-box-content
Content Title.elementor-image-box-title
Content Descriptionelementor-image-box-description
Image Container.swiper-slide
Image Item.swiper-slide-image
Pagination Container.swiper-pagination
Pagination Dots.swiper-pagination-bullet
Previous Icon.elementor-swiper-button-prev
Next.elementor-swiper-button-next
Image Caption.elementor-image-carousel-caption
Media Item.elementor-carousel-image
Media Item Overlay.elementor-carousel-image-overlay
Dot Pagination.swiper-pagination-fraction
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right
Fraction Pagination.swiper-pagination-fraction
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Mobile Menu Toggle.elementor-menu-toggle
Mobile Menu Icon.eicon-menu-bar
Regular Menu.elementor-nav-menu
Dropdown.elementor-nav-menu–dropdown
Menu Item with Sub-Menu.elementor-item.has-submenu
Sub-Menu Item.elementor-sub-item

PayPal Button

The Widget.elementor-payment-button
PayPal Button Icon.elementor-button-icon
PayPal Button Text.elementor-button-text

Portfolio

Portfolio Item.elementor-portfolio-item
Portfolio Item on Overlay.elementor-portfolio-item__overlay
Overlay Title.elementor-portfolio-item__title
Portfolio Filter.elementor-portfolio__filter

Post Comments

Reply Title.comment-reply-title
Comment Form Area.comment-form
Comment Form.comment-form-comment
Submit Button.form-submit

Post Info

The Widget.elementor-post-info
Avatar.elementor-avatar
Icon List.elementor-icon-list-icon
Icon Text.elementor-icon-list-text

Post Navigation

The Widget.elementor-post-navigation
Previous Icon.post-navigation__arrow-prev
Previous Label.post-navigation__prev–label
Previous Post Title.post-navigation__prev–title
Next Icon.post-navigation__arrow-next
Next Label.post-navigation__next–label
Next Post Title.post-navigation__next–title

Posts

Post Item.elementor-post
Featured Image.elementor-post__thumbnail
Badge on Cards Skin.elementor-post__badge
Avatar on Cards Skinimg.avatar
Text Content Area.elementor-post__text
Post Title.elementor-post__title
Post Excerpt.elementor-post__excerpt
Read More.elementor-post__read-more
Post Meta Area.elementor-post__meta-data
Post Date.elementor-post-date
Post Author.elementor-post-author
Post Time.elementor-post-time
Post Comment.elementor-post-avatar
Pagination.elementor-pagination
Previous Label.page-numbers.prev
Next Label.page-numbers.next
Pagination Number.page-numbers
Active Pagination Number.page-numbers.current
Load More Button.elementor-button-link
Load More Button Icon.elementor-button-icon

Post Title

The Widget.elementor-heading-title

Price List

The Widget.elementor-price-list
List Item.elementor-price-list-item
List Item Image.elementor-price-list-image
List Item Text.elementor-price-list-text
List Item Header.elementor-price-list-header
List Item Title.elementor-price-list-title
List Item Separator.elementor-price-list-separator
List Item Price.elementor-price-list-price
List Item Description.elementor-price-list-description

Price Table

The Widget.elementor-price-table
Table Header.elementor-price-table__header
Table Header Title.elementor-price-table__heading
Table Header Description.elementor-price-table__subheading
Price.elementor-price-table__price
Currency.elementor-price-table__currency
Number After Price.elementor-price-table__after-price
Pricing Period.elementor-price-table__period
Feature List Area.elementor-price-table__features-list
Feature List Item.elementor-price-table__feature-inner
Table Footer.elementor-price-table__footer
Table Footer Button.elementor-price-table__button
Table Footer Text.elementor-price-table__additional_info
Ribbon.elementor-price-table__ribbon
Inner Ribbon.elementor-price-table__ribbon-inner

Progress Bar

Progress Bar.elementor-progress-bar
Progress Background.elementor-progress-wrapper
Progress Title.elementor-title
Progress Inner Text.elementor-progress-text
Progress Percentage.elementor-progress-percentage

Progress Tracker

The Widget.elementor-scrolling-tracker
Progress.current-progress-percentage

Reviews

The Widget.elementor-swiper
Review Item.swiper-slide
Review Header.elementor-testimonial__header
Reviewer Image.elementor-testimonial__image
Reviewer Name.elementor-testimonial__name
Reviewer Title.elementor-testimonial__title
Testimonial Content.elementor-testimonial__content
Testimonial Text.elementor-testimonial__text
Dot Pagination.swiper-pagination-bullet
Fraction Pagination.swiper-pagination-fraction
Fraction Pagination Current.swiper-pagination-current
Fraction Pagination Total.swiper-pagination-total
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Share Buttons

Button Item.elementor-share-btn
Button Icon.elementor-share-btn__icon
Button Text.elementor-share-btn__text

Slides

The Widget.elementor-slides-wrapper
Content Area.swiper-slide-contents
Content Heading.elementor-slide-heading
Content Description.elementor-slide-description
Content Button.elementor-slide-button
Dot Pagination.swiper-pagination-bullet
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Social Icons

The Widget.elementor-social-icons-wrapper
Icon Item.elementor-social-icon

Star Rating

The Widget.elementor-star-rating__wrapper
Rating Title.elementor-star-rating__title
Star Icon Area.elementor-star-rating
Full-filled Star Icon.elementor-star-full
Half-filled Star Icon.elementor-star-5
Empty Star Icon.elementor-star-empty

Table of Contents

The Widget.elementor-widget-container
ToC Header.elementor-toc__header
ToC Header Title.elementor-toc__header-title
Expand Button.elementor-toc__toggle-button–expand
Collapse Button.elementor-toc__toggle-button–expand
ToC Body.elementor-toc__body
ToC List Item.elementor-toc__list-item
ToC Top Level.elementor-toc__list-item-text.elementor-toc__top-level

Shortcode

The Widget.elementor-shortcode

Tabs

The Widget.elementor-tabs
Tab Title.elementor-tab-title
Tab Content.elementor-tab-content

Testimonial

The Widget.elementor-testimonial-wrapper
Testimonial Content.elementor-testimonial-content
Testimonial Meta.elementor-testimonial-meta
Testimonial Avatar.elementor-testimonial-image
Testimonial Name and Job Title.elementor-testimonial-details
Testimonial Name.elementor-testimonial-name
Testimonial Job Title.elementor-testimonial-job
The Widget.elementor-widget-container
Testimonial Slide Item.elementor-testimonial
Testimonial Content.elementor-testimonial__content
Testimonial Meta.elementor-testimonial__footer
Testimonial Avatar.elementor-testimonial__image
Testimonial Name and Job Title.elementor-testimonial__cite
Testimonial Name.elementor-testimonial__name
Testimonial Job Title.elementor-testimonial__title
Dot Pagination.swiper-pagination-bullet
Fraction Pagination.swiper-pagination-fraction
Fraction Pagination Current.swiper-pagination-current
Fraction Pagination Total.swiper-pagination-total
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Text Editor

The Widget.elementor-text-editor

Toggle

The Widget.elementor-toggle
Toggle Item.elementor-toggle-item
Toggle Item Title.elementor-tab-title
Toggle Item Content.elementor-tab-content
Toggle Icon.elementor-toggle-icon
Toggle Icon Closed.elementor-toggle-icon-closed
Toggle Icon Open.elementor-toggle-icon-opened

The Bottom Line

While Elementor offers plenty of styling options for each widget, you can go beyond with custom CSS. To apply a custom styling to a widget (or its elements) via custom CSS, you need to know the selector of the associated widget. You can simply inspect a widget on a live page to figure out its selector. To save you time, we have created the list of the Elementor widget selectors so that you don’t have to inspect every single widget yourself.

How to Make WordPress Search Results Page Shows WooCommerce Products Only

If we ask you to mention what is the best e-commerce plugin for WordPress? We are sure that WooCommerce is at the top of your mind. In WordPress communities, WooCommerce is very popular, by far the most popular e-commerce platform, with more than five million active users.

Let’s say you have different types of content on your site. Such as blog posts, pages, and products, and you want to increase your sales. One of the ways we recommend is to make your WordPress search results page only show for your WooCommerce products. This is so that your users will focus on your products—the more people notice them, the more opportunities to sell them.

This article will show you how to make a WordPress search results page show WooCommerce products only, without the help of another WordPress plugin.

Steps to Make WordPress Search Results Page Shows WooCommerce Products Only

Step 1: Prepare your WooCommerce Products

First of all, make sure that you’ve already published some WooCommerce products on your site. If you don’t have any products on your site, you can add them by navigating to Products -> Add New on your WordPress Dashboard.

Step 2: Add the Code Snippet to the functions.php File

By default, WordPress has no options/features to set about what is shown on the search results page; a search results page will show everything related to the specified keyword. This includes pages, posts, products, etc.

As you can see from the GIF above, when we search “chocolate,” the search result page shows any content related to the keyword (chocolate), including our blog posts and products.

Here, we will add the simple code snippet into the functions.php file to make the search results only show for WooCommerce products.

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can use the Code Snippets plugin to add a custom function in WordPress. Read here to learn more.

On your WordPress Dashboard, go to Appearance -> Theme File Editor.

Once enter the Theme File editor page, select the functions.php and paste the code snippet below:

Note: Paste the code snippet at the end of the functions file content.

// Only show products in the front-end search results
add_filter('pre_get_posts','lw_search_filter_pages');
function lw_search_filter_pages($query) {
    // Frontend search only
    if ( ! is_admin() && $query->is_search() ) {
        $query->set('post_type', 'product');
        $query->set( 'wc_query', 'product_query' );
    }
    return $query;
}

Once you’ve copied the code snippet, update the theme file by clicking the Update File button.

That’s it. Now your search results page only shows your WooCommerce products. To see how it works, go to your site and test it.

The Bottom Line

This article shows how easily you can make a WordPress results page only shows WooCommerce products without the help of other plugins, just WordPress and WooCommerce. This method is very simple, but this method is not perfect and has weaknesses. When you use the method we explained above; it will impact or implement all your search forms on your site (global search). For example, if you have a search form on your blog post archive, the search results page will show for your WooCommerce products only. It will be a problem. But don’t worry; we have the solution for that issue.

Download and activate JetBlocks. JetBlocks is the best header and footer plugin for Elementor. In this case, the widget that we need is the Search widget.

Note: JetBlocks can work for any Elementor version (free or pro).

By enabling the Is Product Search option on the Search widget settings, you can make your WordPress search results only show your WooCommerce products easily.

You can purchase JetBlocks for a single plugin or buy a bundle of Crocoblock plugins—download JetBlocks on its official website. Please install and activate it once you have downloaded it.

How to Make a Row Vertically Centered in Divi Section

Most page builders, including Divi Builder, already support CSS flexbox to allow users to set the alignment of the elements of a container. For instance, you can set the container’s elements to be horizontally centered, vertically centered, at the bottom of the container, at the top of the container, and so on. In the context of page builder, container can be a section, row, or column.

The concept of flexbox is pretty useful in web design. Especially in the era where designers are required to create a responsive page.

Although the vast majority of page builders already support CSS flexbox, the implementation is quite challenging in some page builders. Unfortunately, this includes Divi Builder. In Divi Builder, adding custom CSS is required to use CSS flexbox.

Say you are designing a page with Divi Builder. On the hero section (the top section), you set the section to be fit to screen. The section contains only one row and you want the row to be on the center of the section. In such a case, you can implement CSS flexbox.

How to Make a Row Vertically Centered in Divi Section

First off, select a section you want the row of to be vertically centered. Click the gear icon to edit it.

On the settings panel, go to the Advanced tab and open the Custom CSS block.

Paste the following CSS snippet to the Main Element field.

The code:

display:flex;

That’s it. Your row should now be in the center area of the section.

The Bottom Line

Flexbox is a CSS feature aimed at making it easy for web designers to set the layout of the design elements. With flexbox, you can set the alignment of multiple elements on a container based on the viewport size. Divi Builder is a page builder that already supports CSS flexbox. However, you need to add CSS code to implement CSS flexbox in Divi.

You can implement CSS flexbox to set the alignment of the elements on your Divi design. One of which is to make a row of a section vertically centered as we have just covered above.

How to Place Blog Post Title Over the Featured Image in Divi Blog Module

For a simple module, Divi’s Blog module is quite a powerful one. You can create any type of page with blog feeds by using Divi’s Blog module. You can even use the module in the footer area if you want to add a related posts section at the bottom of your blog post template to keep the users on your site longer. After some time of using the default Blog module, you may want to style and customize how the blog feeds are displayed.

In Divi, by default the Blog module is displayed in the following orders (top to bottom):

  • Post Featured Image
  • Post Title
  • Post Meta
  • Post Excerpt

With this tutorial, we will show you how to place the blog title, meta, and content just over the featured image thumbnail. Let’s get into it!

Placing Blog Post Title, Meta, and Content Over the Featured Image in Divi Blog Module

Step 1: Adding Custom Code to Divi Theme Options

Firstly, start by navigating to Divi →  Theme Options →  Integrations, then place the following custom code in the Add code to the <head> of your blog code area.

<script>
    (function($) {
        $(document).ready(function() {
            $(".wpb-blog .et_pb_post").each(function() {
                $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
            });
            //Do the same for ajax
            $(document).bind('ready ajaxComplete', function() {
                $(".wpb-blog .et_pb_post").each(function() {
                    $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
                });
            });
        });
    })(jQuery); 
</script>

Then save the changes by clicking on the Save Changes button.

What the code above does is combine the 3 parts of the blog module which are the title, the meta, and the content into one element.

Step 2: Adding a Custom CSS class

Once you’ve added and saved the previous custom code, create or edit a page with the Divi Builder to add the blog module with a grid layout. If you already have the module in place and want to customize it, you can continue to open up the Blog settings panel, navigate to the Advanced tab, and open the CSS ID & Classes block to add the following custom CSS class.

  • wpb-blog

Step 3: Adding a Custom CSS

Once you’ve added the class for the blog module, now to add the custom CSS to move the combined element from step 1 over the featured image. The custom CSS will also adjust the margin and padding and add an overlay to the featured image to make the text stand out more.

Once you’re ready, copy the following code then place it in your Divi → Theme Options General (first tab) Custom CSS.

/*move wrapped title, meta, and text up over the image*/
.wpb-blog-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}

/*keep the moved items positioned with their parent items*/
.et_pb_blog_grid article {
	position: relative;
}

/*remove spacing around entire blog post*/
.et_pb_blog_grid .et_pb_post {
	padding: 0px;
}

/*remove negative margins on blog featured image*/
.et_pb_image_container {
	margin: 0;
}

/*remove the margin below the featured image frame*/
.et_pb_post .entry-featured-image-url {
	margin: 0;
}

.et_pb_blog_grid .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

Continue by clicking the Save Changes button to save your changes.

By now, your blog module will have the title, meta, and content over the image. However, you may want to adjust some settings to make the blog feeds more appealing than the below image.

Step 4: Make Some Adjustments to the Blog Module

Choose the Element You Want for the Blog Module

You can always choose the element you want to show for your blog module. If you want to have blog feeds that consist only of the featured image, title, and meta you can do so by disabling the Show Excerpt option on the Content tab Elements. And, you also can increase the element it shows, like the Read More button or Show Comment Count.

Light Up the Text

As you can see in the above image, the text is almost unreadable. Let’s change the color of the text to white or any other light color you want. If you want to follow our blog style, open up the Blog Settings Design, and make adjustments as follows:

  • The Title Text

We set the Title Text Color to white and use Title Text Shadow with a dark color glowing effect.

  • The Body Text

The body text usually overflows from the bottom of the image as there don’t have enough room for this in the grid layout. Maybe you can shorten the content by going to the Content tab Excerpt Length and inputting the number of letters you need there.

For the Body Text Color, we choose a bit of grayish color (#D6D6D6) and use Body Text Shadow with a dark color glowing effect. The read-more text by default follows this color. But, you can change it in the Read More Text block Read More Text Color.

  • The Meta Text

We set the Meta Text Color to light blue (#88D9DD) and use Title Text Shadow with a dark color glowing effect.

Remove Blog Feeds Border

By default, Divi adds a gray-colored 1px border every time you use the blog module. You may want to remove that by going to the Design tab → Border then setting the Grid Layout Border Width to 0px.

Step 5: See the Result from the Frontend Also

Sometimes there are discrepancies between the builder and the frontend result when we use custom codes to customize Divi elements.

Divi Editor
Frontend

As you can see from the above images, in the Divi editor, the content is not positioned correctly in the middle of the featured image. While from the frontend the content is displayed perfectly as we want it to.

The Bottom Line

After some time of using the default blog post module, you may want to style and customize how the blog feeds are displayed. This tutorial shows you one of the customizations you could use for your blog module so you will have a blog module with its content over its featured image.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.