Editing Home Pages (Widgets)

Getting Started With Pages (2 of 5)

Widget Pages (Home Pages)

Each site has a Home Page, which is normally a widget page. Editing widget pages happen “inline”. This means you can edit the widget page directly, and do not have to go a separate admin screen.

Start Editing a Widget Page

To start editing a widget page, click any pencil icon in the upper right of any widget. These are highlighted in red in the image below. If you don’t see the pencil icon, ensure you are logged in either as an administrator, or as the owner of the page you want to edit. The large green rectangle shows the boundary of the home page.

 

Widget Page

Clicking the pencil icon will put the screen in edit mode, and allow you to make changes. Normal users will not see this icon.

If the widget page is empty, and no pencil icons are available to click, you can start editing a page using the Toolbox, by clicking  and selecting .

You know you are in edit mode, when you see the Save Changes bar at the bottom of the page.

 

You can edit multiple items before saving changes.

 No changes are saved until you click the Save Widgets / Save Menu button.

Note that clicking the pencil icon starts the inline editing process for not just widget pages, but other items as well. Clicking the pencil icon in the header will let you edit menu items.

Adding Widgets

Widgets are hosted within a widget frame. You can stack widgets vertically by adding new widget frames.  Widget frames also allow you to place up to three widgets horizontally. Click on the number 1, 2, or 3 to change how many widgets you want to show in each row.

The image below shows an empty widget frame set to display one widget.

 

Empty Widget Frame

Widget Frame Top Icons (from left to right)

  • 1,2, 3: Set the number of widgets to display horizontally
  • Below Arrow Icon: Insert an new widget frame below this frame
  • Above Arrow Icon: Insert a new widget frame above this frame
  • Move Icon: Click and drag this icon to move the entire widget frame
  • Delete Icon: Click to delete this widget frame and all its widgets

The icon in the center, with three joined squares is the Add Widget Icon. Click this icon to add a new widget to the widget frame.

To insert a new widget above or below another widget:

  1. Hover your mouse over a widget frame near where you want to insert.
  2. Click the Below Arrow Icon or Above Arrow Icon to insert a new widget frame.
  3. Click the Add Widget Icon in the middle of the new frame to insert a widget.

To insert a new widget beside another widget:

  1. Hover your mouse over the widget near where you want to insert.
  2. Click 2 or 3 to allow multiple horizontal widgets in the widget frame.
  3. Hover over the new space, and click the Add Widget Icon to insert the new widget.

Editing Widgets

One you have added a widget to a widget frame, the Add Widget Icon is replaced with three new icons shown in the center of the widget.

 

Widget Icons (from left to right, in the center of the widget)

  • Pencil Icon: edit the properties of this widget
  • Move Icon: Click and drag this icon to move this widget to a new location
  • Delete Icon: Delete this widget

To begin editing a widget, click the pencil icon.

 

Build Tool Window – Theme Options

After clicking the pencil icon, the build tool window will open. The build tool window has two sections, Properties and Theme Options. Click on the headers to expand the sections.

Note: changing options under Theme Options will show the change on screen, and you do not have to click Apply to All. The Apply to All button should only be used if you want to apply the theme options for this widget to all widgets on the page. 

Moving Widgets

When you want to change the position of a widget on a page, you have two options.

 

Widget frame move icon is in the upper right, widget move icon is in the center.

To move widgets vertically:

  1. Click and start dragging the widget frame move icon (upper right of the widget frame).
  2. Position and release the widget frame where you want it to be inserted.
  3. All widgets in the widget frame are moved together.

To move widgets horizontally:

  1. Click and start dragging the widget move icon (center of the widget).
  2. Position and release the widget where you want it to be inserted.

There is also the option of moving a widget between widget frames.

To move widgets between widget frames:

  1. Click and start dragging the widget move icon in the center of a widget.
  2. Move the widget over the new widget frame.
  3. If you drop the widget in an empty space within the frame, the widget is moved.
  4. If you drop the widget on top of an existing widget, the widgets are swapped.

Note that dropping the widget on top of an existing widget will cause the widgets to be swapped, and the existing widget will be moved to the original frame. If you want to add the widget as a new item in the widget frame, make sure to change the number of widgets in the row first.

Adding a Right Column

You can optionally choose to add a right column to a widget page. To add a right column, begin editing the page, and click on the Insert Right Icon shown below.

 

Saving Changes 

To save changes, you must click the Save Widgets button in the Edit Bar shown in the bottom of your screen. If you navigate away from the page before saving changes, any change will be discarded.

There is no draft mode available. When making significant home page changes, it is suggested that you make a copy of the home page, perform all edits, and then switch the site to the new home page once you are happy with the results.

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.