fbpx

Editing Page Layout

The layout and design of your website are controlled by the theme being used. You can customize each page of a theme by editing the page layout.

In this article, you will learn how…

  • To adjust the height of a row
  • To adjust the width of a column
  • To change the number of columns within a row

The following video provides an overview on how to edit the layout of a page. Read further for more detailed information on editing your page layout.

Pages in a website theme consist of three main sections:

  1. Header
  2. Body
  3. Footer

Changes made to header and footer areas are applied to all pages in the theme. Changes made to the body area only affect the page you are currently editing.

Content consists of rows and columns. Rows and columns are used to ensure your site will be responsive on all devices. As the device size reduces, rows will stack to ensure that your content is always viewable.

The height of the rows and the width of columns is adjustable. The number of columns within a row is also adjustable.

To adjust the height of a row:

  1. Mouse-over the bottom edge of the row until the sizing handle appears.
  2. Click and drag the sizing handle up or down to increase or decrease the height of the row.
ResizeRowHeight

To adjust the width of a column:

  1. Mouse-over the edge between the columns until sizing handle appears.
  2. Click and drag the sizing handle left or right to increase or decrease the width of the column.
ResizeColumnWidth

To change the number of columns within a row:

  1. Mouse-over the row.

    The row controls will appear.

  2. Click on the down arrow beside the row icon.
  3. Choose the Row Settings item from the drop-down menu
RowSettingsMenuItem

 

   The Row Settings popup will be displayed

RowSettingsPopup

You can also double-click on the row widget ot open the Row Settings popup.

 

  4. Enter the number of adjustable width columns you want into the Number of fluid columns field.

  5. Choose whether you want to add an additional fixed-width column.

       If you choose Yes, the Fixed Column Position drop-down box will be displayed.

 

FixedColumnPosition
  • Left of Fluid Columns: Adds a fixed-width column to the left of the adjustable width columns.
  • Right of Fluid Columns: Adds a fixed-width column to the right of the adjustable width columns.

 

   6. Choose a position for the fixed-width column.

   7. Click OK.

   8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.