Revolutionize Your Website with Divi’s Vertical Menus – Step-by-Step Guide
Welcome to another exciting tutorial from System22 and Web Design Detectives! Today, we’re diving into a fantastic project that will enhance the functionality and aesthetics of your Divi theme website. We’re going to walk you through the steps to add a vertical menu to the left side of your page. This isn’t just any menu, but one that allows users to click and scroll smoothly to different sections on your page. This feature not only improves navigation but also adds a layer of interactivity that can engage your visitors more effectively.
Vertical menus are a great addition to any website because they provide an alternative to the traditional horizontal navigation bar. They can be particularly useful for one-page websites or long-form content where quick section jumps are beneficial. The vertical menu we’ll be creating today is not just functional but also visually appealing. It can help visitors easily navigate through different sections of your site, enhancing their overall user experience.
First, we need to enable the Visual Builder in Divi. This powerful tool allows you to see your changes in real-time, making the design process much more intuitive. To do this, navigate to your Divi theme’s front end and click on the “Enable Visual Builder” button. This will allow you to make and preview changes on the fly.
Once the Visual Builder is enabled, we need to head to the backend to set up our layout. Switch to the Wireframe mode to get a clearer view of the structure of your page. Delete any existing rows or modules that might be in the way, so we can start with a clean slate.
Next, add a new row. Click the green “Add New Row” button and select a single column layout. This will be the container for our vertical menu. The beauty of Divi is that it allows us to place this row anywhere on the page because we’ll be making it fixed position later.
For this menu, we will be using text modules rather than the built-in menu module. This approach gives us more control over the design and functionality. Scroll down and find the text module, then drag it into your new row. Inside the text module, type “Section One” or whatever you want your menu item to say.
To make our menu functional, we need to link each menu item to a specific section of the page. This is done using anchor tags. In the text module settings, go to the link tab and enter a unique anchor tag for each section, such as `#section1`. These anchor tags will allow the page to scroll smoothly to the corresponding section when a menu item is clicked.
Now that our menu item is in place, let’s style it. Start by setting the background color to black. When the user hovers over the menu item, we want it to change color, so set a hover background color. This visual feedback will make the menu more interactive and user-friendly.
Next, go to the Design tab and adjust the spacing. Add some padding to the top and bottom of the text module to make it look like a button. For example, try adding 10 pixels of padding to the top and bottom. Adjust the padding on the left and right to your liking as well.
To ensure the text stands out, change the text color to white. When the user hovers over the menu item, we want the text color to change to something eye-catching, like orange. This can be done by setting the hover state for the text color. This small detail can significantly improve the user experience by indicating that the item is interactive.
Adding a border to the bottom of the menu items can further enhance the design. Go to the Border settings and add a 1-pixel bottom border. Set the border color to white, but reduce the opacity slightly to make it less prominent. Then, set the hover state border color to match the hover text color, creating a cohesive design.
Once you are satisfied with the design of your first menu item, save it and duplicate it for each section of your page. To ensure there are no gaps between the menu items, remove any bottom margin from each text module. This can be done in the Design tab under Spacing. Set the bottom margin to zero and save the changes.
Now it’s time to position the menu on the left side of the page. Go to the row settings, then to the Advanced tab, and finally to Position. Change the position to Fixed, which will make the menu stay in place as the user scrolls down the page. Adjust the vertical offset to ensure the menu is aligned properly with the top of the page.
To give our menu a professional look, let’s make it the full height of the screen. Go to the Design tab, then to Sizing, and set the height to 100 VH (viewport height). This ensures the menu will always be the full height of the browser window, regardless of screen size.
Next, add a background color to the row so it stands out from the rest of the page. A semi-transparent black background can work well, allowing some of the page content to show through. Adjust the width of the row to match the width of your menu items. This can be done in the Sizing settings.
To make sure no content overflows from the menu, go to the Advanced tab, then to Visibility, and set both horizontal and vertical overflow to Hidden. This prevents any part of the menu from sticking out beyond the row’s boundaries.
To ensure our menu stays on top of other page elements, we need to adjust the Z-Index. Go to the Position settings and increase the Z-Index value until the menu appears above other content on the page. This ensures that the menu is always visible and accessible.
For the menu to work correctly, we need to add CSS IDs to the sections we want to link to. Go to each section you want to link to, open the settings, and in the Advanced tab, add a CSS ID that matches the anchor tags used in your menu items. For example, if a menu item links to `#section1`, the corresponding section should have a CSS ID of `section1`.
After adding the CSS IDs, save your changes and exit the Visual Builder. Test the menu by clicking on the items and ensuring the page scrolls smoothly to the correct sections. If everything is set up correctly, you should see a seamless navigation experience.
One of the great things about Divi is the ability to save layouts and modules to the library. Save your vertical menu to the Divi Library so you can easily reuse it on other pages. This can save you a lot of time and effort, as you won’t need to recreate the menu from scratch each time.
Adding a vertical menu to your Divi theme page is a fantastic way to enhance your website’s navigation and user experience. By following these steps, you can create a stylish, interactive menu that helps visitors easily navigate through your site. This menu is not only functional but also visually appealing, making it a great addition to any website.
If you enjoyed this tutorial and found it helpful, please like, share, subscribe, and comment below. We’d love to hear your feedback and any questions you may have. For more tutorials on enhancing your website design with Divi, check out our playlist. Thanks for reading, and happy designing!
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Why Divi?
Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.
The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.
The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.
The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.
The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.
The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.
Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.
Divi Supreme: Revolutionizing Your Divi Experience
In the dynamic realm of web design, staying ahead of trends is paramount to crafting captivating websites. Enter Divi Supreme, the game-changing enhancement for the Divi theme by Elegant Themes. While Divi is renowned for its flexibility and user-friendly interface, Divi Supreme takes innovation to the next level with an extensive array of enhancements and features. This 1000-word exploration delves into why Divi Supreme is the ultimate companion for Divi users, unlocking a world of possibilities for creating stunning websites.
1. Extensive Module Library: Dive into Divi Supreme’s vast collection of modules that seamlessly integrate with Divi, offering new functionalities and design elements. Whether it’s advanced buttons, creative image effects, or interactive content, Divi Supreme provides the tools to create unique and dynamic layouts effortlessly.
2. Time and Effort Savings: With highly customizable modules that require minimal coding knowledge, Divi Supreme streamlines the web design workflow. Say goodbye to tedious custom CSS and third-party plugins, as Divi Supreme empowers users to achieve complex designs in a fraction of the time.
3. User-Friendly Interface: Seamlessly integrated into the Divi Builder, Divi Supreme ensures a minimal learning curve for users. Whether you’re a seasoned Divi pro or a novice, navigating the intuitive interface is a breeze.
4. Advanced Design Possibilities: Divi Supreme expands creative horizons with modules designed to align with modern web design trends. From shape dividers to gradient text and sticky elements, the plugin unlocks endless design possibilities, keeping you at the forefront of innovation.
5. Frequent Updates and Support: Committed to delivering an unparalleled user experience, the Divi Supreme team regularly updates the plugin based on user feedback. Combined with a vibrant community and excellent support, Divi Supreme ensures users stay ahead in the ever-evolving landscape of web design.
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Have a great website design
It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.
A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.
Be sure to check out our playlist page to find the help you need!
Latest YouTube Videos