5. Upfront Regions and Backgrounds
In Upfront, regions provide a way for you to structure your web pages into logical sections. You can then add elements to these sections to flesh out the design and layout of your site. Regions are simple to set up, configure or even remove.
5.1 Editing, Adding, and Deleting RegionsLink to chapter 1
When hovering over a region, you will notice that a little “dog ear” control will appear in the top-right corner. Clicking that control will bring up the region edit mode for this region.
When you’re in region edit mode, the sidebar will disappear and all other regions will have a dark overlay. The active region’s elements will fade and a number of controls will appear over it.
Check out the graphic below to see what each control can do.
As you can see, you can add a sidebar to both sides of a region, or insert a new region above or below the currently selected region. The <strong>Settings</strong> and <strong>Remove</strong> buttons act in the same way they do for elements. In order to exit region mode, click the green button at the bottom of the regions that says <em>Finish editing region</em>.
Left and right sidebars are the child regions of the currently selected region, whereas regions above and below are separate regions and are siblings of the selected region.
5.2 Region TypesLink to chapter 2
There are three region types and the main difference between each type is how they relate to your browser width.
As you may have guessed, a Fullscreen region will always do its best to adjust its width and height to match your browser window. These are a great option if you want to have a big, fullscreen hero area or if you want to feature a video or image slider there.
Unlike other region types, Fullscreen regions provide two additional option groups: Element Behavior and Add Sub Regions.
Element Behavior has 2 options: Keep Position & Keep Ratio. The former will maintain element’s position, regardless of the screen size whereas the latter will re-position the elements for smaller screens (while there is space). For example, with Keep Position selected, an image positioned exactly in the center of the region, will only remain in the center provided the site is viewed on the same screen it was created, however Keep Ratio option will do its best to make sure that element is in the center, regardless of the screen size.
Add Sub Regions option allows user to add top & bottom sub-regions to the Full Screen region. Because sub-regions scale with the main region, this can be useful for things like navigation & branding.
100% Wide regions will always stretch to the width of the browser. The height of the region, however, will remain constant.
Unlike the previous two types, Contained regions maintain their width and height at all times regardless of the browser width. Condensed regions are extremely useful and you’re likely to use them more often than the other regions. The width of contained regions is determined by the global background settings (see the Global Theme Settings section) and is the same for all contained regions. In a scenario where screen width is 1200px but the contained region width is 1000px, it will be centered and the global background will display on the sides of the regions. Below is the diagram explaining each region type.
As you can see, the Fullscreen region always occupies the entire window, 100% wide regions take up the width of the window, and contained regions don’t change in size at all.
5.3 Region BackgroundsLink to chapter 3
For ordinary layouts, there are five different background types to choose from:
- Solid Color
- Image Slider
Solid Color backgrounds are exactly what you would expect. Pick a color and it will fill the region.
Map backgrounds are essentially the same as the map element, only they are applied to regions. Many modern websites have large Google Maps areas. In Upfront, this can be accomplished using a map region background.
Image regions come in four different types:
- Full Width
- Tiled / Pattern
- Fixed Position
As you might imagine, a Full Width image type will take any image you upload and make it fill the entire region area.
Tiled / Pattern image types will tile any image you wish to be tiled. We can recommend www.subtlepatterns.com as a great source for patterns, and all are under the Creative Commons license.
Parallax image types fill the region in a similar way to Full Width images types, and in addition add a subtle parallax effect to the region, which you can see when you scroll up and down the page).
Fixed Position image types allow you to upload an image and position it anywhere in relation to the region. This is especially useful when you want to position an image that is smaller than the region in a specific place. For example, in the image below an image of a turned corner is positioned in the top-right of the region.
In the image above, we have also added an image with transparency and positioned it in the top-left corner of the region, thus creating a “turned corner” illusion.
Video regions let you set playing video content as the background to any region. Currently, videos can be added from YouTube, Vimeo and Wistia. A number of options are available for video playback, including Mute Sound and Play Video on Page Load, as well as three cropping and scaling methods.
- Scale & Crop — Will both re-size and crop the video in an attempt to create the best possible scenario
- No Crop Embed — The video service embed will take up the entire region, however the video will not be cropped and will instead be centered.
- No Crop + BG Color — The video will be scaled to fit the region but not fill it. You can choose the background color to fill remaining areas.
Slider regions provide a way for you to create full-width sliding image carousels for your website. Sliders can rotate automatically after a timeout or when manually navigated by visitors. You can choose between five different transitions and whether or not the slider controls are visible at all times or on hover only.
5.4 Custom Region CSSLink to chapter 4
Much like elements in Upfront, a region’s style can be completely customized with CSS. For example, if you have an image slider with a text element and some light text, some parts of the text may be difficult to read when different slides are rotated (e.g. white text over a light image). With some CSS, you can add a subtle dark gradient to the slider to make the text legible.
Here’s an example of how this would work:
In the image above, when we applied a subtle CSS gradient (the image on the right), the text immediately became easier to read. This is just one simple example of how you can enhanceUpfront features with custom css.