Одну секунду
Что-то сучилось. Попробуйте еще раз.
Divi menu module смотреть последние обновления за сегодня на .
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!
The primary menu bar makes navigating for visitors seamless. Apart from the default primary menu bar we're used to in WordPress, you've probably come across the Fullwidth Menu Module that Divi offers as well. Usually, it is used to display other menus on your website that are different from the primary menu you have at the top of each page. But you can also easily use the Fullwidth Menu Module to replace your primary menu bar. This gives you the freedom of placing the menu wherever you want on the page without dealing with a duplicate menu at the top of your page. You can also use Divi's built-in options to style the menu the way you want to, meaning you can create stunning results using the border and divider options, for instance. In this tutorial, we'll show you how to replace your primary menu bar with the Fullwidth Menu Module using Divi's Carpenter Layout Pack. This is part of our ongoing Divi design initiative. You can choose whether you want to make this method apply to all pages or just a few of them. Get the free Carpenter Layout Pack: 🤍 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: 🤍 Go to the blog post: 🤍
See in action here: 🤍 Let's go to recreate the "Elegant Themes" Menu by using "DiviMenus Flex", the new module included with the "DiviMenus" extension as of version 2.0. that also includes the "Sub" link type and many new features that will surely allow you to create all kinds of designs! 🤍 In this video we also take advantage of the "DiviMenus Sharing" add-on (sold separately on the Divi Marketplace) in order to add the "Share" link type to the last Menu Item and convert it into a social sharing button! 🤍 Learn more: 🤍 Happy building! 🥳 * ⚠️ WARNING 1: In this video there is an error at 6:50" since we use the "Max Width" property instead of "Width". You always must define a "Width" (pixels units) for your "Sub" layouts, either from the layout itself (Divi Library) or using later the "Sub Width" field from the "DiviMenus Flex" module. ⚠️ WARNING 2: This video was recorded with DiviMenus 2.2 version so DiviMenus still didn't include the new LOGO field which has been included since DiviMenus 2.7 version. as well as other improvements in the module. (Learn more about the LOGO: 🤍 Due to this reason the current downloadable zip file available from DonDivi includes a new Header made with the latest version of DiviMenus 2.7. Enjoy it! View DiviMenus Changelog: 🤍
In this Divi tutorial, I'm going to show you how to style and customize the Divi Menu module dropdown submenu with CSS. View the blog post, snippets, and examples: 🤍 As we continue our Divi Menu Module series, we are going to focus on the dropdown submenu for the next several tutorials. With this tutorial, you will be able to style and customize the Divi menu module dropdown submenu and change things like the colors, border, spacing, hover effects, and more! First, we need to understand how the Divi submenu is made so we can target individual elements of it separately based on our design style. There are three parts that make up the Divi dropdown submenu: -Unorderd List (The Submenu) -List Items -Links This tutorial will go over each part of the submenu separately, and you can follow along and use it as a guide for styling your Divi menu dropdown submenu! Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
We’re excited to introduce the #1 Divi menu plugin with superior features! It's DiviFlash Menu Module, your next-level mega menu builder. DiviFlash menu module allows you to create Divi mega menu or any other type with unlimited customization options for easy-to-use navigation experience. You can also style your Divi menu in whatever way you want with the perfect mix of text, badges, tooltips, animations, images, icons, and many more. We’re built to make the Divi menu module easier so that you don’t need any third-party Divi menu plugin. And put our development team behind your idea to make the navigation bar fun and alive. Here’s what sets our Divi menu module apart: - Create different types of Divi menus. - Build a mega menu for Divi with the same module. - Place elements anywhere inside the menu. - An extensive list of elements for the menu. - Place as many elements as you want. - Tooltips and badges for your menu item. - Mobile menu control with the breakpoint. - Animations menu and items. - and much, much more. Learn more at 🤍 Follow DiviFlash on Social: Facebook: 🤍 Twitter: 🤍 Instagram: 🤍 Timestamps: 0:00 Introduction 0:21 Divi Mega Menu 0:58 Divi Menu Builder Module 1:35 Elements for the Menu Builder 2:15 Styling and Animation Options 2:40 Outro divi menu, divi mega menu, divi menu module, divi mega menu module, divi menu plugin, divi mega menu plugin, divi menu customization, divi mobile menu, divi dropdown menu, divi hamburger menu, divi sticky menu, divi menu styles, divi custom menu, divi drop down menu, divi theme menu, divi theme mega menu, divi menu builder, divi mega menu builder, divi header, divi header menu
Changing website logos can be a time-consuming process. This is especially true if the website uses different headers for different templates. If you use an image for each one of those headers, you’ll have to manually get in there and change each one of them. Fortunately, Divi can display your website’s logo dynamically, saving you time! In this post, we’ll see how to use a dynamic logo inside Divi’s Fullwidth Menu Module. Blog post: 🤍 ➡️ Learn more about Divi: 🤍 🔵 Like us on Facebook: 🤍 #WordPress #Divi #ElegantThemes
A dropdown menu button can really come in handy when designing a website. Aside from the main menu, there are areas on a site that may require a dropdown menu of sub items. We see them being used for things like blog post categories, lists, and form inputs. But they can even be used for a main call to action. In this tutorial, we’ll show you how to create a dropdown menu button using Divi’s fullwidth menu module. To do this, we will first create a menu in WordPress. Then we will use Divi’s fullwidth menu module to display that menu with custom styles using the Divi builder and a little custom CSS. The result is a dropdown menu button that is both practical and elegant. Read more: 🤍
Ever since Divi’s Theme Builder has come out, the way we design headers and footers throughout our websites with Divi has become easier than ever. Everything can be customized and you can obtain the exact menu you have in mind without ever having to leave the intuitive Divi environment. Now, at a certain point, you might have come across the Elegant Themes dropdown menu on our website. This dropdown menu is a more advanced type of mega menu that creatively combines icons, text and CTAs. This allows visitors to visually navigate through the different products that are provided. It also translates into a beautiful nested menu on smaller screen sizes. In this tutorial, we’re going to show you how to recreate this advanced Elegant Themes dropdown menu inside Divi’s Theme Builder. We’ll combine the best of both worlds; we’ll use the built-in Divi elements to create the foundation of our dropdowns and combine it with some code that places the dropdowns inside the WordPress menu. You’ll be able to download the JSON file for free as well! Go to the blog post: 🤍 Get the second theme builder pack for Divi 🤍 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: 🤍
How to create your own custom secondary menu bar with the Divi Theme. In this video we will be showing how to easily do this using the inbuilt features of Divi. Today we will be demonstrating how to create this feature using the Divi Theme Builder and regular Divi Modules. So follow along with this video to see how to do this with your site. In this video we will cover: Adding A Custom Global Menu. Recreating The Default Header. Adding The Secondary Menu. Phone Number With Icon. Email Address With Icon. CTA Button. Social Media Icons. Adjusting Sizing. Adjusting For Table And Mobile. Join us in this series of videos where we explore the fantastic effects you can achieve with the Divi theme. With its versatile modules and effects, you can create eye-catching visuals that enhance the look and user experience of your website. Having a secondary menu with the Divi theme provides several benefits for website design and user experience. Firstly, it improves navigation by offering additional menu options. Users can access specific pages or sections directly from the secondary menu, enhancing usability and saving time. Secondly, a secondary menu allows for better organization and categorization of content. Different sections or categories can be grouped together, making it easier for users to find relevant information. Thirdly, it adds versatility to the overall design. With a secondary menu, designers can create unique layouts and incorporate different styles, further enhancing the visual appeal of the website. Overall, a secondary menu in Divi enhances navigation, organization, and design possibilities for an improved user experience. THEMES AND PLUGINS USED IN THESE VIDEOS: Try out the Divi theme: 🤍 Divi Supreme Modules Pro Plugin 10% Off: 🤍 Divi Supreme Modules Light Plugin: 🤍 MY YOUTUBE PLAYLISTS: Divi Supreme Modules Playlist: 🤍 v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw Playlist page for more videos on this: 🤍 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: 🤍 Check out our playlist page for more videos on this: 🤍 Sub: 🤍 Don't forget to drop any questions below, I will do my best to answer or make a video demo for you! MY BLOG 🤍 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 #Divi #Elementor
Introducing Divi Menu Module Header Designs - Layout Pack for Divi Buy Product Here : 🤍 Demo URL : 🤍 Website URL : 🤍 Documentation URL : 🤍
All of the code snippets for the effects I used in this video are available here: 🤍 If you'd like to see the demo page I was working on, you can take a look here: 🤍 Here's a quick timestamp reference for your convenience: 00:02:10 Divi Menu module customization options 00:03:41 Changing the sub-menu width 00:12:21 Full-width Menu items 00:14:28 Sub-menu items font styling 00:15:14 Sub-menu links on hover 00:17:15 Sub-menu border and inner spacing 00:19:25 Aligning sub-menu links with the parent menu item 00:21:20 Sub-menu rounded corners 00:23:18 Sub-menu shadow 00:24:41 Sub-menu triangle top arrow 00:28:55 Center-align the sub-menu container 00:31:30 Center-align the sub-menu links 00:31:55 Sub-menu animation 00:34:16 Changing the Sub-menu vertical offset I hope you found this tutorial useful and easy to follow. Don't hesitate to give me a comment with your thoughts! And if you'd like to understand CSS in Divi better and use it with more confidence, join my Free 5-Day CSS & Divi Challenge! You'll find all the details here: 🤍 Best, ~ Ania
How To Create A Menu 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 your first menu with 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
The Fullwidth Menu module lets you place a navigation menu anywhere on the page. This could be used to add a secondard menu down the page, or it could be used in conjunction with the Blank Page feature to move your main navigation down the page. For example, you could move your menu down below your first section to greet people with a large splash image. This essentially allow your header navigation to move around the page usig the builder! View full documentation here: 🤍
Learn how to use a few lines of CSS to change the Divi Menu module appearance and transform it into a vertical list of links to display in a Sidebar or a Footer in Divi. Here's the demo page: 🤍 You can copy the code I used and download the sample Footer layout with vertical navigation from the blog: 🤍 Hopefully, it's useful. Let me know in the comments what you think! ~ Best, Ania
If you use the Divi Theme and want to setup a Mega Menu - then this video can show you how without adding plugins or using complicated code. Elegant Theme's Divi Theme / Divi Builder comes with a lot of obvious features, but the Mega Menu is a little hidden as it's a simple string of text that activates it - meaning you have even more customization control over your WordPress website/blog. The and short version of this tutorial is to head to your Menus' section (under 'Appearance' and 'Menus' in your WordPress dashboard). Add "mega-menu" as a link class to the WordPress menu item that you want the menu to expand from. If you can't see the Link class, hit 'Screen options' at the top of the screen and turn on 'CSS Classes'. Find more Divi Tutorials and resources on our Divi Page at CreatorImpact.com - 🤍 If you don't already have Divi, here's where you can find it: 🤍 (This is an affiliate link I earn a commission from - but supports this channel and the free tutorials I release) In this video I show you how to activate and customize the Divi Mega Menu, step by step and it's dead easy! - ⚒ // 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: 🤍 😍 MISC: 👁 Adobe Photoshop: 🤍 👁 Canva: 🤍 🔸 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: 🤍
+ Get the Divi Theme and Builder - 10% off* - 🤍 + In this video I will show you how to make a fully responsive transparent menu header with Divi. 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 *discount subject to change by ET without notice
This Divi tutorial will show you how to make the logo image taller with CSS to overlap the Divi Menu module. Blog Post + Snippets: 🤍 If you want your logo to be taller than your menu, you can do this very easily in Divi. There are quite a few tutorials out there about how to do this with the old default header, and each one is different and none of them apply to the new Menu module that you need to use when you use the Divi Theme Builder. So today in this Divi tutorial I will show you how to make the logo overlap the Divi Menu module. This makes nearly 30 tutorials in our Divi Menu module series! And just for good measure, I'll give you a snippet to do this same thing to the default menu as well. This tutorial is very easy because it only takes a tiny bit of CSS code and we can add it directly into the Menu module. So go head and go to your Theme Builder header or wherever else you have the Menu module, and open the settings. Go to the Advanced tab, open the Custom CSS toggle, and find the Menu Logo CSS box. This is where you can type or paste the CSS to make the logo image overlap the menu. You can use any value you want, but in our video I am using -30px margin top and bottom. But of course, this is meant to be customized for your logo height, menu height, or whatever your situation happens to be. Become a member of our Divi Adventure Club! 🤍 Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍 Thanks for watching!
This tutorial will show you how to create a large fullscreen overlay menu on desktop or mobile using the Divi Menu module and some CSS! Blog Post + Snippets: 🤍 You know how much I love the Divi Theme Builder if follow my tutorials, but one things I miss in the default header is the fullscreen menu option. Along with our tons of other header tutorials and menu tutorials, now you can add another one to the list for a fullscreen menu! That's right, in this tutorial I am going to show you how to create a fullscreen overlay menu that works on desktop and mobile alike. This tutorial was very difficult to create, so I hope you enjoy it and consider subscribing!
When setting up a website for a client of yourself, you’ll find yourself contemplating what type of header to build. The most used one around the web is the horizontal menu bar at the top, but there are other options as well, such as a slide-in menu. Slide-in menus help you limit the space that’s taken up by the global header. Rather than show all your menu items right off the bat, you can let a slide-in menu appear when your visitors click on the hamburger icon in the top right corner. Using a slide-in menu helps you add additional interaction to your website. In today’s use case Divi tutorial, we’ll show you how to create one using Divi’s Theme Builder, the built-in Divi elements and some additional code. The design of this slide-in menu matches the Yoga Instructor Layout Pack perfectly but you’re free to modify it to match any website you build. You’ll be able to download the JSON file for free as well! Go to the blog post: 🤍 Download the Yoga Instructor Layout Pack: 🤍 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: 🤍
Comment créer un header menu WordPress efficace ? Dans ce tutoriel Divi Alpa14, je vous explique comment réaliser un header avec un menu et un bouton d'appel à l'action (call to action). Un bouton peut être intéressant car il met vraiment en évidence un lien important plutôt que de le placer en tant que page dans un menu. Pour cet exercice nous utiliserons le Thème Builder du Divi Visual Builder et nous créerons ensemble un entête (header) global qui se retrouvera automatiquement sur toutes les pages du site WordPress. Bon tuto Divi à toutes et à tous ! 𝗟𝗜𝗘𝗡𝗦 𝗘́𝗩𝗢𝗤𝗨𝗘́𝗦 𝗗𝗔𝗡𝗦 𝗟𝗔 𝗩𝗜𝗗𝗘́𝗢 : 🔍 👁️ Divi, le super thème et Visual Builder pour WordPress : 𝗗𝗲𝗽𝘂𝗶𝘀 𝗹𝗮 𝗽𝗮𝗿𝘂𝘁𝗶𝗼𝗻 𝗱𝗲 𝗰𝗲𝘁𝘁𝗲 𝘃𝗶𝗱𝗲́𝗼, 𝗹𝗮 𝗽𝗼𝗹𝗶𝘁𝗶𝗾𝘂𝗲 𝗱'𝗘𝗹𝗲𝗴𝗮𝗻𝘁 𝗧𝗵𝗲𝗺𝗲 𝗮 𝗰𝗵𝗮𝗻𝗴𝗲́ 𝗲𝘁 𝗹𝗮 𝗿𝗲́𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗱𝗲 𝗗𝗶𝘃𝗶 𝗱𝗲 -𝟮𝟬 % 𝗻'𝗲𝘀𝘁 𝗽𝗹𝘂𝘀 𝗱𝗶𝘀𝗽𝗼𝗻𝗶𝗯𝗹𝗲. 𝗘𝗹𝗹𝗲 𝗲𝘀𝘁 𝗽𝗮𝘀𝘀𝗲́𝗲 𝗮̀ -𝟭𝟬% 𝗰𝗲 𝗾𝘂𝗶 𝗿𝗲𝘀𝘁𝗲 𝘁𝗼𝘂𝗷𝗼𝘂𝗿𝘀 𝗶𝗻𝘁𝗲́𝗿𝗲𝘀𝘀𝗮𝗻𝘁 😉 ➡️ 🤍 -10% sur votre licence ! 💗 ➡️ 🤍 Divi lien classique ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖ 𝗥𝗘𝗖𝗢𝗠𝗠𝗔𝗡𝗗𝗔𝗧𝗜𝗢𝗡𝗦 𝗘𝗧 𝗕𝗢𝗡𝗦 𝗣𝗟𝗔𝗡𝗦 𝗔𝗟𝗣𝗔 𝟭𝟰 : 👍 👁️ Formation WordPress Divi Webmyday, finançable jusqu’à 100% par les budgets de formation. ➡️ 🤍 -𝟭𝟬% avec le code promo 𝗔𝗟𝗣𝗔𝟭𝟰 💗 👁️ o2switch : 1 super hébergeur pour votre site WordPress, à 5€HT/mois en illimité ➡️ 🤍 👁️ Hostinger : l’hébergeur de qualité aux tarifs compétitifs. -7% sur toutes les formules avec le code ALPA14 💗 ➡️ 🤍 👁️ Divi Supreme, le super plugin qui décuple la puissance de Divi ➡️ 🤍 -10% sur votre licence, avec le code promo Alpa14 💗 👁️ Amelia : le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -10% avec le code Promo "E96DB94C" ! 💗 ➡️ 🤍 👁️ Canva : Collaborez et créez d'incroyables designs, le meilleur outil pour supprimer l’arrière-plan de vos images et obtenir des fonds transparents ou blancs ➡️ 🤍 👁️ Presto Player : le meilleur lecteur vidéo pour votre site WordPress ➡️ 🤍 👁️ ThriveCart : Placez des paniers de vente où vous voulez et déployez des tunnels de vente en quelques clics - Offre spéciale : Compte à vie, paiement unique ➡️ 🤍 👁️ LearnDash : le meilleur LMS WordPress, créez et vendez vos cours sur votre site ➡️ 🤍 👁️ Semrush : la meilleure boîte à outils SEO, 14 j Gratuits (offre spéciale) ➡️ 🤍 👁️ Créez des vidéos marketing -25% sur les offres Invideo ➡️ 🤍 👁️ Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination ! ➡️ 🤍 👁️ 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 ➡️ 🤍 👁️ PIA VPN : Le VPN de qualité, protégez-vous sur Internet ➡️ 🤍 👁️ Alpa14 SEOStudio : Outils SEO Alpa14 gratuits ➡️ https://alpa14-seo ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖ Vous aimez mon travail ? Ici, vous pouvez m'offrir un café ☕😃 ➡️ 🤍 ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖ 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 👍. #headerdivi #headerwordpress #menudivi
Here's the demo page: 🤍 You can copy the code I used and download the sample page layout from the blog: 🤍 Hopefully, it's useful. Let me know in the comments what you think! ~ Best, Ania
This tutorial is outdated. Please watch the updated version: 🤍
This quick Divi Pro Tip will clear up the confusion and show you how to align the Menu Module in Divi 4.0 Theme Builder to the right, left, or center. Blog Post: 🤍 Are We Missing Something? Finding The Right-Align Divi Menu Setting When the Divi Theme Builder was released with Divi 4.0, it brought with it a new Menu Module. This is a great new module with a lot of potential, but it also brought with it some confusion. The old standard menu was right-aligned by default, but the new Menu Module is left-aligned by default. Strange, right? Many people started asking about this in the Facebook groups, and many were confused and upset. But the answer is quite simple There are alignment options right there in the module settings, they are just not where you would expect. Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
Divi is one of the most flexible WordPress themes. In this video, I will show you how to create a responsive off-canvas menu and customize it in many ways. If you're new to Divi or a seasoned veteran, this video is for you. Blog post: 🤍 Divi Child Themes: 🤍
Download Divi: 🤍 New Divi Theme Templates: 🤍 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 pages, and custom blog post templates using the Divi theme builder. 👉👉Important Links Our Elementor Pro Templates: 🤍 My Kopi Coffee Website: 🤍 Our Pinterest With Design Templates: 🤍 Connect with me on Twitter: 🤍 My Facebook Page: 🤍 Join Our WP Social Network: 🤍 Visit My Website at 🤍 Check out 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: 🤍
In this Divi tutorial I will show you how to equally space out the Divi Menu module item links sizes horizontally across the width of the parent container. Blog Post + Snippets: 🤍 Here is another great tip to add to our huge collection of Divi Menu module tutorials. This tutorial will let you equally space the width of Divi Menu module links, meaning the menu items will be spaced out horizontally across the entire width of the parent container. This quick tutorial is only for the Menu module, as I have not tried it nor do I use the default menu anymore. So please note this before asking the comments 🙂 Become a member of our Divi Adventure Club! 🤍 Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍 Thanks for watching!
Divi MadMenu v1.9 introduces a new module - the MadMenu Vertical Menu module - for creating vertical navigations in sidebars, footer, popup menus or anywhere else on the page. Learn more: 🤍
Learn more: 🤍 If you’re building your header inside Divi, there are quite a few ways to go about it. As a matter of fact, you can get an overview on header types and tutorials here. Now, in today’s tutorial, we’re adding another option to your list. We’ll show you how to add a hamburger icon toggle to DIvi’s Menu Module. This hamburger icon appears, by default, on smaller screen sizes already, but in this tutorial, we’ll make sure a hamburger icon appears on desktop as well. When clicking the hamburger icon, all menu items will appear in a horizontal order next to the icon. This gives a minimal look and feel to your header while adding interaction as well. You will be able to download the template 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: 🤍
In this tutorial, I will lead you step-by-step through the process of creating a custom vertical menu with collapsible submenus in Divi. All you'll need is the Divi Theme, a Divi Menu module, and a few code snippets I'll share with you! This menu is displayed vertically, has nested submenus, and doesn't hide under a hamburger icon on smaller screens. For this reason, it's the perfect web design choice for a sidebar or footer menu. For written instructions and the CSS and jQuery used in this tutorial, go here: 🤍 This tutorial was first recorded as a live step-by-step tutorial inside my exclusive Divi Stylist Community on Circle - available to Divi Stylist Academy students. Learn more about Divi Stylist Academy here: 🤍 #divitutorial #verticalmenuCSS
Now that the Theme Builder is here, we can’t wait to dive into new tutorials that’ll help you set up your website from A to Z. This includes creating custom headers using Divi’s built-in option. In this tutorial, we’ll focus on creating a global header using Divi’s Theme Builder. A global header will show up everywhere on your website unless you’ve assigned a different header to that page or post. Read more: Read more: 🤍
In this video tutorial, you will learn how to add an amazing mega menu to your Divi website using the Divi Pixel Balloon module. Read the full tutorial here 👇 🤍
This tutorial is outdated. Please watch the updated version: 🤍
This quick Divi tutorial will show you how to fix and show the hidden Divi menu module dropdown submenu and mobile menu in the Theme Builder. View the full post here: 🤍 Fix Theme Builder Dropdown Menu Hidden Behind Page Content A Solution To A Persistent Problem If there was one problem that has plagued me the past few months, it’s this. The Theme Builder is awesome, and I use it and abuse it. But every since Divi 4.0 was released, there was a bug with the menu dropdown and also the mobile menu being completely hidden behind the page content. In the first few months, Elegant Themes released a fix for the z-index, but I know from several developers that the issue is still ongoing and is under consideration as to how to best approach it. I got tired of waiting. I had child themes ready to publish to my store but I kept finding myself waiting on support to fix this. And no, it is not a z-index issue. I see that answer continually in the Facebook groups, and I have to wonder if those people actually use the Theme Builder or if they are basing it rather on what should work. What should work is not always what does work. What I”m sharing here is a super easy solution to something that has been a big pain to me. I’m going to show you how to fix the hidden Divi Menu module dropdown in the Theme Builder. Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
This quick Divi tutorial and code snippet will show you how to easily change the Divi Menu module responsive breakpoint to any screen size you want. Be sure to visit our written tutorial and code snippet on our blog at 🤍 Show Divi Mobile Menu On Larger Screen Sizes If you are building Divi websites and using the amazing Theme Builder, then I’m sure you have encountered quite a lot of problems with it. One of those is the responsive breakpoint where the Divi menu switches from the desktop menu to a hamburger menu. This can be at just the wrong size, and you may want to tweak it a little or even change it a lot, depending on the size of your menu. The first step in our short tutorial is to copy and paste a code snippet into your Divi website. This CSS snippet will essentially change the Divi Menu module responsive breakpoint by causing the mobile menu to display on larger screen sizes. The cool part is that we can tell it. The CSS snippet is telling the browser to display the mobile version of the Divi menu at a wider screen than the default. Next, feel free to adjust the 1149px value to whatever you want. Keep in mind that by default, the Divi Menu responsive breakpoint is 980px, so anything larger than that will work. TIP: You can find the correct number by using your browser inspect tool. Just right-click on your website, find the “inspect” option, and then look for the tablet/phone icon. From you, you can drag your screen size large or small and it will tell you the pixel size. Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
Improve The Divi Menu With An X Icon When Opened View blog post and snippet: 🤍 A Quick And Easy UX Improvement We all want to give our website users a good experience, and part of that is adding finishing touches that go beyond the standard offering built into Divi. This quick tutorial and code snippet will dramatically improve user experience as they navigate your Divi website either on tablet or on phone, or even on desktop if you are following one of our menu tutorials on adding the hamburger menu on desktop. Either way, learning how to change the Divi Menu hamburger icon into an X when opened will make a lot of sense to the user. Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
Enjoy this rare and totally awesome collection of Divi Menu CSS hover effects for FREE! Download this huge collection of 101 awesome Divi Menu CSS hover effects and animations to use with the Divi Menu module! VIEW DEMOS: 🤍 DOWNLOAD PAGE: 🤍 A while back, we started creating a collection of Divi menu CSS hover effects to give away. We started with 30, which was a nice amount, but soon realized we should go big or go home. So here it is, our one-of-a-kind Divi freebie like never before — 101 free Divi menu hover effects and animations for you to use with the Divi Menu module! You will find instructions on how to use these Divi menu effects on the download page. Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍
This tutorial will show you how to change the placement of your Divi menu logo from top center by default to the left on scroll. Blog Post + Snippets: 🤍 By default the Divi Menu module only comes with a few layout options. Many people complain that we are missing the features that the old default header menu had (in the Customizer). And because I always recommend using the Theme Builder and never using the old header, I would like to create some solutions for you to recreate some of the missing features. So in this tutorial I will show you a simple way to change the placement of your menu’s logo from top center by default to the left on scroll. This functionality is easy to achieve and adds a nice effect to the website. Become a member of our Divi Adventure Club! 🤍 Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍 Thanks for watching!
In this tutorial I will show you how to enable the shopping cart quantity live count in the Divi Menu module beside the cart icon. Blog Post + Snippets: 🤍 Now Included With Divi! Once in a while, a little gem comes along in the Divi Changelog that you know is exciting simply because the alternative method is a long code snippet of PHP. So when I see something like this, I feel I need to make the public service announcement and also throw in some extras. So in this tutorial I will show you how to enable and style the shopping cart quantity count in the Divi Menu module beside the cart icon. Become a member of our Divi Adventure Club! 🤍 Join The Divi Teacher Facebook group: 🤍 Visit our Divi child themes, plugins, tutorials, and courses here: 🤍 Thanks for watching!
In this video, we show you how to use the Vertical Tabs module in Divi Mega Menu. This module is an asset to any project because it gives you a unique way to present relevant link information on hover. For help learning to style stock Divi modules, check out 🤍 Please check out the rest of our documentation if you still have any questions at help.diviengine.com
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.
.svg){kind=small}
![Vertical Menu with Nested Submenus [Divi Tutorial]](https://i.ytimg.com/vi/h1I7SBGzGCc/mqdefault.jpg "Vertical Menu with Nested Submenus [Divi Tutorial]")
