UNCG Web Assets | Blocks | Wrapper

Wrapper

A full-width wrapper that has customizable background options and border options.

It’s best to think of the Wrapper Block as a “div.” The HTML division tag, called “div” for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.

This text is inside a Wrapper Block. This Wrapper Block has a Navy background color with white text.

This text is inside a Wrapper Block. This Wrapper Block has a White and Gray Stripe Pattern background with black text and has more “padding” inside.

This text is inside a Wrapper Block. This Wrapper Block has an image background with black text and has even more “padding” inside.

Block Settings:

Background Types

Screenshot of color settings

Color

  • You can choose from a selection of UNCG-branded color backgrounds
  • A gradient can be selected to add a shaded area to either the bottom, top, right, or left side of your background; this is useful to ensure text over the background is still readable
  • With the Background extends the full width option on, the wrapper block will be extended from one edge of the browser window to the other; with this off the wrapper will remain within the width of the container it is in
Screenshot of pattern settings

Pattern

  • Only one pattern is available at this time which is a lighter version of the default page background pattern
  • With the Background extends the full width option on, the wrapper block will be extended from one edge of the browser window to the other; with this off the wrapper will remain within the width of the container it is in
Screenshot of image settings

Image

  • Select an image to be used as the background; remember your image must be large enough to fill the width of the container while also having a small file size
  • Once an image is selected, you can optionally choose a focal point in the image to keep that part of the image viewable in different viewports
  • A gradient can be selected to add a shaded area to either the bottom, top, right, or left side of your background; this is useful to ensure text over the background is still readable
  • With the Background extends the full width option on, the wrapper block will be extended from one edge of the browser window to the other; with this off the wrapper will remain within the width of the container it is in
Screenshot of parallax settings

Parallax Image

  • A parrallax image background gives your page the 3D effect of depth and being dynamic by moving at a slower pace than the foreground
Screenshot of video settings

MP4 video by URL

  • This option allows you to set the source/url of a MP4 video as an autoplaying looping background. Controls Play/pause controls will appear in the bottom left corner of wrapper block. Note: the MP4 should be hosted outside of WordPress on a CDN
  • A gradient can be selected to add a shaded area to either the bottom, top, right, or left side of your background; this is useful to ensure text over the background is still readable
  • With the Background extends the full width option on, the wrapper block will be extended from one edge of the browser window to the other; with this off the wrapper will remain within the width of the container it is in
  • NOTE: You should ensure that your video is optimized to the smallest file size possible to allow your page to load faster and save storage space. For a tutorial on optimizing your video view the Media Encoder page of this site.

Additional Settings

Width and Height

  • Max Width
    • You can restrict the internal size of the block based on popular breakpoint widths; by default the content inside a wrapper block will extend to the maximum width of the column it’s in
  • Minimum Height
    • An optional minimum height can be set in order to show a larger portion of the background for banner type purposes
  • Content Alignment
    • With a minimum height set, the content can be vertically aligned to the top, middle or bottom of the block

Padding

  • Padding is the space between the content and the border of an element. You have the option to add padding to the top, bottom, and left/right of the block.
  • Removing the outer padding will allow the content inside the block to be flush with its parent container. This is off by default.

Margins

  • Adding margin to the top and bottom of the Wrapper Block will create spacing between this block and either the content before or following

Border

  • The border option will allow you to have an optional color border around the entire block. This is off by default
Blocks