Some features outlined in this article may not be visible to your organization. These Layout options are part of a gradual rollout currently underway for existing organizations.
Before You Start
A custom layout is independent of your site's templates. Once a page has a custom layout, changes to your templates will no longer affect it.
When you switch a page to a custom layout, your navigation menu will not carry over automatically. Steps for adding it back are included below.
Changes go live immediately. There is no draft or publish step.
Your design styles are pre-loaded based on your site's custom design. You do not need to create them. If you need a new style added, contact OTTO SPORT.
1. Creating the Custom Layout
Go to the page and open the layout editor by hovering over the Admin Menu, then selecting Edit Page Layout.
Select Custom Page Layout. The page will start with a header, a single row, and a footer.
3. Continue to Step 2 to start building out your rows.
2. Adding, Removing, and Reordering Rows
Rows are the building blocks of your layout. Each row holds a section of content and can be configured with different column structures, widths, and styles.
Adding a Row
In the layout editor, click Add Row.
Next, choose your Row Type: left, right, dual nav, single column, two columns, and so on.
Continue adding as many rows as needed for the page.
Reordering Rows
Hover over the Move icon in the row you want to move.
Click and hold the drag handle.
Drag and drop the row to its new position.
Removing a Row
Click Delete (trash can icon) on the row you want to remove.
Tip: Before removing a row, move any content inside it to another row first. Content left in a deleted row becomes orphaned content and appears at the bottom of the page. See: Why is content showing up at the bottom of my page?
3. Configuring Rows
Once your rows are in place, you can adjust the settings for each one.
Row Layout: Choose how many columns the row contains and how they are proportioned. These can be adjusted at any time.
Row Width: By default, rows have a centered margin to keep content from stretching to the edges of the page. Select the checkbox for Full Width if you want the row to span the entire width of the page.
Custom CSS Styles: Apply a visual style to the row. Your available classes are pre-loaded and control things like background color, spacing, and section transitions. Each row can have one class applied at a time.
CSS Styles are organized into three categories:
Row styles — Apply a background or spacing treatment to a content row.
Divider styles — Create a visual transition between sections, like a color fade or gradient. Each divider transitions from a leading color to a trailing color, and both can be customized to match your club's colors.
Other — Any additional classes created for your site.
To apply one:
In the row where you wish to add a style, select Add Custom CSS to open the dropdown.
Select the class style you want to apply.
Click Save.
A set of styles will already be loaded on your site. If you need something new added, reach out to OTTO SPORT.
4. Setting a Primary Row
Every layout needs one row designated as the primary row. This tells your site which section should display the main content when someone visits the page, for example, a single article or a directory entry.
How Your Site Determines the Primary Row
Your site uses the following rules, in order:
If one row is marked as primary, that row is used.
If no row is marked as primary and the layout has a multi-column row, the largest column is treated as primary.
If all columns are equal width, the first column is treated as primary.
Setting a primary row manually avoids any ambiguity.
To set a Row as Primary:
In the row you wish to set as Primary, select the Primary Row toggle.
Click Save.
Tip: Most layouts only need one primary row. If your layout has a banner at the top and a footer at the bottom, set the center content section as primary.
Adding your Navigation Menu Back
Switching to a custom layout removes the menu that was part of your previous template. Here is how to add it back:
From your Site Map, navigate to a page where the navigation displays correctly. I.e., your home page.
Click Edit Menu Content.
3. Select Cloned Instances.
4. Go back to your custom layout page and drag the cloned menu into the correct row at the top of the page.
5. Click Save.
Note: Each row can only hold one navigation block at a time. If a row already has a menu in it, remove it before adding another.
Saving your Layout as a Reusable Template
If you have built a custom layout you want to use on other pages, you can save it as a named template.
In the Layout Editor, click Save As New Layout Template.
2. Give the template a name.
Tip: Name it something easy to recognize so you can quickly find it later.
3. Click Save. It will now appear in your template list for use on any page.
Troubleshooting
Content is appearing at the bottom of my page? This is called orphaned content and happens when content loses its place after a layout change. See: Why is content showing up at the bottom of my page?
My menu is missing. Follow Step 5 above to clone and add your navigation menu back to the custom layout.
A class I applied to a row does not look right. Check that the correct class is selected in the row's settings. If you need a new style created or an existing one adjusted, contact OTTO SPORT.