Page Builder

Contents

The Page Builder is the main feature of spinnr. It is where the bulk of work is done in terms of creating pages.

Accessing the Page Builder

There are several ways to access the Page Builder depending on the platform used:

  • From WordPress Dashboard

    When using spinnr in WordPress, you can access the Page Builder through the following

    • Through Pages, Post or Custom Post Type list pages – hover an item on the list and click ‘Edit in spinnr.io’

    • Through admin bar when viewing a page, post or custom post type – click ‘Edit in spinnr.io’

  • From Directus Dashboard

    When using spinnr in Directus, you can access the Page Builder by switching the view to ‘Spinnr Table’ and click on the item 3rd Action icon from the table.

    Note: You need to make sure to switch to Spinnr Table to have the Action buttons. If the Action column is cut-off, un-tick a couple of columns or try to resize the columns till the Action column shows all the icons.

  • Directly from spinnr

    You can also access all your created pages directly in spinnr. Just go to Companies > select your Project > click on ‘View’ button.

Basic and Advanced Mode

There are two modes available in spinnr.io page builder; basic and advanced mode. Basic mode has all the basic controls needed to create and update a page using components and basic content editor.  Advanced mode includes a couple more options and is usually used by someone with at least good knowledge of html. You can toggle between these two modes by clicking on the toggle switch on the upper left of the page builder screen. 

Adding Sections

When using spinnr, we strongly recommend 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.

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.

Adding Components

A collection of HTML tags make up a component. For more information about components read our components guide .

There are two steps to add a component:

  • Click on the plus sign  found in the top of the screen to open the Add Component sidebar
  • Select a component from the list.
  •  

Custom HTML Code

The page builder is very flexible and is not restricted to just adding components, you can actually add anything on your page with a little knowledge of html. This is where the html content editor comes in.  Any code you add will still inherit all the classes you use and the core styles of your project.

To add a custom html code, on the component sidebar, click on the ‘Add Custom Code’ button.

You can also change the code editor’s style by changing the Theme. There’s a couple of themes there that mimics the style your favorite text editor.

When using the Code View function, make sure open tags have their corresponding closing tags for it to be parsed correctly.

You can add almost any tag with the exception of script tag to prevent script conflict with the page builder. If you want to add javascript please insert them on Additional CSS/JS section.

The canvas is where all your content go. It shows you the exact representation of the page you’re working on with additional controls to let you select, traverse, move, duplicate and delete your element or component.

You can select an element or component on the canvas by clicking on it. Some components have other options you can access by double-clicking on them.

When you select an element, it will be outlined to denote which element is currently selected. You will also see additional canvas controls   to help you with the process of creating your page.

The pink controls are for your currently selected element. The blue control  is the parent section of the component.

Selecting the right element is troublesome especially when the elements are on top of each other. To help you easily traverse the elements in your page, we added ‘Up One Level’ button in the canvas controls. Clicking on this button will select the immediate parent of the currently selected element.

Another helpful option you can use for easily selecting your element is the ‘Structure View’. You can turn this option on/off by clicking on the button found at the bottom of the screen. This option, when turned on, will add a padding on all elements present in the page. This way, you can easily select elements that are usually on top of each other. This option will not modify your page in any way, it is just a tool to help with navigation.

You can also traverse through the elements by clicking on the breadcrumbs found on the very bottom of the screen when selecting an element on the canvas.

Reordering your elements and sections across your page can easily be done by using the move buttons  in the canvas controls. Just select the element or section you want to move and click on the move buttons.

Remember that these options only move your selected element inside it’s own parent element and cannot be moved outside or on a different container. If you want to move elements on a different container, see Structure View .

If you find the need to copy or duplicate a section, component or element, you can use the duplicate button in the canvas controls. Clicking on this button will copy the selected element together with it’s child elements and place it at the end of the parent container.

To delete a section, component, or element, click on the icon in the canvas controls. This will delete the element currently selected including all of it’s child elements.

Editing Text Content

The system makes it easy for you to edit your content directly in the canvas. To do this, select the text by clicking on it, then click on the pencil  icon in the canvas controls. This will activate the inline editor to allow you to change the content. Just remember to click the ‘check’  button to save changes.

Alternatively, you can double-click on the text element in the canvas to activate the editor.

Updating Element Properties (links, image src, etc.)

When you select an element, the properties window will show you it’s existing properties like the element tag, href for links, and src for images. In advanced mode, all element attributes will show on the properties window. 

To change the property values, just type in the new value in the textbox. For images please see Image Library section.

Applying Classes

When selecting an element in the canvas, you would notice the properties panel shows in the right sidebar. This panel shows you the properties and attributes of the selected element. It also gives you a couple of options for adding classes to your element.

There are two ways to add classes to your element.

  1. Typing it directly on the classes list. Just type in the class and press ‘Enter’. You can use any default framework or custom classes defined in your brand guide.

    You can also use the classes tools found on the upper right to clear, copy and paste classes to other elements.
  2. Using the accordion options. It lists all the available classes related to the element. To add additional tools, see Element Config .

Adding Additional Attribute

By default, all elements will have a class attribute to them. This allows the system to append classes to the element using the class tools available in the sidebar. To add additional attributes, you can edit the content using the HTML code editor or by clicking on the ‘ Add Attribute‘ button.

Editing as HTML Content

Similar to adding custom content, the content can also be edited using the html code editor. Click on the ‘ View Code‘ button in the properties sidebar to access the html content editor.

In Advanced mode, The editor can also be directly accessed when double-clicking on the element or component in the canvas.

Special components like wp-posts cannot be edited using the html code editor but will have Component Options for customizing the component.

Image Library

Creating you web pages usually requires you to insert assets like images. With the page builder, you can manage these assets using the Image Library. You can access the Image library by clicking on the folder icon on specific fields (eg. src on an image tag)

The Image Library allows you to select an image from your library to be used on the page. You can also add new images on the Image Library window.

Please take note that if your project is connected to WordPress or Directus via API Key , the Image Library will pull and insert images on the media library of that specific CMS.

Reverting Changes

Working with pages, there would be times when you would accidentally change or delete something that was not supposed to be edited or deleted. To save you from re-creating the element from the start, we added undo/redo function which will revert the last change done on the page. The undo and redo buttons can be found on the top of the screen.

Animations

Spinnr has a built-in animations library for easily adding on-scroll animations to you elements and components. It uses Animate on Scroll library and is already configured for your use. The animate on scroll options can be found on the bottom section of the class tools in the properties sidebar.

The animation library allows you to customize the animation you want using css animations and works on almost all new browsers. 

Using Structure Tree

Another useful feature of spinnr is the structure tree. The structure tree shows you a hierarchical list of all the elements on your page. It can be found on the properties sidebar > Structure tab.

The structure tree also has unique features to help you manage your page:

  • Move/sort your elements by dragging and dropping.
  • Clicking an element will set that element as your currently selected element. 
  • Click the ‘X’ button to delete an element. Just be mindful that this option will also delete all the children of that element.