Header divi

Header divi смотреть последние обновления за сегодня на .

Divi Theme Header Design Tutorial | Create A Custom Header

53131
964
104
00:43:47
04.03.2022

earn how to create a custom header in the Divi theme. With a different logo on scroll, different sizing on scroll, and different colors on scroll. Get The Divi Theme: 🤍 Download the header: 🤍 thanks to the Theme builder within the Divi theme we can create custom headers using the Divi layout editor and place those headers anywhere on the website. I will show you how to make use of the image module, menu module, and button module and change the settings when you scroll. Of course, we will optimize our Divi header for all devices. Overview with timestamps: 00:00 Introduction 00:44 Create A Custom Header In The Theme Builder 02:13 Make The Header Sticky 05:47 Change The Logo When Scrolling 13:45 Create The Menu 17:40 Create The Button 22:34 Optimize The Header For All Devices 34:37 Adjust the sizing and spacing in your Divi Header Please like the video, comment, and subscribe for more upcoming videos!

Divi Theme Builder Tutorial - (Create Custom Headers and Footers, 404 Page, Blog, And Posts)

10829
256
31
00:45:02
14.06.2022

Download Divi: 🤍 Watch Full Divi Theme Tutorial: 🤍 Divi Layout Pack: 🤍 In this video i will show you how to use the divi theme builder. The divi theme builder allows you to create custom headers and footers, custom 404 pages, custom blog page and custom blog posts templates using the divi theme builder. Checkout my other Multilingual Wordpress Tutorial Youtube Channels! Spanish Channel: 🤍 Arabic Channel: 🤍 Hindi Channel: 🤍 Portuguese Channel: 🤍 French Channel: 🤍 German Channel: 🤍 Feel free to visit my website: 🤍

How to Build a Divi Global Header using the Divi Theme Builder

1987
43
6
00:27:05
03.05.2022

Keeping on track with our Divi Tutorial Series on Building Divi Sites that don't look like Divi Sites we turn to that distinctive Default Divi Header. Yet another dead giveaway that your site was built with Divi, but Divi Engine is here with solutions. Sure, you can use the Theme Customizer to do some basic upgrades to your Divi Header, but all the cool kids are using the Divi Theme Builder these days. In this Divi Tutorial we will show you how to use the Divi Theme Builder to replicate a nice layout we found on dribbble.com. If you don't know dribble.com yet, it is a great resource for design inspiration when the well has dried up. We even show you a couple of awesome plugins that will help take your Divi Header and Menu game to the next level. ➤ Divi Mega Menu 🤍 ➤ Divi Mobile 🤍 🧑🏻‍💻 Note that all the code we use in this tutorial can be found in the Text Tutorial link below! 📖 Text Tutorial 🤍 🤍 📚 How to un-Divify your Divi Sites Tutorial Series 🤍 🤍 ➤ Dribbble Design Inspiration 🤍 ➤ Learn more about Divi Engine 🤍 🤍 ➤ Get the Divi Theme 🤍 🤍 CHAPTERS 00:00 Introduction 00:20 Last Installment: Custom Divi Button Styles 01:00 Find Inspiration on dribbble 02:09 Dissecting the dribbble header 03:14 Using the Theme Customizer Header Options 04:38 Adding a Global Header in Divi Theme Builder 05:41 Adding a 3-Column Row 05:56 Adding an Image Module for the Logo 06:05 Adding an Menu Module for the Menu 06:28 Adding an Text Module for the Phone Number 06:43 Refining the Divi Header Layout 08:43 Image Module Settings 09:51 Menu Module Settings 11:03 Inspecting a Page reveal the CSS 12:35 Text Module Settings 12:57 A note on Divi Conditional Display Logic 16:14 Adding CSS to the Divi Global Header 16:34 Centering Divi Modules Vertically 18:40 Creating the Animated underline Effect 20:24 Let's Review the CSS 22:24 Improving your Divi Global Header 22:52 Divi Mega Menu 24:30 Divi Mobile 26:16 Conclusion

[Step by step] How to create a custom global header with divi theme builder.

9178
246
38
00:13:15
01.04.2020

Download custom header design from here - 🤍 [Complete Tutorial] How to create a wordpress website with DIVI - 🤍 In this tutorial I will show you how to make a custom design header from scratch using div theme builder. Also here I will show you how to make different style header for different pages. And if you need any divi related professional help you can go to 🤍 and just write down your inqury in details... I'll reply you back within 24 hours.... Thank youuuu.....

Divi Transparent Header Menu - 2021

13595
291
75
00:08:11
01.04.2021

Create a Divi Transparent Header Menu - 2021. In this video you will learn how to use a "full width header" Divi module to create a home or landing page hero section with real Impact and a transparent menu section. Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites. Create a full-page hero section in DIVI with background image and use the Divi Theme builder to complete with transparent menu overlay. Full tutorial. RESPONSIVE NOTE I didn't cover responsive options in this video. If you change things slightly and use a single-column row in the header and add your logo in the menu module then it will be easier to optimise for tablet and phone. ❤️‍🔥❤️‍🔥 GET DIVI ❤️‍🔥❤️‍🔥 SUPPORT MY CHANNEL BY BUYING WITH MY LINK click here: 🤍 ❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥 ❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥 Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites. If you purchase a Divi licence using the following link, I will earn a commission from Elegant Themes which helps support my channel. See the Elegant Themes site for details. Thanks in advance! ☕ If you find my videos useful, please do feel free to buy me a coffee! ☕ ☕ 🤍 By using these affiliate links I will earn a referral commission which helps support my channel.

How to Make Your Transparent Header Sticky on Scroll with Divi

28814
455
45
00:31:54
22.09.2020

Learn more: 🤍 When it comes to setting up a global header for your website, there are many ways to approach it. One of the more subtle approaches is a transparent header. Transparent headers are placed on top of your pages’ hero sections, which can lead to beautiful designs that focus on a minimal but clear approach. If you decide to go for a transparent header but need a sticky header on scroll, you’re going to love this tutorial. Using Divi’s built-in sticky options, we’ll show you how to go from a transparent header to a differently-styled sticky header on scroll. The transition between transparent and sticky is effortless! You’ll be able to download the JSON file for free as well. If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below: 🤍 Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing: 🤍

Divi theme builder fixed header - Make divi theme builder header sticky

8174
164
22
00:10:34
13.07.2021

This is a Divi theme builder fixed header tutorial. In this tutorial, I show you how to make Divi theme builder header sticky step by step. * Buy Divi Theme Builder Here - 🤍 (Includes BONUS Course) 😍 Sofware Deals & Bonuses * FluentCRM - 🤍 Get 20% OFF (Use Coupon MAK) * Presto Player - 🤍 Get 10% OFF (Use Coupon MAK10) * BuddyBoss - 🤍 - Get 10% OFF (Use Coupon MAK10) * TutorLMS - 🤍 - (Use Coupon Code Mak20 for 20% Discount) * LearnDash - 🤍 (Includes BONUS Course) * CartFlows - 🤍 Get 10% OFF (Use Coupon MAK10) * MemberPress - 🤍 (Includes BONUS Course) * WhishList Member 🤍 (Includes BONUS Course) * * * * Buy any of the products and get FREE Course BONUSES to get you started fast! 🔥 Best WordPress Hosting * SiteGround 🤍 (SAVE 70%) * FlyWheel Hosting 🤍 🔥 Divi Theme Templates * Design Beautiful Blogs In A Few Clicks 🤍 * Design Divi Websites Faster, Buy The Genesis Template 🤍 🔥 Online Business Books & Training * One Funnel Away Challenge - 🤍 * FREE Traffic Secrets Book - 🤍 * Affiliate Bootcamp - 🤍 * Experts Secrets Book - 🤍 😍 Recommended Plugins / Services * Convertkit 🤍 * MailPoet — 🤍 * TubeBuddy 🤍 * SkillShare— 🤍 ALL THE GEAR THAT I USE. * 🤍

How To Add Background Masks and Patterns to your Divi Header

3504
103
8
00:03:38
06.06.2022

Divi’s new background masks and patterns feature is more commonly used for sections on a page. But, we can also add them to headers as well! In this tutorial, we’ll show you how to add background masks and patterns to a Divi header template using the theme builder. This is a great way to create completely unique header designs for your website. Blog post: 🤍 ➡️ Learn more about Divi: 🤍 🔵 Like us on Facebook: 🤍 #WordPress #Divi #ElegantThemes

Divi Theme Tutorial | How to design headers for mobile devices

18660
363
39
00:13:48
16.05.2020

- ▷ Buy DIVI here and claim your BONUSES 🤍 ▷ Buy The Genesis Template 🤍 ▷ Free WordPress Mastery Course 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍

How To Create A Global Header With The Divi Theme 👈👈

2109
32
8
00:13:31
25.02.2022

How To Create A Global Header With The Divi Theme. In this series of videos we are going to cover some of the basic set up and build steps for people new to the great Divi Theme. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching features to enhance the look and user experience of your website. Today we are going to demonstrate how to create a custom sticky global header, using the inbuilt features of the Divi theme. For more information on the Divi theme, check out our Divi playlists below. Full Ecommerce Site Build Playlist: 🤍 v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9 Contact Form With File Upload Video: 🤍 Divi 4 Theme Create An Ecommerce Store In One Hour: 🤍 Try out the Divi theme: 🤍 Divi Supreme Modules Plugin 10% Off: 🤍 Divi Brain Addons Free Plugin: 🤍 My Blog : 🤍 RECOMMENDED PLAYLISTS Elementor Ecommerce Store: 🤍 Divi Snippets: 🤍 Divi 4 Ecommerce Store: 🤍 Bootstrap 4 Basics: 🤍 Elementor: 🤍 WordPress Tips: 🤍 RECOMMENDED VIDEOS: Bootstrap 4 Complete One Page Scrolling Website Tutorial : 🤍 Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: 🤍 Bootstrap - How to edit a bootstrap template: 🤍 Divi Add a live facebook feed to your divi or any wordpress website: 🤍 Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: 🤍 Elementor Wordpress Builder How To Build A Parallax Section: 🤍 SOCIAL MEDIA Follow what I'm doing on: Facebook: 🤍 Twitter: 🤍 Linkedin: 🤍 Support the channel: 🤍 Courses I teach: 🤍 Subscribe: 🤍 #YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite

FREE Header and Footer Template for Divi

8227
127
11
00:12:52
07.12.2020

Here is the FREE Divi header and footer template, download it here 🤍 * FluentCRM - 🤍 Get 20% OFF (Use Coupon MAK) * BuddyBoss - 🤍 Get 10% OFF (Use Coupon MAK10) * Divi Theme Builder - 🤍 (Includes BONUS Course) * LearnDash - 🤍 (Includes BONUS Course) * CartFlows - 🤍 (Includes BONUS Course) * MemberPress - 🤍 (Includes BONUS Course) * WhishList Member 🤍 (Includes BONUS Course) * * * * Buy any of the products and get FREE Course BONUSES to get you started fast! 🔥 Best WordPress Hosting * SiteGround 🤍 (SAVE 70%) * FlyWheel Hosting 🤍 🔥 Divi Theme Templates * Design Beautiful Blogs In A Few Clicks 🤍 * Design Divi Websites Faster, Buy The Genesis Template 🤍 🔥 Online Business Books & Training * One Funnel Away Challenge - 🤍 * FREE Traffic Secrets Book - 🤍 * Affiliate Bootcamp - 🤍 * Experts Secrets Book - 🤍 😍 Recommended Plugins / Services * Convertkit 🤍 * MailPoet — 🤍 * TubeBuddy 🤍 * SkillShare— 🤍 ALL THE GEAR THAT I USE. * 🤍

Jumping header probleem divi oplossen

43
1
0
00:05:12
20.08.2021

Divi is een prachtige pagebuilder voor WordPress. Je kunt er ontzettend mooie professionele websites mee maken. Helaas zitten er ook nadelen aan de Divi pagebuilder: de jumping header is zo een probleem dat de meeste mensen wel eens hebben ervaren. We gaan in deze video laten zien wat je kunt doen om dit probleem te verhelpen. Kijk voor de code op: 🤍 Vergeet niet te abonneren op ons kanaal=) Volg ons ook op: - LinkedIn - 🤍 - Facebook - 🤍 Website of webshop laten maken? - 🤍

6.2 Create a sticky header menu in the Divi Theme Builder

3373
55
24
00:35:38
25.06.2021

* Create a stunning menu with a top bar and navigation in the Divi Theme Builder. * Create a sticky menu that sticks to the top as you scroll down the page. * Create a top bar with buttons for social media icons and a call to action button First, create your menu and choose your links at Appearance » Menus in WordPress. This video is a part of a complete WordPress tutorial with more than 6 hours of video material – completely free. Find the full tutorial at: 🤍 All links, files and code snippets mentioned in the chapter is available below. 👇 🔗 AFFILIATE LINKS WITH EXCLUSIVE DISCOUNTS ➡️ 20% off Divi: 🤍 ➡️ 69-76% off web hosting: 🤍 ➡️ Divi Supreme: 🤍 ➡️ Divi Toolbox: 🤍 ➡️ Divi Blog Extras: 🤍 ➡️ Divi Form DB: 🤍 This video is not sponsored but it contains affiliate links to SiteGround and Elegant Themes. If you make a purchase via these links, I’ll receive a commission. But it will NEVER cost more for you. Your support makes it possible for me to create more free content. Thank you! 🙌 🔗 DOWNLOAD FREE LAYOUTS & OTHER RESOURCES ➡️ All images, icons, code snippets and layouts used in this tutorial are available for free at: 🤍 ➡️ Visit the live demo website that we create in this tutorial: 🤍 ➡️ Free download of all layouts that I created for this tutorial: 🤍 ➡️ Premium Divi plugins mentioned in this video: 🤍 ➡️ Six tips for a better Divi mobile menu: 🤍 ⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and Divi. The vision is that everyone should be able to design beautiful websites without exhausting coding issues. ⚡ DiviMundo.com is produced by Duse Media, a WordPress agency in Malmö, Sweden. Read more at 🤍 (In Swedish) ⚡ DiviMundo was founded in 2017 by Victor Duse, the tutor in this video. Find more tutorials and more free WordPress web design resources at 🤍 Affiliate disclaimer We are dedicated to sharing knowledge about WordPress and Divi. Some of the links in this video are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission, but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. DivMundo is not affiliated with nor endorsed by Elegant Themes, SiteGround or any other brand mentioned in this video.

How to Style a Divi Header

3598
93
7
00:08:25
11.04.2020

- ▷ Buy DIVI here and claim your BONUSES 🤍 ▷ Buy The Genesis Template 🤍 ▷ Free WordPress Mastery Course 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍

How to Customize the Top Header in Divi

152719
1445
212
00:18:43
24.10.2017

View the CSS, links and details here: 🤍

Make a Dynamic Responsive Header with 'Fluid Type' in Divi (CSS Clamp)

3463
154
50
00:10:00
17.05.2021

In this tutorial we will be creating a dynamically-sized responsive header with 'fluid typeography' in Divi (CSS Clamp Function). This will scale all the way from the mobile/tablet breakpoint, displaying a full menu on iPad and other tablets. Logo and type size will scale smoothly as the viewport scales. ❤️‍🔥❤️‍🔥 GET DIVI ❤️‍🔥❤️‍🔥 SUPPORT MY CHANNEL BY BUYING WITH MY LINK click here: 🤍 ❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥 ❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥 CSS /* Enable full menu on tablet */ 🤍media all and (min-width: 768px) { #fluid-header .et_pb_menumenu { display: block; } #fluid-header .et_mobile_nav_menu { display: none; } } /* Use 'clamp function to size logo */ #fluid-header img { max-width: clamp(150px, 20vw, 350px); } /* Use 'clamp function to size menu links */ #fluid-header a { font-size: clamp(14px, 1.5vw, 22px); } /* Use 'clamp function to size dropdown link */ #fluid-header li li a { font-size: clamp(12px, 1.5vw, 18px); } /* Use 'clamp function to size menu LH padding */ #fluid-header .et_pb_menu .et-menu li { padding-left: clamp(2px, 1vw, 20px); } Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites. If you purchase a Divi licence using the following link, I will earn a commission from Elegant Themes which helps support my channel. See the Elegant Themes site for details. Thanks in advance! 🤍 By using these affiliate links I will earn a referral commission which helps support my channel.

How to Create a Transparent Sticky Header on Scroll with Divi Theme 2021

8465
190
37
00:18:37
10.03.2021

If you have a Divi website and you want a transparent sticky header on scroll, you’re going to love this tutorial. In this video, I will show you how to make your Divi website header transparent and sticky on scroll. I will also show you how to assign different headers to specific pages. There's no external plugin or CSS needed to achieve this, we're going to be using Divi’s built-in sticky option. ✅ Get Divi Theme Here: 🤍 🙋‍♂️MY RECOMMENDED HOSTING PROVIDERS ★ ✅ Siteground: 🤍 ✅ Hostinger: 🤍 ✅ NameHero: 🤍 ☑ Watched the video! ☐ Liked? ☐ Subscribed? 🤍 ▶️Resources for Building your YouTube Channel* 🤍 ★ Want to say a quick thank you? Why not buy me A Coffee 🤍 ★ 🙋‍♂️LET'S CONNECT ON: ✅Website: 🤍 ✅ Instagram: 🤍 ✅Facebook: 🤍 ✅Twitter: 🤍 ✅Facebook Group: 🤍

Divi builder tutorial 2019 - Divi header design

7556
156
9
00:10:16
13.03.2019

Divi builder tutorial 2019 In this Divi theme header design, I am going to show how to design the Divi header. - ▷ FREE WordPress Course: 🤍 ▷ BUY DIVI here and get FREE Divi course worth $247 🤍 ▷ My Studio Gear: 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍

Divi Theme - How To Create Dynamic Headers

1689
66
7
00:08:47
23.10.2021

In this Divi Theme tutorial, I show you how to create a dynamic header in Divi. * FluentCRM - 🤍 Get 20% OFF (Use Coupon MAK) * Presto Player - 🤍 Get 10% OFF (Use Coupon MAK10) * BuddyBoss - 🤍 - Get 10% OFF (Use Coupon MAK10) * TutorLMS - 🤍 - (Use Coupon Code Mak20 for 20% Discount) * Divi Theme Builder - 🤍 (Includes BONUS Course) * LearnDash - 🤍 (Includes BONUS Course) * CartFlows - 🤍 Get 10% OFF (Use Coupon MAK10) * MemberPress - 🤍 (Includes BONUS Course) * WhishList Member 🤍 (Includes BONUS Course) * * * * Buy any of the products and get FREE Course BONUSES to get you started fast! 🔥 Best WordPress Hosting * SiteGround 🤍 (SAVE 70%) * FlyWheel Hosting 🤍 🔥 Divi Theme Templates * Design Beautiful Blogs In A Few Clicks 🤍 * Design Divi Websites Faster, Buy The Genesis Template 🤍 🔥 Online Business Books & Training * One Funnel Away Challenge - 🤍 * FREE Traffic Secrets Book - 🤍 * Affiliate Bootcamp - 🤍 * Experts Secrets Book - 🤍 😍 Recommended Plugins / Services * Convertkit 🤍 * MailPoet — 🤍 * TubeBuddy 🤍 * SkillShare— 🤍 ALL THE GEAR THAT I USE. * 🤍

Divi Transparent Header Menu. Sticky & Scroll Effects. Responsive.

1209
77
24
00:31:14
25.09.2022

I made a Divi theme builder tutorial over a year ago showing how to build a transparent Divi header menu and full screen header in Divi and it quickly became my most popular video to date. I have now fully updated this for 2022 to add the latest Divi features and make it: Fully Responsive Sticky - stick on scroll to the top of the screen Transform on scroll I hope you find this a useful addition to my Divi Theme Builder tutorial collection. Happy transparent header building! Download all of the assets here 🤍 00:00 Introduction 00:48 Initial Setup 03:43 Building the Homepage 11:26 Editing Responsive Styles 15:41 Building the Menu 17:14 Building the Header 23:39 Make it Sticky! 24:07 Change on Scroll 26:54 Style the Dropdown Menus

How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

9419
202
34
00:40:11
16.02.2021

Go to blog post: 🤍 In the past, we’ve shared different types of headers you can create with Divi and the Divi Theme Builder, but to help you take your header design even further, we’ll show you how to create a custom-animated hamburger menu as well. If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below: 🤍 Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing: 🤍

Customize WordPress website Header & Template (using Divi Theme Builder & Customizer )

2250
29
2
00:47:27
18.01.2022

In this Divi header tutorial / Divi customizer tutorial, we show you how to customize the look of your website's template and header navigations using the Divi Customizer & Theme Builder. - ⚒ // TOOLS // ⚒ - The following are the tools I use and highly recommend. Some of these are affiliate links I earn a commission from, but this is what I use and swear by! 📺 USED FOR MY VIDEOS: 🔴 Camtasia (screen recording): 🤍 📷 Camera - Canon Rebel T7i: 🤍 🎙 Nicama Lavalier Mic: 🤍 🎙 Audio-Technica Mic: 🤍 🖥 WEBSITE / WORDPRESS BLOGGING 🌍 WebHosting Siteground:🤍 🔥 Divi WordPress Theme: 🤍 ⚙ All in One SEO Premium Plugin: 🤍 📩 EMAIL NEWSLETTER: 📈ConvertKit: 🤍 😍 DESIGN & PHOTO EDITING: 👁 Adobe Photoshop: 🤍 👁 Canva: 🤍 👁 Penji Graphic Design Service: 🤍 🔸 FREE YouTube Thumbnails PSDs: 🤍 🔥 PREMIUM YouTube Thumbnails PSDs: 🤍 🔸 FREE Facebook Cover Images PSDs: 🤍 🔥 PREMIUM Facebook Cover Images PSDs: 🤍 FREE PHOTOS: 🔸 Unsplash: 🤍 🔸 Pexels: 🤍 // LEARN MORE 🔗BEGINNER COURSE Build a website, set up your presence online and start earning money: 🤍 // CREATOR IMPACT 🤘 Follow Creator Impact on Social Media! 🔗 Facebook: 🤍 🔗 Instagram: 🤍 🔗 Twitter: 🤍 This tutorial is designed to help you customize your WordPress website easily with great results. Just note that some of the links below are affiliate links I earn commission from: // DOWNLOAD DIVI: 🤍 // FULL IN DEPTH DIVI TUTORIAL PLAYLIST (build a website, step by step): 🤍 Download the Test Page Template in the Video: 🤍 Divi header design can be very simple or quite complex depending on which way you attack it. You can access Divi header customization in the Theme customizer for simple options or go into the Theme Builder for full control. This will allow you to take full control over your WordPress Website, all you need is the divi theme. We have a series of divi theme tutorials below, designed to help you design a complete website: // TIMESTAMPS 0:00 - Intro 0:20 - Starting with a Logo / Brand 0:54 - Add your Logo & Adjust Theme Settings 3:44 - Setting up Menus for the Navigation 7:11 - Change Home & Blog Setup 8:03 - Add Logo Color to Swatches 9:14 - Adding Test Page for Reference while customizing 10:28 - Explore Basic Layout, Typography & Theme Customizer Settings 16:10 - Customize Header & Footer in Theme Customizer 23:26 - Customize the Footer 27:00 - Customizing Buttons 29:31 - Basic Blog Post Design / Mobile Settings 32:30 - ThemeBuilder / Menu Module to Create a Navigation Header 41:31 - Using Columns & Rows to go further with the Header Design This Divi theme tutorial is for beginners and is a part of our series showcasing how to make a WordPress website with Divi - an in-depth series of WordPress tutorials showing you how to make a Divi website by breaking down the individual areas and walking through how they work, step by step. We show you how to use this powerful theme in a number of ways! We cover: - Designing your base template (using the customizer or the theme builder) - A beginner Divi visual builder tutorial - How basic design options and modules work - a variety of page layouts you can build and download. The theme used here is called Divi (Elegant Themes top WordPress Theme). It is a complete and comprehensive WordPress page builder along with a site-wide editor known as the Divi theme builder. // LEARN MORE Our Full Divi Theme Playlist: 🤍 Exploring the Full Width Header Module: 🤍 How to set up a Divi Full Width Slider: 🤍 Exploring all Divi Builder Modules: 🤍 For my Free Beginners Email Course: 🤍 Learn how to get your business or blog online, reaching more people and making more money! // CREATOR IMPACT Follow Creator Impact on Social Media! Facebook: 🤍 Instagram: 🤍 Twitter: 🤍

How to Create a Vertical Navigation Menu or Header for Your Divi Website

17570
234
19
00:16:50
25.10.2020

Vertical navigation menus can come in handy for certain websites that need more menu items at the forefront. Horizontal menus can be difficult to fit all the menu links needed, especially on smaller browser widths. In this tutorial, we are going to show you how to build a custom vertical navigation menu using the Divi Theme Builder. This will allow you more room for showcasing your WordPress menu items. And you will have full power to add additional Divi Modules to the vertical header and design them with the Divi builder. Read more: 🤍

Using Divi Header & Navigation Options

42410
46
00:03:27
21.05.2014

This tutorial is outdated. Please watch the updated version: 🤍

How to Customize the Divi Header - Divi header tutorial

77001
601
49
00:17:25
13.03.2018

How to Customize the Divi Header. In this Divi header tutorial, I show you step by step how to customize the Divi header step by step. - FREE WordPress Course 🤍 Visit 🤍 BUY DIVI 3.0 HERE 🤍 50% DISCOUNT ON DIVI 3.0 BEGINNER COURSE COUPON CODE DV50 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍

Faites un bel entête (header) de page WordPress avec le Divi Thème Builder

14045
360
95
00:15:16
26.10.2020

Vous souhaitez faire facilement un entête de page WordPress personnalisé pour les pages de votre site web WordPress ? Dans cette vidéo, je vous explique pas à pas comment réaliser cet entête avec le Divi Thème Builder. Vous pourrez ainsi retrouver automatiquement ce nouvel entête sur toutes vos nouvelles pages WordPress créées :) Je vous explique également comment placer votre logo et comment designer votre menu ainsi que les icônes liées aux pages de vos réseaux sociaux. *Code CSS utilisé pour laisser alignés les 3 modules de la rangée sous périphériques mobiles : display: flex; *Code CSS utilisé pour garder la section entête fixe en cas de scroll vers le bas : position: fixed; top: 0; left: 0; right: 0; 🔥🔥🔥🔥 Mise à jour : Vous pouvez désormais utiliser pour fixer la section menu la fonction "Stick to top" présente dans l'onglet "Avancé" puis "Scroll effects" 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 𝐏𝐑𝐎𝐌𝐎𝐓𝐈𝐎𝐍𝐒 𝐏𝐄𝐑𝐈𝐎𝐃𝐄 𝐂𝐘𝐁𝐄𝐑 𝐌𝐎𝐍𝐃𝐀𝐘 (jusqu’au 12/12/22) Divi -𝟐𝟓% | Divi Cloud -𝟒𝟒% | Divi Teams -𝟒𝟒 % | Divi Marketplace jusqu’à -6𝟎% ➡️ 🤍 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 💕 SELECTION DE 𝐒𝐔𝐏𝐄𝐑 𝐎𝐅𝐅𝐑𝐄𝐒 À NE PAS MANQUER sur mon site ! ➡️ 🤍 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥 Vous aimez mon travail ? Ici, vous pouvez m'offrir un café ☕😃 ➡️ 🤍 LIENS ÉVOQUÉS DANS LA VIDÉO : 🔍 👁️ DIVI, le super thème et Visual Builder pour WordPress : 𝗗𝗲𝗽𝘂𝗶𝘀 𝗹𝗮 𝗽𝗮𝗿𝘂𝘁𝗶𝗼𝗻 𝗱𝗲 𝗰𝗲𝘁𝘁𝗲 𝘃𝗶𝗱𝗲́𝗼, 𝗹𝗮 𝗽𝗼𝗹𝗶𝘁𝗶𝗾𝘂𝗲 𝗱'𝗘𝗹𝗲𝗴𝗮𝗻𝘁 𝗧𝗵𝗲𝗺𝗲 𝗮 𝗰𝗵𝗮𝗻𝗴𝗲́ 𝗲𝘁 𝗹𝗮 𝗿𝗲́𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗱𝗲 𝗗𝗶𝘃𝗶 𝗱𝗲 -𝟮𝟬 % 𝗻'𝗲𝘀𝘁 𝗽𝗹𝘂𝘀 𝗱𝗶𝘀𝗽𝗼𝗻𝗶𝗯𝗹𝗲. 𝗘𝗹𝗹𝗲 𝗲𝘀𝘁 𝗽𝗮𝘀𝘀𝗲́𝗲 𝗮̀ -𝟭𝟬% 𝗰𝗲 𝗾𝘂𝗶 𝗿𝗲𝘀𝘁𝗲 𝘁𝗼𝘂𝗷𝗼𝘂𝗿𝘀 𝗶𝗻𝘁𝗲́𝗿𝗲𝘀𝘀𝗮𝗻𝘁 😉 ➡️ 🤍 -10% sur votre licence ! 💗 ➡️ 🤍 Divi lien classique RECOMMANDATIONS ET BONS PLANS ALPA 14 : 👍 👁️ Formation WordPress Divi Webmyday, finançable jusqu’à 100% par les budgets de formation. ➡️ 🤍 -𝟭𝟬% avec le code promo 𝗔𝗟𝗣𝗔𝟭𝟰 💗 👁️ Hostinger : l’hébergeur de qualité aux tarifs compétitifs. -7% sur toutes les formules avec le code ALPA14 💗 ➡️ 🤍 👁️ o2switch : 1 super hébergeur pour votre site WordPress, à 5€HT/mois en illimité ➡️ 🤍 👁️ Semrush : la meilleure boîte à outils SEO, 14 j Gratuits (offre spéciale) ➡️ 🤍 👁️ Créez des vidéos marketing -25% sur les offres Invideo ➡️ 🤍 👁️ MailerLite : L'email marketing simple et efficace, 30 j Gratuits toutes options ➡️ 🤍 👁️ duoLogo : Réalisez un logo pro, formule Gratuite ➡️ 🤍 👁️ Thinkific : Créez & vendez vos formations, 1 mois Gratuit en formule Pro ➡️ 🤍 👁️ Alpa14 SEOStudio : Outils SEO Alpa14 gratuits ➡️ https://alpa14-seo ALPA 14 C’EST AUSSI UN BLOG 😀 ✉️ Abonnez-vous à la Newsletter pour être averti des futurs tutoriels et des nouveautés du site. ➡️ 🤍 Pour une totale transparence, la plupart des liens de cette page sont des liens affiliés, en les utilisant, vous m'offrez une commission sur la vente et votre geste sympa compensera mes nombreuses heures de travail à concevoir ce tutoriel. Merci ! 🙂🙏. Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l'éditeur. Voire parfois moins cher 👍.

Divi Theme | Custom Footer Tutorial

11018
198
24
00:29:19
23.03.2022

Learn how to create a footer using the Divi theme and the Divi builder. The footer will be optimized for all devices. Along the way, you will learn some CSS codes and ways to find solutions to design limitations. Get the Divi theme: 🤍 Complete Divi tutorial: 🤍

DIVI Theme Builder: Crear y Modificar Header (cabecera) Wordpress con el Constructor de Temas DIVI

16367
218
52
00:21:29
12.06.2020

Curso Gratis DIVI + WP: 🤍 En este video te explico cómo crear o editar el Header (cabecera) de Wordpress con el Constructor de Temas de DIVI * Más info de DIVI: 🤍 ★★★★ ★ RECURSOS ★★★★ ★ ⚡️ HOSTING Más Rápido: 🤍 💎 DOMINIO Web Económico: 🤍 💜 DIVI 20% Descuento: 🤍 💜 DIVI Curso Gratis: 🤍 ⭐️ LOGOTIPO Económico: 🤍 📭 EMAIL Marketing Prueba GRATIS: 🤍 🎥 EDITAR Videos Rápido: 🤍 💯 YOUTUBE Más Vistas: 🤍 💥 DISEÑOS Social Media: 🤍 💻 MAC & PC Mantenimiento: 🤍 Este video es sobre: cambiar logo divi editar cabecera wordpress header en divi tutorial divi divi menu css menu divi divi web divi plugin Music: 🤍

How to Make Your Divi Header & Nav Menu Fixed on Mobile

52910
294
39
00:09:28
06.10.2016

This video shows you how to add a short snippet of CSS to your Divi website to make your mobile header/menu fixed. Here's the accompanying blog post with the CSS snippets: 🤍 Have a question or would like to request a future Divi tutorial? Feel free to let me know in the comments below, or on the blog post :)

How to Add a Dynamic Site Title and Tagline to a Divi Global Header

3729
65
3
00:08:32
06.02.2021

Knowing how to add a dynamic site title and tagline to a Divi Global Header will come in handy when building Divi websites. And there are a few good reasons that one would do it. For one, not every site has a logo. A site title is a good logo replacement. Another reason is to boost your brand by including vital info about your site where everyone will see it. In this tutorial, we’ll show you how to add a dynamic site title and tagline to a Divi global header. This solution will pull the site title and tagline from the backend of WordPress dynamically. Plus, you will have all the powerful design options of Divi to customize the title and tagline however you want! Read more: 🤍

Divi Theme How To Create A Transparent Header 👍👍👍

502
26
5
00:12:02
12.09.2022

How to create a transparent header on the home page with the Divi Theme. Today we will be demonstrating how to use the Divi Theme Builder to create a custom transparent header just for the home page to better show off the hero image. This is very attention grabbing, and a great eyecatching feature to have on your site. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website. This is a great feature to have on your website, and very easy to do. There is no coding or extra plugins used in this build today. So, follow along with the video and see how to create create a transparent header on the home page using the Divi Theme. For more information on the Divi theme, check out our Divi playlists below. We will cover: Accessing The Theme Builder Adding Divi Menu Module. Styling The Divi Menu Module. Adjusting Size Using Padding. Saving And Assigning The New Header To Specific Pages. Moving A Section With Negative Margin. Playlist page for more videos on this: 🤍 Try out the Divi theme: 🤍 Divi Supreme Modules Pro Plugin 10% Off: 🤍 Divi Supreme Modules Light Plugin: 🤍 Divi Supreme Modules Playlist: 🤍 v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw Full Ecommerce Site Build Playlist: 🤍 v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9 Contact Form With File Upload Video: 🤍 Divi 4 Theme Create An Ecommerce Store In One Hour: 🤍 My Blog : 🤍 Check out our playlist page for more videos on this: 🤍 Sub: 🤍 RECOMMENDED PLAYLISTS Elementor Ecommerce Store: 🤍 Divi Snippets: 🤍 Divi 4 Ecommerce Store: 🤍 Bootstrap 4 Basics: 🤍 Elementor: 🤍 WordPress Tips: 🤍 Subscribe: 🤍 Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you. #YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite

Download 50+ Divi Header & Footer Layout | Divi Theme Header & Footer Layout Pack Download

1792
32
5
00:08:36
25.04.2021

Divi is the number one wordpress theme in the world. You can create any type of website using this Divi theme. In this video I will show you how to download 50+ Divi header and footer layout. Using the Divi Builder plugin included with the Divi theme you can design and customize the WordPress web site as needed. If you like the video, please like, comment, share and don't forget to subscribe to my youtube channel. Thanks Download Link Divi Header & Footer: 🤍 Download Divi Theme: 🤍 Facebook: 🤍 Facebook Page: 🤍 Create a Professional Website: 🤍

How to Customize the Top Header in Divi

8755
48
4
00:06:06
18.04.2018

How to Customize the Top Header in Divi. In this video, How to Customize the Top Header in Divi. - FREE WordPress Course 🤍 - Visit Divi Cake 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍

Divi Theme Tutorial | How to style your Divi headers for different content

2778
55
4
00:10:27
27.05.2020

In this Divi Theme Tutorial, I show you how to style your Divi headers for different content. ▷ Buy DIVI And Get The Web Design Formula Course Worth $497 🤍 ▷ Buy LearnDash NOW! And Get A FREE LearnDash Course Worth $297 🤍 ▷ Create Amazing Sales Funnels in WordPress, Buy CartFlows NOW! And Get The Sales Funnel Mastery Course Worth $497 🤍 ▷ Design Divi Websites Faster, Buy The Genesis Template 🤍 ▷ Design Beautiful Blogs In A Few Clicks 🤍 ▷ Try Skillshare Premium FREE for 2 months: 🤍 MARKETING RESOURCES THAT I USE ▷ Traffic Secrets by Russell Brunson ▷ ClickFunnels 14 Day Trial ▷ ▷ ▷ ALL THE GEAR THAT I USE. ▷ 🤍

How To Upload A JSON File Header With The Divi Theme 👍

737
17
3
00:06:21
28.02.2022

How To Upload A JSON File Header With The Divi Theme. In this series of videos we are going to cover some of the basic set up and build steps for people new to the great Divi Theme. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching features to enhance the look and user experience of your website. Today we are going to demonstrate how to download, then upload a free json file header template from the Elegant themes website, using the inbuilt features of the Divi theme. For more information on the Divi theme, check out our Divi playlists below. Full Ecommerce Site Build Playlist: 🤍 v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9 Contact Form With File Upload Video: 🤍 Divi 4 Theme Create An Ecommerce Store In One Hour: 🤍 Try out the Divi theme: 🤍 Divi Supreme Modules Plugin 10% Off: 🤍 Divi Brain Addons Free Plugin: 🤍 Divi Blog Resources 🤍 My Blog : 🤍 RECOMMENDED PLAYLISTS Elementor Ecommerce Store: 🤍 Divi Snippets: 🤍 Divi 4 Ecommerce Store: 🤍 Bootstrap 4 Basics: 🤍 Elementor: 🤍 WordPress Tips: 🤍 RECOMMENDED VIDEOS: Bootstrap 4 Complete One Page Scrolling Website Tutorial : 🤍 Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: 🤍 Bootstrap - How to edit a bootstrap template: 🤍 Divi Add a live facebook feed to your divi or any wordpress website: 🤍 Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: 🤍 Elementor Wordpress Builder How To Build A Parallax Section: 🤍 SOCIAL MEDIA Follow what I'm doing on: Facebook: 🤍 Twitter: 🤍 Linkedin: 🤍 Support the channel: 🤍 Courses I teach: 🤍 Subscribe: 🤍 #YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite

Divi Theme Header & Footer einrichten - Divi.World Webcast Episode 4

13169
216
24
00:43:30
01.05.2020

Selbst wenn dein Internetauftritt nur aus einer einzigen Seite besteht, sind Header & Footer wichtige Elemente, um deinen Besuchern Orientierung zu geben, die Navigation auf der Seite und ggf. auch die Kontaktaufnahme zu erleichtern. Wir zeigen dir was du mit dem Divi Standard Header & Footer erreichen kannst und wie du mit Hilfe des Divi Theme Builders noch mehr Gestaltungsmöglichkeiten für deinen Header & Footer nutzen kannst. Links zu den Inhalten dieser Episode: Hast Du Themenvorschläge für uns? 🤍 Divi Theme mit Rabatt*: 🤍 Neuigkeiten zum Webcast: 🤍 Infos zu dieser Folge: 🤍 Basics: - Divi Theme mit Rabatt*: 🤍 - Divi Theme Tutorial: 🤍 - WordPress Website erstellen Artikel: 🤍 - Divi Theme installieren: 🤍 Divi Theme Optionen: - Divi Theme-Optionen Teil 1: 🤍 - Divi Theme-Optionen Teil 2: 🤍 - Grundeinstellungen: Customizer Teil 1: 🤍 - Grundeinstellungen: Customizer Teil 2: 🤍 - Soziale Netzwerke in das Divi Theme einbinden: So geht's!: 🤍 - Divi Theme Probleme lösen: Darstellung & Formatierung: 🤍 Divi Theme Builder: - Artikel: Divi 4.0: Divi Theme Builder Tutorial Schritt für Schritt: 🤍 - Video: Divi 4.0 Theme Builder Test & Anleitung: 🤍 Theme Builder Downloads: - Divi Ressourcen im Elegant Themes Blog*: 🤍 - Header Layout Pack*: 🤍 - Footer Layout Pack*: 🤍 - Sechs Theme Builder Packs zum Download*: 🤍 - Software Theme Builder Pack*: 🤍 - Wie du im Header ein Button einbaust, der auf Klick ein Kontaktformular erscheinen lässt*: 🤍 #wordpress #divi_theme #header #footer #tutorial #anleitung #customizer #theme #wphelp #divi_world #divi_webcast

Using The Divi Header Customizer Settings

157422
224
00:12:10
18.06.2015

This tutorial is outdated. Please watch the updated version: 🤍

How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

24890
370
48
00:12:14
06.01.2020

When you’re designing a fixed global header, you might want to shrink the header’s height when your visitors are scrolling. It helps reduce the space the global header takes up in your visitors’ viewport height. In this tutorial, we’ll guide you through that process. We’ll start by building the menu, and then we’ll add some JQuery and CSS code to trigger the effect. You’ll be able to download the JSON file for free as well! Read the article here: 🤍

5 Creative Divi Header Module Styles You Can Achieve

6331
112
11
00:22:30
10.05.2019

Out of the box, the Divi Header Module can create striking header designs with only a few adjustments. This makes it an extremely popular module when designing headers for your website in Divi. And with a little out-of-the-box thinking, you can create some really unique designs using only the built-in settings (no custom CSS). So for those of you who want to explore some new header designs, I’m going to show you 5 Divi header module styles that may inspire you. Read more: 🤍

Divi Flexile Headers Pack Import Tutorial

2897
34
5
00:04:17
11.12.2020

This tutorial is for the 'Divi Flexible Headers'. It includes the steps on how you could import the layouts on your website and use them. *This tutorial is not applicable for the Divi Flexile Child Theme. Need help with changing the logo in Divi Flexile Headers pack? Check out this Video: 🤍

Назад
Что ищут прямо сейчас на
header divi Subrosa فىلىم AM designer Parodie bros скачать garrys mod ice maker repair nabanna scholarship digi24 machine vision дана Вайт Srbi NOW BLACKPINK ERA VIDEO PESCA les oies sauvages zaxo eric seidel milosnicy лван dns сервера