Specialty Sections enable advanced column layouts by combining complex column structures with full-height vertical sidebars, avoiding breaks in the page design. These layouts are unique to Specialty Sections and cannot be achieved with regular sections.
Add The Divi Accordion Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Blue Plus icon
to insert a new Section.Click on the Specialty option to insert a new Specialty Section.
Click on the desired layout.
Note: Unline the Fullwidth Section and Regular Section, the Specialty Section allows you to choose the layout of its inner columns. There are two different types of inner columns:
Module Columns (orange) - where you can only add modules
Row Columns (green) - where you can add different Row with:
1 Column
2 Columns
3 Columns
{Gif here}
The Divi Specialty Section Use Cases
Creating Sidebar and Content Layouts: Use the specialty section to build pages with a sidebar on one side and detailed content on the other, perfect for blogs, e-commerce product pages, or resource hubs.
Highlighting Key Features with Supporting Content: Combine large content areas with smaller sections to feature product details, benefits, or call-to-action buttons alongside supporting visuals or text.
Building Interactive Forms and Descriptions: Place a contact form, subscription form, or booking widget next to explanatory text or an image, ensuring clarity and user engagement.
Specialty Section Settings Breakdown
Once you've added the Specialty Section, the element's settings automatically pop up. This is where this element's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
Inside the Content tab, you can choose the Specialty Section's Link, background, and admin label.
Link - Make the entire Specialty Section module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Specialty Section module's background styles.
Admin Label - Choose the Specialty Section module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Section module are in this tab.
Layout - Choose the show/hide the section's inner shadow.
Dividers - Choose different types of top and bottom dividers, including their size, color, and more.
Sizing - Choose the Section module's sizing.
Spacing - Choose the Section module's spacing.
Border - Choose the Section module's border styles.
Box Shadow - Choose the Section module's Box Shadow styles.
Filters - Choose the Section module's filters such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Section module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Section module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS Classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Specialty Section module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Specialty Section's visibility based on different devices.
Transitions - Choose how long the Specialty Section's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Specialty Section's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Specialty Section behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
