PROJET AUTOBLOG ~ La Ferme MerMouY!


Elegant Themes Blog

Site original : Elegant Themes Blog

⇐ retour index

How to Reveal Column Content on Hover with Divi (Free Download!)

Friday 15 February 2019 à 17:00

In one of the latest Divi posts, we’ve shown you how to make hidden row content appear on hover. Today, we’ll show you how to use the same type of approach to reveal column content instead. The approach we’ll handle is similar and will allow you to create all kinds of designs that have a nice hover effect on desktop, but work well for smaller screen sizes without hover options as well.

We hope this tutorial will inspire you to create all kinds of interactive designs for the websites you build! At the end of the post, you’ll be able to download the JSON file and tweak it to your needs.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

As you can notice in the GIF below, we have a smooth hover transition that reveals column content on hover.

reveal column content

Mobile

On smaller screen sizes, on the other hand, the column content will already be shown without the need for hovering.

reveal column content

Let’s Start Recreating!

Add New Regular Section

Spacing

Open a new or existing page and add a regular section to it. Open the section settings and add some top and bottom custom padding in the spacing settings.

reveal column content

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

reveal column content

Sizing

Without adding any modules yet, open the row settings and make some changes to the sizing settings. These settings will allow the row to take up the entire width of the screen and it’ll also help remove all the space between columns.

reveal column content

Spacing

Go to the spacing settings of the row next. Here, we’re going to substitute the space we’ve removed in the previous step by adding custom padding values.

reveal column content

Add Text Module #1 to Column 1

Add Content

Time to start adding modules! Start with a Text Module in column 1. Add some H3 content of choice.

reveal column content

H3 Text Settings

Then, go to the heading text settings and make some changes to the appearance of the H3 content.

reveal column content

Spacing

Add some custom spacing values to the Text Module next.

reveal column content

Box Shadow

And give the module a subtle box shadow.

reveal column content

Add Text Module #2 to Column 1

Add Content

Continue by adding another Text Module right below the previous one. Add some paragraph content of choice.

reveal column content

Text Settings

Then, go to the design tab and make some changes to the text settings.

reveal column content

reveal column content

Spacing

Play around with the custom margin and padding values in the spacing settings as well.

reveal column content

Border

And add a left and right border to the module using the following settings:

reveal column content

Add Button Module to Column 1

Add Copy

The next module we need in the first column is a Button Module. Add some copy of your choice.

reveal column content

Alignment

Then, go to the design tab and change the button alignment to center.

reveal column content

Button Settings

Continue by opening the button settings and change the appearance of the button to make it match with the overall design we’re aiming to achieve.

reveal column content

reveal column content

Spacing

Play around with the spacing values of the Button Module too.

reveal column content

Clone Modules in Column 1 Twice & Place Duplicates in Remaining Columns

Once you’re done adding the three different modules to column 1, you can go ahead and clone each one of the modules twice. Place the duplicates in the two remaining columns to achieve the same design in each one of the columns.

reveal column content

Change Text Color of Text Module #1 in Column 2

Open the first Text Module in column 2 and change the text color.

reveal column content

Change Text Color of Text Module #1 in Column 3

Do the same thing for the first Text Module in the third column.

reveal column content

Add Overlay Text Module to Column 1

Add Content

Now that we have all the column content we need, we can add the overlapping element that’ll hide the content before hovering. To achieve this, we’re going to use another Text Module. Go ahead and add another one to the first column. Make sure this is the last module in the column. Add some content of your choice.

reveal column content

Gradient Background

Continue by adding a gradient background to the module.

reveal column content

Text Settings

Change the text settings next.

reveal column content

Spacing

And create a shape out of the module by adding some custom padding values. We’re also adding some negative top margin to create the overlap between this module and the column content. The content you hide behind the Text Module will not be clickable. That’s why it’s important to keep the call to action, such as the button in our example, visible without hover.

reveal column content

Border

Add some rounded corners to the Text Module next.

reveal column content

Box Shadow

Along with a subtle box shadow.

reveal column content

Default Filters

Then, go to the filters settings and make sure the opacity is ‘100%’ by default.

reveal column content

Hover Filters

Change the opacity on hover to ‘0%’. This will make the module disappear and will allow all the column content to appear instead.

reveal column content

Custom CSS

To make sure the Text Module remains on top of all column content, add two lines of CSS code in the advanced tab of the Text Module.

z-index: 99;
position: relative

reveal column content

Visibility

And hide the entire module on tablet and phone. As mentioned at the beginning of this post, we’re showing all column content on smaller screen sizes to make sure the user experience visitors have is good.

reveal column content

Clone Overlay Text Module Twice & Place Duplicates in Remaining Columns

Once you’re done modifying the overlay Text Module, go ahead and clone it twice. Place each one of the duplicates in the two remaining columns.

reveal column content

Change Gradient Background of Overlay Text Module in Column 2

Change the gradient background color of the first duplicate.

 

reveal column content

Change Gradient Background of Overlay Text Module in Column 3

And do the same for the second duplicate as well.

reveal column content

Download The Section for FREE

To lay your hands on the column reveal section, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Preview

Desktop

reveal column content

Mobile

reveal column content

Final Thoughts

In this post, we’ve shown you how to reveal column content on hover. You can use this approach for any kind of website you create to add an extra level of interaction. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Reveal Column Content on Hover with Divi (Free Download!) appeared first on Elegant Themes Blog.

7 Best WooCommerce Social Media Plugins

Friday 15 February 2019 à 13:00

In the early days of the internet, you could often put a product online and sell it. You’d have to market and advertise, but that doesn’t even begin to cut it today. Without a sustainable marketing strategy that includes social media, your shop may go unnoticed. Luckily there are a lot of WooCommerce social media plugins that can use to get the word out and keep it out there so your store gets the attention it deserves.

Starting out with WooCommerce Social Media

We need to discuss a couple of things before actually getting into the social media plugins. First, why WooCommerce? And second, what’s your marketing strategy going to be?

To the first point, we’re focusing on WooCommerce because it’s huge. More than likely, if you’re on WordPress and running an eshop, you’re going to be using WooCommerce. Because of that ubiquity, some of the best social media plugins focusing on ecommerce are specifically for Woo.

And to the second, you need a marketing strategy. Without one, you might honestly be shouting into the void. Tweeting about your new items is great. But only if you’re targeting the right people. And that those people see your tweet. By sitting down and working out your social media marketing strategy beforehand, you can undoubtedly rise above the chatter on social media platforms.

Things to Consider for Social Media Marketing

Social media marketing doesn’t have to be a spreadsheet and data analytics game. You can keep just a few points in mind that will make these plugins work better for you without having to always stress over your numbers. Of course, you’ll want to look at the numbers to see what is working, but if you keep these points in mind, you can hopefully get some big ones.

1. Automate What You Can

Admittedly, you can’t ignore the social aspect of all this. However, you can set up a schedule for your messages to go out, give users the ability to share products they like, and just make sure that you’re not the one who has to hit Send on every single nugget out there about your store. Using Buffer or CoSchedule for this is a great idea.

Even if it’s not full automation, but a plugin or an app that makes a manual job into a smoother process, you will save time and get a better product out there — both socially and on your store.

2. Mobile First

Google has made changes to its ranking algorithms that make it so that mobile responsiveness and page-load time affects your position in results. So you know that you’ve got to consider mobile-first there. But you should also consider mobile-first marketing, too. Instagram Stories (and to a lesser extent Snapchat Stories and Facebook Stories) are one of the highest-engagement methods of marketing out there. They’re ephemeral, sure, but their value is measured in more than the 24 hours they’re live.

But you can’t do this stuff on desktop. You have to use a mobile device to share this type of content, and they are (mostly) consumed on mobile devices. When using mobile-to-mobile social strategies, you can’t think of traditional social advertising campaigns. When using a Story, let’s say, as a way to market a WooCommerce product, you would be far more candid and personal than you would be if you were targetting mobile users for a Facebook advertising campaign.

While Facebook ads that target mobile users do work, users are more likely to respond and remember you if you are not just another ad in their timeline, but a product or personality they genuinely enjoy.

3. Respond, Respond, and Respond

When someone messages you, write them back. On Facebook, you need to do this within an hour (or quicker), and you will get a badge letting them know that you’re responsive and available for whatever they need. Without a salesperson in a brick-and-mortar store to walk up to, you need to show your online customers that you are just as easy to approach. On Twitter, reply to tweets! People love it when brands and companies talk back to them. Even a Retweet of a kind comment or funny story about your brand can go a long way.

By taking an active part in the conversation, you appear like a real person and not just a name or logo on a website. There are a lot of tools that can help you with this, such as Intercom, HubSpot, and even Facebook Messenger.

But the big thing here is to respond and interact and engage. When your users know you, they trust you, and when they trust you, they buy your stuff.

4. Pay for Ads

As much as we love social media and the idea of it being a free, open place where ideas flow and conversations are had, the reality is that it’s an advertiser’s dream. So it should be for you, too. Whether you invest in a $5 campaign on Facebook or a $500 campaign to have your full-screen ads show in people’s Story feeds, social advertising is fantastic. Now, the beauty of doing this isn’t just that you’re getting eyes on your brands and products. You can use the plugins below to entice people who see your ads to click or message you.

Maybe you tell them if they click through that they get a scratch-off discount (via StoreYa) or that a quick share of the post will get them a discount through YITH Share. Anything you pay to get the clicks and referrals will be made up for by the increase in business and engagement.

The Best WooCommerce Social  Media Plugins

We are going to be looking at a number of plugins today that may serve different functions, but they have the same end goal: to make your WooCommerce store the best it can possibly be. So whether it’s a sharing plugin, a login, or something else entirely, integrating these into your WooCommerce store is bound to generate a few sales. Hopefully, more than a few.

1. YITH WooCommerce Share for Discounts

WooCommerce Social Media Plugins

YITH is a known quantity in WordPress plugins, so it should come as no surprise their Share for Discounts plugin would be a top-tier product. The premise behind it is simple: a user shares a product on their social media platform, and then they get a discount on their order.

That’s it.

You can customize pretty much everything about it, including the shortcode and what step of the checkout process they share. And if you want it to go by email, you can give them that option, too. Basically, you’re offering a 10% (or whatever %) discount for a little word-of-mouth advertising. And we all know that’s priceless. For $59 for a single store, you’ll make your money back in no time.

Price: $59 | More information

2. WooCommerce Wishlist Plugin

WooCommerce Social Media Plugins

Shopping carts are great. People adding items to their basket is the penultimate goal of your store. But not everyone is ready to buy at any given moment. Some people shop around. Most people shop around. And once they leave your store, they might not be back. You need to give them a reason to come back.

And you can do that by providing them with an easy-to-use wishlist so they can add items they’re considering. On top of that, this particular plugin lets your users share their wishlist to social media platforms so that not only are they showing off your products, they’re inciting others to make a purchase on their behalf. Those potential customers become twice as valuable because they’re likely to buy something for themselves, too.

Or use your wishlist, and the process continues.

Price: FREE | More information

3. YITH WooCommerce Wishlist

WooCommerce Social Media Plugins

Another useful wishlist plugin comes from YITH. If the free version above doesn’t have all the bells and whistles that you want, and you’d like more granular control, YITH’s WooCommerce Wishlist plugin will satisfy that need. Users can have multiple lists, either public or private, you can see what people are wishing for most often, and even let them directly contact you about an item from the wishlist UI. This is a premium plugin for $89.99, but if you want or need the extra features, it’s worth a look.

Price: $89.99 | More information

4. Ultimate Social

WooCommerce Social Media Plugins

Sharing button plugins are pretty straightforward. So when you look at which one you want to use on your store, it can be hard to decide. Ultimate Social is a $20 plugin that has WooCommerce integration so that you can place the buttons wherever you want on the product page. If you prefer a floating bar, that’s available, too. Customization for skins and colors, multiple languages, and shortcodes make this one a solid choice to get people to shout about your store.

Price: $20 | More Information

5. WooCommerce Instagram

WooCommerce Social Media Plugins

If you market on Instagram, you definitely need to check out the WooCommerce Instagram plugin. With this plugin, you can display photos from the network via hashtag. All you do is enter #woocommerce on a particular product, for instance, and that item’s content area would populate with photos from that hashtag. If you use custom hashtags for your marketing, you can use those and highlight actual use of the item for your customers. Regardless, showing related photos and real-world uses for any item you’re selling only makes it more desirable.

Price: $29 | More information

6. StoreYa Shop to Facebook for WooCommerce

WooCommerce Social Media Plugins

Facebook marketing is profitable. There are no two ways around it. StoreYa wants to make it even more profitable by putting your WooCommerce store directly onto the social network. And your other social networks onto the network. Their whole deal is that you can consolidate your userbase into interacting with your brand in fun ways. You can offer scratch-off coupons for people (which are still just as fun digitally and give that same dopamine hit as real life), Groupon-style group deals where a certain number of people have to engage to enable it (which makes it more likely for folks to share your content), and there are tabs where you can display whole Pinterest boards, Tweets, or YouTube channels. That way, people can interact with you and your products in multiple ways without having to leave their preferred platform.

They offer a free plan of up to 20 SKUs that you can use to see if the platform works for you, and then you can upgrade to higher tiers that start at $9.99 per month (with annual billing). It’s absolutely worth a shot if you use Facebook for your store anyway. Having the store actually live on Facebook is an amazing feat most WooCommerce social media plugins can’t begin to compete with.

Price: FREE with premium plans from $9.99 per month | More information

7. Review for Discount

WooCommerce Social Media Plugins

Just like the title sounds like, you can encourage your customers to leave a review on a previous purchase for a discount on a future one. You will email the user a code after the review is submitted, and they can be used as an upsell tactic or simply a gesture of goodwill and building trust with your customers. By using a plugin like this, you’re inviting user-generated content for your site, and that means you’re able to share those reviews on social media (or perhaps they will get yet another coupon from a plugin like YITH one above). For $29, your store can definitely benefit from this.

Plus, user reviews drive sales more than almost anything else around, so the more/higher reviews a product has, the more likely it will sell in the future.

Price: $29 | More information

Conclusion

A lot more goes into social media than just writing a few words and pasting a link. With these WooCommerce social media plugins,  your profiles will definitely get the attention they deserve, and your WooCommerce sales will start flooding in. Whether you want users to share your products, you gamify the deals you provide, or just give them a good, old-fashioned wishlist so they can ooh and ahh over your merch, these tips and plugins will definitely increase your social capital. And just plain capital, too.

What are the best WooCommerce social media plugins that you’ve tried so far?

Article featured image by Divergent / shutterstock.com

The post 7 Best WooCommerce Social Media Plugins appeared first on Elegant Themes Blog.

How to Create an Image Gallery that Changes from Black-and-White to Color with Divi’s Gallery Module

Thursday 14 February 2019 à 17:00

Image galleries continue to be a popular feature for websites. And with Divi, adding a beautiful and responsive image gallery to your website almost too easy. This leaves some extra time to consider ways to make those images standout. One simple way to make your images pop is to start with a black-and-white version of each image that changes to the color version when hovering over the image. This effect has been around for a while but continues to be an effective and creative way to engage users with a surprising display of a beautiful image.

In this tutorial, I’m going to show you just how easy it is to create a gallery of images that changes from black-and-white to color with Divi’s Gallery Module. With Divi’s built-in filter effects and hover options, you can do this with a few clicks!

Let’s get started!

Today’s Before & After

Here is what the image gallery looks like by default using the Divi Image Gallery:

black and white to color image gallery

Here is the new image gallery that changes the black-and-white images to color when hovering over each image.

black and white to color image gallery

What You Need to Get Started

For this tutorial, all you will need is the Divi theme installed and active. After that, you will need to create a new page, add a title, and click to use the Divi Builder. Then select the option “Build from Scratch”. Publish your page and then click the button to build on the front end. Now you are ready to go.

Setting up the Image Gallery

Using the Divi Builder on the front end, add a new regular section with a one-column row. Then add the Gallery Module to the row.

black and white to color image gallery

In the Gallery Settings, select the gray plus icon in the Gallery Images box to start adding the images from your media library.

black and white to color image gallery

For this example, I’m adding a total of 12 images so that the images will display nicely with the default four-column grid layout on desktop.

Then update the following options:

Images Number: 12
Show Title and Caption: NO
Show Pagination: NO

black and white to color image gallery

Now jump over to the design tab and update the following:

Zoom Icon Color: transparent
Hover Overlay Color: transparent
Image Saturation: 0% (default), 100% (hover)
Image Brightness: 50% (default), 100% (hover)

Setting the image saturation to 0% by default basically tones down the color of the image all the way down leaving only black and white. Then we simply set the saturation back to 100% to bring back the color. The image brightness set to 50% just makes the image a little darker by default. This is optional of course, but I like the contrast it creates when hovering over the image. It makes the color image pop out even more in my opinion.

black and white to color image gallery

At this point, the hover effect of each image is full functional and will change your images from a black-and-white version to a color version.

All we need to do is make our gallery fullwidth with a little spacing between each image.

Creating a Fullwidth Layout for the Image Gallery

To create the fullwidth layout for the image gallery, let’s save our gallery settings for now and open the row settings. Under the design tab, update the following:

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 1

Custom Padding: 0px top, 0px bottom

black and white to color image gallery

This will make the gallery span the full width of the page and take out any margin between the images. If you like this style you can keep it of course, but I’m going to show you how to add your own custom margin between those images.

To add a custom margin between the images in the gallery, open the gallery module and update the following:

Custom Margin: 5px top, 5px bottom, 5px left, 5px right
Border Width: 5px
Border Color: transparent

black and white to color image gallery

Final Result

Now let’s check out the final result of our design.

black and white to color image gallery

And, since our image borders are transparent, we can easily change the background of our row to different colors or gradients.

black and white to color image gallery

Final Thoughts

I hope this tutorial will give you a little inspiration for making your image galleries standout. For some reason, changing images from black-and-white to color seems to make those images look even more beautiful on hover. And don’t forget to explore the countless design variations possible with Divi’s built-in style options. Have fun!

I look forward to hearing from you in the comments.

Cheers!

The post How to Create an Image Gallery that Changes from Black-and-White to Color with Divi’s Gallery Module appeared first on Elegant Themes Blog.

How to Use Font Awesome On Your WordPress Website

Thursday 14 February 2019 à 13:00

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites, and they probably have almost any shape or brand that you’d need. And best of all? It’s free. Second to best of all,  it’s easy.

Font Awesome WordPress Icons

Using the Font Awesome library on your WordPress site is relatively painless. Once you follow these simple steps, you’ll be able to lower your page-load time and create some really clean, crisp designs using these icons as part of your work.

One thing to remember is that (most of the time) the Font Awesome icons are going to be delivered to your site as actual fonts. Hence the name Font Awesome. You will be able to style and manipulate them in every way that you normally could a font character, using CSS via @font-face and the Font Awesome font-family.

Because of that, you won’t have to worry about sizing or spacing for each individual browser or viewport. If it sounds great, that’s because it is. And here’s how you do it:

Installing Font Awesome

While there is a manual way to install and use Font Awesome, there’s a better way for WordPress users. The fine folks over at FA have released an official Font Awesome WordPress plugin, and it works beautifully.

Font Awesome WordPress

With the plugin installed and activated, you now have access to the [[icon name]] shortcode as well as the HTML snippets. As long as you keep the handy-dandy FA icon list around so you know exactly what icon you need. You will see on the plugin’s settings page (found under Settings – Font Awesome) how things are set up by default. In general, these are fine to keep and use. Most people won’t need anything else.

Font Awesome WordPress

The Method option is probably the most important for most folks. You can toggle between Webfont or SVG. While SVG gives you more power and features (such as power transforms and masking), the Font Awesome CDN will deliver the icons as SVG files and not as a font. While that is better in some ways, the SVG isn’t recognized by as many browsers, nor does WordPress always play well with SVG images. So we suggest playing it safe with the webfont version.

So does Font Awesome, for that matter: If you’re not sure of the difference, or don’t know why you’d need to use SVG, then sticking with the default webfont method is probably easiest.

To use the Font Awesome icons on your WordPress site,  it’s simple. Just add <i class=”fab fa-wordpress”></i> anywhere you want an icon to appear. Make sure to check the icon library to know what name to put in.

Font Awesome WordPress

Note: the shortcodes in the plugin are hit-and-miss. Some icons render perfectly well, while others show up blank. We recommend you stick to the HTML insertion unless you see that the shortcode works for you. See below for an example of the WordPress example above not rendering, while the camera icon does.

Font Awesome WordPress

And you’re done. The Font Awesome WordPress plugin is great for folks who aren’t comfortable going into their theme or files to insert the otherwise required code. However, if you are comfortable doing that, you can follow these instructions to get the Font Awesome icons on your site.

Installing Font Awesome Icons Manually

The very first thing you need to do is go to the Font Awesome website. From there, click on the Start Using Free button. They do offer paid plans for folks who have high-traffic sites and need an enterprise solution, but the general public can get away with the free version. You get 1,500 icons for free, and over 5,000 variants on the Pro plan.

Font Awesome WordPress

The next step is to simply copy/paste. But you will want to make sure that you’ve highlighted the webfont option, just like we discussed before.

Font Awesome WordPress

Most themes have a place for you to insert code into the <head> of the site automatically. In Divi’s case, for instance, you would go into Theme Options – Integrations and paste this code into the field labeled Add code to the Head of your blog.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Font Awesome WordPress

When you hit save, you can start including any of the icons you want, just like we did above. Only, you do not have access to the shortcode by doing this.

If Your Theme Doesn’t Support Code Integration

If you can’t find a spot like this  in your theme, it’s also just as easy to do manually. You will have to dig into the Core files of your theme to do so, however, but it’s a very quick copy/paste, and is (generally) pretty safe to do. Go to Appearance – Editor in your WP dashboard, and find the header.php file.

Font Awesome WordPress

Find the line where </head> is written, and before it, you need to paste the same code from Font Awesome. Press Update File, and you will be able to begin using the FA icons immediately. Again, you don’t get a shortcode by installing Font Awesome this way.

Also, keep in mind that anytime you edit a theme file, you want to use a child theme. By doing so, you prevent the changes you’ve made from being overwritten when the theme updates.

More Options for Installation

And if you have other, more specific needs for Font Awesome, they do offer a slew of ways to get access to the library. From NPM and Yarn installs, to Sketch and React integration, they have a ton of options if you need it for more than WordPress.

Font Awesome WordPress

Styling Font Awesome Icons

Now that you have them installed, it’s time to make the icons pop. You can do this using CSS because each of the icons is governed by a CSS class. The two most-often used styles are color and size. You can either include the CSS styling in your stylesheets, or you can do it inline. In general, you may want to use inline styling because icons like these don’t tend to be universal across a whole site.

The Font Awesome website has examples of how to do this. They show sizing using their igloo icon and the additional class like fa-xs or fa-xl or fa-2x for specific size.

Font Awesome WordPress

Additionally, if you need the icon to be relative to a specific size and the absolute values won’t work, you can place it in its own <div> to make it work within your constraints.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Wrapping Up

And that’s it! Awesome, right? Whether you’re using the Font Awesome WordPress plugin or inserting the code manually, it doesn’t take more than a few steps to get your site up and running. Font Awesome is popular for a reason, and some of that comes from its ease of use. So get out there and be awesome!

What’s your favorite way to use Font Awesome icons?

Article featured image courtesy of Font Awesome

The post How to Use Font Awesome On Your WordPress Website appeared first on Elegant Themes Blog.

6 Microinteractions That Will Make Your Divi Site More Enjoyable (Tutorial + Free Download)

Wednesday 13 February 2019 à 17:00

Microinteractions are a great way to enhance user experience as they interact with your site. Slight animations of icons, buttons, or images can cue the user to take action in a fun and purposeful way. There are countless microinteractions you can include on your site, but a good rule of thumb is to keep them “micro”. You don’t want to overdo it.

Today I’m going to show you some simple microinteractions you can add to your Divi website using the Divi Builder and Custom CSS (no jquery). I’ll be concentrating on those elements that users normally interact with – buttons, icons, images.

Let’s get started.

Sneak Peek

Here is a quick look at the microinteractions we will be building in this tutorial.

#1 Scaling Images on Hover

divi microinteractions

Start Building Microinteraction #1

#2 Bouncing Scroll Down Icon

divi microinteractions

Start Building Microinteraction #2

#3 Rotating Blurb and Button Icons on Hover

divi microinteractions

divi microinteractions

divi microinteractions

Start Building Microinteraction #3

#4 Sliding Button Icons to Show and Hide Button Text

divi microinteractions

divi microinteractions

Start Building Microinteraction #4

#5 3D Image Perspective Rotation

divi microinteractions

Start Building Microinteraction #5

#6 Button Slider Microinteraction

divi microinteractions

Start Building Microinteraction #6

What You Need to Get Started

To get started, all you really need is Divi. We will be our examples from scratch using the Divi Builder on the front end.

Download the Files for Easy Access

I’ve included a download at the bottom of this article for those of you who want to have a working example of these microinteractions up a running on your website the quick and easy way. That way you can have a working example as you follow along with the tutorial.

Download

#1 Scaling Images on Hover

divi microinteractions

Scaling refers to adjusting the size of an element. So if we wanted to make an image larger on hover (for example), all we need to do is add a little CSS snippet to scale our image by a certain percentage. This allows us to create a small but effective microinteraction when a user hovers over an image. Let me show you how you can apply this to three popular Divi modules that use images – the image module, the blurb module, and the person module.

Go ahead and create a new section with a three column row so we can add each of our examples to each column.

Scaling an Image on Hover using the Image Module

To add the scaling image microinteraction to an image using the image module, first add an image module to the first column.

divi microinteractions

Then add an image to the module of your choice.

divi microinteractions

Next, add the following CSS class under the advanced tab in your image settings:

CSS class: scale-image

This allows us to target this specific module when adding our custom CSS to the page settings. To add the CSS needed to scale the image, open the page settings and add the following custom CSS:

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

Now check out the result.

divi microinteractions

Scaling an Blurb Module Image on Hover

To add the same effect to an image in a blurb module, first add a blurb module to the second column.

divi microinteractions

Then add an image of your choice to the blurb module.

divi microinteractions

Then add the following CSS class to the blurb module.

CSS Class: scale-blurb-image

divi microinteractions

With this CSS class in place we can now add our custom CSS that targets the blurb image. Open the page settings and add the following Custom CSS:

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

divi microinteractions

Here is the result.

divi microinteractions

Scaling a Person Module Image on Hover

To scale an person module image on hover, add a person module to the third column and add an upload an image of your choice the module.

divi microinteractions

Then add the following CSS Class to the person module.

CSS Class: scale-person-image

divi microinteractions

Now open page settings and add the following Custom CSS.

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

Check out the result of all three modules with the scaling image microinteraction.

divi microinteractions

#2 Bouncing Scroll Down Icon

divi microinteractions

This next microinteraction adds a bouncing animation to the scroll down icon built in to the fullwidth header module. This a subtle way to further inform the visitor that there is more info further down the page. And you can choose to have this bouncing effect by default or on hover.

Here’s how to do it.

First add a new fullwidth section with a fullwidth header module.

divi microinteractions

Then update the following:

Text & Logo Orientation: Center
Show Scroll Down Button: YES
Icon: [select icon of choice]

Then add the following CSS Class:

CSS Class: bounce-scroll-icon

This class will allow us to target the scroll icon with css to animate the icon by default on page load.

divi microinteractions

Then duplicate the fullwidth header module and update the CSS Class to the following:

CSS Class: bounce-scroll-icon-hover

divi microinteractions

This class will allow us to target the scroll icon with css to animate the icon on hover.

Then open the page settings and add the following Custom CSS to activate the bouncing animation for our two examples.


.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}

divi microinteractions

Check out the result of the two examples. The top header scroll icon will animate by default and the bottom header scroll icon will animate on hover.

divi microinteractions

#3 Rotating Icons on Hover

divi microinteractions

Adding a slight rotation to an icon can be an effective microinteraction to engage users to click an element. Since the two most popular Divi modules that have built-in icons are the button module and the blurb module, I thought I would show you how to add rotation to those icons on hover.

Rotating a Button Icon on Hover

Divi already comes with a helpful microinteraction for button icons by default. When hovering over the button, the button icon appears and moves to the right indicating that by clicking the button you will be redirected to another page. But, if you wanted to get a bit more creative with it, you can rotate the icon for a completely new microinteraction.

To rotate a button icon on hover, first add a new section with a one-column row. Then add a button module to the row.

Then update the button settings as follows:

Use Custom Styles for button: YES
Only Show Icon On Hover for Button: NO
Button Icon: [choose icon of choice]

Then add the following CSS Class:

CSS Class: rotate-button-icon

divi microinteractions

With our icon and CSS Class in place, all we need to do is add the following custom CSS to page settings:


/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

This will rotate the icon counter-clockwise by 90 degrees initially and then back to 0 degrees on hover.

divi microinteractions

Here is the result.

divi microinteractions

Rotating a Blurb Module Icon

To rotate a blurb module icon, let’s first create a new section with a three-column row. Then add a blurb module to the column 1 and update the following blurb settings.

Use Icon: YES
Icon: [add icon of choice]
Text Orientation: center
CSS Class: rotate-blurb-icon

divi microinteractions

Now add the following Custom CSS to page settings:

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

divi microinteractions

Here is the result.

divi microinteractions

This also works with the icon placed on the left of the title. All you need to do is update the blurb settings as follows:

Image/Icon Placement: Left
Title Line Height: 1.7em

divi microinteractions

Check out the result.

divi microinteractions

#4 Sliding Button Icons to Show and Hide Button Text

divi microinteractions

Button Text to Icon on Hover

This microinteraction displays button text with an icon by default and then moves the icon to cover the text on hover.

Here’s how to do it.

Add a new section with a one-column row. Then add a button module to the row and update the following button settings:

Use Custom Styles for Button: YES
Button Background Color: #0c71c3
Button border width: 0px
Button Icon Color: #ffffff
CSS Class: button-text-to-icon

divi microinteractions

Now add the following custom CSS to page settings:

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

Now check out the result.

divi microinteractions

Button Icon to Text on Hover

You can also create the opposite effect of showing the button Icon initially and then sliding the icon over to reveal the button text. To do this, duplicate the button module and update the following button settings:

Button Text Color(default): #0c71c3
Button Text Color(hover): #ffffff

divi microinteractions

Then replace the CSS Class with the following:

CSS Class: button-icon-to-text

divi microinteractions

Then add the following custom CSS to page settings:

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

divi microinteractions

Now check out the result.

divi microinteractions

#5 3D Image Perspective Rotation

divi microinteractions

This microinteraction starts with an image module image styled with 3D image perspective and rotation by default. Then on hover, the image resorts to a normal display of the image.

Here’s how to do it.

First, create a new section with a three-column row. Then add an image module to column 1 and add an image to the image module of your choice.

divi microinteractions

For this effect, we can add our Custom CSS directly to the module. Go to the advanced tab and add the following Custom CSS under the Main Element:

Main Element CSS (default):

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

divi microinteractions

This css is doing two things to our image using the Transform CSS Property. First, it adds a perspective of 700px which is the amount of distance between the image and the perspective of the user when viewing the page. The CSS also adds rotation to the image. The rotateY(45deg) rotates the image on the Y axis 45 degrees (clockwise). And with perspective in place, the image now has a three-dimensional appearance.

Main Element CSS (hover):

transform: perspective(700px) rotateY(0deg);

This takes out the rotation of the image on hover so that it looks normal so the users can get a better look at the image.

divi microinteractions

Now let’s check out the result.

divi microinteractions

Let’s do a couple of more examples of this microinteraction. Go ahead and copy the image module and paste it in column 2 and column 3. In the duplicate image module in column 2, update the custom CSS as follows:

Main Element CSS (default):

transform: perspective(700px) rotateX(45deg);
transition: all .2s;

Main Element CSS (hover):

transform: perspective(700px) rotateX(0deg);

Notice the only difference here is the letter “X” after “rotate”. This tells the image to rotate on the x axis at 45 degrees. Then we take set the degree value to 0 on hover to bring it back to normal.

divi microinteractions

Here is the result.

divi microinteractions

In the duplicate image module in column 3, update the Custom CSS as follows:

Main Element CSS (default):

transform: perspective(700px) rotateY(-45deg);
transition: all .2s;

Main Element CSS (hover):

transform: perspective(700px) rotateY(0deg);

divi microinteractions

Notice the only difference between this CSS and the CSS used in the image in column 1 is the “-45deg” value. This rotates the image on the Y axis counter-clockwise.

Here is final result of all three image microinteractions using perspective and rotation.

divi microinteractions

Don’t forget to add even more built in hover effects and designs using the built-in setting of the image module. For example, this would be a great place to add box shadow effect as well.

#6 Button Slider Microinteraction

divi microinteractions

For this last microinteraction, we are going to create a button slider that shows additional information (actually a completely new button) on hover. The basic idea is to give your column a custom height and then stack two button modules inside the column. The top button will be what the user sees by default, but the second button will be the button with “additional info” that the user will see when hovering over the button.

Here’s how to create it.

This button will span the full width of the row column so it works best if you add your button to a row with a column that doesn’t get too wide. For this example, I’m going to use a one-column row and then set a max-width to my row so that the button doesn’t get too wide on large browsers.

Create a new section with a one-column row. Then add a button module to the row and update the following button settings:

Button Text: “Download”

Button Alignment: center
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background Color: #0c71c3
Button Border Width: 0px
Button Border Radius: 0px
Button Icon: see screenshot
Button Icon Color: #ffffff
Button Icon Placement: Left
Only Show Icon On Hover for Button: NO

Custom Margin: 0px bottom

divi microinteractions

Next, duplicate the button you just created so that the duplicate stacks just below the button you just created. Then update the duplicate button settings as follows:

Button Text: MP3(3.5 mb)

Button Text Color: #0c71c3
Button Background Color: #ffffff
Button Icon: see screenshot
Button Icon Color: #0c71c3

divi microinteractions

Before we go on to style our row, we need to add a CSS class to the top button. Open the top button settings and add the following CSS class:

CSS Class: top-button

divi microinteractions

Now that both buttons are in place, let’s update the row settings with a custom width that will serve as the max-width of our buttons and a column CSS class for our Custom CSS we will be adding to page settings. Open the row settings and update the following:

Custom Width: 200px
Column CSS Class: slider-button

Make sure to add the CSS class to the column and not the row.

divi microinteractions

Now we are ready to add the custom CSS. Open the page settings and add the following CSS:

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

This CSS will only work with the button at the default size. This is because we have to give the column a fixed height in order to hide the second button until hover. Right now the column height (with the class “slider-button”) is given a height of 50px. This accounts for the 2px border given to the column as well. On hover, the top button (with the class “top-button” is moved up out of view with a top margin of -48px (the height of the button minus one of the 2px borders). But, if you change the font-size or padding of the buttons, you will need to adjust the height of the slider-button class along with the top button margin accordingly.

Here is the final result.

divi microinteractions

Don’t forget that you can style the buttons with different text/information and icons for your own use. It is a great way to educate users with additional information in a unique call to action.

FREE Download: Get the Premade Layout and CSS file for This Tutorial

If you want to get a jump start on what these microinteractions will look like on your website, you can download the zip file below. Once you download the zip file, locate the file on your hard drive. It will be called “microinteraction-examples.zip”. When you unzip the file, you will see two files. The file named “microinteraction-examples.json” is the Divi layout. It will need to be uploaded to your Divi Library. You can do this from your WordPress Dashboard by navigating to Divi > Divi Library and then clicking the import button at the top of the page. The file named “microinteractions.css” contains the Custom CSS used in the tutorial. This CSS will need to be copied into the page settings custom CSS or into the Theme Customizer Additional CSS box. You can also use Divi’s drag and drop feature to drag the microinteractions.css file directly into the Divi Builder once your layout has been loaded. This will automatically add the css to your page settings.

Final Thoughts

I hope you find these microinteractions useful. They are simple to use with Divi (using only CSS) throughout your site. For sake of time and simplicity, I used the basic default styles of modules, but feel free to adjust design options as needed for more creative styles. Also, don’t hesitate to adjust the CSS for these examples to fit your needs or come up with something completely new.

I look forward to hearing from you in the comments.

Cheers!

The post 6 Microinteractions That Will Make Your Divi Site More Enjoyable (Tutorial + Free Download) appeared first on Elegant Themes Blog.