Feature / Content Sections
Layout Demo URL: https://diviwp.com/ui/sections/features-content-sections/all-feature-content-sections/
Feature / Content Sections are powerful combinations of text, imagery, photography and icons and are used to highlight your product, service features and benefits. These sections include Image Modules, Text Modules and Blurb Modules to create visually interesting and readable blocks.
Editing the demo content
Each DiviWP Section can be edited using the Visual Builder.
You can make your changes to various module settings, upload new images, change colors, toggle between the desktop, tablet and mobile views and publish your page to achieve the look in the demo.
In some sections outlined below, Custom CSS is necessary to achieve a desired affect or an optimal responsive user experience and where the Divi Builder was unable to do it with it's Module settings alone.
Why Custom CSS is used in Sections
Divi is an incredible builder and you can certainly do a ton of things with its built-in settings.
We're sure we'll see the introduction of even more new settings in time, but for now, we believe it does not (yet) have the ability to configure the necessary settings to create a particular interface design or effects.
So by including Custom CSS in a seperate Code Module or labeled within the Row, Column or Module, you can learn how we've used various CSS properties to achieve a desired effect.
How to view Custom CSS
When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible.
Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.
Custom CSS in use in sections (scroll down for in-depth documentation)
- Feature Section 21 - Image Module
- Feature Section 22 - Image Module
Related documentation:
- Can I edit Module labels?
- Can I modify Layouts or Sections?
- Custom CSS - How and Why It's Used in Sections
- How are admin labels used in Sections, Rows, Columns and Modules?
- What if I don't want to use any Custom CSS?
Support is always on hand
You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections.
Feature Sections 21 and 22 - Image Modules
Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.
You can see the Custom CSS module which is targeting the modules with a class name .diviwp-image-height-form-gray-input. (Custom Classes are applied in Module Settings → Advanced → CSS ID and Classes).
In this instance, the image is using a CSS aspect ratio trick to maintain the current dimensions while stretching to reach 100% of the parent column.
Tablet view
Mobile view
The same technique is used for Feature Section 22.