Tip # 9: Divi Vertical Tabs

Divi Vertical Tabs

A few days back I made a query for help on creating a vertical tabs system in Facebook group Divi Theme Tutorials. I was searching for a plugin in WordPress repository and also found one. In the meantime our beloved Dehn Merrill lead me to a solution which is already available in Divi itself! Illustration above is a very crude representation of what was required (won’t get me a prize for the art.)

Resource:

You need Divi or Extra and a little bit CSS

Procedure:

1. Create a single column text module.
2. Click on Add ET Tabs button on the edit toolbar in content area (Image 1).
3. Select left tabs option (Image 2) and fill up all the required information as per requirement. Click on Ok at the bottom left corner of the window.
4. It will create related shortcodes & text in the text area.

			

				

				

			

			Content
		
        
		

			Scope
		
        
		

			About
		
        
		

			Instruction to Author
		
        
		

			Archive
		
		
    
		

			

				

					

			 [content id=42]
		
        
		

			[scope_detail]
		
        
		

			 [about_detail] 
		
        
		

			 [instruction_detail] 
		
        
		

			 [archive_information] 
		
				
			
		
			

As it can be seen that directly putting tab related shortcode with proper content will achieve the same result. tabcontainer shortcode holds the tab options while tabcontent area contains detail of each option. A little side note – within the tab shortcodes, you may find more shortcodes are used in place of content. These shortcodes are created to use Custom Fields feature of WordPress. Details of Custom Fields usage is described in TIP # 8: USING CUSTOM FIELDS WITHOUT CODING.

Save the post & view it. You may find a look like Image 3. First tab is selected by default and content of the first tab is displayed as well. Some of the post options are bigger in length, so they are wrapped in two lines. We need a little CSS to make them single line. Add the following code in ePanel:

ul.et-tabs-control, .et_left_tabs_bg {
    width: 200px !important; // adjust this value to control tab option width
}

Now the look will become like Image 4.

Reference Images: