Admin Level - Webmaster
A fundamental part of the CMS is a Layout Section, which can be empty or else contain one or more Components. This is the key to creating a very unique and customized website.
Let’s look at the home page for some examples. In the side menu, click Website Design.
As you hover over various sections of the home page, you will see a blue Layout Section overlay appear 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 appear, such as Social Links. You can click a Component overlay to edit its properties, or click the X
to delete it.
Click a Layout Section overlay and you will see all the components listed within that Section, along with the Section’s properties. Click Save after making any changes.
Section title — Appears above and/or to the left of everything in the Section. You will want to leave this blank in many cases, such as the top section of your site.
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 — When using this 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 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 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. Be careful not to create wildly different backgrounds for every Section, lest your CMS turn into “see a mess.” Either stick with the defaults or choose backgrounds that complement your selected color theme.
Color — Beyond the obvious color picker and being able to directly enter a color hex code, 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, giving the appearance of seeing 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.
__________
See Also
Components