Topic: Website Editors

Tutorial Topics

Latest Guides

Editing Page Basics

Guide by: Keith Killilea 31.Jan.2018

Getting started with the basics of editing pages.

If you have questions during the process or require assistance, you can always contact us for help or ask in the community forums.


Using Designers to Edit Pages

To edit pages you need to be on that page you want to edit and select either the Standard Designer or the Advanced Designer. 


Accessing Standard Designer

Go to the page on your website you want to edit and on the Editor Toolbar, select Designers -> Standard Designer option. The Standard Designer mode is now active.


Standard Designer Basics

When Standard Designer is active, your page will still look the same but if you hover over each block you will it highlighted and a few small icon options per Block to pick from. The following outlines what options you have:

  • Drag & Drop (move) Blocks. Left click & hold onto the block and move it around the page into a position. 
  • Resize Blocks. Move your mouse / cursor to the edges of each block and highlight lines will appear, click & hold to resize that block. 
  • Edit Content Icon. Click the green icon on each block to edit the text & content of that block. 
  • Add Block Icon. Click the black icon to open up the left-sidebar Block options to add a new block to the page.
  • Move Block Icon. Click & hold the white icon to move the block around the page.
  • Remove Block Icon. Click the red icon to delete this block permanently from the page.
  • Block Settings Icon. Other Block Types have the Settings Icon instead of Edit, as these special Blocks contain options you can change.
  • Style Settings. In the Block Settings pop-up, you will also see various options to change the style of that block and add animations to it.

Accessing Advanced Designer

Go to the page on your website you want to edit and on the Editor Toolbar, select Designers -> Advanced Designer option. The Advanced Designer mode is now active.


Advanced Designer Basics

When Advanced Designer is active, your page will visually change with your content surrounded by boxes that show you which are Content Blocks, Columns, Rows and Sections. You can now see the mark-up of how the page structure looks and gain access to extra options not in the Standard Designer. The following outlines what options you have:

  • Drag & Drop (move) Blocks. Left click & hold onto the block and move it around the page into a position. 
  • Resize Blocks. Move your mouse / cursor to the edges of each block and highlight lines will appear, click & hold to resize that block. 
  • Edit Content. Click on any Generic / General Block and the Text Editor will appear instantly for you to change the content.
  • Undo Icon. This option only displays for Content Blocks, to revert it's position back inside of the Column Block if moved outside of it by the Free Move Option.
  • Move Block Icon. Click & hold the white icon to move the block around the page.
  • Minimize Icon. Click the yellow icon to minimize / hide that blocks contained inside of it. 
  • Remove Block Icon. Click the red icon to delete this block permanently from the page.
  • Width Icon. Only Rows & Main Content Sections have this option, which is change the structure to Full Width or Contained options.
  • Header Icon. Only on Headers, this option will make your Header Fixed (as you scroll down the page) or Default (does not float). 
  • Right Menu Options. Right Clicking on any of the Blocks will bring up a menu with various options to choose from. 
  • Style Settings. Located in the Right Menu Options, change different style options and add your own CSS & Classes. 
  • Block Settings. Located in the Right Menu Options, change the various setting options of each Block (EG: Add images to the Slider Block).
  • Add Blocks. Located in the Right Menu Options, add new Content Blocks, Module Blocks or Layout Blocks. 
  • Other Settings. Located in the Right Menu Options, different Blocks will contain different options to choose from. 

Publishing

Select the Publish button on the Editor Toolbar to make the changes you have done to that page go Live for your visitors to see the changes. Use Saved Versions to back to previously saved pages as every change you make to a page is recorded and saved with each publish. 



Tags: Website-Editors