Contents

• Accessing the Page Builder
  • From WordPress Dashboard
  • From Directus Dashboard
  • Directly from spinnr

• Basic and Advanced Mode

• Adding Sections

• Adding Components
• Custom HTML Code
• Navigating the Canvas
  • Traversing the html structure
  • Moving Elements and Sections
  • Duplicating Elements
  • Deleting Elements
• Editing Elements
  • Editing Text Content
  • Updating Element Properties (links, image src, etc.)
  • Applying Classes
  • Adding Additional Attribute
  • Editing as HTML Content
• Image Library
• Reverting changes
• Animations
• Using Structure Tree

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.