4 snippet for the toggle module

4 snippet for the toggle module

TIPS & TRICKS, TUTORIAL

4 snippet for the toggle module

Follow us on

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

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:

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.

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.

How to add custom text to the dashboard

How to add custom text to the dashboard

TIPS & TRICKS, TUTORIAL

How to add custom
text to the dashboard

Follow us on

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

If you build website for your customers, this tutorial can be useful for you. In fact, with this brief tutorial, you will discover how to insert a custom message in the WordPress dashboard.

All you have to do is add this code in your function.php files, and customize the text with the name of your company, by adding your own greeting and your contacts. Of course you can also add other content and make your even more special message. 🙂

Let’s start!

Add the code in the file function.php

Download the PHP Code and paste inside your child theme in the function.php

The result

The end result should look like this: (This is the personal message that I included in my child themes.)

Now it’s your time..

Do you think you to use this code for your projects? I, for example, I added a custom message in my last child themes, you soon upgrade all other themes, inserting this short message. In this way, my clients will be able to get in contact with me quickly. You find it useful?

I am looking forward to read your comments in the comments section! 🙂

How to add a logo to the module Menu Full-Width

How to add a logo to the module Menu Full-Width

TIPS & TRICKS, TUTORIAL

How to add a logo
to the module Menu Full-Width

Follow us on

Fabio Sarcona, Web Developer, Italy

12 Apr 2016

How do I add my logo in the Fullwidth Menu module Divi Builder? Well, this is one of the most frequent questions posted by users of the community Divi, and in this article, you will discover how to add your logo and how to use it best with a custom template.

Before you begin, and well explain what the full-width module menu and what may be cases where it can be useful to use it

The Fullwidth Menu module allows you to enter a custom menu in any part of a webpage, and to use it in combination with the main menu. Often it can be useful when building a landing page and we want to create the link anchors to quickly reach the various sections or even to create custom menus depending on the user role, and much more. So, as you can understand, it is a very versatile form.

Now that you know better its purpose and its use, I’ll show you how to add your logo with a few simple lines of code.

Latest update

I wrote this tutorial in April 2016 and until a few months ago, it was not possible to get a custom menu without a hack like the one described in this tutorial. Now on Needyesterday you can find 10 Header Navigation pre-made Layouts that allow you to get a custom menu with a few and simple clicks. Check out our Amazing pre-made layouts now!

https://gyazo.com/d85bae70073084b07b26f577d9f088e2

1. Add the Fullwidth Menu Module

First, we need to create a new full-width section and add the Fullwidth Menu module.

2. Add ID custom

Now, click on the Custom CSS tab and add a custom ID univocal. An example of Custom ID might be: menu_full_custom. Save and exit. Now refresh the page and save changes.

Note: The id, unlike the classes, are used to define a single element in a page, with a unique and specific purpose, in most cases this purpose is to determine a section of an HTML page. To facilitate the understanding, you need to remember that if you have entered an ID on a page, the same ID you can not use it for another item or section.

3. Add the jQuery code

Now go to the Divi Theme Options page and click on the Integration tab and paste this code.

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#menu_full_custom .et_pb_row").prepend('<a href="your Homepage url"><img src="your logo image url" class="full_menu_logo"></a>');
});
</script>

4. Add URL your Logo

Now all you need to do and add the URL of the logo and the URL of your homepage.

Note: This is a simple script that uses the .prepend function that allows you to add content to the beginning of each element. What this does is simply add to our section to which we have assigned the ID menu_full_custom, a content, in this case, your logo, to which is assigned the logo_menu_custom class.

5. Add CSS code

Add this CSS code in your options panel and in your Child Theme. This code will align left your logo:

Note: changes the value of width to change the size of the logo.

img.full_menu_logo {
float: left!important;
width: 160px;
padding: 20px;
}

6. Align right icon Hamburger

With this code the Hamburger Menu Icon, will be moved to the right:

.et_pb_fullwidth_menu .et_mobile_nav_menu {
float: right !important;
}

Conclusion

With this tutorial you found out how to put your logo in the form of full-width menu Divi Builder and how best to use it along with a custom template.

But now it’s your turn .. You found this tutorial useful? you frequently use the full-width menu module to create your pages?
I’ll wait in the comments.