Checklist WordPress: what to check before launching a website

Checklist WordPress: what to check before launching a website

by | Jun 24, 2016 | Tips & Tricks, Tutorial | 0 comments

TIPS & TRICKS, TUTORIAL

Checklist WordPress:
what to check before launching a website

Follow us on

Fabio Sarcona, Web Developer, Italy

24 Jun 2016

Share75
Tweet
Share
75 Shares

Before launching a website it is essential to make sure that it is fully functional and that every request of the customer has been developed.

But it can happen that carelessness or lack of methodology, you do encounter errors (in some cases, even very serious) that are not good for their professional image.

In this article, you will find a checklist useful to avoid any errors in the design phase and to establish an audit methodology that will save you time and most importantly, the disappointments .

Of course, it is not a definitive list of control because each project may require specific controls, but it certainly will give you a basis on which to rely for an independent evaluation of the reliability of the site.

1. Complete all customer requirements

  • Verification of requests: if the customer has agreed on a list of features of the site or graphic to be developed, make sure you have completed all tasks including any required changes during development.
  • Create a document (example: pdf / excel / word) with the data for access to WordPress Hosting account and domain (if purchased separately).
  • Account test: If you have created some accounts for testing, remember to delete them..
  • Copyright: Check for copyright and / or Credits: as photo credits or snippet code.
  • Text test: If you have the filler text (Lorem ipsum), be sure to delete it and replace it with the final content.
  • Customizations test administration: If you customized the WordPress administration panel, make sure that this works for all user roles used by the customer. If uses the Divi Roles, make sure you’ve given to each role the right privileges.
  • Test third-party services: if you added some third-party services or insured plugins that work properly and are updated to the latest version (you may need to place a new control even after migration).

2. Compatibility and structure

  • Browser Test: Test your website in all popular browsers and also in their previous versions (It may be useful to ask the client browser type used to avoid annoying incompatibilities). These controls is recommended carried out during processing but it is crucial run them before putting the site online.
  • Responsive Design Test: Test your site on all popular mobile device. Make sure everything is working properly and that there is the presence of graphical elements that overlap. (For example the text or in the buttons). Currency also, the ability to streamline the mobile version of unnecessary items. With Divi it is also very easy because you can hide section, row or just module with a click. To make your tests you can use these tools: Responsivator or Resizer.
  • Test navigation and links: in particular, any redirects.
  • Permalinks: Make sure permalinks work well for all content: you may need to reconfigure them.
  • Users roles: test the site (front-end and admin) using all the WordPress user roles that your client will be using.
  • Contact forms: head all the contact form, trying to send some email, and make sure that all fields generate the correct information.
  • Ecommerce Checkout: in the case of an e-commerce you will need to test the entire sales process. If you’re using Woocommerce can use the PayPal Sandbox feature for testing online payments.
  • Alt tags: make sure that all images have the Alt tag, useful for SEO but also to improve the accessibility.
  • Optimize images and videos: optimizes all images with tools like Imagify or Compressor.io that reduce weight without losing image quality.

NOTE. This article has listed the best tools to optimize images: https://aspengrovestudios.com/8-effective-tools-to-optimize-images/

3. Safety and updates

  • Basic SEO: titles and meta descriptions should already be prepared and optimized by theme or added using a plugin like SEO by Yoast. You may have to configure the plugin to suit the needs of your customers.
  • Redirect 301: if you worked on the redesign of a website, you probably need to set some redirect 301 to indicate to the search engine of the new link location.
  • Search Engine Visibility: if you chose to make invisible the site to search engines, then you need to remember to remove the block.
  • Backup: undoubtedly is the most important check of this list, I’m talking about the backup. Make a backup of the files and the database at the time of the launch.
  • Set up an automatic backup system: for the theme, the plugin files and database. Determine how it will be managed in accordance with agreements made with the customer. You can use the backup service offered by some hosting or you can use some plugins like Backup Buddy (Premium) or free as iThemesecurity that allow both to secure the entire site you set up automatic backups.
  • Configure the site to Google Analytics: either using a plugin or adding the tracking code to the theme.
  • Updates and optimizations: Agree on a timetable to evaluate the efficiency of the site, once launched a website, and a good idea to monitor its performance. So it’s good to take a deal with the customer to determine how often you will need to monitor site performance.
  • Assistance: Make sure you give your customers all your contacts to be easily contacted in case of need for further site developments or for technical support.

4. Final checks

Get money! I’m sure that you remember surely 😀.

via GIPHY

Conclusion

This list is not a final list for all the WordPress developers, but a useful resource not to make mistakes or to deliver incomplete jobs.

You may want to customize this list according to your works and create your own Check Template. You’ll see that will help you speed up and optimize the time in the launch phase, and to identify any problems before the site goes online.

Now it’s your time!
what do you think of this list? there are some basic controls to be added to this list? Write it in the comments 😉

Share75
Tweet
Share
75 Shares

Module Blurb: New Style Hover Expand

Module Blurb: New Style Hover Expand

by | Jun 17, 2016 | Tips & Tricks, Tutorial | 1 comment

TIPS & TRICKS, TUTORIAL

Module Blurb:
New Style Hover Expand

Follow us on

Fabio Sarcona, Web Developer, Italy

17 Jun 2016

Share
Tweet
Share
0 Shares

For my last child theme, Foody, I added a new style for the Blurb Module. It is an effect on mouse over that allows you to show the contents and social icons.

This style can be useful when you want to create a Testimonials section or to show your services or members of the team.

I bet you’ll be interested to see how to get this new style and then, I want to start right away by showing the live demo of the final result:

LIVE DEMO

1. Step

The first step is to download the file.JSON and import it into Divi library.

NOTE: If you do not know how to use the functions of Import / Export of Divi, you can read this Complete Guide, I wrote for Aspen Grove Studios.

DOWNLOAD TEMPLATE

2. Step

The second step and copy and paste the CSS code in the options panel, or if you use a Child Theme, you can copy the code in the style.css file. You’ll notice that in the CSS code I added some comments, this to make easy customization.

/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 230px;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

How to customize the HTML code

At this point, it has everything you need to use this new module Blurb for your projects, but I also want to show you what it looks like the HTML code, so you can easily customize every element.

As you can see, for the title and the subtitle I did not use the default fields of the module Blurb, but I added all the content in the editor. So, title, subtitle, the content visible on hover and social icons will be customized here.

NOTE: for this module I used the Font Awesome icons, so if your site has not installed the Font Awesome, the icons will not be visible.

#Update:

To respond to the request of some users to have multiple user options, I added two new layouts. In the first I replaced the social icons with icons of telephone, email, and maps, where you only have to replace the placeholder with your phone number and email address. Instead, the second layout I removed icons and added a button that you can use as a call to action.

This two new layout, you find them in the folder that you can download by clicking the green button positioned at the beginning of this tutorial. there is a new file (“Blurb Hover 2 NEW STYLE“) that you will need to import it into your library. Then you will need to copy and paste the code found inside the toggle below.

NOTE: The CSS code below is specific to the two new layouts.

LIVE DEMO 
/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 100%;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

/*--------------------- Button Hover Blurb  --------------------------*/

.button_hover_blurb a { 
 color: #fff;  /****** ---> Customize here the Button color text ******/
 font-weight: 700;
} 
.button_hover_blurb { 
 background-color: #1fd4c1; /****** ---> Customize here the Background-color button ******/
 display: inline-block;
 position: relative;
 padding: 0.6em 1.3em;
 margin-top: 6%;
 border-radius: 30px;
 cursor: pointer;
 transition: .3s;
 }
.button_hover_blurb:hover {
 opacity: 0.7;
}

Conclusion

And that’s it. As always, if you liked this article, I invite you to subscribe to the newsletter for not miss the next article and exclusive free resources for members.

Let me know what you think of this tutorial in the comments 😉

Share
Tweet
Share
0 Shares

Create an animated text in Divi with Eager

Create an animated text in Divi with Eager

by | Jun 3, 2016 | Tips & Tricks, Tutorial | 0 comments

TIPS & TRICKS, TUTORIAL

Create an animated text
in Divi with Eager

Follow us on

Fabio Sarcona, Web Developer, Italy

3 Jun 2016

Share53
Tweet
Share
53 Shares

That’s it, at the end of this article you will be able to create an animated text but above all know Eager by Cloudflare and you’ll wonder how you ever did without at least until now!

Yes, Ok Fabio, but what Eager?

Eager is a tool that allows you to improve your website with dozens of free apps that you can install in seconds without touching a single line of code. The available extensions are so many and I can assure you that some will make you jump out of your chair, then I advise you to keep you strong!

To understand the power of Eager, you just think that you can add hover effects, animations, slider, live-chat and more, with the same ease with which you install an application on your phone.

No matter if you are a developer or a newbie, you can add effects and new features to your site with an ease never before seen. You can choose between many applications, you can easily customize thanks to an easy and intuitive interface, and preview the result.

https://gyazo.com/5971c5aca921319356b7ff9dbedad510

After this brief introduction, it’s time to get to the heart of this tutorial, because I want to show you how you can easily create animated text using Eager, this way you will see for yourself what this means is revolutionary!

1. Step

Eager connected to the site and click on the button Get Eager

2. Step

Here you can select the platform where use of Eager applications. For this tutorial we’ll use the Embed Code feature because I do not like to use plugin, I prefer to keep light my WordPress installation, but if you prefer, you can use the free WordPress plugin by clicking the button WordPress

3. Step

Now we need to copy and paste this line of code in your child theme of the header.php file (if you’re not using it, you should create it) before chiusare the tag </ head>

4 Step

Eager, to this point, will have recognized your website and then you are ready to install your first application. For this tutorial, I chose Typist, an application that allows you to create animated text. Click on the preview button will open a new window where you can customize your application.

5 Step

To make it even easier to use Eager I created this video:

Conclusion

As you saw in the video, it was really easy to create an animated text, and if you think that all this is possible with a line of code, you can easily understand the power of this truly amazing tool.

You can play with other applications, add new features to your site without inflating your site with thousands of plugins, and all at no cost!

So, have you started to love even you Eager? 🙂

now it’s your turn..

What do you think of this tool? you think you use it?

Share53
Tweet
Share
53 Shares

How to create a Flip Card for Divi

How to create a Flip Card for Divi

by | May 27, 2016 | Tips & Tricks, Tutorial | 5 comments

TIPS & TRICKS, TUTORIAL

How to create
a Flip Card for Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

27 May 2016

Share41
Tweet
Share
41 Shares

Do you want to know how to create a Flip Card for Divi? You said yes? Well, because in this article I’ll explain how to create Flip Card with animated CSS3 with a few simple steps. Let’s start now!

The first step is to add a section and one or more columns with a code module.

To make your life easier you can download this file with three sections that I used for this tutorial. Inside you’ll find the HTML code.

NOTE: You will need to Import the JSON file into your Divi Library while adding the JS code and the code for Font-Awesome to your options panel as described below.

So the necessary steps are:

  1. Import the json file into your Divi Library;
  2. Add the JS code in your option panel in the Integrations tab;
  3. In the same tab, under the JS code, paste the code to load Font-Awesome (optional)
DOWNLOAD TEMPLATES

Before moving forward with this tutorial, I will show you how it’s done the HTML code found inside module because I want you to learn how to customize it even if you have little or no knowledge of code. This is a screenshot of the HTML code. All you need to do to customize this code and change the icon in the tag and change the title text, paragraphs and add the link to the button.

Now that you’ve seen how to edit the HTML code I show you three examples of flip cards and their CSS code that you will need to add to the Divi or to your child theme options panel.

Now add jquery

First add this script (you can find the JS code in the zip package along with the layouts used for this tutorials) in your options panel, clicking on the Integrations tab > Add code to the < head > of your blog. Here is a screenshot:

1. Flip Card Horizontal

In this first example I applied a horizontal flip effect. This is the most common effect but it is 100% Responsive and allows you to get any result or style with little effort.

LIVE DEMO 
/****** FLIP CARD HORIZONTAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

2. Flip Card Vertical

This effect is the same as above, with the only difference that the animation is in the vertical direction. Live Demo:

LIVE DEMO 
/****** FLIP CARD VERTICAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateX(-180deg);
     -moz-transform: rotateX(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

3. Flip Card with Background Image

In this case I added a background image in the front panel with a linear-gradient to create an overlay effect and highlight the text.  See the live demo: 

LIVE DEMO 
/****** FLIP CARD BACKGROUND IMAGE *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
 .flip_box_front {
     -moz-background-size: cover;
     -o-background-size: cover;
     -webkit-background-size: cover;
     background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://creativechildthemes.com/divi-lab/wp-content/uploads/sites/6/2016/04/marketing.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_button {
     display: inline-block;
     margin: 5% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
 .flip_button a {
     color: #fff ;
}
 .flip_box_front .flip_title {
     color: #fff;
     margin: 15% auto 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.55em ;
     display: block;
     font-weight: bold;
}
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_box_front .text_flip_card {
     color: #fff;
}
 .text_flip_card {
     padding: 0 7%;
}

Conclusion

This is all. Now you also know how to create beautiful animated cards in Divi, and all you have to do and vent your creativity :).

If you liked this article then I’m sure you’ll appreciate very well the next article .. you want to know what you speak? I’ll show you how to create an animated text, so if you do not want to miss the next article and the free resources subscribe to the newsletter.

Have a nice weekend! ?

Share41
Tweet
Share
41 Shares

8 new style for mobile menu of Divi

8 new style for mobile menu of Divi

by | May 24, 2016 | Tips & Tricks, Tutorial | 56 comments

TIPS & TRICKS, TUTORIAL

8 new style
for mobile menu of Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

24 May 2016 – Update 17 July 2018

Share78
Tweet
Share1
79 Shares

One of the most common desires of each of Divi user is always to have different styles of design for the menu, especially for the navigation of the mobile.

That’s why I thought that the creation of a collection of styles to customize the Menu Mobile of Divi could be useful for all those users who want to get a new look for the menu, but they have little or no knowledge of the code.

This will not only allow you to customize the design of your mobile menu but also to have greater flexibility because styles are only applied to mobile browsing, so you can safely use the default menu for the navigation of the desktop and one of the styles of this list for mobile.

Note: I apologize in advance if my English there are some mistakes, I still have to improve. ?

Before starting..

To make all the layouts you see in this tutorial work well you need to add to your Divi site the JS code you can find inside the file you can download by clicking on the button below. You have to add this JS code in the field “Add code to the of your blog” that you can find in the options panel.

Divi >
Theme Options >
Integrations >
Add code to the of your blog.

Unlike the first version of this post, in this updated version I used a JS code that allows you to have the items clickable menu parent. With the previous code it was not.

Note: If you also want to add icons as in the examples in this tutorial, you’ll need to add Font-Awesome to your Divi site. But it’s just an option, every single Style works well even without Font-Awesome. 

Download JS file

1. Style Slide-In

This style allows for a floating menu with a slide-in, very similar to the slide-in menu of Divi, with the difference that this style is applied only to the mobile navigation.

menu-mobile-style-1 mobile menu divi

Code CSS for this Style
    /**** Nesting Menu ****/

    /* when mobile menu is open, change hamburger icon to x icon */

    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
        content: '\4d';
    }
    /* makes sub sub menu icon be right arrow instead of down arrow */

    #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
        content: '5';
    }
    /* - mobile menu toggling elements, injected via jQuery - */
    /* make menu list item be relative, to be able to position toggle within this item */

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
        position: relative;
    }
    /* the new toggle element, which is added via jQuery */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
        position: absolute;
        z-index: 1;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
        top: 5px;
        right: 30px;
        cursor: pointer;
        text-align: center;
    }
    /* the new toggle element when popped */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
        background-color: rgba(255,255,255, 0.2);
    }
    /* toggle icon */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
        font-family: "ETmodules" !important;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 36px;
        font-size: 24px;
        text-transform: none;
        speak: none;
        content: '\33';
        color: #da1755;
    }
    /* toggle icon when triggered */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
        content: '\32';
    }
    /* hide sub menus by default */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
        display: none !important;
        padding-left: 0;
    }
    /* show sub menu when triggered via jQuery toggle, and add slight bg color */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
        display: block !important;
    }
    /* remove sub menu list item left padding, since padding will be on anchors */

    #main-header #mobile_menu.et_mobile_menu li li {
        padding-left: 0;
    }
    /* adjust mobile menu anchors side paddings */

    #main-header #mobile_menu.et_mobile_menu li a {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* indent sub sub menus further */

    #main-header #mobile_menu.et_mobile_menu li li li a {
        padding-left: 60px;
        padding-right: 20px;
    }

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
        background-color: transparent;
        font-weight: inherit;
    }
    /* make the current page's mobile menu link be different */

    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
        font-weight: bolder;
    }

    /****** Code Style: Menu Slide-In ******/

    /* Font Awesome */
    .fa {
        margin-right: 15px ;
      }

    @media only screen and (max-width: 980px){
    #mobile_menu {
        display: block !important;
        min-height: 100vh;
        height: 100%;
        top: 0;
        right: 0;
        position: fixed;
        z-index: 9998;
        overflow: scroll;
        border-top: none;
        padding-top: 60px !important;
    }

    .et_mobile_menu li a {
        color: #da1755 !important;
        width: 100%;
        float: left;
        text-align: left;
        border-bottom: 1px solid #ddd;
        margin: 5px;
        transition: .2s;
        text-transform: uppercase;
    }
    .mobile_nav ul#mobile_menu .current_page_item > a {
        color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile_nav.closed #mobile_menu {
        background: rgba(51,51,51,0.9) !important;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
        background: rgba(51,51,51,0.9) !important;
    }

    .mobile_nav.opened #mobile_menu {
        background: rgba(27,29,30,0.98) !important;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-overflow-scrolling: touch;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
    }

    #main-header .container.clearfix.et_menu_container {
        width: 100%;
    }

    .mobile_menu_bar:before {
        color: #1b1d1e !important;
    }
    .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        color: #fff !important;
        z-index: 9999;
    }
    }

    @media only screen and  (max-width: 980px) {
      .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
        z-index: 9999;
      }
      #et-top-navigation {    
        padding-right: 5px;
      }
    }

    @media only screen and (min-width: 481px)  {
      #mobile_menu {    
        width: 340px;    
        margin-left: calc(100% - 340px);
      }
    }
    @media only screen and (max-width: 480px)  {
      #mobile_menu {    
        width: 290px;    
        margin-left: calc(100% - 290px);
      }
    }

2. Style Slide-In Gradient

This style is similar to the previous one, but as you can see, I applied a gradient background, and I pointed out the current link with a transparent background, and with the left padding. To customize the background color, you just replace the two colors within the brackets and you can decide the direction of the gradient by replacing higher with: right, left or bottom. Of course, you can get more gradient effects, but I preferred a simpler solution to also customize for beginners.

menu-mobile-style-2 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 28px;
    right: 0px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
    padding-top: 20px;
}
.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
    z-index:9999;
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, 
  .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 340px;    
    margin-left: calc(100% - 340px);
  }
}
@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 290px;    
    margin-left: calc(100% - 290px);
  }
}

3. Stile Full-Width

The Full-Width style, as the name suggests, allows you to have a mobile menu that covers the entire screen. In this example, you can see the end result that you can customize in minutes.

mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(255,255,255, 0.2);
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 35px;
    right: 30px;
    cursor: pointer;
    text-align: center;
    -webkit-box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
            box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu Full-screen ******/

/* Font Awesome */
.fa {
    margin: 10px ;
  }

@media screen and (max-width: 980px) {
  .et_header_style_centered #main-header {
    position: fixed;
  }
  .et_header_style_centered #main-header .mobile_nav {
    background-color: transparent;
  }
  .mobile_nav.closed .select_page {
    display: none;
  }
  .et-fixed-header#main-header {
    background-color: transparent !important;
  }
}
.et_mobile_menu {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9998;
  overflow: scroll !important;
  background-color: rgba(10, 10, 10, 0.9) !important;
  margin-left: -30px;
  padding: 25% 0;
  height: 100%;
  width: calc( 100% + 60px);
  border-top: none;
}
.et_mobile_menu li a {
  text-align: center;
  font-size: 1.55em;
  border: 0;
  padding: 5% 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
  color: #5376F6;
  background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
  font-size: 1.05em !important;
  margin: auto;
  padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
  color: #999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
  z-index: 9999;
  color: #fff;
}

4. Style Multicolor

The Multicolor style is one of my favorites. Again customization is really very easy, all you have to do and replace colors for each element, the bottom of the code. But relax, I added a comment in the code to help you customize the colors easily.

menu-mobile-style-5 mobile menu divi

Code CSS for this Style
/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background: #fff;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 36px;
    right: 80px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #363636;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: center;
font-size: 1.6em;
border: 0;
padding: 45px 0;
text-transform: uppercase;
letter-spacing: 4px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1em !important;
padding: 1em;
}
.et_mobile_menu li a:hover {
color: #363636;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
z-index: 9999;
color: #606060 !important;
top: -15px !important;
left: 27px !important;
transition: .15s;
}

/**__ The following code allows you to change the background of each individual item. All you need to do is change the hex code with the one that you prefer, and if your menu has more than 7 items, you must copy the piece of code that you see and change the number in the parenthesis in ascending order. Example: if your menu has 10 items, you will need to add more 3 snippets and change the number in the brackets with 8, 9, 10. __**/

.et_mobile_menu li:nth-child(1) {
    background-color: #F0E8DA;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #F2D3DE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #E8B5C4;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #C98392;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #83B5B1;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #B2D9CF;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #92bdcf;
}

5. Style Multicolor with Icon left and Text aligns right

As you can see is very similar to the previous style, the only customization I’ve applied, and move the icons on the left and aligned the text to the right.

menu-mobile-style-3 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 70px;
    right: 16px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Style Multicolor ******/

/* Font Awesome */
.fa {
    position: absolute;
    display: block;
}

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: right;
font-size: 1.6em;
border: 0;
padding: 45px 30px;
text-transform: uppercase;
letter-spacing: 4px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.1em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #f9f9f9;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
z-index: 9999;
font-size: 26px !important;
color: #333 !important;
top: -22px !important;
left: 32px !important;
transition: all .15s;
}

.et_mobile_menu li:nth-child(1) {
    background-color: #42CAC6;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #4B9BCE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #4B7FB9;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #5E5493;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #5F4270;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #592877;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #066A91;
}

6. Style Windows Phone

This style is what I currently use for my website, and is inspired by the design of the new Windows Phone. A little tip for you is to use this style for websites that have few items in the menu, because with an extensive menu the visual result, but also the user experience, may not be the best.

menu-mobile-style-6 mobile menu divi

Code CSS for this Style
/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 70px;
    right: 16px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Style Windows Phone ******/

/* Font Awesome */
.fa {
    margin: 10px ;
  }


@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 80px !important;
}

.et_mobile_menu li a {
    color: #fff !important;
    width: 46%;
    float: left;
    text-align: center;
    background-color: #a46497 !important;
    padding: 11% 8%;
    margin: 2%;
    font-size: 1.2em;
}
.mobile_nav.closed #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    background: rgba(51,51,51,0.9) !important;
}

.mobile_nav.opened #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
    z-index: 9999;
    color: #fff;
    margin-right: 20px;
}
}

@media only screen and  (max-width: 980px) {
 .et_header_style_split .mobile_menu_bar, 
.et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 430px;    
    margin-left: calc(100% - 430px);
  }
}

@media only screen and  (max-width: 480px) {
  #mobile_menu {    
    width: 370px;    
    margin-left: calc(100% - 370px);
  }
}

7. Style slide-in with background image

I promised I would share other styles for mobile menu, and here’s this new style is added to the previous ones, and that allows you to have a menu with slide-in effect but with a background image. Let me know what you think in the comments 😉

menu-mobile-style-7 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 10px;
    right: 35px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu slide-in with background image ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}

.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.sub-menu li a{
    font-size: 1em !important;
    }
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ), /* ------ Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect  ----- */

    url("https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg"); /* ----- Add here the url of the image you want as background ----- */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ),
    url("https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
    z-index: 9999;
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    margin-right: 20px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, 
  .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 340px;    
    margin-left: calc(100% - 340px);
  }
}
@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 290px;    
    margin-left: calc(100% - 290px);
  }
}

8. Style Slide-In di SJ James di Divi.Space

This is a style Slide-in created by SJ James Divi.Space, a fantastic example of how it can be customized the menu mobile of Divi for a simply fantastic result. Note the animation that opens and closes the menu, really fantastic!

View Tutorial

9. Style Sleeker by James Fosker of DiviStride

Another style that I want to show was created by James Fosker of DiviStride. Sleeker has a clean design and very cool, perfect for a menu with many items.

View Tutorial

Conclusion

Well, now in your tool-box staff you have available 9 new styles to get a unique Divi floating menu that you can customize and use as and when you want. But before you that, I’m going to add to this list the new styles, so if you want to stay up to date you can subscribe to the newsletter and do not miss the next styles.

Source JS Code Mobile Menu Collapsible Submenus

Share78
Tweet
Share1
79 Shares

4 snippet for the toggle module

4 snippet for the toggle module

by | Apr 26, 2016 | Snippet, Tips & Tricks | 12 comments

TIPS & TRICKS, TUTORIAL

4 snippet for the toggle module

Follow us on

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

Share6
Tweet
Share
6 Shares

Are you, like me, do not love the default design of the Module Toggle, then this tutorial is what you need to give a better look to your toggle with a bit of CSS.

For this tutorial I will use 4 custom CSS classes, which are: toggle_custom_1, toggle_custom_2, toggle_custom_3, toggle_custom_4.

Here is a short description of the various snippets:

  • Toggle custom 1: This snippet, move the icon to the left of the title, and with a simple animation, the icon rotates when the toggle is open.
  • Toggle custom 2: The second snippet, however, moves the title and the icon at the center, with a shadow effect when the toggle is open.
  • Toggle custom 3: The third snippet, replace the default icon with a down arrow, which rotates when the toggle is open.
  • Toggle custom 4:The fourth snippets, applies two border (top and bottom) that change color when the toggle is open.

If you want to use other icons for your toggle, you should read this excellent article, where you can see all the codes of the ET icons.

You can check out the live:

LIVE DEMO

1. Add Toggle Module

First, I should make a new section and enter a Module Toggle.

Add Class

Add your content and when you finish your customizations, click on the Custom CSS tab and add the class that corresponds to the design that you want to apply.

Add CSS

Now, with a few lines of code, you will be able to rejuvenate your toggle :). All you need to do and choose the design you want and add the CSS code in your options panel or in your child theme. This is all. Simple, right?

Toggle Custom 1
/**************************** toggle custom 1 **************************/

.toggle_custom_1 {
border: none;
}

.toggle_custom_1.et_pb_toggle.et_pb_toggle h5 {
padding-left: 45px;
}

.toggle_custom_1 .et_pb_toggle_title:before {
right: 92% !important;
font-size: 40px;
content: "45";
-webkit-transition: 0.3s;
transition: 0.3s;
}
.toggle_custom_1.et_pb_toggle_open .et_pb_toggle_title:before {
color: #72c15f;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.toggle_custom_1.et_pb_toggle_close.et_pb_toggle.et_pb_toggle p {
border-left: 4px solid #72c15f;
padding-left: 33px;
margin: 2% 0 0 2.6%;
}

.toggle_custom_1.et_pb_toggle_open.et_pb_toggle.et_pb_toggle p {
border-left: 4px solid #72c15f;
padding-left: 20px;
margin: 2% 3.2%;
}
Toggle Custom 2
/**************************** toggle custom 2 **************************/
.toggle_custom_2{
	border: none;
}
.toggle_custom_2.et_pb_toggle_close {
    border-bottom: 3px solid #72c15f;
 }

.toggle_custom_2.et_pb_toggle h5.et_pb_toggle_title {
    text-align: center;
    padding: 20px 0 !important;
}

.toggle_custom_2 .et_pb_toggle_title:before {
    right: 45%;
    margin-top: 5px;
    font-size: 40px;
    content: "43";
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.toggle_custom_2.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
    animation: none;
}

.toggle_custom_2.et_pb_toggle_close.et_pb_toggle.et_pb_toggle p {
    margin: 4% auto;
    padding: 20px;
    border-top: 3px solid #72c15f;
    box-shadow: 0 16px 23px -11px rgba(0, 0, 0, 0.3);
}

.toggle_custom_2.et_pb_toggle_open.et_pb_toggle.et_pb_toggle p {
    margin: 4% auto;
    padding: 20px;
    border-top: 3px solid #72c15f;
    box-shadow: 0 16px 23px -11px rgba(0, 0, 0, 0.3);
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
Toggle Custom 3
/**************************** toggle custom 3 **************************/

.toggle_custom_3.et_pb_toggle {
    border: none;
    border-bottom: 4px solid #ddd !important;
    transition: 0.4s
}

.toggle_custom_3.et_pb_toggle_open{
    border-bottom: 4px solid #72c15f !important;
    }

.toggle_custom_3 .et_pb_toggle_title:before {
    font-size: 50px !important ;
    content: "3" !important;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.toggle_custom_3.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
Toggle Custom 4
/**************************** toggle custom 4 **************************/

.toggle_custom_4 {
    border: none;
    border-top: 4px solid #ddd;
    border-bottom: 4px solid #ddd;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.toggle_custom_4.et_pb_toggle_open {
    border: none;
    border-top: 4px solid #72c15f;
    border-bottom: 4px solid #72c15f;
}

.toggle_custom_4 .et_pb_toggle_title:before {
    font-size: 23px;
    content: "e064";
    transition: 0.5s;
}

.toggle_custom_4.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
}

#Bonus

You can download the layout and CSS code clicking on the button. The layout already contains the entire CSS code. To change it click the Hamburger icon at the top-right of The Divi Builder.

DOWNLOAD FILE

Conclusion

With this bonus, you end this tutorial, and how could you see, with a few simple steps you can create a good look at the Module Toggle. Now tell me .. Which of these designs do you prefer? do you want to suggest a customization? Write it in the comments now.

Share6
Tweet
Share
6 Shares