User Manuals

Learn how to use WordPress – and take advantage of its advanced features.

  • Setup, Usage & Integration

Upfront Regions

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.

Editing, Adding & Deleting Regions

When hovering over a region, you will notice 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.

region corner

When you’re in region edit mode, you will notice the sidebar will disappear, all other regions will have a dark overlay, and 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.

Region controls exposed

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 Settings and Remove 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 Finish editing region.

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.

Region Settings

Region Types

There are three region types and the main difference between each type is how they relate to your browser width.

Fullscreen

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 elemnt’s position, regradless 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 it’s best to make sure that element is in the center, regradless 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 usefull for things like navigation & branding.

100% Wide

100% Wide regions will always stretch to the width of the browser, the height of the region, however, will remain constant.

Contained

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 then 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 centred and the global background will display on the sides of the regions. Below is the diagram explaining each region type.

upfront region layouts explained

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.

Region Backgrounds

For ordinary layouts, there are give different background types you can choose from:

  • Solid Color
  • Image
  • Video
  • Image Slider
  • Map

Solid Color backgrounds are exactly what you would you 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

Image gegions come in four different types:

  1. Full Width
  2. Tiled / Pattern
  3. Fixed Position
  4. Parallax

As you might imagine, a Full Width image type will take any image you upload and make it fill the whole 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 you see how an image of a turned corner is positioned in the top-right of the region.

fixed position region settings

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 Region

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.

  1. Scale & Crop — Will both re-size and crop the video in an attempt to create the best possible scenario
  2. No Crop Embed — The video service embed will take up the entire region, however the video will not be cropped and will instead be centred.
  3. 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 Region

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 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.

Regions – Custom CSS

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, you might find that some parts of the text is difficult to read when different slides are rotated (e.g. thite 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:

.upfront-default-slider-wrap:before {
    content:'';
    position:absolute;
    top:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
    width:100%;
    height:100%;
    z-index:2;
}

region-css-gradient
 

In the image above, you can see how 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.