Layers Content Widget

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 2.02 Time to Read: 14 minutes

The Layers Content Widget is the primary building-block of your layout for displaying static content in up to 12 columns and multiple rows. It can be used to introduce services, link to pages or categories, display an image grid or create custom content layouts for interior pages such as Promo Cards. For steps on configuring this widget for specific uses, visit the Tutorials section.

content-widget

When you add a new Content widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget. Click the plus icon to expand each sub-option.

This section sets the widget content’s width. The widget itself will always be full width to the page.

  • Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
  • Full Width will expand the widget content to the width of the page. This also makes each column wider.

Padding

You may use the Padding fields to adjust the padding inside the slide and outside the content, if desired. These values correspond to pixels.

Margins

If using the Boxed or Full Width layouts, you may also adjust the margins, which controls the space around the slider.

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • Masonry allows each column block to fit together at various heights (such as Pinterest)

The gutter option controls the margins/spacing between blocks. Toggle it to gray it to remove spacing.

The background option affects the widget background and will span full width of the window.

Background Color

Click the background color oval to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

  • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.

Backround Image

If desired, click the plus to expand the Background Image option. Click  CHOOSE IMAGE to open the Media Library where you may upload or select an existing image.

  • Textures, photos and images without embedded text are best.
  • Full-size images  should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
  • Tiles or repeatable images can be any size you want.

When you set a background image, the following settings will appear:

  1. Under Background Repeat, choose whether to center the image, tile it, repeat it only horizontally, or repeat it only vertically.
  2. Under Background Position, choose how to align the image (centered by default).
  3. Toggle the Stretch option if you would like your image to responsively size itself to the section’s width (recommended).
  4. Toggle Darken to add a dark overlay, best used with images that have high contrast so your text shows up better.

PARALLAX (LAYERS PRO)

Layers Pro adds a Parallax option that allows your background image to stay in place while the site is scrolled. For Parallax to work well, your background image must be on Repeat, or be at least 300px taller than the slider’s height to allow for scrolling. For full screen desktops, this means at least 940px tall and 1900px wide.

Title

This heading appears above the widget content and may be left blank/default for no heading. This controls the alignment and styling of the title and excerpt within the content area. If you have Layers Pro, your options will begin with Header Styling.

Click the text-icon button in the Title field to begin:

Heading Type (Layers Pro)

This option allows you to choose the heading tag to wrap your title, H3 by default. The heading tag does not impact SEO ranking or change the heading size by default, though it can be used in child themes or custom styling to allow selecting special heading styles such as jumbo headings, fancy headings etc.

For best results we recommend keeping these H2 or H3 to ensure your site outline reads well for visitors on accessibility devices.

Text Size

Choose from Small, Medium or Large. Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme. If you have Layers Pro, text size is set in pixels in the Size field, explained in the next section:

Header Styling (Text Color) & Excerpt Styling

Depending on the background color of the content area, your text will be black or white by default, but can be customized here.

Click on the color swatch to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

HEADING Styling  (LAYERS PRO)

You may also choose the size, line height and spacing of your heading font in pixels, along with the weight

Text STYLE (LAYERS PRO)

Choose italic, underline, strikethrough or uppercase, if desired

Text Alignment

The Text align option will affect the alignment of text inside the text column of the content area (versus the Image Align which determines the overall layout or placement of the text in relation to the image column). Choose from Left, Center, Right or Justified.

Description

The Description field, containing “Our services run deep and are backed by over ten years of experience.” by default, will display just below the widget title above the widget content. Clicking into the description will activate the rich text editor to aid you in formatting your content, and supports basic HTML input via the Code </>view, much like the WordPress post editor.

For best results, limit the description to 1-3 sentences to introduce the content in this section of your layout. This field may optionally be left blank.

  • You cannot put scripts into this field such as javascript snippets
  • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
  • Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may be best in a column or require Advanced CSS styling.

See below for more help with using the Content Editor tools.

 

The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the column, slide or block, much like the WordPress post editor.

Background

Background Color

Choose a background color for your slide. This should closely match the primary color of any background image, as it determines whether the text loads as white or dark gray by default.

BACKGROUND TYPE (LAYERS PRO)

Layers Pro adds an additional drop-down here for choosing your background type. Gradient will allow you to choose a second color to create a nice gradient effect.

Background Image
  1. Click CHOOSE IMAGE to select or upload an image in the Media Library. Background images should be at least 1900px wide and as tall as your slider for best results.
  2. Under Background Repeat, choose whether to center the image, tile it, repeat it only horizontally, or repeat it only vertically.
  3. Under Background Position, choose how to align the image (centered by default).
  4. Toggle the Stretch option if you would like your image to responsively size itself to the viewport width (recommended).
  5. Toggle Darken to add a dark overlay, best used with images that have high contrast so your text shows up better.

PARALLAX (LAYERS PRO)

Layers Pro adds a Parallax option that allows your background image to stay in place while the site is scrolled. For Parallax to work well, your background image must be on Repeat, or be at least 300px taller than the slider’s height to allow for scrolling. For full screen desktops, this means at least 1000px tall and 1900px wide.

For standard video content in your slides, see Images, next:

Featured Media

image-iconFeatured Media

widget-featuredmedia-option

This setting adds an image or oEmbed media to the content area of your  slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

Featured Image

Click CHOOSE IMAGE and upload or select an image from your Media Library.

  • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.

Video URL(oEmbed)

  • This field takes any oEmbed content URL
  • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
  • The URL is copied from the "Share" link on the audio or video player.
  • oEmbed media will take the place of Featured Images

See How to Embed Audio & Video with Layers for detailed information on using oEmbed.

Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px wide.

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
  • Square: crops your image to 480x480 from center
  • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
  • Circle: Sets a radius on your image.  To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.

MAX IMAGE SIZE (LAYERS PRO)

Layers Pro adds an Image Size option where you may specify the max height and width of your featured media in pixels. This is helpful for controlling video players in some layouts.

LIGHTBOX (LAYERS PRO)

Toggle this option if you want to enable your featured image to open in a lightbox. This may not work with video unless you have a compatible video lightbox plugin installed.

image-alignImage Align

The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

  • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
  • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.

Text

The Text option controls the alignment and styling of the title and excerpt within the content area. If you have Layers Pro, your options will begin with Header Styling.

Text Size

Choose from Small, Medium or Large. Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.

Text Alignment

The Text align option will affect the alignment of text inside the text column of the content area (versus the Image Align which determines the overall layout or placement of the text in relation to the image column). Choose from Left, Center, Right or Justified.

Header & Excerpt Styling

These two groups control styling of the header and the excerpt (slide content) text separately

Text Color

Depending on the background color of the content area, your text will be black or white by default, but can be customized here.

HEADING TYPE (L:AYERS PRO)

This option allows you to choose the heading tag to wrap your title, H3 by default. The heading tag does not impact SEO ranking or change the heading size by default, though it can be used in child themes or custom styling to allow selecting special heading styles such as jumbo headings, fancy headings etc.

For best results we recommend keeping these H2 or H3 to ensure your site outline reads well for visitors on accessibility devices.

HEADING SIZE (LAYERS PRO)

You may also choose the size, line height and spacing of your heading font in pixels, along with the weight

HEADING STYLE (LAYERS PRO)

Choose italic, underline, strikethrough or uppercase, if desired

BUTTONS (LAYERS PRO)

The buttons control allows you to customize the link button style for this slide and is available with Layers Pro. You may select Default or Hover to set the options for each state.

Background

Choose from Solid, Transparent, or Gradient.

  • If Gradient is chosen, you will be prompted to choose the Gradient Starting color and Gradient End color, and the angle for the colors to fade.
  • If Solid is chosen, you will be prompted to choose a Background Color
Borders

Slide the toggle to increase or decrease the border or enter a pixel value. Set to 0 for no border.

Tip: If you want to add padding to your selected button size, you can do so with the border option and a border color that matches your button background color.

Border Color
  1. Click the icon for each side of the button you wish to add a border.
  2. Enter a pixel value for the width of the border. Example 1 = thin, 3 = standard, 5 = fat
  3. Choose a Style
  4. Enter a pixel value for the radius which controls the roundness of the corners, or leave blank for no rounding.  Example: 4 = soft corners,  20 = rounded rectangle, 100 = pill
  5. Click the Border Color toggle to choose a color
Font
  1. Choose the font color
  2. Enter a size, line height and spacing in pixels, if desired, or leave blank for defaults
  3. You may also choose the size, line height and spacing of your heading font in pixels, along with the weight
  4. Choose italic, underline, strikethrough or uppercase, if desired
Padding

The padding controls the space between the button text and the edges of the button. Enter values in pixels.

Margin

The margins control the space around the outside of the button. Typically you should only need to set the top margin.

Shadow

If you would like to add a drop-shadow to your button, select a color, then enter the offset for the shadow in the X and Y fields (you can enter negatives here to put the shadow top or left) andpixel values for how much blur and spread, if desired. For those of you familiar with CSS, this corresponds to the box-shadow property.

columns-iconColumn Width

The column width option is available in the Content widget, or custom widgets using Columns, and sets the width of this specific column to a fraction of 12. This takes a little bit of basic math:

  • The grid in Layers has 12 possible columns per row.
  • For an individual column to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
  • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
  • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
  • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other (9+3=12)

You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

Advanced

The advanced panel in the options bar allows you to add a custom class for help targeting this specific slide in any Custom CSS.

HIDE ON CERTAIN DEVICES (LAYERS PRO)

If you need to hide this widget on specific screen sizes, such as small phones, you can click to select the corresponding size here. This option is helpful if you want to design a special slider just for mobiles, or have content in your main slider that is not mobile-friendly, such as flash or background video.

Title

Sets the heading of your column content, or may be left blank.

Excerpt

This field works like the Description field and can take a small amount of text or basic HTML. This field may optionally be left blank.

  • You cannot put scripts or javascript snippets into this field!
  • You can use shortcodes
  • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

Customizing Widget Text Content

 

The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the column’s Title and Featured Image, in addition to any button element you create.

insertlink

  1. Select Custom or Existing Content from the LINK drop-down
  2. Enter the full URL (if Custom) or search for the page or post title you want to link to and select it

Buttons

To create a button, enter the link text into the TEXT field. Leave blank to just link the title and image.

Open in New Tab

To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

ENABLE ANIMATIONS (LAYERS PRO)

Toggle this option to blue if you want loading animations applied to this widget. The widget will fade in on scroll.

HIDE ON CERTAIN DEVICES (LAYERS PRO)

If you need to hide this widget on specific screen sizes, such as small phones, you can click to select the corresponding size here. This option is helpful if you want to design a special slider just for mobiles, or have content in your main slider that is not mobile-friendly, such as flash or background video.

Anchor & Widget ID

You may enter a  ID name here for use with anchor menus (single scrolling pages). IDs must be totally unique to avoid conflicts. For example, do not use “slider” or “widget” or “top”  but instead use “services”  or “testimonials”, etc describing the section of your site.

Custom Classes

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom CSS that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide’s Advanced button.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

  • To add more column blocks, simply click the +ADD NEW Column button. This will duplicate your last column block to help speed up customization.
  • To duplicate a specific column, click the duplicate icon on the column, located to the left of the pencil icon.
  • To delete a column block, click the pencil icon in the right corner of the column’s title bar to expand it, then click the red trash-can icon.pencil-trashcan

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a page revision (up to 5) you can restore if you made a mistake or want to revert to a previous version.

For more amazing ways to use the Cointent Widget, check out our Tutorials

 

Next up, the Posts Widget