How to Add Custom CSS in Elementor Free Version

The custom CSS can be applied to every Elementor section, column, and widget. Adding CSS (Cascading Style Sheet) into the Custom CSS field is to style and decorate the sections, columns, and widgets. It also can take a basic HTML page to transform into a modern-looking design.

However, the Elementor Custom CSS is a feature that is only accessible on Elementor Pro. But don’t worry, we have a solution for you if you’re using the free version of Elementor but want to add custom CSS to your Elementor. This article will show you how to do that.

How to Add Custom CSS in Elementor Free Version

In this example, we want to give you the CSS code to assign a multi-color gradient button in Elementor. The CSS code below only works if you add to the Custom CSS field on the Advanced tab on the settings panel, which is you need to upgrade to Elementor Pro to access that feature.

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

To use that code to assign a multi-color gradient button in the free version of Elementor, you need to edit it and do some steps that we will explain later.

Step 1: Add the Additional CSS Code

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 panel, go to the Additional CSS block and click on it. Copy the CSS code above and paste it into the Additional CSS field.

As we mentioned, you need to edit the CSS code to assign a multi-color gradient button. Remove the selector text and replace it with a custom unique CSS ID. You can put any CSS ID into the code; in this example, we will give it #button1

Note: Add your custom unique CSS ID beginning with the pound key/ hashtag (#) and without spacing.

Once you’ve edited the CSS code, apply it by clicking the Publish button.

Step 2: Add the Elementor CSS ID

Alright, we will move to the next step. We will add a unique Class ID to call the CSS code applied in the Additional CSS.

Go to your Elementor editor. 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 Button widget settings panel, navigate to the Advanced tab -> Layout -> CSS ID. Next, please input a custom unique CSS ID you previously added in the Additional CSS.

Note: Add your custom unique CSS ID without the pound key/ hashtag (#) and spacing.

As you can see from the GIF above, the button is a multi-color gradient when you add the custom unique CSS iD. Don’t forget to save your project by clicking the Save Draft button.

Well. Let’s say you want to add a multi-color gradient for another button widget with a different multi-color gradient.

First, go back to the Additional CSS field and then copy and paste the existing code at the end of Additional CSS. Once you’ve pasted it, please replace your custom unique CSS ID with a new one and then edit the CSS snippet more specifically on the declaration block of the CSS. In this example, we replace a CSS ID with #button2

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

You can create a gradient using CSS gradient online tools to get the declaration block. Click here to see some CSS gradient online tools that we recommend.

Once you’ve edited your new CSS code, apply it by clicking the Publish button.

Next, go back to your Elementor editor, then reload your page. Add a new Button widget, then edit and style up if you want to. On the Button widget settings, navigate to the Advanced tab -> Layout -> CSS ID. Afterward, please input your new custom unique CSS ID on the CSS ID field.

That’s it. As you can see from the image above, now you have two buttons with different multi-color gradients. Save your project or publish it if you want to.

The Bottom Line

This article shows you how to add custom CSS in the free version of Elementor. With a few tricks, you can make your Elementor free look like Elementor Pro.

In our opinion, this tutorial is good for you if you’re new to WordPress and Elementor. But, if your website is growing or even established, we recommend upgrading to Elementor Pro. Besides all the features and benefits offered, with Elementor Pro, you can work more efficiently.

How to Highlight a Text in Divi (with Examples)

Sometimes, you want to highlight a certain phrase on a text element on your design to show your site visitors that it is a crucial part to notice. If you use Divi and still don’t know how do so yet, this article will show you how.

Divi itself has a Text module which you can use to add a text element to your design. Be it a paragraph or heading. The module comes with built-in setting options to style up the text. You can effortlessly change the font family, font size, text color, to applying a gradient to your text in Divi. One thing you can’t do with the built-in settings is adding a highlight.

Since Divi has no built-in settings to highlight a text, you need to add custom CSS to do so. If you have no CSS knowledge, no worries. We have provided four highlight styles along with the CSS snippets.

— Highlight One

The CSS snippet:

.wpb-highlight-one {
  background-color: #f40ef0;
  line-height: 1.7em;
  padding-bottom: 0px;
  display: inline;
  box-shadow: 10px 0 0px 0px #f40ef0, -10px 0 0px 0px #f40ef0;
  box-decoration-break: clone;
}

— Highlight Two

The CSS snippet:

.wpb-highlight-two {
  position: relative;
  color: #ffffff;
  background-color: #55d2fc;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px;
}

— Highlight Three

The CSS snippet:

.wpb-highlight-three {
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 #f9c695;
    color: inherit;
}

— Highlight Four

The CSS snippet:

.wpb-highlight-four {
    padding: 0 5px;
    background-color: #f9f220;
}

How to Implement to Above Highlights

First, you can select a highlight style you like and copy the CSS snippet. Next, go to Divi -> Theme Options on your WordPress dashboard and scroll down to the Custom CSS option. Paste the code to the available field and click the Save Changes button.

All CSS snippets above use a class selector to make it easy for you call them (the CSS code). Class selector is the text that has a dot prefix — the text before the opening curly bracket.

You can call the class selectors above on a text element on your design. First, add the Text module to your Divi design and edit the text content on the text editor. Make sure to specify the text type (paragraph or heading).

Once done editing the text, switch to the text mode by clicking the Text tab on the editor.

Select a part that you want to highlight and add the span tag between it. On the opening span tag, add the class you want to call. Example:

<h2 >I want to <span class="wpb-highlight-three">highlight</span> this part</h2>

If you want to apply the highlight to the entire text, you can simply add the class to the opening tag of the text. Example:

If you want to highlight a paragraph, you can manually add the <p></p> tag to your text.

The Bottom Line

Highlighting a certain part of a text is a simple method to let your visitors know that it is (the highlighted part) a crucial part of the text. Divi — and most other page builder plugins — has no built-in setting option to highlight a certain part of a text. Fortunately, it has custom CSS feature to allow you to apply custom styling using your own CSS code. You can implement what we have just covered above to highlight a certain part of a text on your Divi design. Be it a page or custom templates you created with Divi theme builder.

How to Set Avatar Border Radius on the Post Info Widget of Elementor

As web designers, we surely want our site to have a selling point; uniqueness and stunning design. One thing that we can do is customize the avatar. Many people in the WordPress community assume that customizing the avatar is not the most important thing. But we have another perspective on that. Not only as a representative of who you are, but avatar also can build trust and engagement with your users.

This article will show you how to set the avatar border-radius on the post info widget in Elementor. With Elementor setting the avatar border-radius is very easy.

How to Set Avatar Border Radius on the Post Info Widget in Elementor

Before we start the tutorial, we will inform you that we will use the Elementor Custom CSS feature to set the avatar border-radius. The Elementor Custom CSS is only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.

Alright, let’s get started!

First, open your Elementor editor, afterward select the Post Info widget from the widget panel, then drag and drop it into the canvas area. By default, the post info displayed four items (Author, Date, Time, and Comments).

Next, we want to activate the avatar. On the Meta Data block, click Author, then navigate to the Avatar option. Please enable the avatar by switching the toggle to YES.

Once you enable the avatar, you can edit and style up your post info widget.

Well, it’s time to set a border-radius avatar by adding the simple snippet into Custom CSS. On the Post Info widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-avatar
{
    border: 2px solid brown; border-radius: 15px 50px 30px
}

The Code Explanation:

The code above selects the avatar element using the .elementor-avatar selector then applies the styling which is defined between the curly brackets (read: Elementor widget selector list). The avatar border style is solid with brown color (2px solid brown), and it has three values – border-radius: 15px 50px 30px; (first value applies to the top-left corner, the second value applies to top-right and bottom-left corners, and the third value applies to the bottom-right corner).

You can also change the border style, color, and border-radius values by editing the CSS snippet above.

As you can see from the image above, we edited the CSS snippet.

  • Border style: solid -> dashed
  • Border color: brown -> white
  • The third border-radius value (the bottom-right corner): 30px ->25px

The Bottom Line

This article shows how easily you can set the border-radius avatar on the post info widget in Elementor by adding a simple CSS snippet into the Custom CSS. As we mentioned at the beginning of this article, your avatar can build trust and engagement with your users. So, feel free to play around with the CSS snippet above and make your avatar stunning.

Elementor vs Breakdance: Features Comparison (Unbiased)

Elementor vs Breakdance illustration image

The competition in the WordPress page builder plugin segment is getting tighter and tighter. While Elementor is still becoming the market leader, many competitors are trying to grab the throne. Breakdance is one of those competitors. This article will compare the features offered by Elementor and Breakdance with the main purpose is to help you pick the best option for your next projects.

Let’s start with Breakdance introduction first as we are pretty sure you are not too familiar with it yet — unlike Elementor.

Breakdance is a new page builder plugin from Soflyy (the developer of Oxygen). From the editor perspective, there is not much difference between Breakdance and Oxygen (except the default look whereby Breakdance is available in a light mode while Oxygen offers dark mode by default). But the overall editing experience is not much different.

The most notable difference between Breakdance and Oxygen is how you get them. To get Breakdance, you need to make a yearly subscription. While to get Oxygen, you can pay once.


Elementor vs Breakdance: The Target Market

You can easily identify the target market of a WordPress plugin by learning the pricing plans. When you check out the pricing page of Breakdance, you will only see one pricing plan option costing $349 per year (normal price). This plan allows you to use your license on unlimited websites. From here, you can easily make a conclusion that Breakdance is aimed at agencies and freelancer creating websites for clients.

Breakdance pricing plan

Meanwhile, Elementor is aimed at all WordPress user layers. From bloggers, online business owners, freelancers, to agencies. Elementor offers four pricing plans which you can choose according to your needs. If you are a blogger taking care of one blog, for instance, you can subscribe to the Essential plan costing only $59 per year.

Elementor pricing plan

Elementor vs Breakdance: General Features

First thing first. The Elementor version we will compare with Breakdance here is the pro version. If you haven’t used Elementor yet before, you can read the differences between between Elementor Free and Pro in this post.

— Theme Builder

Both Elementor (Elementor Pro more precisely) and Breakdance come with a theme builder feature. With this feature, you can create custom templates for your site parts such as header, footer, single post, archive pages, 404 page, and so on. You can create a custom template in a visual way using the editor of the page builder you use.

The theme builder feature of Elementor allows you to create custom templates for parts like header, footer, and so on. So does, Breakdance.

Be it Elementor or Breakdance also allows you to set a display condition to set where a template to apply (entire site, specific page(s), specific post(s), and so on).

ElementorBreakdance
HeaderYesYes
FooterYesYes
Single postYesYes
Single ageYesYes
Archive pages (category, tag, author)YesYes
Search results pageYesYes
404 pageYesYes
Custom Post TypeYesYes

— WooCommerce Builder

WooCommerce is a popular plugin to add e-commerce functionality to your WordPress site. After installing and activating WooCommerce, you will find the following pages and templates on your WordPress site.

  • Shop page
  • Cart page
  • Checkout page
  • My Accounts page
  • Single product template
  • Product archive template

You can set custom pages to replace the default WooCommerce pages (shop page, cart page, checkout page, and My Accounts page) from the WooCommerce settings page.

Elementor and Breakdance come with useful elements designed for the pages above. For instance, Breakdance offers the Checkout Page element which you can add to your custom checkout page created with Breakdance.

What about the WooCommerce templates?

In addition to creating the custom templates for default site parts, the theme builder feature of Elementor and Breakdance also allows you to create custom template for WooCommerce parts as follows:

  • Single product page
  • Product archive pages
ElementorBreakdance
Shop pageYesYes
Cart pageYesYes
Checkout pageYesYes
My Accounts pageYesYes
Single product templateYesYes
Product archive templateYesYes

— Form Builder

Both Elementor and Breakdance come with elements dedicated to creating forms. Elementor has two elements to create forms: the Login widget to create a login form and the Form widget to create a wide range of form types.

Meanwhile, Breakdance has four elements dedicated to creating forms: Forgot Password Form, Form Builder, Login Form, and Register Form.

# Elementor Form Builder

As mentioned above, Elementor offers two elements (widgets) to create form. You can use the Login widget to create a custom login page on your website. To create other form types you can use the Form widget.

The Form widget of Elementor supports the following field types:

  • Text
  • Email
  • Text Area
  • URL
  • Telephone
  • Radio
  • Select
  • Checkbox
  • Acceptance
  • Number
  • Date
  • Time
  • File Upload
  • Password
  • HTML
  • Hidden

To protect your form from spammers, you can integrate your form with Honeypot or reCAPTCHA. In Elementor, you can also create a multi-step form if you want to.

The Form widget of Elementor supports the following actions:

  • Send to email
  • Send to MailChimp
  • Send to ActiveCampaign
  • Send to GetResponse
  • Send to ConverKit
  • Send to MailerLite
  • Send to MailPoet
  • Send to weMail
  • Send to Slack
  • Send to Discord
  • Send to Drop
  • Open a popup

Furthermore, Elementor also comes with a built-in submission manager in case you want to save your form submissions to your database.

# Breakdance Form Builder

Breakdance comes with more form widgets than Elementor. It has four elements for a specific form type:

  • Forgot Password Form: To create a lost forgot password form
  • Login Form: To create a login form
  • Register Form: To create a registration form
  • Form Builder: To other email opt-in form, contact form, and so on.

The Form Builder element of Breakdance supports the following field types:

  • Text
  • Email
  • Text Area
  • Phone Number
  • Radio
  • Checkbox
  • Select
  • Number
  • Date
  • Time
  • Password
  • Hidden
  • HTML

While for the action, it supports:

  • Send to ActiveCampaign
  • Send to JavaScript
  • Send to Drip
  • Send to Discord
  • Send to Slack
  • Send to email
  • Send to GetResponse
  • Send to MailChimp
  • Send to MalierLite
  • Open a popup

Breakdance also comes with a built-in submission manager. Furthermore, it supports conditional logic to allow you to show a field based on a certain parameter. For instance, you can set a field to show up only if the previous field is filled in.

ElementorBreakdance
Number of supported fields1613
Third-party integrationYesYes
Built-in submission managerYesYes
Multi-stepYesNo
Conditional logicNoYes
Form securityHoneypost, reCAPTCHAHoneypost, reCAPTCHA
Login formYesYes
Registration formNoYes
Lost password formNoYes

— Popup Builder

A popup builder has many uses in WordPress. While most WordPress users use a popup builder to create an email opt-in popup, you can also use it to add a certain feature on your website as well. For instance, you can use a popup builder to create a full-screen menu.

Be it Elementor or Breakdance comes with a sophisticated popup builder feature which you can use to create the following things:

  • Email opt-in popup
  • Full-screen menu
  • Notification bar
  • Content locker

When creating a popup using Elementor or Breakdance, you have a full control over the design since the process of popup creation is done in their respective editor. So technically, you can add any element you want.

The popup builder of Elementor and Breakdance supports display condition to allow you set where a popup to show up on your website. Whether on the entire website, specific page(s) or post(s). Also, you can set the following trigger types to set how a popup to appear:

ElementorBreakdance
On page loadYesYes
On page scrollYesYes
On clickYes. Button and selectorYes. Selector
After inactivityYesYes
Exit intentYesYes
Hide for logged usersYesYes
Show on specific browsersYesYes
Show on specific devicesYesYes
Coming from search enginesYesYes

— Dynamic Content

Both Elementor and Breakdance comes with a theme builder feature which allows you to create custom templates for your theme parts (header, footer, archive pages, and so on). On your custom templates, you can add dynamic content such as page title, archive title, featured image, and so on.

In addition to the default dynamic content of WordPress (page title, archive title, and so on), Elementor and Breakdance also supports custom dynamic content from plugins like CPT UI and ACF.

ElementorBreakdance
Post TitleYesYes
Post ExcerptYesYes
Post ContentYesYes
Post MetaYesYes
Archive TitleYesYes
Archive DescriptionYesYes
Featured ImageYesYes
User AvatarYesYes
User BioYesYes
Custom Post TypeYesYes
Custom FieldsYesYes

— Loop Builder

Loop builder is a useful feature to create a complex, dynamic website.

Say you want to create a listing website (e.g., a property listing website). To display the listing items, you plan to create a dedicated listing page. In Elementor, you can use the Posts widget for such a need. While in Breakdance, you can use the Post List element.

However, those elements don’t give you a freedom to add custom metadata to the listing item. You are limited to what’s offered by the elements.

To make it clearer, let’s take an instance. Say you want to add a star rating to your listing items — like the one below:

A loop builder allows you to create a custom template for your listing item and use it anywhere you want. Of course, you can add any element (be it static or dynamic) to your listing item template, including the star rating.

Both Elementor and Breakdance come with a loop builder feature.

At the time of writing (November 2022), the loop builder feature of Elementor is still in a beta phase. On the other hand, the loop builder of Breakdance is in a stable version already so it’s better ready to use. You can add custom fields data to your loop template.

— User Access Manager

If you are an agency or freelancer and often create websites for clients, then user access manager is a handy feature for you. With this feature, you can give your clients an access to the pages you have created, but without the ability to change the design settings. Instead, they can only change the content.

In this context, User Access Manager works by disabling the styling tab on the settings panel for certain user role. For instance, if you enable User Access Manager for the Editor role, all users with an Editor role won’t be abe to access the styling tab.

Settings panel on normal state
Settings panel after User Access Manager is enabled

User Access Manager is a handy feature if you often create websites for clients as not all clients have a design skill. They can break your design if you give a full control over the design.

User Access Manager is available on both Elementor and Breakdance.

— Other Features

In addition to the key features above, Elementor and Breakdance also offer some additional features to ease your job. Such as code inserter which you can use to insert a custom code to your website (e.g., Google Analytics tracking code), action links, and coming soon and maintenance mode.


Elementor vs Breakdance: Design Features

— Responsive Editing

Responsive editing is one of crucial feature you need to notice when picking a page builder plugin. With the feature, you can optimize the design of your page (or custom templates) for all device screen sizes.

In general, there are three screen sizes in the context of web design: desktop, tablet, and smartphone. You can tailor your design according to each device screen size. Both Elementor and Breakdance allow you to do so thanks to their responsive editing feature.

To start optimizing your design for a certain device screen size, you can change the editing mode (the default mode is desktop). In Elementor, you can click the device icon on the bottom side of the settings panel to switch between device modes:

There are three device types you can choose from: desktop, tablet, and smartphone. If you want to optimize you design for a specific screen size, you can also set a custom breakpoint (breakpoint is point where the website content responds according to the device width — in pixels).

To set a custom breakpoint, you can click the gear icon on the top bar area, then go to the settings panel.

In Breakdance, you can switch between device modes by clicking the device icon on the top bar within the editor. You already have 5 device screen size options to choose from. You can also set a custom breakpoints if you want to.

To optimize your design for a smaller device screen (smartphone, for instance), you can also disable an element. If necessary, you also reverse the columns on a section.

ElementorBreakdance
Custom BreakpointsYesYes
Reverse ColumnsYesYes
Show/Hide ElementsYesYes

— Layout

# Page Layout

One of the handy features offered by Elementor is the ability to set the page layout from the editor. Before start editing your page, you can click the gear icon on the bottom side of the settings panel to set the page layout. You have the following page layout options:

  • Default: The default page layout you set from Site Settings
  • Elementor Canvas: The blank page layout. Without header and footer
  • Elementor Full-width: Similar to Elementor Canvas, but with the header and footer
  • Theme: The default page template of your theme

In Breakdance, you only have two options of page layout: blank and default. That too, you have to set the page layout from the Gutenberg editor. Breakdance offers no option to set the page layout from the editor.

— Design Layout

In general, the elements on a page builder fall into three types: section, column, and the actual design elements (called widgets in Elementor). Every time you add a new element, you can set its placement. Also, you can set its margin with other elements around it.

One of the design layout features offered by Elementor and Breakdance is flexbox. This feature allows you to align and distribute elements across each column within a section. Be it vertically or horizontally.

Both Elementor and Breakdance already have flexbox options. Elementor even has a new flexbox container feature to offer more design layout flexibility.

In addition to flexbox, you can also use other design layout options such as inline positioning, custom positioning, and Z-Index.

ElementorBreakdance
Custom PositioningYesYes
Z-IndexYesYes
Flexbox AlignmentYesYes
Inline PositioningYesYes
Margin & PaddingYesYes

— Media and Assets

A design without media element will be tasteless. The media element can be image, image, and icon. You can add these media element types effortlessly on your Elementor or Breakdance design.

# Icon

Elementor relies on Font Awesome (free version) to provide icon library to users. If you want to use your own icon, you can upload them via the Elementor settings page.

Meanwhile, Breakdance offers more icon collections as it uses two icon providers: Font Awesome (free version) and IcoMoon (free version). You can also upload your own icon set in case you want to use custom icons.

# Image

All page builders have one thing in common. They allow you to add images to your design. What’s different is the styles you can apply to your images.

In Elementor and Breakdance, you can apply basic settings such as border radius, size, and alignment. In addition to these basic settings, you can also apply more advanced stylings such as image masking and CSS filters.

Be it Elementor or Breakdance also comes with a built-in lazy load setting to maintain or even improve the speed of your site.

# Video

Video is another media element you can add to your design in Elementor and Breakdance. You can add a video from services like YouTube, Vimeo, and DailyMotion. Sure, you can also upload your own video.

Be it Elementor or Breakdance allows you to control the behavior of your videos. For instance, you can enable the loop option to set a video to continuously play. Or you can mute it if you want a video to play without any sound. For the sake of site speed, you can also enable lazy load to a video.

ElementorBreakdance
Icon LibraryFont AwesomeFont Awesome, IconMoon
Background VideosYesYes
Background SlideshowYesYes
Image MaskingYesYes
LazyloadYesYes

— Color & Effects

Elementor and Breakdance allow you to play around with colors on your design. Also, you can add effects like box shadow and CSS filter.

A Breakdance feature that is not available in Elementor is advanced gradient builder. In Breakdance, you can create a gradient that consists of multiple colors (more than two).

You can apply the gradient to a button, text and section and column background. You can even turn the gradient background into a cool animation whereby you can control the speed and scale.

In Elementor, you can only add maximum of two colors to a gradient. Also, there is no option to turn your gradient into an animation like the one above.

But, Elementor has a dynamic color feature which is useful if you want to add dynamic color to your website (requires integration with ACF). You can use the feature to, for instance, to create a dynamic background on pages. Another example, you use it to create a custom color for blog post titles.

Another color-related feature offered by Elementor and Breakdance is global color. This feature is extremely useful especially if you have a website consisting of multiple pages and elements. With a global color, you can change the color of multiple elements at once with a single click. Be it on the same page or different pages.

ElementorBreakdance
Global ColorsYesYes
Dynamic ColorYesNo
Gradient2 colors maxMore than two colors
Background OverlayYesYes
CSS FiltersYesYes
Box ShadowYesYes

— Typography

Elementor and Breakdance come with some elements dedicated to adding text elements to your design. For instance, you can use the Heading element to add a heading element to a page. Of course, you can also customize the text such as setting the color, font family, font size, and so on.

Both Elementor and Breakdance are integrated with Google Fonts to offer a bunch of font families. Adding a custom font is also possible in Elementor and Breakdance. Elementor supports woff, woff2, and ttf formats. While Breakdance supports only woff and woff2.

Be it Elementor or Breakdance allows you to add a global font. Same as global color, global font is also useful if you have a website consisting of multiple pages. You can change the font setting on multiple texts at once, with a single click.

A feature available on Breakdance that is not available on Elementor is the ability to apply gradient to a text.

You need to deal with CSS code to create a gradient text in Elementor.

ElementorBreakdance
Global TypographyYesYes
Typography ControlYesYes
Custom FontsYesYes
Text Stroke EffectYesYes
Gradient EffectNoYes

— Motions and Interactions

As we have disclosed above that Breakdance allows you to create a background gradient and turn it into an animated background. It just one of the animation features you can unlock. There are several other animation-related features you can use. Such as hover effect, mouse effect, parallax effect and so on.

Same as Breakdance, Elementor also comes with some built-in features to make your page looks more alive. Here are some animation-related features offered by Elementor and Breakdance.

ElementorBreakdance
Scrolling EffectsYesYes
Mouse EffectsYesNo
Hover Animation and CSS TransformYesYes
Entrance AnimationsYesYes
Parallax BackgroundYesNo
Sticky EffectsYesYes
Animated Gradient BackgroundNoYes

— Custom CSS

If you find no built-in settings on Elementor or Breakdance for a certain need, you can add custom CSS. Both Elementor and Breakdance allow you to add custom CSS to your design.

The method of adding custom CSS is same on Elementor and Breakdance. You can start with a selector to target the element you want apply the CSS code to. However, since there is official page for element selectors provided by Elementor or Breakdance, you need to inspect the element yourself, which is time-consuming enough. We have created the list of Elementor widget selectors to ease your job in adding custom CSS in Elementor.

A nice thing about Elementor when it comes to custom CSS is the autocomplete feature for CSS properties to avoid mistype as well as saving time. Breakdance has no similar feature.

In addition to adding custom CSS to an element via the pre-defined selectors, you can also add custom CSS via Additional CSS block on theme customizer or a dedicated CSS file on your theme. You can simply add the CSS class or CSS ID of a certain declaration to the element you want to apply the declaration to. Both Elementor and Breakdance allows you to add CSS class or ID to an element.


The Verdict

Elementor and Breakdance are great page builder plugins to make it easier for you to create a website in WordPress. The two have a modern, similar editor. The fact is that both Elementor and Breakdance are built with the most popular JavaScript frameworks. Elementor is built with React.js while Breakdance is built with Vue.js.

Both Elementor and Breakdance also offer similar features to users. From theme builder, WooCommerce builder, popup builder, form builder, to loop builder.

From the pricing side, Breakdance clearly doesn’t target all WordPress users. Instead, it focuses on agencies and freelancers who create websites for clients. Meanwhile, Elementor is aimed at everyone. From a solo blogger, small business owners, agencies, and so on. It has different plans for each user type. But from the feature perspective, Elementor and Breakdance are not too different. Small differences exist, but not too significant.

How to Set Space Between Paragraphs in WordPress

Have you ever felt in a condition when you’re comfortable with your WordPress theme, but there is a minor thing that you want to change but you can’t? This article might be helpful for you if you want to customize the space between paragraphs. By default, the paragraph spacing is determined by the WordPress theme you use on your site. But, sometimes, the space between paragraphs is unsuitable for our site needs.

This tutorial will show you how easy to set space between paragraphs in WordPress.

How to Set Space Between Paragraphs in WordPress

Option One (Elementor Site Settings)

Using Elementor to build your WordPress site, you must be familiar with the Site Settings feature. But if you’re new to Elementor, we will show you how to access it. Select any content (page/ post), then click the Edit with Elementor button to open the Elementor editor. Afterward, click the hamburger icon (☰) on the upper left corner of the Elementor settings panel and click on Site Settings.

Once you enter the Site Settings panel, navigate to Typography and click on it. On the Typography, you will see some settings; go to the Paragraph Spacing and set the value by sliding the toggle or entering numbers on the field.

Note: To see the changes in paragraph spacing as live, add some paragraphs to your Elementor editor using the Text Editor widget.

Once you’ve finished setting the paragraph spacing, apply the change by clicking the UPDATE button.

Option Two (Add the CSS on Theme Customizer)

First, before we start the tutorial for this option, please remove the paragraph spacing value if you’ve already applied the paragraph spacing on option one (Elementor Site Settings). Because if you don’t remove it, this method (Option two) can’t work correctly.

Alright, now we move to the second option. Unlike the first option, this option doesn’t need any plugins. We will add the simple CSS snippet into the Additional CSS field. There are two ways to access the Additional CSS.

  1. WordPress Dashboard -> Appearance -> Customize -> Additional CSS
  2. Preview your content (page/post) -> Customize -> Additional CSS

Once you enter the Additional CSS, please copy the simple CSS snippet below and paste it into the Additional CSS field.

p 
{margin: 10px 5px 25px 5px
}
The margin is set to all four sides of 20 pixels.

The CSS snippet we give you above is a set margin for all four sides (top, right, bottom, left). But if you want to set the margin differently for each side, you can use the CSS snippet below:

The margin property has four values

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

The Bottom Line

This tutorial shows you how to set space between paragraphs in WordPress using two methods. As we already know, writing on a website differs from writing papers, letters, or books we learned at school. We don’t have to stick to the formal things on the website, including paragraph spacing. Feel free to play around with paragraph spacing values based on your site needs.

How to Add Estimated Reading Time in WordPress (Gutenberg, Elementor, and More)

There may be times when we try to read an article from a website, we wonder how much time it’ll take to read the entire post and start scrolling down until the end of the content to get an estimate of the time needed to finish reading it. And once we get it, we start reading for real. And for that moment, we may appreciate a little heads-up on how much time it is going to take before we read it.

Adding an estimated reading time for your blog posts is a great way to help the user who spends a lot of time devouring content on the web. It doesn’t have to be intrusive or distract the user from engaging with the content, maybe a short sentence like “3 min read time” above the content is just suitable for it.

This tutorial will show you how to add an estimated reading time in WordPress without any additional plugin and display it on your blog post whether you’re using Gutenberg, Elementor, Divi, and any editor as long as it supports the use of shortcode.

Adding Estimated Reading Time in WordPress

Once you know the benefit of adding the estimated reading time to your blog posts and you’ve decided to use it for your site, let’s start adding it now!

Before you start, we suggest taking a backup of your site and using a child theme to avoid breaking the parent theme or losing your changes when you update your theme. Once you’re ready, let’s get into the practical steps!

Step 1: Adding the Estimated Reading Time Code

The first step is to add the estimated reading time code to your theme functions.php file. To do so, navigate to Appearance Theme File Editor from your WordPress admin dashboard to open up the Edit Theme page. And in that page, click on the Theme Function (functions.php) from the Theme Files list to open up its file editor. Once the editor is open, add the following code to the bottom of the file editor.

function reading_time() {
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( strip_tags( $content ) );
$readingtime = ceil($word_count / 260);
if ($readingtime == 1) {
$timer = " minute read";
} else {
$timer = " minutes read";
}
$totalreadingtime = $readingtime . $timer;
return $totalreadingtime;
}
add_shortcode('wpbread', 'reading_time');

Here is the screenshot of how the code is placed in the file editor.

What the code above do is get the total words from the post content and then divide it by 260 which is the average silent reading time for adult in English according to studies by ScienceDirect. You can update the number and modify the “minute read” text if necessary.

Once the code is in place, save the changes made to the file by clicking the Update File button.

Step 2: Displaying the Estimated Reading Time

The next step is to call the estimated reading time so it will appear before the content of your blog post. This step will guide you to display the estimated reading time on your blog posts for Gutenberg users, Elementor users, Divi users, and more.

Gutenberg

To display the estimated reading time before the blog content on Gutenberg, you just need to place the [wpbread] shortcode just above the content when you create a post. I know it is a bit hassle to call it every time since by default Gutenberg still can’t be used to create a layout for blog posts.

As you can see from the above image, we put the shortcode between the title and the content and italicize the text. You can see the result of it in the image below.

Viola, the estimated reading time is there just above our content.

Elementor

If you’re using Elementor Pro as your page builder, you’ll have an easy time displaying the estimated reading time for all of your blog posts. You just need to do the first step of this tutorial and create a single post layout or edit it if you already have one via the theme builder, then add the shortcode element into the layout.

Once you’ve done the first step, start by navigating to Templates Theme Builder from your WordPress dashboard. Once you’re inside the Theme Builder page, click on the Single Post block then click on the add a new button to create a single post layout.

Once you’re in the Elementor visual editor, add all the elements you need to create your single post layout or you can use one of the single post layouts we made here, then add the Shortcode element before the post content and place the [wpbread] shortcode into it.

Now, the estimated reading time should appear before your post content. Finally, modify the text color and italicize the text using the following CSS snippet to make it more appealing but not intrusive.

selector .elementor-shortcode{color:#969696;
    font-style: italic;
}

Once you’re satisfied with your layout, publish your layout then set the condition to Post All then proceed to see the result on one of your posts from the front end.

Divi

Displaying the estimated reading time for all your blog posts using Divi Builder is just as easy as you add a button module or any other module to your single post layout from Divi Theme Builder. Once you’ve placed the code from the first step to your functions.php file, navigate to Divi Theme builder to create a single post layout, or if you already have the layout prepared, go ahead to click the pencil icon to edit it.

Once you’re in the Divi editor, add the necessary module for your blog post, then add a code module just above your Post Content module.

Continue by adding the [wpbread] shortcode to the Code editor inside the code module setting.

Once the estimated reading code appears, you may want to change its style a bit by adding a CSS snippet to the module. For example, we turn the text into italic, by adding the following CSS snippet on the Advanced tab Custom CSS Main Element.

  • font-style: italic;

Once you’re done styling, save the changes you just made for your single post layout.

Other Editor

If you are using another editor besides the three we covered, as long as it is support shortcode use, then you always can add the estimated reading time for your website. To do it, just do the first step then place the [wpbread] shortcode into any code element or module the editor offered.

The Bottom Line

There may be times when we try to read an article from a website, we wonder how much time it’ll take to read the entire post and start scrolling down until the end of the content to get a grasp of the time needed to finish reading it. Adding an estimated reading time for your blog posts is a great way to help the user who spends a lot of time devouring content on the web. This article shows you how to add an estimated reading time on your blog posts for Gutenberg users, Elementor users, Divi users, and more.

How to Create Gradient Progress Bar in Elementor without Add-on

If you are a WordPress user using Elementor to build your website, you must be familiar with the Progress Bar widget. We use this widget to show the data in a graphical design. This article might be helpful for you if you want to customize your Progress Bar widget more than Elementor has provided.

This article will show you how to create a gradient progress bar in Elementor without the help of any add-ons. By default, Elementor allows you to change the color of your progress bar (background and text). But there is no option to make it gradient.

Maybe you are wondering, “Is it possible to create a gradient progress bar in Elementor without the help of any add-ons?”. Well, this article will show you how to do that.

How to Create Gradient Progress Bar in Elementor without Add-on

Before we start the tutorial, we would like to inform you that to create a gradient progress bar in Elementor, we will need the help of the Elementor Custom CSS feature, which is only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.

Alright, let’s get started!

Go to your Elementor editor, afterward select the Progress Bar widget from the widget panel, then drag and drop it into the canvas area. Once you’ve added the Progress Bar widget/s, you can edit and style up as you prefer.

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

selector .elementor-progress-bar
{
background: rgb(7,149,238);
background: -moz-radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%);
background: -webkit-radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%);
background: radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0795ee",endColorstr="#25fcff",GradientType=1);
}

If you are happy with the multi-color gradient applied to your progress bar widget (as in the image above), keep it like this and save your project if you want to. But, if you want to customize it or maybe you want a different gradient for another progress bar widget, you can edit 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.

You can create a gradient using CSS gradient online tools to get the declaration block. 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.

The Bottom Line

This article shows how easily you can create a gradient progress bar in Elementor without the help of any add-ons. The progress bar with a single color may look plain and boring. But be careful about creating a multi-color gradient to your progress bar. Please pay attention to blending and mixing the color tones you use so that your progress bar doesn’t look weird and annoying. Because the primary purpose of creating the progress bar is to show the data and ensure the progress bar is clear and understandable to your users.

How to Hide a Gutenberg Block from Non-Logged In Users in WordPress

People like being appreciated are no exception for your users. Appreciating your users, especially those who logged in to your site, will make them feel special and valued. This article might be helpful if you want to hide/show block/s on your website based on user login 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. The page will be displayed differently to users who are logged in and non-logged in. Maybe you are wondering,” Is it possible to hide a Gutenberg block from non-logged in users in WordPress?”. Well, this article will show you how to do that.

Steps to Hide a Gutenberg Block from Non-Logged In Users in WordPress

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:

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

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

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

Step 2: Add the Additional CSS Code

Alright, we will move to the next step. 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.

/* 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 CSS Classes

Go to the WordPress Gutenberg editor. You can create new content (page/post) or select the existing one. Afterward, prepare the block/s you want to hide or show from your users based on their login status.

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

  1. BEGIN TUTORIAL: Hide for logged-out users.
    • This block will appear only for users logged in to the website.
  2. GET FULL ACCESS: Hide for logged-in users
    • When the user is logged in to the website, this block will not appear (hidden).

Alright, it’s time to add the CSS class to the block. Go to the Block settings -> Advanced. Inside the Advanced settings panel, navigate to the ADDITIONAL CSS CLASS(ES), then write the CSS Class below (depending on user status).

CSS Class to Hide Blocks for Logged-out Users

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

CSS Class to Hide Blocks for Logged-in Users

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

Perfect! 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 block/s already hides when the user is logged out.

The Results

  • User Status: Logged-in
  • User Status: Logged-out

The Bottom Line

One of the main goals of designing a website is to get as many visitors to access your content as possible, contributing to your business. But having users log in on your website is another level. It will give you more benefits, not just as a support, but also increase your business. We hope this article is helpful for you to give exclusivity to your users who logged in to your website.

4 Best WordPress Popup Builder Plugins (Experience-Based)

WordPress popup builder plugin

Looking for a popup builder plugin to create popups on your WordPress site? We have collected the best ones for you. All popup builder plugins we will mention bellow have been tested.

Popup builder itself is widely used by WordPress users to create an email opt-in popup to collect email addresses from visitors. The use of popup builder is broader than that. For instance, you can use a popup builder to create a full-screen menu on your WordPress site. Other instances, you can use a popup builder to create a notification bar, content locker, and so on.

In order to be able to use a popup builder for multiple needs, you can pick a popup builder that supports multiple trigger types. In this context, a trigger is an interaction/condition that trigger a popup to show up. In general, most popup builder plugins support the following trigger types:

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

Best WordPress Popup Builder Plugins

1. Elementor Pro

The first popup builder we recommend is Elementor Pro.

Elementor itself is well-known as a page builder plugin. However, you can also use it to create popups thanks to its popup builder feature. Same as pages, the popup creation process is also done via its visual editor — which offers a bunch of design elements (called widgets). The best part of creating popups with Elementor is that you have a full control over the design of your popup. You can effortlessly disable the popup overlay, set the popup background, set the popup position, and so on.

Elementor comes with over 70 design elements, and you can add all these elements to your popup. One of the useful popups when it comes to popup is Form. You can use this element to create a form and connect it with email marketing plugins and services like MailPoet, MailerLite, to ActiveCampaign. No extra plugin needed.

The popup builder feature of Elementor allows you to set a display condition or two. With this feature (display condition), you can set where a popup to show up. Whether on the entire website, specific page(s), specific post(s), posts under a specific category, and so on.

Here are the key features offered by Elementor popup builder:

  • Offers a full control over the popup design
  • Third-party integration supports
  • Ability to set a display condition
  • Supports multiple trigger types
  • Premade popup templates

2. JetPopup

If you enjoy using Elementor, yet still have some doubt upgrading to the pro version to unlock its popup builder feature, there is a nice alternative you can try: JetPopup.

JetPopup is a nice Elementor alternative to create popups — available at a lower price. Overall, the features offered by JetPopup are not much different from Elementor’s popup builder. It also supports multiple trigger types, including:

  • On page load
  • On page scroll
  • On click (selector)
  • Exit intent

You can also set a display condition to instruct the popup to show up on the selected pages. The popup creation process is also done in the Elementor editor so that you can add any design element you want.

JetPopup comes with an Elementor widget dedicated specifically to create an email opt-in form. However, the widget only support integration with MailChimp.

3. Brizy Pro

Brizy Pro popup builder

Brizy is also a page builder plugin just like Elementor (read: Elementor vs Brizy). The pro version comes with a popup builder feature which you can use to create a wide range of popups. From an email opt-in form to collect leads, notification bar, to full-screen menu. Since Brizy is basically a page builder plugin, the process of popup creation is done via a visual editor. The Brizy editor itself is clean and easy to use.

Brizy Pro offers over 40 design elements. One of which the Form element which you can connect with email marketing services like MailLite, ActiveCampaign, to GetResponse. Same as Elementor Pro and JetPopup above, the popup builder of Brizy also supports trigger types like on page load, on click, exit intent, and so on. Also, you can set where the popup to show up thanks to its display condition support.

Here are the key features offered by Brizy Pro’s popup builder:

  • Offers a full control over the popup design
  • Third-party integration supports
  • Ability to set a display condition
  • Supports multiple trigger types
  • Premade popup templates

4. Breakdance

Breakdance popup builder

Breakdance is a feature-rich page builder plugin for WordPress. One of the features you will get is popup builder. Since Breakdance is a technically a page builder plugin just like Brizy and Elementor, you can also create the popup on the visual editor. Breakdance comes with over 120 design elements in total. One of the elements is Form Builder, which you can use to create an email opt-in form and connect it with ActiveCampaign, MailerLite, and the similar services. Breakdance also has a built-in form submission manager in case you want to store the form submissions to your own database.

What about trigger types?

There are six trigger types you can choose from: on page scroll down, on page scroll up, on page load, after inactivity, exit intent, and on selector click. You can also set where your popup to show up as Breakdance supports display condition. You can even set a popup to show up based on the user role and login status. Furthermore, you can limit how often a popup to shown up based on page load and session.

Key features offered by Breakdance popup builder are:

  • Offers a full control over the popup design
  • Third-party integration supports
  • Ability to set a display condition
  • Supports multiple trigger types

The Bottom Line

Popup is a great marketing tool you can utilize to grow your website. You can make use of it to collect leads, offer exclusive deals, and so on. You can also use a popup for other needs as well. For instance, you can use a popup to lock a content, show a website menu in full-screen mode, and so on.

The ability to control the design is a crucial thing to note when picking a popup builder. Also, you need to be able to control how a popup to show up by setting the trigger type and display condition. With these three features, you can create a popup without sacrificing UX aspect on your website.

How to Highlight a Text in Elementor

In some cases, sometimes we need to attract attraction to our users by emphasizing some important information on your site. Highlighting a text is one way to attract your users’ attention. If you are an Elementeor user, lucky for you, you can highlight a text effortlessly.

This article will show you how to highlight a text in Elementor without the help of any add-on.

How to Highlight a Text in Elementor

Well, there are several methods to highlight a text in Elementor. In this tutorial, we would like to show you two ways that have strengths and weaknesses for each method; it depends on your scenario and your needs.

Option One (HTML Code Only)

This method will show you how to highlight a text in Elementor by adding the HTML code. To highlight with HTML code is support for all Elementor widgets with text. In this method, we will use a Text Editor widget.

Alright, go to the Elementor editor, select the Text Editor widget from the widget panel, then drag and drop it into the canvas area. Afterward, you can replace the text or edit and style up if you want to.

Please navigate the text editor and switch to Text mode on the widget settings.

Next, prepare the text that you want to highlight. This example will highlight two different texts (see the image).

Now, it’s time to add the HTML code to the text editor. Place the HTML code depending on the text/s you want to highlight.

  • Example Code
Don’t be too fast to  <span style="background-color: #ffff00;">highlight the weaknesses of other people.</span> That is the quickest way of <span style="background-color: #ffff00;">exposing your own weaknesses.</span>
  • Example Result

Note: You can change the highlight color by editing the hex color code in the HTML code.

Option Two (Inline Method)

This method will be better for you if you want to create a “template” for your highlight. You don’t need to write whole HTML code on your text editor; you only need to add the CSS class and property.

First, go to your WordPress dashboard and navigate to theme customizer (Appearance -> Customize).

Open the Additional CSS block on the theme customizer panel

Copy the simple CSS snippet below and paste it into the Additional CSS field.

.subscriber-highlight {
  background-color: #DADADA47;
  border-radius: 0.25rem;
  color: inherit;
  padding: 0.2em 0.4em;
  text-decoration: none;
  white-space: nowrap;
}

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

Next, go back to the Elementor editor. Like option one, you can add any Elementor widgets with text into the canvas area. In this example, we will use the Heading widget. Once you add, edit and style up your widget, please prepare the text you want to highlight.

Navigate the Title editor and add the simple HTML code (class and property only) to the Title editor field. Place the HTML code depending on the text/s you want to highlight.

  • Example Code
Get <span class="subscriber-highlight">FREE</span> plugin for your next project
  • Example Result

Note: You can customize your highlight by editing the value on the CSS snippet that you added on the Additional CSS. Such as background color, border radius, padding, etc.

The Bottom Line

This article shows you how easy to highlight text in Elementor without the help of any add-ons. As we mentioned earlier, the purpose of highlighting the text is to attract attention to important information. So, be careful when you use it. Please ensure that the text you highlight is only for important text so as not to be overused.

6 Free Elementor Single Post Templates to Download

The Theme Builder feature of Elementor allows you to create custom templates for your theme parts. One of which is the single post. In this context, single post template is the template that controls the appearance of the blog posts on your website. We have created some pre-made Elementor single post templates you can download for free in case you want to create a new single post template for your website.

Just like pages, you can also start your custom template from a pre-made template. You can find a bunch of pre-made templates on the template library of Elementor (which you can access by clicking the folder icon on the canvas area). Including templates dedicated to single posts. If you can’t find a template that suits you, there are alternative sources like ThemeForest to Creative Market to find Elementor templates.

As mentioned earlier, we have created some pre-made Elementor single post templates which you can download for free. These templates are complements to the template kits we offered earlier. If you are new to Elementor and haven’t created a custom single post template yet, you can refer to our post here.

Free Elementor Single Post Template

1. Dongker

Dongker is an Elementor single post template that has a simple design. Not many elements added to the template. You can only find elements like post title, post date, author name, and featured image on the hero section. Beside these elements, you can only find the post body on the second section. There are no elements like related articles or email opt-in form. Dongker is a suited option if you want your blog posts to be displayed in a simple, clean layout. The absence of sidebar offers a convenient reading experience to your visitors.

2. The Grey Stones

The layout of the hero section of The Grey Stones is a bit similar to the Dongker above where you will find a post title on the left side and the featured image on the right side. However, there is an extra element you will find on the left side, right beneath the post title: post excerpt. This element is useful if you rely on SEO to generate organic traffic. Also, you can utilize this element to write a brief summary of your blog posts before elaborating it further on the post body area.

The Grey Stones has more elements than Dongker. Beneath the post body, you will find elements like related articles and email subscription form, which you can connect with an email marketing plugin or service of your choice.

3. The Explorer

Looking for an Elementor single post template that offer a space to place a banner ad? The Explorer might be a suited option for you. You will find the banner ad space on the bottom section of the template, next to the related posts. The placement it aimed at not interrupting the reading experience of your visitors. The Explorer also offers an email opt-in form which you can connect with an email marketing tool you use.

4. Sedikit Hitam

Sedikit Hitam is a single post template inspired by the single post of GiteHub’s blog. A little CSS code is added to the template to add text gradient effect to the post meta and button text. Same as other single post templates above, Sedikit Hitam also adopts a sidebarless design approach to maintain the reading experience of your blog visitors.

5. Keep Going

Keep Going is another single post template that involves CSS code. The CSS codes are added to the Posts widget on the bottom section (recommended articles) to create a hover effect to the featured image. The other one is added to the read more element to turn the read more link into a button. If you have CSS knowledge, you can apply a custom styling using your own CSS code to the elements of the Posts widget as well as other widgets. We have created a list of Elementor widget selectors to ease your job.

6. Biru-biru

If you are a fan of the blue color, then Biru-biru is a perfect option for you. As you can see on the screenshot above, it applies a blue overlay which wraps the featured image on the background. Of course, you can change the color if you are interested to the template, yet not a blue fan. After importing the template, you can edit it to change the settings or add a new element.

Pro Tips

When creating a custom single post template using Elementor Theme Builder, you can use the Post Content widget to customize the body of your content. However, the widget is only capable of customizing the paragraph element. If you want to customize other elements as well (heading elements in particular), you can do so from Elementor Site Settings.

To access Elementor Site Settings, you can click the hamburger icon on the top-left corner on the Elementor settings panel and select Site Settings.

On the Site Settings panel, you can click the Typography menu.

As you can see, there are some elements you can customize here. You can click the pencil icon to set the typography (font family, font size, font style, and so on) of the elements. While to set the font color, you can click the color picker.

You can also set the paragraph spacing on the Body block. One thing to note: Since you have customized the paragraph element using the Post Content widget on the custom template, you don’t need to make any change on the Body block — other than setting the paragraph spacing.

From Site Settings, you can also customize the comment form fields. You can go to the Form Fields menu on the Site Settings panel to do so.

How to Create a Back-to-Top Button in WordPress (2 Ways)

According to some studies (first page rank by Backlinko and keep readers engaged by Medium), long-form content has proven to be more engaging and better for SEO. And long-form content also gives you more opportunities to convey more detailed information and more opportunities to get more backlinks as there is a positive correlation between word count and backlinks. However, we mustn’t ignore the user experience (UX) as it is also one of the most important aspects to keep the readers on your site.

If you have some long-form content posts on your site, then you may want to add the back-to-top button to your website posts as it’ll help your readers after a long content reading to get back to the top of the page to see the navigation menu and choose a new destination.

A theme like Divi comes with a built-in back-to-top button ready to be activated from the Theme Options. Or, if you’re using a theme builder like Elementor, you can easily add one to your website with these simple steps. But if you are using the default WordPress editor, no worries, as this tutorial will show you how to add a back-to-top button for your WordPress website.

Adding a Back-to-Top Button in WordPress

Now you know the benefit of adding a back-to-top button to your website, there are two ways we will show you in this tutorial:

  • Manually add custom code to the theme file
  • Using a WordPress plugin

Add a Back-to-top Button Manually (without a plugin)

If you don’t want to use a plugin for security reasons or don’t want to add more burden to your site, then this method is for you. You may want to take a backup of your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme since you’ll need to add some code to the functions.php file of your theme and add a JavaScript file to the theme js folder.

Step 1: Access Your WordPress Theme Directory

Once you’re ready, firstly, you need to access your WordPress website’s files either via File Transfer Protocol (FTP) or via your hosting file manager. Then navigate to wp-content themes your theme (the theme you want to add the back-to-top button) js folder. If your theme doesn’t have the js folder, you can create the folder manually and open up that folder. Here’s what it looks like in our hosting file manager.

Step 2: Create a JS File

Once you’ve inside the js folder, create a javascript file with topbutton.js as its name. Continue by opening the file, and pasting the following JQuery code there.

jQuery(document).ready(function($){
    var offset = 100;
    var speed = 250;
    var duration = 500;
        $(window).scroll(function(){
            if ($(this).scrollTop() < offset) {
                      $('.topbutton') .fadeOut(duration);
            } else {
                      $('.topbutton') .fadeIn(duration);
            }
        });
     $('.topbutton').on('click', function(){
            $('html, body').animate({scrollTop:0}, speed);
            return false;
            });
});

The code above will add a fade-in and fade-out animation to the button when the page is scrolled, and add a scroll-up animation when the back-to-top button is clicked on your page.

Step 3: Prepare the Button

The next step is to prepare the button image file itself. You can create the icon from scratch or you can download it from a site such as fontawesome.com or flaticon.com. Then make sure the size of the image is not too large (we use an arrow image with a 50px size). Once the icon is ready, upload the image file via WordPress Media Library then copy its URL for the CSS snippet later.

Step 4: Enqueue the JS File

Once the image is ready, navigate to the Appearance Theme File Editor from your WordPress admin dashboard to open up the Theme Editor page to tell the WordPress that you want to use the JavaScript you created before by opening the functions.php from the Theme Files, then paste the following code into the bottom of the file.

function my_scripts_method() {
     wp_enqueue_script(
           'custom-script',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           array( 'jquery' )
     );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Once you’ve placed the code, save the file by clicking the Update File button

Step 5: Add CSS Snippets

Continue by navigating to the theme customizer which is on Appearance Customize from your WordPress admin dashboard then paste the following CSS snippet to the Additional CSS block. Change the example URL of the back-to-top button (“http://yourimageurl.com/backtotop.png“) according to your image URL.

.topbutton {
     height:50px;
     width:50px;
     position:fixed;
     right:5px;
     bottom:5px;
     Z-index:1;
     background-image:url("https://yourimageurl.com/backtotop.png");
     background-repeat:no-repeat;
     display:none;
}

The CSS snippet above will add the button image you’ve prepared as its background, and adjust the width and position of the button. You can place the CSS snippet at the bottom of the editor, and once the snippet is ready, save the changes by clicking on the Publish button.

Step 6: Make the Button Appear on Footer Area

The final step is to make the button appear at the bottom of your website. Let’s pick the footer area since this area typically appears at the bottom of our every web page and after the main content. To do so, head back to the Theme Editor page then open up the footer.php file from the Theme Files to add the following HTML snippet into it.

<a href="#" class="topbutton"></a>

That’s it, your button back-to-top must be ready by now. Try to open up a page with a footer area then scroll down a bit or all the way down and you’ll see the button appear on the bottom corner ready to be clicked.

Add a Back to Top Button Using WordPress Plugin

Using a WordPress plugin to add some functionality to your site or to solve some problems you experienced on your site is one of the fastest and easiest methods that you can try. For adding the back-to-top button, we choose the WPFront Scroll Top plugin,

WPFront Scroll Top plugin allows you to add a button for your visitors to easily scroll back to the top of the page with additional functionality such as displaying the button only when the user scrolls down the page and adding an animation effect to it. And you can get the plugin from wordpress.org for free. Let’s begin by installing and activating the plugin!

Once the plugin is installed and activated, start by navigating to Settings Scroll Top from your WordPress admin dashboard, then tick on the Enabled option to add a back-to-top button to your website’s entire page.

There are many settings and options that you can use to customize the button shape and behavior like changing the button size, auto-hide the button after some time passed, changing the button location, setting the button to appear on some pages only, or making the button not appear on some pages and many more.

Once you decide on the settings, click on the Save Changes button to apply the changes and you’ll get your button ready for action.

The Bottom Line

Long-form content gives you more opportunities to convey more detailed information and also more opportunities to get more backlinks as there is a positive correlation between word count and backlinks. However, we mustn’t ignore the user experience (UX) as it is also one of the most important aspects to keep the readers on your site. This article showed you one of the UX optimizations for your site which is by adding a back-to-top button to the page to help the user get back to the top of the page after reaching the bottom of long reading to see the navigation menu and choose a new destination.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,500+ 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.