header | Trumani

Create a Custom Divi Hero / Header Section with Badge

by Trumani | Jul 21, 2021 | Amateur Hour

Here’s a tutorial on creating a cool header section using the Divi Builder. In this tutorial, we create a different view for desktop and mobile. We add an image to look like a badge, make a button using the text module, and insert an Elegant Themes icon. If you...

Latest Posts

Create a Custom Divi Hero / Header Section with Badge

July 21, 2021 7:38 pm | Trumani | No comments

Here’s a tutorial on creating a cool header section using... Read more

Here's a tutorial on creating a cool header section using the Divi Builder. In this tutorial, we create a different view for desktop and mobile. We add an image to look like a badge, make a button using the text module, and insert an Elegant Themes icon. If you like the layout, you can build it yourself by following along with the tutorial. Or you can skip to the end and download the importable Divi file for free by clicking this link. Text:

<h1>Stop Spammers</h1> <p style="font-size:26px;">The best FREE anti-spam plugin on WordPress entrusted by 60K sites.</p>
Padding-left – Desktop: 8%
Padding-left – Mobile: 25px
Alignment – Desktop: Left
Alignment – Mobile: Center
Shrink header text on mobile

Button (text):

Text: <p style="font-size:26px;"><strong><span class='et-pb-icon' style="font-size:20px;"> </span> Download</strong></p>
Background: #eb4296
Hover: #0F2540
Padding: 15px
Margin-left – Desktop: 8%
Margin-left – Mobile: 0%
Link: https://wordpress.org/plugins/stop-spammer-registrations-plugin/
Open new tab

Image:

Max-width: 450px
Desktop
- Margin-top – Desktop: -77px
- Margin-bottom – Desktop: -50px
Mobile
- Margin-bottom: 0px
- Padding-top: 50px
- Margin-top: 0px

Section:

Desktop
- Background: Clear
- Margin-bottom: 50px
Mobile
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 150deg
- Start and End Position: 65%
- Padding-bottom: 230px
- Margin-bottom: 50px

Row:

Desktop
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 140deg
- Start and End Position: 60%
- Max-height: 350px
Mobile
- Background: Clear

Column 1:

Custom CSS: margin: auto;

Add Widgets to Primary Menu – Good for Multiple Logos – Divi Tuts

May 4, 2018 7:59 pm | Trumani | 3 comments

Ever wanted to add widgets to the Divi primary menu?... Read more

Ever wanted to add widgets to the Divi primary menu? Out of the gate, the primary menu doesn't offer much in the way of customizations, hence our obsession with creating tutorial videos on this very subject. This time, we have a business case to display a company's certifications prominently on the page. But if we created one giant logo from all of the logos, we couldn't link to each certification's corresponding page. Here's what you do in a nutshell to add widgets to your Divi primary menu...

Ensure you have a Divi child theme
Open the theme customizer and make the primary menu full width. (I don't show it in the video, but if you have a secondary menu, it looks best to make that full width as well.)
In the theme customizer, I recommend setting the primary menu height to around 50-60. If you have a call to action button (like the one shown in the video, set it to 30).
Copy the Divi header.php file and place it in your child theme's root folder
Create the widget area in the child theme's functions.php and header.php files (see code below)
Add the desired widgets to "Header Widget"
Add CSS to place the widgets to the left of the site logo
Tinker with the CSS media rules to make the logos look superb on all screen sizes
Celebrate

Add the below to your functions.php file: [php] function wpb_widgets_init() { register_sidebar( array( 'name' => 'Header Widget', 'id' => 'header-widget', 'before_widget' => '<div class="hw-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="hw-title">', 'after_title' => '</h2>', ) );   } add_action( 'widgets_init', 'wpb_widgets_init' ); [/php] Add the below to your header.php file: Tip...watch the video to see where to place the snippet [php] <?php if ( is_active_sidebar( 'header-widget' ) ) : ?> <div id="header-widget-area" class="hw-widget widget-area headlogo1" role="complementary"> <?php dynamic_sidebar( 'header-widget' ); ?> </div> <?php endif; ?> [/php] Add and adjust the example CSS to the style.css and get your widget area into the right place: [css] .headlogo1{ position:absolute; left:130px; top:20px; } .hw-widget{ float:left; margin-left:20px; } @media all and (max-width:980px){ .hw-widget{ float:left; margin-left:3px; margin-top: 0px !important; } .headlogo1{ top:20px; } } @media all and (max-width:480px){ .headlogo1{ position:absolute; top:60px; left:0px; } .hw-widget{ float:left; margin-left:5px; margin-top: 0px!important; } .container { width:95% } .et_header_style_left .mobile_menu_bar, .et_header_style_split .mobile_menu_bar { padding-bottom: 5px !important; } .et_pb_fullwidth_section { padding: 0; margin-top: 25px; } #main-header { -webkit-box-shadow: 0 0px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 0px 0 rgba(0,0,0,.1); box-shadow: 0 0px 0 rgba(0,0,0,.1); } } @media all and (max-width:335px){ .container { width:98% } .hw-widget { margin-left:2px !important; margin-top: 0px!important; } } @media all and (max-width:1160px){ .hw-widget{ float:left; margin-left:3px; margin-top:10px; } } [/css] For other great enhancements to the Divi navigation, check out this post: Primary Menu, Secondary Menu, Fixed Menu, Logo Changes

Create a Custom Divi Hero / Header Section with Badge

Add Widgets to Primary Menu – Good for Multiple Logos – Divi Tuts

Categories

Latest Posts