Our Responsive system architecture streamlines the layout of your pages into a single, 'master' column, and because of this there is no longer a need to have Add Content links in different areas of the page. To add new modules of content to your pages, you will go to the upper left corner of the page, just below the house-shaped Home icon on the far left side of the blue Admin Toolbar. You will see a triangle beneath that icon and it will have a + in it. If you move your mouse over it, a list will pop up with the different areas of the page to which you can add new modules. Here is an example, move your mouse over the image below:
Add Header Content - Adding modules to the Header area will insert the content above your main Navigation menu, pushing everything on the page down. For most of our clients, this is not an area to which you would typically add content. Usually content is only added here when the site is initially built. Remember that your website header is a big part of your company's image, your brand, so we recommend changing it only after careful consideration.
Add Body Content - Adding a module into the Body area will place it below your site Navigation but above the footer. The new module will come in below any other modules that are already in the body area, and you have the option at that point of moving the new module up the page using the arrow keys in the gray module toolbar (see example above). The body content area will be your primary work area for every page whenever you need to add new content.
Add Footer Content - Your Footer, of course, is the bottom-most row of the website, and will always appear on the page below all other content. You can add new content modules here, and in some cases it makes sense to do so. This area won't be used frequently, but is a good place to put something you know you want at the bottom of the page.
Rows Vs. Columns
The responsive website system focuses on content that goes across the main area of the page in rows. Your content can even be set to go the full width of the screen, up to 1920 pixels wide. Because of this focus on content in rows instead of the columns that were present in the old system, you will need to learn to think about how your content can best serve its purpose as a row on the page.
Take a look at the Sears website example here. Just looking at the overall layout of the page, you can see that it is made up of rows. You can also see that even a major retailer like this is unafraid of a long-scrolling home page, in fact, the image to the left is only about half of the content that was on the home page at the time!
So if you are a retailer, putting all of your specials up on your home page is a great way to make sure they get seen by your visitors, and it's also a great way to increase sales. Our new Featured Products module can automate this functionality for you, saving you hours of work a month in keeping your home page specials current, take a look at that module by clicking here.
In the example video below, I demonstrate how easy it is to add new content modules to a page. You also have the ability to give a module a background color or even a background image that can stretch all the way across the page or that can cover the main content area in the center of the page.
To change whether a module is extra-wide or normal, click on the second button in the gray Module Toolbar, the Settings button shaped like a gear. Just below the Margins for the module, you will find the new Width setting, and you can select either Extra Wide (1920 pixels) or Normal (1170 pixels).
Setting a Module Background Color
To set the background color, look a little further down in the same area. Your color will need to be a 'hex color' code, which is often a mix of letters and numbers and is six characters long. Don't forget to put a pound sign (#) in front of the code, e.g. #a3a3a3 for a light gray. The easiest way to find a color that's already on your site is to locate a module that already has a background color made to go with your site (like the divider module I use in the demo video below) and click the Settings button on the module's toolbar. If you want to pick your own color, you can go to a website like ColorPicker.com, or you can use an image editing program like Photoshop or Paint.
Using Images as Module Backgrounds
To set an image as the background, you have several options. If your image is a repeatable one--meaning that if it is set next to a copy of itself, the edges will match up on perfectly on any and all sides--you can use an image like that to fill all of the space for the module background. If you add content to the module later, the system will just put more copies of the background image in to fill up the new background space. Here is an example of a repeatable image:
Here is how you set an image to be a module background:
Step One: When working with an image like this (one that will repeat seamlessly), or with one that is for Normal width (1170px) or Extra Wide (1920px), you will first go to Websites > Files > Images and upload the image you want.
Step Two: Click on the Settings button for the module, and select your background image from the server.
Step Three: Set your background image repeat. Here is a list of common options: Repeat - repeats the image horizontally and vertically, used with seamless repeatable images like the example to the left. Repeat-x - Repeats the image horizontally; use this if your image is the full height you want for the module and can seamlessly repeat side to side. Repeat-y - Repeats vertically; use this if your image covers the full width of the module (at least 1170px wide) and is seamlessly repeatable top and bottom.
Please click here for some examples of repeatable settings you can use. Scroll down and look at the section called Property Values. You can click the Play buttons to the right to see live examples of each repeat type. In our system, if you leave the Background Image Repeat field blank, it will be a No Repeat option. Use this setting if you will have your background image Fixed in place (see below).
Step Four (Optional): Set the Background Image Attachment. If you want your image to just sit behind the module content and always stay in place, just leave this area blank. If you want your background image to stay fixed, and then when you scroll up and down the module content will appear to move over the background, set this area to Fixed, and be sure to leave the Background Image Repeat field blank. Click here for a short video example of how this appears with the Fixed setting on.
Take a Look
Using these settings, and applying them to the row-based content layout, you can do some creative things with your modules that have not been possible until now in our system. For example, you can give a row a background color and a specific height and just use it as a divider between other rows of content. You could create a page with a series of modules of differing background images and colors in a layout that would look and function like an infographic for your business (take a look at this example). In the video below, you can see how modules are added to the page in our system, as well as how to use background color in a module to create a divider between other modules.