This shortcode can be used anywhere, but we recommend using the “Sections” Page Template instead.
Sections are full-width sections of your page (or post) used to separate or highlight different areas of content, each with different styling. By default, sections alternate light colored backgrounds. You can manually set the background color, or set an image (via image ID) to be used as the full section background.
On layouts with a sidebar, a section will not be a full browser/window width, as this would break/cover the sidebar itself.
Shortcode
[section]Some content here[/section]
Optional Parameters
Parameter Name: align
Expected Value: string
Description: Aligns content. Accepts values “left”, “center”, or “right”.
Example: [section align="center"][/section]
Parameter Name: bg
Expected Value: string
Description: Accepts 3 or 6 digit hex value with or without hash (#).
Example: [section bg="ffe6e6"][/section]
Parameter Name: class
Expected Value: string
Description: Add additional HTML classes to the main section HTML.
Example: [section class="some-class another-class"][/section]
Parameter Name: content_width
Expected Value: string
Description: Configure the content width. Accepts values “auto” (uses the width of the content inside), “xs”, “sm”, “md”, “lg”, “xl”, or “full” (uses the full width of browser window).
Example: [section content_width="auto"][/section]
Parameter Name: height
Expected Value: string
Default State: md
Description: Configure the container height. Accepts values “auto” (uses the full height of the content without any extra padding), “xs”, “sm”, “md”, or “lg”.
Example: [section height="lg"][/section]
Parameter Name: id
Expected Value: string
Description: Add an HTML id to the main section HTML.
Example: [section id="home-newsletter"][/section]
Parameter Name: image
Expected Value: integer
Description: Define an image to use as a background image. Accepts the image ID.
Example: [section image="246"][/section]
Parameter Name: inner
Expected Value: string
Description: Adds light or dark inner box styling. Accepts “light”, or “dark”.
Example: [section inner="light"][/section]
Parameter Name: overlay
Expected Value: string
Description: Adds different overlay styles to the section. This is best suited when using an image background as well. Accepts “gradient”, “light”, or “dark”.
Example: [section overlay="dark"][/section]
Parameter Name: title
Expected Value: string
Description: Configure the section title.
Example: [section title="This is a section title"][/section]
Parameter Name: title_wrap
Expected Value: string
Default State: h2
Description: Configure the title HTML wrap.
Example: [section title_wrap="h4"][/section]
Parameter Name: wrapper
Expected Value: string
Default State: section
Description: Configure the HTML element wrap. Another example is “div”.
Example: [section wrapper="div"][/section]
Usage Examples
The following shortcode will create a full width section with an image background (don’t forget to use an actual image ID!) with a gradient overlay and light boxed inner content:
[section title="Full Width Section" image="598" overlay="gradient" inner="light" align="center"]
Add full width sections anywhere on your website using a simple shortcode. Any section can have full width image or solid backgrounds and have any content you want, including images, HTML, or other shortcodes.
[/section]
The result looks like this: