Responsive Layouts
More and more users are accessing websites using mobile devices with screens that are typically more narrow than a computer display, especially when viewed in portrait (taller than wider) rather than landscape (wider than taller) aspect ratios.
Web page creators must now give more consideration to how their website content appears on various devices and with different aspect ratios. They may choose to display more graphically intensive media and complete text on computer monitors, but more concise text and media on mobile devices.
If your site was created with responsive design, additional properties will be available on the Editing Toolbar. If you are unsure whether your site is responsive, please contact Customer Support at travel@travelonebedford.com.
Due to the nature of responsive design, the Tables feature is not supported. Therefore, the most commonly used multi-column layouts are made available that will work with responsive templates.
Types of Responsive Layouts
- Default: The default layout is full panel width, meaning inserted text and images will reach from the left side of the content area all the way to the right side of the content area.
- 2 Columns: 50% 50%: Content can be placed in either of two evenly spaced columns.
- 3 Columns: 33% 33% 33%: Content can be placed in any of three evenly spaced columns.
- 2 Columns: 70% 30% (Right Rail): Content can be placed in a wider left hand column spanning 70% of the panel width, or in a narrower right hand column spanning 30% of the panel width.
- 2 Columns: 30% 70% (Left Rail): Content can be placed in a narrower left hand column spanning 30% of the panel width, or in a wider right hand column spanning 70% of the panel width.
- 4 Columns: 25% 25% 25% 25%: Content can be placed in any of four evenly spaced columns.
When viewed in Published Mode, the columns will appear side by side on a wider display (i.e. monitor or laptop display). As the form factor is reduced (i.e. mobile devices or tablets), the columns will shift and appear stacked, one on top of the other.
Below is an example of how the same page might be viewed on a desktop versus a mobile device:
How to Insert a Responsive Layout
- Start with an empty article (responsive layouts may also be applied inside of forms).
- Click inside of the article, then click the Responsive Layouts icon on the Editing Toolbar.
- Choose one of the 5 layouts.
- The responsive layout will be added to your article.
- While in Edit Mode, a yellow border will apear around each column when you hover over the article. This border will not appear in Published Mode.
Adding Background Color to Responsive Layouts
- After a responsive layout has been added, right click on the column where you would like to add background color.
- Select Panel Properties.
- Click the Choose button to select a color.
- The background color you selected will now appear in the column, as seen in the example below:
