Think of each section as a separate column and within each column you can add up to 12 rows for content, creating a responsive grid that scales on the fly depending on the device or screen size being used. The numbers on the image to the right will show you the order the blocks will appear on mobile devices.
Add or edit an Empty Section
To add a new Empty Section:
- Click the Content drop-down and drag the Empty Section block onto your landing page.
Note: Without an Empty Section you will be unable to add additional blocks.
To edit column or row settings:
- Hover over the page section you will see the controls appear.
- Click the Gear icon above the empty section to edit column settings.
- Click the Gear icon on the right of the Empty Section to edit row settings.
- To add additional rows, click the icon below the Gear. You can add up to 12 rows in each empty section. If you are familiar with the Twitter Bootstrap grid system, you already know how it works.
Edit Column Settings
The Column Settings will only effect what is within the column specifically and you will be able to control the background color, radius, and padding of the column.
Each time you add a new row you will need to modify the background of the column. This will allow additional flexability in your design. If you are looking to use one color for your background as shown above, you will want to add additional rows first, then modify the Row Settings shown in the section below.
Edit Row Settings
Row Settings will allow you to modify the background color or image of the section, as well as the padding of the section. You are able to control if your background color/image runs full width or remains within the set boxed width dimensions under Page Properties.
Background Location: Inside
Background Location: Outside