In the side menu, click Website Design.
As you hover over various home page sections, you will see a blue Layout Section overlay on the left. Every other page has one Layout Section, and the home page has several.
Hover over the elements within that Section, and you will see various Component overlays, such as Social Links.
Click the component overlay to edit it or click the X to delete it.
Click a Layout Section overlay to see all the components listed within that Section, along with the Section’s properties. Click Save after making any changes.
Components Layout
Orientation — How multiple components are laid out by each other within columns or rows. Empty rows or columns are not displayed.
Horizontal within rows — Components are lined up left to right within one or more rows.
Vertical within columns — Components are lined up from top to bottom within one or more columns. If you only have components in one column, they generally stretch the width of the browser. Use for wide components such as the Photo Slideshow.
... — For Vertical orientations, hover over a subsection in the upper right to change its size settings (see same control below). Not needed for Horizontal orientations since the components in each sub-section expand to the width of the screen or layout.
To rearrange the component containers (i.e., the dotted line boxes), drag and drop them by clicking anywhere in the container's white margin and dragging.
Components — You can perform several actions on them.
Drag and drop them to change their order. You can drag them within a column or row, or drag them into another column or row, which allows you to have vertical and horizontal combination layouts.
... — Click to change size settings. Note that if one component is set to sized proportionally, all others should be as well.
Fit to component — Take up only as much room as needed.
Sized proportionally to section — Pick a weight from 1-6. Its size will be relative to other component weights. A small number, such as 1, will be relatively smaller in size to another component with a larger number, such as 3. All component weights are added together and divided according to each weight. For example, if component A has a weight of 2 and component B a weight of 1, that totals 3 units. A will be twice as big as B and take up 2/3 of the available space, while B takes up 1/3.
Use fixed size — We recommend only using % (percentages) to maintain proper resizing. Using absolute pixel or character widths can result in needing to scroll left and right in the browser when the browser width is less than the component width(s).
/ — Click to toggle the component on or off.
— Click to delete component.
Select component(s) to add. — Click to select one or more components to add, click Select, then drag and drop where you want each one. See the Component list for a description of each one.
Row gap / Column gap — You can optionally enter the number of Pixels or Characters to separate each row or column.
Background Style
These controls let you add style and texture to your Layout Sections.
Color — Beyond the obvious color picker and being able to enter a color hex code directly, you can select the saturation (color intensity) with the first slider and the opaqueness with the second slider or percentage field (determines how much of the default background behind it shows through your chosen color). Note that images (except for their parts with transparent areas) will overlay this color.
Repeat
No repeat — Display the image once in the upper left of the section.
Repeat horizontally — Repeat the image in one horizontal row at the top of the section.
Repeat vertically — Repeat the image in one vertical row on the left side of the section.
Repeat — Fill the container with the image in vertical and horizontal rows.
Attachment
Scroll — The image is part of the page and moves with it when scrolling.
Fixed — The image stays in a fixed position behind the page content, appearing to see it through a window when scrolling the page.
Size
Auto — Display the image at its native size.
Contain — Force the image to fit inside the height or width of the layout section.
Cover — Enlarge the image to fill the browser width. The section shows what part of it that it can.
Image area — When empty, drag an image into it for use as the background. When an image is already there, click the x in the upper right to delete.