SoulSections

SoulSections allows you to quickly build high-quality webpages from scratch or with the help of preset templates. This is a tool made by developers, for developers, giving you complete control over the code, and, if you're not yet comfortable with code, our presets are designed in a way that mobile-optimized pages can be built in just minutes.

Features

The do-everything module for professional Beaver Builders.

SoulSections uses the well-loved theme Beaver Builder, and allows you to do even more with it. etc.


Design entire layouts using one familiar set of inputs.

Using different modules for banners, multiples, text and footers forces you to master dozens of tools, each with limited scope. SoulSections can produce almost any content arrangement that you throw at it, with consistent text, imagery, and video inputs that you only have to learn once.


Use Flexbox and custom units for better responsive designs.

Use professional alignment properties and save yourself the headache of floats, margin math, and responsive column styling. Flex at three levels of hierarchy, and style your elements using any units you wish (px, %, em, rem, vw, vh, calc()).


Mobile-friendly parallax for backgrounds and foregrounds.

High performance, mobile-friendly parallax requires hardware acceleration and plenty of viewport math. SoulSections can transform background imagery/video and any foreground/text content smoothly on scroll with the click of a button.


Dynamic shortcodes to help visitors navigate with ease.

Smooth scroll to anchors with custom easing and duration, turn any module into a dialog, send event data to Google Analytics, reveal additional content on a page, animate Font Awesome icons on hover, or simply point to another URL.


Lazy-loading, carouseling, height equalization, and more.

SoulSections comes bundled with a variety of layout and effect options: pinning (aka stickiness), height equalization, fading and sliding carousels, masonry layouts, video lightboxes, rgba color pickers…the works.


A library of editable, tweakable presets to get the ball rolling.

You don't need to start from scratch. We've put together a wide range of preset configurations to make it easy to drag and drop your way to a serviceable design. Mock up ideas in seconds, rearrange and tweak your way to a cleaner and more responsive layout.

Documentation

Overview

SoulSections is a Beaver Builder module designed to reduce the time and expertise necessary to build professional, responsive websites.

It takes a 'fewer modules, greater consistency' approach to page building with WordPress, and it encourages clean, distraction-free designs that value information clarity and conversion over window dressing.

Less guesswork.

Should you use a carousel module, a posts module, multiple modules to get a job done? If you're putting responsive content on a page, odds are good that SoulSections can handle it.

Reducing the skills gap.

You don't need to understand how to write advanced CSS/JS to get professional results - just pick a preset, add your content, and move forward.

Fine tuning where needed.

If you're a meticulous designer and need to tweak something to get it just right, SoulSections exposes all of its applied styles for full customization.

Installation

Once you've purchased SoulSections, download the zip file and upload that file to your WordPress Dashboard via Plugins > Add New.

(License key entry and activation instructions)

Getting Started

There are several ways to instantiate a SoulSections module in Beaver Builder: as a Row Preset, a Module Preset, or by simply dragging a blank SoulSections module into your layout.

Click on the + sign in the top right corner, head to Rows, select the drop down menu for a library of SoulSections Preset Modules. Drag the module you want onto the page. Rows and SoulSections Modules need to be dragged to an empty section, whereas Columns and Basic Modules need to be dragged into Rows.

Options

Settings Tabs

The SoulSections settings panel has five tabs: Content, Styles (for screens 0px wide and and larger), Medium Styles (for tablets 768px wide and larger), Large Styles (for screens 1024px wide and larger), and Extras.

Imagery, text, HTML, and video reside in the Content Tab. Those elements, and their containers, are styled and positioned using the responsive Styles tabs (which are ordered and applied in a mobile-first fashion: styles set at larger screen sizes will overwrite those set at smaller screen sizes).

The Extras tab contains additional functionality that modify both Styles and Behaviors of the Content (e.g. applying parallax effects, carouseling, and controlling the styles of parent Rows and Columns).

The options within these tabs are many - giving you the capability of constructing almost any front-end content/style arrangement using a combination of Content and Style inputs. 

Content Tab

Section Types

Every content section allows you to insert background images, Videos, or HTML code, foreground images, titles, taglines, text, or calls to action. When you're in the Beaver Builder mode, click on the section you want to edit, the content tab will be selected, and you can make edits from there. These work like traditional WYSIWYG editors.

Hierarchy

SoulSections modules display content in a series of nested containers, which allows for a wide variety of configurations. Understanding this hierarchy is essential to getting the most out of SoulSections and knowing what effects its Responsive Styles will have.

The Container (.ss-container) is the outermost element in the SoulSections hierarchy. The Container can hold an infinite amount of Subsections. A Banner preset typically contains a single Subsection, and a Multiple preset (e.g. a list of paired text/imagery) contains multiple subsections.

The Background Container is an absolutely-positioned element that, in a single-section configuration, resides in the space between the Container and a Subsection. Detaching the Background Container from the flow of the elements allows it to be animated and styled in a way that doesn't effect any of the Subsection's content. In multiple sections, the Background Container resides within the Subsection, allowing you to give separate Subsections different backgrounds.

Subsections are the direct children of the Container. Subsections contain the Foreground Image Container and the Core.

The Foreground Image Container holds imagery/video, and a caption (HTML), and is often used to provide an artful accompaniment to the Core.

The Core is where the readable copy usually resides. It contains four elements: the Title Container (.ss-title-container), the Tagline Container (.ss-tagline-container), the Text Container, (.ss-text-container), and the Call to Action Container (.ss-cta-container). These four containers can hold anything you wish, but they're labeled according to traditional patterns of modern web copy to give a helpful reference point. They encourage a large, scannable Tagline with an optional, smaller Title above it, along with a sentence or two of supplementary Text and clickable Calls to Action (Learn More buttons, Buy Buttons, etc).

This division of containers is similar to the Row/Column/Module hierarchy you may be familiar with - which is why SoulSections is often dubbed 'a Builder within the Builder.' By applying SoulSections' responsive styles to this hierarchy, you're able to add advanced style properties (like FlexBox) to three levels: the Container, the Subsection, and the Core. Add the option to set the container's widths, paddings, margins, and other styles using custom units of measure, and you're equipped with a very capable design tool that can display almost any conceivable cluster of content.

Useful shortcodes

In the Content editor, you can insert shortcodes by clicking Fields and Views and selecting the post type you want to use. You can also insert shortcodes directly into the Text editor.

Inputs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Styles Tabs

A mobile first approach

We believe in a mobile-first approach to styling the page. If you're working with any one of our SoulSections Preset Modules, then padding, margins, and text size have been optimized for mobile.

You can make changes to the CSS by selecting Styles (all screens) which allows you to make changes across mobile, tablets, laptops, and larger screens. If you prefer to make a change that applies only to screens as large or larger than tablets, for example, you may enter those in Medium Styles (tablets and larger) and they will be applied in the mobile-first approach, which is to say, for any screen larger than 756px.

Extras Tab

SoulMenu Options

To create a navigation menu, you will want to work in the backend of your WordPress admin. From there, navigate to ..., name your menu, and continue working with this like you would any other SoulSections Module. We even have a Navigation preset to make this easier for you. Add hyperlinks to the pages you'd like included in your menu....

To style the menu, click on it to bring up the editor, select the three dots to the far right, select Extras, then in the menu tab on the left-hand side, select SoulMenu. Click "Edit SoulMenu Options" in the editor, and make CSS changes here - including colors, hover color, and background color.

Parallax

SoulSections has two flavors of Parallax: Background and Foreground.

Background Parallax will slowly transform a subsection's background image as you scroll the page, giving an illusion of background depth.

Foreground parallax can be applied to both the Foreground Image Container and the Core, also shifting the target containers slightly as you scroll. With some thoughtful positioning CSS, Foreground Parallax can create cool depth effects for your site's actionable content.

Masonry

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Equalize Heights

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Foreground Lightbox

Switching this setting to 'Yes' will open foreground imagery in a lightbox.

Row and Column Styling

The Row and Column styling settings help you construct flexbox-powered parent column layouts for SoulSections modules, while also providing positioning options for fixed-sidebar layouts.

To use, set Parent Column Style override to true, and set the width of your parent column to this module on medium screens. You can set several flex alignment options for Column Groups (the parent element of a Beaver Builder Column).

Pinning (Sticky Elements)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Margins

Default margins on heading and paragraph text can occasionally throw off the perception of vertical symmetry in a module, as the invisible margin increases the height of the Core. These inputs allow you to force module-specific text margins (e.g. 0px) to override those coming from a theme or plugin (like SoulType).

Lazy Loading

Lazy loading imagery is a great way to improve page load times by deferring below-fold image loads, and SoulSections supports it for both background and foreground imagery. Choose 'Yes' on Background/Foreground to implement. Optional (but recommended): use a deliberate aspect ratio (e.g. 5x3) if you're lazy-loading your foreground image, and enter that aspect ratio in the Lazy Loading options. That helps to define a placeholder container and will prevent element reflow while images are loading.

Container Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Layout Preset Import / Export

With SoulSections, you can copy and paste module configurations from one SoulSections module to another. This saves time if you've drawn several similarly-designed modules (e.g. banners in a page layout) and need to make a change to all of them (e.g. reducing padding per a client request).

To copy a module's configuration, navigate the Extras tab and scroll to Layout Preset Import / Export. Click the Export Styles button to generate a configuration string inside of the Export Styles textarea, and copy it. That string (aka chunk of text) is a representation of the module's current settings.

Navigate to other SoulSections module's Layout Preset Import / Export area and paste the string into that module's Import Styles textarea, then click Import Styles. The destination module's settings will adjust to those of the source module.

To copy a module's configuration, navigate the Extras tab and scroll to Layout Preset Import / Export. Click the Export Styles button to generate a configuration string inside of the Export Styles textarea, and copy it. That string (aka chunk of text) is a representation of the module's current settings.

Navigate to other module's Layout Preset Import / Export area and paste the string you copied into that module's Import Styles textarea, and click Import Styles. The module's settings will adjust to those of the source module, and you can paste the configuration string in other modules as you see fit.

Try the demo.

Ready to try the Soul Plugins out for size? We'll email you a link to your very own WordPress Installation so you can build, style, and animate something awesome.