DEV Community: Aliko Sunawang

How to Create Fill-in Button Hover Effect in Elementor

Aliko Sunawang — Tue, 21 Apr 2026 06:43:59 +0000

Understanding the Logic
Implementing the Logic in CSS Code
Applying the Code to Elementor Button Widget
- Applying the Code on Elementor Pro
- Applying the Code on Elementor Free
Premade Button Hover Effects

A little trick to add a premium impression to your Elementor design is by adding a button hover effect outside the default hover effects that Elementor offers. And it requires custom CSS.

In this post, I will show you how to create a button hover effect widely used by premium sites: fill-in effect.

Understanding the Logic

In Elementor, the Button widget has the class selector of .elementor-button. In the HTML structure, the selector belongs to the <a> tag. Inside the <a> tag, there are two <span> tags for the text and icon elements.

Elementor wraps the button with a <div> to make it easy for designers to style up the button.

In Elementor itself, you can add a new class to a widget. Including the Button. When you add a new class, it will be assigned to the widget wrapper, the <div>. And here is the key part.

To create a fill-in hover effect, you can use the ::before pseudo selector to add a new element(layer) before the button wrapper.

To make the ::before layer invisible on normal state, you can use the scale function on the transform property and set the value to 0.

Then, you can set the function value to 1 on the hover state to make the ::before layer be visible.

To set the slide direction, you can use transform-origin property.

Implementing the Logic in CSS Code

Here is an example of the CSS snippet for fill-in hover effect with the direction from left and back to left.

.my-hover-effect .elementor-button::before{
    content:'';
    position: absolute;
    background:#000000; /* change the fill color here */
    width:100%;
    height: 100%;
    top:0;
    left: 0;
    transform:scaleX(0);
    transform-origin: left;
    transition: transform .6s ease;
}

.my-hover-effect .elementor-button{
    overflow: hidden;
    vertical-align: middle;
    position: relative;
}

.my-hover-effect .elementor-button:hover::before{
    transform:scaleX(1);
}

.my-hover-effect .elementor-button-text, .my-hover-effect .elementor-button-icon{
    z-index: 1;
}

There are four blocks on the CSS snippet above. Here is the explanation:

Block 1

This block sets the background color of the ::before pseudo element black and sets the position to absolute. I use the scaleX function so the effect takes place in a horizontal direction. The left keyword on the transform-origin property instructs the slide effect to start from the left direction to the right direction.

To change the slide direction, you can change the left keyword to right.

Block 2

This block plays a role as a "container" for the button to hold the sliding overlays without them spilling outside the borders.

With this block, you have freedom to set the border radius of the button.

Block 3

This is where the fill-in (slide) effect takes place when you hover your cursor over the button.

Block 4

This block moves the button text and button icon to the top layer on the button (you can use a higher z-index value if you want). This makes sure that these elements (text and icon) keep visible on hover.

Applying the Code to Elementor Button Widget

Before you apply the CSS snippet to a Button widget, you can style up the button via the Elementor editor just like usual.

You can set things like background color, text color, and so on.

The CSS snippet I provided above has the CSS class of my-hover-effect. You can add this class to the CSS Classes field on the Advanced tab in the Elementor settings panel.

Applying the Code on Elementor Pro

Since Elementor Pro allows you to add custom CSS directly to a widget, you can simply paste the above code to the Custom CSS field in the editor.

Simply go to the Advanced tab and open the Custom CSS field. Paste the code here.

Applying the Code on Elementor Free

If you don't have Elementor Pro, you can use the HTML widget to add the CSS code. So, add the HTML widget to the canvas area. You can place it anywhere. Not necessarily to the same container as the Button widget.

Once the HTML widget is in place, type <style></style> and place the CSS snippet between these tags.

Premade Button Hover Effects

If you are interested, I have created 40+ hover effects for the Elementor Button widget. You can use the effects on both Elementor Free and Pro

Download 40+ Elementor Hover Effects

How to Change Icon Size on Elementor Button Widget

Aliko Sunawang — Sun, 19 Apr 2026 07:54:43 +0000

Changing button icon in Elementor Pro
Changing button icon in Elementor Free
Prebuilt button templates

Elementor lacks styling options for buttons. You can't even change the icon size.

Since most Elementor users don't have CSS knowledge (because it is marketed as a no-code web builder), I assume there are many users who seek a solution to resize the button icon. And I will cover it in this post.

First thing first. The Elementor button icon has the CSS class selector of elementor-button-icon.

If you know CSS, you can use the selector to resize the icon using the scale function on the transform property. You can place your code anywhere on your website.

If you have no CSS knowledge at all, then you can follow the step-by-step tutorial below:

Elementor Pro

First, add the Button widget to your design and add the icon you like. You can use the default icons that Elementor offers or custom icons (SVG) from websites like SVG Repo and Bootstrap Icons.

Next, go to the Advanced tab and open the Custom CSS block. Then, type the following code in the CSS editor box.

The code:

selector .elementor-button-icon{
    transform: scale(1.5);
}

You can replace the number inside the brackets according to the size of the icon you want. You can enter either an integer or decimal.

A little note. If you use a custom SVG file for your icon, you need to directly target the SVG element. So, your code should look like this:

selector .elementor-button-icon svg{
    transform: scale(1.5);
}

Elementor Free

Since Elementor Free doesn't allow you to write CSS code directly on a widget, you need to use another path.

There are two paths that you can use for this matter. First, you can use the HTML widget. Second, you can use WordPress Theme Customizer and place your code on the Additional CSS block.

In this post, I will show the first path because it's the easiest one.

Start by adding the Button widget and adding the icon. Once everything is in place, add the HTML widget. You can place it anywhere on your page.

Then, write the following code in the editor.

The code:

<style>
    .my-custom-icon .elementor-button-icon{
    transform: scale(1.5);
}
</style>

Next, select the Button widget and go to the Advanced tab. Paste the CSS class of my-custom-icon to the CSS Classes field.

Same as Elementor Pro, you need to add the svg selector on your code if you use a custom SVG file for your icon.

Prebuilt Button Templates

If you are interested, I have created several pre-built button hover effects for Elementor. You can use them on both Elementor Free and Pro.

Download the Button Hover Effects

40+ Elementor Button Hover Effects Created with Custom CSS

Aliko Sunawang — Mon, 13 Apr 2026 06:53:59 +0000

The new stats showcased at its homepage reveals that Elementor is now powering over 21 million websites on the internet. This is a huge number and there is one clear reason why Elementor managed to achieve this achievement.

With Elementor, anyone can build their own website regardless of their coding skills level.

Even if you are not a coder, you can still build a decent website with Elementor thanks to its drag-and-drop editing experience.

AI-powered website builders are popping up almost every day in today’s AI era but they can’t really dethrone Elementor (or WordPress in general).

That’s because they don’t offer something that Elementor has been offering: a joyful visual web building experience.

Elementor’s visual editor may not be the best, but it is one of the most user-friendly ones. And that’s the exact reason to get Elementor to be at the current position.

Although you can create a website with Elementor without needing to have coding skills, there are some situations where coding knowledge is needed.

Like when you want to create a custom hover effect to a button to add a premium vibe to your website.

Issues with Elementor’s Built-in Hover Effects

In Elementor, you can create a button using the Button widget. This is the widget dedicated to creating a button. You don’t need to create a component like, for instance, Framer.

You can also sweeten the look of your button by adding a hover effect. And here is the problem.

Elementor doesn’t really offer hover effects worth using. At least if you want to add a premium vibe to your website. The hover effects that Elementor offers are too generic and boring.

Also, you have no control over the hover effect of individual button elements (text and button). The button hover effect is applied directly to the whole button.

Elementor has a built-in custom CSS feature to apply a custom hover effect to a button, but I bet not all Elementor users have CSS knowledge.

And for this exact reason, I created these hover effects.

You can probably create the same hover effects using a third-party add-on. But installing an add-on is not always a smart solution. Especially if you have a big concern on site performance and plugin management.

I only used CSS to create the hover effects. No JavaScript, no external resources. Because I understand how painful it is to have your site’s performance getting slower due to extra HTML requests and JavaScript rendering.

Hover Effects Demo

You can watch the following video to view the button hover effects I created.

Elementor Button Hover Effects Demo

totheweb.wistia.com

Or if you prefer to view the live demo on a live page, you can click the link below.

VIEW LIVE PREVIEW

Using the Button Hover Effects

Like I said, I only used CSS to create the hover effects. In Elementor itself, there are two options to add custom CSS.

Pro users can add a CSS snippet directly to a widget and can target a specific element using CSS class.

To make the CSS snippet apply only to a specific widget, you can use selector as the prefix.

What if you don’t have the pro version?

You can use the HTML widget to place your CSS snippet or you can also add it to the Additional CSS in WordPress Theme Customizer.

If you want to use the HTML widget, make sure to type the <style></style> before you can start to write the CSS code.

Since I use Elementor Pro, I added the CSS snippet of each effect directly to the Button widgets.

I put together the Button widgets (complete with the hover effects) to a page and exported it to a JSON file so that you can import it on your project.

You can get the JSON file of the page below.

DOWNLOAD JSON FILE

After downloading the JSON file, you can create a new page and edit it with Elementor and then import the JSON file.

To use a hover effect, you can simply copy the Button you want to use the hover effect of to the page you work on.

One thing. The copy-paste ability works only on the same domain. This means, you can’t copy a Button widget from one domain to another.

Which also means that you need to import the JSON file to a different domain if you want to use it.

Here is the documentation of the hover effects.

Adding Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Aliko Sunawang — Tue, 12 Sep 2023 05:56:39 +0000

Divi comes with a built-in module called Blog dedicated to displaying content on your WordPress website. The elements you can display on your content feed include post thumbnail/featured image, post title, and post meta (author, date, and so on). Several built-in styling options are available to style up each element. Unfortunately, there is no built-in option to add a zoom effect -- or other effects -- on hover.

In this post, I will show you how to add a zoom effect to the post thumbnail on Divi blog module.

Steps to Add Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Although Divi has no built-in option to add a hover effect to the post thumbnail on the Blog module, you can achieve it via custom CSS. In Divi itself, you can add custom CSS to a certain module element directly without defining the selector. You can access the custom CSS feature by going to the Advanced tab on the module settings panel. Simply open the Custom CSS block.

The text editor fields available on the Custom CSS block varied, depending on the module. On the Blog module itself, you can find a Featured Image field. As you can guess, you can use the editor field to add custom CSS to the post thumbnail. You can actually add a hover effect directly to the post thumbnail via this field by switching to the hover mode (by clicking the cursor icon). However, the result is a bit weird as you can see on the animated GIF below.

There is a better way to add hover effect to the post thumbnail on the Divi blog module.

The steps I will below involve selector declaration. You can read my previous post to learn more about how to use CSS selector on Divi.

First, add the Blog module and set the layout to Grid. Make sure to enable featured image on the module. Style up the blog per your preference. Once done, add a Code module and paste the following snippet:

<style>
.et_pb_post .entry-featured-image-url {
    margin: 0;
}
.et_pb_blog_0 .et_pb_image_container {
    overflow: hidden;
}
.et_pb_blog_0 .et_pb_image_container img {
    transition: all 0.95s ease;
    -moz-transition: all 0.95s ease;
    -webkit-transition: all 0.95s ease;
}
.et_pb_blog_0 .et_pb_post:hover img {
    transform: scale(1.15) rotate(1deg);
    -moz-transform: scale(1.15) rotate(1deg);
    -webkit-transform: scale(1.15) rotate(1deg);
}
</style>

The above snippet (credit to UtilizeWP) will result in the following hover effect.

You can change the hover effect by editing the transform: scale(1.15) rotate(1deg); line on the above snippet. You can refer to this page to learn more about CSS transform.

If you apply the CSS snippet above using the Code module, the effect will only apply on the current page only. If you want to apply it to all Blog modules on your website, you can place the snippet to Divi Theme Options.

Code Explanation

First, the code adjusts the image spacing using the margin property. Next, it keeps the zoomed image in the frame using the overflow property. The transform property is used to add the zoom effect on hover, while the transition property adds a smooth transition for the zoom effect.

Using Custom SVG Icon on Divi Blurb Module

Aliko Sunawang — Sun, 13 Aug 2023 06:55:46 +0000

Divi is a visual website builder built exclusively for WordPress. It comes with a number of design elements -- called modules -- to make it easy for you to create the pages of your website. One of the modules offered by Divi is Blurb.

Blurb is a Divi module that you can use to add things like features list, post author, and other elements containing image and text element. In addition to image, the Divi Blurb module also supports icon. In Divi itself, you can add an icon from Font Awesome and the icons created by the Divi. The Blurb module doesn't allow you to upload an SVG icon file.

However, since Divi -- and WordPress -- are open source, you can edit or add the code to make things work the you want. You can follow the instructions below to use a custom SVG icon on the Divi Blurb module.

Using Custom SVG Icon on Divi Blurb Module

To use a custom SVG icon on the Divi Blurb module, first you need to the following PHP snippet the functions.php file of Divi.

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

What the above code does is to allow SVG upload in WordPress (the default WordPress configuration doesn't allow SVG upload).

Once you are done adding above code, edit a page with Divi. On the Divi Builder editor, add the Blurb module. Instead of icon, you can use image on the module. So, make sure the Use Icon option is disabled on the Image & Icon settings block.

Next, click the plus icon to select the image file you want to use. You can select SVG icon you want to use.

That's it.

Using Custom Class Selector in Divi

Aliko Sunawang — Sun, 09 Jul 2023 09:04:32 +0000

Some WordPress page builders allow you to add custom CSS. This feature is quite useful if you understand CSS as you can achive any style with your knowledge. In Divi, adding custom CSS has been made even easier. You can directly apply custom CSS to a module without defining the selector. The best part is that you can apply different CSS to each device type (desktop, tablet, and smartphone).

While it sounds great (the ability to add custom CSS without defining the selector), the approach also has some drawbacks. For some cases, defining the selector by your own is the best way to add custom CSS.

Imagine this example. You want to apply custom style using custom CSS to hyperlinks on the post content. Normally, you can use these selectors et_pb_post_content a. However, since Divi does't allow you to define the selector yourself on a module, you can't use the selectors. As a comparison, in Elementor, you can define the selector yourself when adding custom CSS to a widget so that you can combine the predefined selectors and HTML element selectors. Here is an example:

Using Custom Class Selector in Divi

Is there is a solution if you want to use your own selector? Divi has a native module called Code, which you can use to add custom code. The module supports three languages: HTML, JavaScript, and CSS. You can use it to use your custom CSS selector.

In this post, I will show you how to use the Code module of Divi to create a gradient heading.

First, add the Code module to your page. Add your CSS code to the editor. Don't forget to add your code between the opening tag of <style> and the closing tag </style>. Here is an example:

<style>
.gdrnt h1, h2, h3, h4{
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}
</style>

As you can see, the above CSS code has five selectors (one custom class selector -- gdrnt -- and four HTML element selectors). The the combination of these selectors mean target elements with the class selector of gdrnt that have either H1, H2, H3, or H4.

If you add the class selector to a module that has one of these heading levels, the gradient will be applied.

In addition to custom selector, you can also use the predefined selectors on the Code module of Divi. For instance, you can use these selectors et_pb_post_content a to target the links on the post content on a custom template created with Divi Theme Builder.

Creating Gradient Heading in Divi Using CSS

Aliko Sunawang — Sat, 01 Jul 2023 10:20:45 +0000

Divi is a popular WordPress theme that has a built-in page builder called Divi Builder (available as an integral part instead of a separate plugin). Just like other page builders like, for instance Elementor, Divi Builder can also make it easier for you to create the core pages on your WordPress website, with a visual editor. There are a bunch of design elements (called modules) you can use when creating a page with Divi Builder. One of which is Text.

The Text module, as the name suggests, is designed to add text element to your page. This module offers plenty of built-in styling options to make your text look eye-catching, including the ability to create a gradient heading without needing to add custom CSS.

However, for a certain reason, you might prefer to use custom CSS to create a gradient heading. Especially if you get used to gradient tools like Gradienta and CSS Gradient.

Creating Gradient Heading in Divi Using CSS

To create a gradient heading in Divi using custom CSS, first, you can prepare the CSS gradient first. To ease your job, you can use online CSS gradient generators as mentioned above. Here is an example of CSS gradient generated with Gradienta:

background: linear-gradient(157.92deg, #b1b9f1 0%, #288cbd 51.59%, #2c2cf0 100%);

Once your CSS gradient is ready, open the Divi Builder editor and add the Code module. Add the following code to the editor.

The code:

<style>
.gdrnt{
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}
</style>

You can replace the gradient to your liking. Please notice that the above code has the class selector name of gdrnt.

Next, add a Text module and replace the default text on the text editor. Make sure to specify a heading level.

Next, switch to the Text mode and add the class.

That's it. You can enjoy the result.

Choosing The Right Hosting Service for Your Elementor Website

Aliko Sunawang — Wed, 28 Jun 2023 08:38:00 +0000

Elementor is a popular tool that makes it easy for you to create a website with WordPress. As a page builder plugin, it offers a drag and drop website creation experience. Meaning that you don't need to deal with code. Even so, Elementor also facilitate it in case you want to add custom code for certain functionalities that are not offered by Elementor by default. You can read my previous covering how to use CSS selector in Elementor.

Before you can create a WordPress-based website with Elementor, you definitely need to have a web hosting service in advance. Basically, you can use any hosting service that supports WordPress, including cPanel-based traditional shared hosting services. However, for a smoother experience, I don't recommend this type of hosting service (cPanel-based). Especially if you plan to use the Form widget available on the Elementor Pro.

For the sake of resource usage saving, most traditional web hosting services disable the send_mail function of PHP, which is required by Elementor Form widget. Also, most cPanel-based web hosting services usually have lower PHP memory limit than managed WordPress hosting services. This can lead to Elementor editor failed to load.

Learn the Technical Specs Before You Subscribe to a Hosting Plan

If you ever noticed, most WordPress hosting services don't disclose the technical specs of their hosting service such as PHP memory limit, PHP version, and so on. They mostly only disclose the surface features like cache, SSL, and FTP, which are basically very basic features.

If you can't scrap the technical specs offered by the hosting service you plan to subscribe to, you can read reviews written by users.

Here are the minimum system requirements demanded by Elementor:

PHP version: 7.4 or higher
PHP memory limit: 256 MB
WordPress version: 5.9 higher
Database: MySQL 5.6 or higher / MariaDB 10.0 or higher

Recommended Hosting Services for Elementor

- Elementor Hosting

In case you haven't known yet, Elementor offers a managed hosting service to run your website. Previously, the service was called Elementor Cloud but it has been rebranded to Elementor Hosting

Elementor Hosting is technically a Google Cloud-powered WordPress hosting with Elementor (Free and Pro) pre-installed. In other words, you don't need to install Elementor yourself if you use the service. The main benefit if you use Elementor Hosting is that you can enjoy the newest Elementor features as Elementor usually provides its newest features to Elementor Hosting before they are released on plugin version.

The hosting service from Elementor comes with features like built-in CDN (powered by Cloudflare), cache, schedule backups, file access (via FTP), and database access.

- Kinsta

Kinsta has several things in common as Elementor Hosting. First, it uses Google Cloud as the main hosting infrastructure. Second, it relies on Cloudflare for the CDN feature. Speaking of CDN, Kinsta could be the best option if you have a big concern on this feature. Kinsta is a managed WordPress service that is transparent the most regarding its CDN feature.

You can monitor the CDN usage via its sophisticated built-in analytics feature. You can also disable CDN for troubleshooting need (some hosting services don't allow you to disable CDN). The CDN space itself varied, depending on the plan. The cheapest plan offers the CDN space of 100GB.

The PHP configuration of Kinsta is more than enough to run Elementor. It offers the memory limit of 256MB.

- WP Engine

WP Engine is one of the most popular WordPress hosting services with over 600,000 live websites according to BuiltWith. It is also a recommended hosting to run Elementor. Mainly because it offers great PHP configuration. WP Engine offers PHP memory limit of 512MB. You can use all the Elementor features, including form builder. WP Engine also uses Google Cloud -- and other cloud services -- for its hosting infrastructure.

The key feature offered by WP Engine includes built-in CDN -- powered by Cloudflare. Unlike Kinsta, WP Engine offers no option to disable the CDN. Also, it offers no analytics feature to monitor the CDN usage.

- Pressidium

Pressidium is an underrated WordPress hosting service. But it is definitely recommended to run Elementor and other page builder plugins. Pressidium is a managed WordPress hosting service that has a great PHP configuration. Instead of using third-party services, Pressidium built its own hosting infrastructure from the ground. There are four main data centers offered by Pressidium, spreading in the US, Europe, North America, and Asia. Pressidium also comes with built-in CDN feature (powered by StackPath).

- Pressable

If you are looking for a managed WordPress hosting service that is powered by Jetpack, Pressable is a great option. All Pressable plans come with Jetpack pre-installed. However, the features you can unlock depend on the plan you subscribed to.

Pressable itself is a web hosting service from Automattic. As you know, Automattic is the company behind WordPress.com. So, if you want to use the same hosting technology as the one powering WordPress.com, you can try Pressable. The PHP configuration offered by Pressable is more than enough to run Elementor and all the features. The memory limit offered by Pressable is 256 MB.

- SiteGround

If you are looking for a managed WordPress hosting service to run multiple Elementor-powered WordPress websites, SiteGround can be considered. The hosting service offers hosting plans that allow you to install unlimited websites, with more affordable prices. SiteGround also uses the cloud technology from Google Cloud for its hosting infrastructure. In addition, it also adopts Cloudflare for CDN (need to be enabled manually). The PHP configuration of SiteGround is also more than enough to run Elementor smoothly whereby its offers 768MB.

You can easily switch between PHP versions for troubleshooting need. SiteGround offers 5 different PHP versions as follows:

PHP 7.3
PHP 7.4
PHP 8.0
PHP 8.1
PHP 8.2

Other features offered by SiteGround include built-in file manager and email hosting.

Conclusion

Elementor is a WordPress-based website building tool. You can use it to create WordPress-based website that focus on the frontend. Elementor comes with some handy features, including form builder which you can connect with services like ConverKit and MailerLite. In order to make the website creating run smoothly without any issue, you need to use an appropriate hosting service. Elementor itself offers an official managed hosting service you can try. Alternatively, you can use the hosting services mentioned above.

Setting Object Fit in Divi Image Module

Aliko Sunawang — Tue, 14 Mar 2023 08:59:49 +0000

Divi is a popular tool to create a website with WordPress. With Divi, you can get your website project done more quickly thanks to its visual editor. If you are an agency or freelancer, Divi is a perfect Elementor alternative as you can create unlimited websites using a single license.

The visual editor of Divi comes with useful design elements (called modules) you can make use of to create a page. Each module also comes with built-in styling options. One of modules offered by Divi visual editor is Image. The module -- as you can guess -- is aimed at adding image element to your page.

The Image module of Divi comes with some styling options such as CSS filters, box-shadow, border, and so on. Of course, you can also set the size of image by setting the heigh and width.

A setting option that is not available in Divi Image module is object-fit. This setting is quite useful, especially to create a rounded image. A little CSS snippet is required to apply object fit in Divi.

Setting Object Fit in Divi Image Module

CSS has a property called object-fit which you can use to resize an object (image and video) to fit its container. However, the implementation is a bit more complex in Divi -- compared to Elementor -- as Divi doesn't allow you to use the class selector on an individual module (read my previous post to learn how to use CSS selector in Elementor).

So, how to set the object fit of the Image module in Divi?

First, add the Image module just like usual and set the width and the height. Once done, click the gear icon on the bottom side to open the page settings panel. On this panel, go to the Advanced tab.

Next, add the following CSS snippet to the CSS editor (the Custom CSS field).

.et_pb_image img{
object-fit: cover;
}

You can replace the object-fit value to your liking. The object-fit property itself supports the following values:

fill: image is forced to fill the entire container area
contain: image is displayed in the original aspect ratio
cover: image is also fill the entire container area, but only the certain portion according to the

Don't forget to click the green checklist icon to apply the change.

The above method will apply the object fit to all Image modules on the same page. If you want to target a specific Image module, you can add an ID selector to the above snippet. The snippet will be:

#yourclasshere .et_pb_image img{
object-fit: cover;
}

Next, edit a column belong to the Image module you want to apply the object fit to and add your CSS ID on the Advanced tab on the settings panel.

That's it. You can publish your page once done editing it.

Adding Hover Effect to Link in WordPress Posts if Your Site is Built with Elementor

Aliko Sunawang — Sat, 03 Dec 2022 07:15:33 +0000

There are lots of ways to make your website looks more appealing to visitors. One of which is by adding hover effect to links. Some WordPress themes might have a built-in setting to add link hover effect. In case your theme doesn't have one, you can simply add yourself by adding custom CSS to theme customizer.

As you have known, CSS has a built-in option to add hover effect to an element selector, including the a selector which is used to target hyperlink. You can simply add the :hover to the element selector you want to add the hover effect to. That said, to add hover effect to hyperlink, you can type a:hover before the opening curly bracket on your CSS code.

Here is a code snippet for a simple hover effect for hyperlink:

a: hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

Adding Link Hover Effect in WordPress

As mentioned earlier, if your theme has no built-in setting to add link hover effect, you can add one yourself by adding custom CSS to theme customizer. Theme customizer itself can be accessed by going to Appearance -> Customizer on your WordPress dashboard. On theme customizer panel, you can open the Additional CSS block and add your CSS code here.

If you paste the above code snippet to the Additional CSS block without modifying it, the hover effect will be applied to all hyperlinks on your website.

If you want the hover effect to be applied to blog posts only, you can add the class selector of .single before the a element selector. So, your code would look like this one:

.single a: hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

Adding Link Hover Effect in WordPress If Your Website is Built Elementor

Elementor has a theme builder feature to create custom templates for your site parts, including the blog post template. If you use this feature for your blog posts, you need to replace the class selector on the above code. You can replace the .single class selector with the .elementor-widget-theme-post-content class selector.

.elementor-widget-theme-post-content is a pre-defined class selector from Elementor for the Post Content widget. Post Content itself is an Elementor widget to style up the body of your content (e.g. blog post). So, your code would look like:

.elementor-widget-theme-post-content a:hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

If you want to apply the hover effect to other custom Elementor templates (e.g. archive page templates) on your website, you can simply replace the class selector with the selector of the widgets you use on your templates.

How to Add Reading Time Estimator in Elementor

Aliko Sunawang — Fri, 18 Nov 2022 08:40:03 +0000

Step 1
Step 2
Styling up the text
Pre-built templates

The adoption of Elementor is getting more massive in the WordPress community. Many users use it to create a wide range of website types in WordPress, including blog.

Elementor has a theme builder feature which is great for blogging. You can use it to create custom templates for every single part of your blog, including the single post (blog post) template.

Creating a custom single post template with Elementor theme builder allows you to control everything. From the design to the post elements (post title, post meta, post content, and so on).

One of the elements you can add to your custom single post template is a reading time estimator.

Adding Reading Time Estimator in Elementor

Reading time estimator is not available as a default Elementor feature. Not even WordPress. To add it to your WordPress blog, you need to add a new custom function.

Step 1

To add a new custom function in WordPress itself, you can either edit the functions.php file belongs to your theme or using a plugin like Code Snippets. For the first option, you can go to Appearance -> Theme File Editor on your WordPress dashboard. Select the functions.php file on the right panel to edit it.

If you haven't done this before, make sure to back up your website first just in case everything doesn't work the way you expected. If you use a managed WordPress hosting service like Kinsta, Pressable, or Flywheel, manually backup your website is not necessary as they already have a built-in backup feature.

Click the Publish button once you are done editing the file.

Here is the code of the custom function you need to add:

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');

You can add the code above right after the last line of the functions.php file content.

What the above code does is get the total words from the post content and then divide it by 260. The calculation result is converted into a shortcode on the last line. This will make it easy for us to display the calculation result on the frontend.

Step 2

You can display the result of the above calculation on any editor that supports shortcode, including Gutenberg (the default editor of WordPress), Divi, to Brizy.

To display it on the custom single post you created with Elementor theme builder, first, go to Templates -> Theme Builder on your WordPress dashboard and select the custom single post template you want to display the reading estimator on. Edit it.

On the Elementor editor, drag the Shortcode widget to the canvas area and type [wpbread]

Update your custom Elementor template.

Styling Up the Text

The text of the reading estimator inherits the global typography settings on your WordPress site. To style it up, go to the Advanced tab on the settings panel and type selector .elementor-shortcode{} on the Custom CSS block. .elementor-shortcode is the selector of the Shortcode widget of Elementor.

You can simply put your custom typography setting between the curly brackets. Here is the example:

selector .elementor-shortcode{
    font-family: helvetica;
    font-size:16px;
}

Pre-Built Elementor Single Post Templates

Reading time estimator is ideally be added to single post template. I have created professionally designed single post templates for Elementor in case you are interested.

Download pre-built single post templates

Using CSS Class to Show/Hide an Element by Login Status in Elementor

Aliko Sunawang — Sat, 12 Nov 2022 07:25:21 +0000

Say you have a WordPress-based blog created with Elementor. Your blog relies on ads to generate revenue. Suddenly, you have an idea to accept membership on your blog. One of the features you plan to offer is an ad-free reading experience. Unfortunately, Elementor has no built-in feature to cover such a need.

A simple solution to the above case is by installing a third-party add-on. Alternatively, you can add an additional function to handle the job. In this post, I will show you how to show/hide an element in Elementor by taking advantage of CSS class selector.

Step 1: Add a New Function to WordPress

First, you need to add a custom function on your WordPress blog. In WordPress, you can add a new function by editing the functions.php file of your theme. Or you can also use a plugin like Code Snippets to add a custom function without editing a theme file (functions.php).

Here the code of the function:

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

The above code will check the class of the element (logged-in-condition and logged-out-condition). If the class is logged-in-condition, the element will not be shown. Conversely, if the class is logged-out-condition, the element will be shown.

Step 2: Add the CSS Classes to Your WordPress Blog

Once done with step one above, you can go to theme customizer to add the following CSS code. The below code adds two CSS classes to your WordPress website as covered above.

.logged-in-condition .hide-logged-in { display: none!important; } .logged-out-condition .hide-logged-out { display: none!important; }

To add the code above, you can go to theme customizer (Appearance -> Customize). Open the Additional CSS block and paste the code to the available field.

Click the Publish button to apply the code.

Step 3: Apply the CSS Class

Once done with the two steps above, the last step is to apply the CSS class. Edit an Elementor page (or custom template) containing an element you want to hide. Select the element (section, column, or widget) and go to the Advanced tab on the settings panel. Paste the CSS class to the CSS Classes field.

You can paste the hide-logged-in to hide the element. While to show the element, you can paste the hide-logged-out

You can use the above custom function to page builders other than Elementor such as Divi , Breakdance, to Brizy. You can even use it on Gutenberg as Gutenberg also allows you to add a CSS class to an element (block.)

DEV Community: Aliko Sunawang

How to Create Fill-in Button Hover Effect in Elementor

Table of Contents

Understanding the Logic

Implementing the Logic in CSS Code

Block 1

Block 2

Block 3

Block 4

Applying the Code to Elementor Button Widget

Applying the Code on Elementor Pro

Applying the Code on Elementor Free

Premade Button Hover Effects

How to Change Icon Size on Elementor Button Widget

Table Of Contents

Elementor Pro

Elementor Free

Prebuilt Button Templates

40+ Elementor Button Hover Effects Created with Custom CSS

Issues with Elementor’s Built-in Hover Effects

Hover Effects Demo

Elementor Button Hover Effects Demo

Using the Button Hover Effects

Adding Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Steps to Add Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Code Explanation

Using Custom SVG Icon on Divi Blurb Module

Using Custom SVG Icon on Divi Blurb Module

Using Custom Class Selector in Divi

Using Custom Class Selector in Divi

Creating Gradient Heading in Divi Using CSS

Creating Gradient Heading in Divi Using CSS

Choosing The Right Hosting Service for Your Elementor Website

Learn the Technical Specs Before You Subscribe to a Hosting Plan

Recommended Hosting Services for Elementor

- Elementor Hosting

- Kinsta

- WP Engine

- Pressidium

- Pressable

- SiteGround

Conclusion

Setting Object Fit in Divi Image Module

Setting Object Fit in Divi Image Module

Adding Hover Effect to Link in WordPress Posts if Your Site is Built with Elementor

Adding Link Hover Effect in WordPress

Adding Link Hover Effect in WordPress If Your Website is Built Elementor

How to Add Reading Time Estimator in Elementor

Table of Contents

Adding Reading Time Estimator in Elementor

Step 1

Step 2

Styling Up the Text

Pre-Built Elementor Single Post Templates

Using CSS Class to Show/Hide an Element by Login Status in Elementor

Step 1: Add a New Function to WordPress

Step 2: Add the CSS Classes to Your WordPress Blog

Step 3: Apply the CSS Class