Adding Sections
When using SPINNR, you should be using sections. A section is a div that serves a the root element of your component. It is where the container, rows, columns and blocks are placed.
The goal is for your page to be built with a collection of sections that can be edited, reused or reordered. To add a section, click on the plus sign on the top of the screen and click on ‘Add Section’ button on the sidebar
When clicked, the following options will appear in a modal.
You may then choose from the predefined section layouts that are loaded in SPINNR.
If nothing suits the user’s requirements, the user may choose Layout → Blank → 1 Column, then modify as needed.
Adding more sections
When a section is hovered, the Insert Section button will appear above and below. Clicking these will insert a new section in the desired location.
Section controls
Section control options will appear when a section is hovered.
The options available are:
Move up
Moves the current section selected one section up.Move down
Moves the current section selected one section down.Duplicate
Duplicates the current section selected.Delete
Deletes the current section selected.
Note. The information below may be out of date and needs to be reviewed.
Section Builder
The section builder comes with basic pre-defined grid layouts. Layouts vary from single column to multiple columns on a single row.
To add the section, select one layout from the pre-defined layouts below and click Save
If you need more options when adding a section (for bootstrap only), take a look at the advanced tab.
The advanced option lets you control every aspect of creating a section from the number of columns up to setting breakpoints. All of these options follow standard bootstrap grid setup and tailwind flex setup.