I had this side/vertical tabs section I made for a Divi project and thought it might be useful for others. Would be great to feature different services or small chunks of info, I’ve used wedding photography session types as an example.

Some basic CSS knowledge is required, like colors and font-size. I’ve added comments in the code to help.

If you plan to use the gallery

• Enable the Divi gallery in Divi theme options if you want the default WP gallery to behave like Divi’s (like in the demo).

Import the layout into your Divi library

• Download the zip file using the Download button above.
• Unzip the file you downloaded and import the included .json file into your Divi library. After that it will be available for you to add as a section to any page/post using the Divi builder.
• If you’re new to Divi here are instructions on how to import a layout into your library.

You might not need to import the layout…

• I’m not using any module settings in this layout, it’s just CSS changing the look, so if you’re comfortable with basic HTML and are familiar with the text editor you can just add a tabs module, your own WP gallery (if you want one), and your own button (if you want one):
  • The gallery is the standard WP gallery you insert through the text editor.
  • I’m using ET’s button class et_pb_button to create the button.

/****************************/
/***** CUSTOM SIDE TABS *****/
/****************************/

/*** MAIN CONTENT BOX ***/
 .et_pb_tab {
     background: #D6DAD7; /* main background color */
     padding: 50px;
     border-top-right-radius: 12px; /* these three make the rounded edges */
     border-bottom-right-radius: 12px;
     border-bottom-left-radius: 12px;
     min-height: 560px; /* adjust if necessary */
}
/*** TABS ON LEFT ***/
 .et_pb_tabs {
	 border: 0;
}
/*** ACTIVE TAB ***/
 .et_pb_tabs_controls li.et_pb_tab_active, 
 .et_pb_tabs_controls li.et_pb_tab_active:hover {
     background: #D6DAD7 !important; /* background color of active tab on left */
}
 .et_pb_tabs_controls li a { /* most of these can be set in the module instead if you prefer */
	 width: 100%;
	 font-family: Georgia, "Times New Roman", serif; /* I changed this to match my header font, you can edit or delete */
	 font-size: 28px !important; 
	 font-weight: normal;
     line-height: 1.3em !important;
	 padding: 15px 25px;
}
/*** NON ACTIVE TABS ***/
.et_pb_all_tabs,
ul.et_pb_tabs_controls {
	background: transparent;
}
 ul.et_pb_tabs_controls:after {
     display: none; /* removes a weird line */
}
 .et_pb_tabs_controls li {
     background: #C7C8C7 !important; /* background color of non-active tabs */
     margin-bottom: 10px;
     border-top-left-radius: 8px; /* rounded edges */
     border-bottom-left-radius: 8px; /* rounded edges */
}
 .et_pb_tabs_controls li:hover {
     background: #D6DAD7 !important; /* background color of tab on hover */
}
/*** REMOVE GALLERY IMAGE TITLE ***/
 .mfp-title {
	display: none; /* please know this will remove the title from all your Divi galleries, not just these */
}
/*** MEDIA QUERIES FOR MOBILE / TABLET ***/
@media only screen and (max-width: 480px) {
	.et_overlay:before {
		font-size: 20px; /* makes hover icon smaller */
		margin: -10px 0 0 -10px;
	}
}
@media only screen and (max-width: 980px) {
	ul.et_pb_tabs_controls {
		display: flex;
    	flex-direction: column;
	}
	.et_pb_tabs_controls li {
		display: flex;
		width: 100%;
		border-radius: 8px;
	}
	.et_pb_tab {
		border-radius: 8px;
		padding: 40px 25px;
	}
} 
 @media only screen and (min-width: 981px) {
     ul.et_pb_tabs_controls {
         border: none;
         float: left;
         width: 30%;
         background: transparent;
    }
     ul.et_pb_tabs_controls li {
         border: none;
         bottom: 0 !important;
         padding-bottom: 10px;
         padding-top: 10px;
         width: 100%;
    }
     .et_pb_tabs_controls li.et_pb_tab_active {
         padding-bottom: 10px;
         padding-top: 10px;
    }
     .et_pb_all_tabs {
         border: none;
		 border-top-right-radius: 8px;
		 border-bottom-right-radius: 8px;
		 border-bottom-left-radius: 8px;
         float: left;
         padding: 0;
         width: 70%;
         background: #D6DAD7; /* this should match the main background color */
		 margin-left: -1px;
		 z-index: 99;
    	 position: relative;
    }
}

Notes:

• If you use the WP gallery the icon color will be your theme color from customizer settings.
• I’m using ET’s button class so your customizer button settings will be used for button styling.
• Images are from Pexels and Unsplash, it’s up to you to check their terms for usage. When I tested this sometimes the images would be imported and sometimes they wouldn’t, I don’t really know why. The gallery function itself IS always imported.
• Screenfly is just an online emulator to give an idea of what a site/page looks like on multiple browser sizes. You’re still responsible for your own real world testing.