How to Setup Full Width Promo Cards with the Layers Content Widget

How To  Tutorials  Since: 1.2.11 Last Updated: Layers ver. 1.5 Time to Read: 3 minutes

In this tutorial, you’ll learn how to create a “promo card” layout for the Layers Content Widget, useful for showcasing short-form content such as product features or portfolio items. You’ll learn how to use the Advanced option in the design bar to adjust padding and margins, and how to add custom classes to individual columns to quickly add custom styles depending on the image alignment.

Difficulty: Moderate. This tutorial is easy to follow and duplicate on your site, but requires you have some basic understanding of CSS to adapt the custom styling to your own designs. For detailed help with using the Advanced option, How to Use the Advanced Design Bar Option for Custom Classes, Margins and Padding

For best results, you will need a featured image at least 800×800 pixels in dimension, like this one.

madewlayers

To begin, choose the page you wish to add the widget to and EDIT LAYOUT

  1. Click EDIT LAYOUT in the Customizer, then expand your page’s BODY panel.
  2. Click +ADD WIDGET and choose the Layers Content widget
  3. Remove the default widget Title and Description
  1. Expand the first column panel and click the Featured Image icon (the little camera). Set your featured image and select the Square image ratio.
  2. Click the Image Align icon and choose the Image Left layout.
  3. Click the Text icon and choose Left Align, Large Size, and set the color to white or an easy-to-read contrast to your background.
  4. Click the Columns icon and choose 12 of 12
  5. Enter your desired Title for the content section, ie “Made With Layers” in our example above.
  6. Enter your desired short text in the Excerpt field, followed by a short list of points or features. Highlight your list with the mouse, then click the List icon in the text editor toolbar to format it into a bulleted list.  In our example, we have customized the bullets in our lists using the Advanced panel in the design bar, which we will explain in the next section.
  7. Add a button by entering the Link Text and Link URL.
  8. Delete the second and third default columns by expanding them and clicking the red trash-can icon.

So far, you should have a rough version of our example. Now you must give it some style.

  1. Click LAYOUT in the widget Design Bar and choose Full Width
  2. Click List Style and choose Grid, then uncheck Gutter
  3. Skip the Text option
  4. Click Background and select a background color. If you choose to set a background image, choose a background color that closely matches the most dominant color of your image.
  5. Click Advanced to begin adding your customizations:

In our example, we wanted to customize four primary elements of the widget: the heading size, the text position, the bottom spacing, and the button color. To do this, a custom class of made-w-layers  is added to the Custom Class field in the Advanced panel. Your class name can be anything you wish, as long as it is unique (ie do not use “widget” or “content” or other generic terms).

This custom class can now be combined with the class names on the elements we want to customize.

To learn more about how to identify these class names and get started with CSS, head over to How to Customize Your Site With CSS or refer to the Layers Framework Guide

Increase Title Size

Each heading in Layers gets the heading  class, but this is often too generalized to override the widget’s font size declaration on its own, as each heading size has an additional class to define it. When working with the headings in the Content Widget, a custom class created in the Advanced panel is combined with the heading’s unique class. For example, instead of using just .made-w-layers .heading , we need to specify which heading style we are resetting. In this case we selected the Large heading in the Column’s text option, so we can select the .media.large  class and combine it with our custom class like this:

We can then use a normal font-size property with a rem value to increase the default Large heading of 2.8rem to 5rem which is equal to about 50px. Learn more about fonts in Layers here.

Center Text Vertically

A technique we also talk about in the Magazine Page tutorial, vertically centering text is an elegant way to add white space around content in a larger format layout and control its position relative to the edge of the block or featured images sharing the same column.

Using a custom class in the Advanced option of the widget, we combine it with the class name for the content area, media-body  and simply add some padding. Your numbers may be more or less depending on how much content you have and the height of images.

Remove Bottom Space

By default, the widget will add some padding to both the widget itself and the column(s) inside it. The widget padding  can be reset by adding a   to the Bottom field in the Padding or Margin options under Advanced, but you must use CSS to remove it from the column. Removing the column spacing helps create a “layered” effect on the page with multiple rows of alternating background colors. The featured image appears to peek up behind the lower edge of the row and gives the overall design more dimension.

To remove the column margin so the widget and column edges meet on the bottom, we combine a custom class entered in the Advanced option with the column  class given to the columns by Layers, then set the margin-bottom  property to  . Nice and simple!

Change Button Color

Layers and Layers Pro both allow you to customize button colors in the widget by clicking the button control on the column toolbar.

 An extended tutorial on customizing buttons is available in the Advanced option guide.

Customize List Bullets

You can add bulleted lists to any Layers Widget content area using the Rich Text Editor toolbar.

  1. Add a list of text in the content area by typing your first item, then hitting enter and so on
  2. Highlight the items and click the List icon in the editor toolbar
  3. Additional list items are created automatically when you hit enter at the end of a list item. Hit enter twice to break out of the list and start a new paragraph

By default your list will appear with standard bullets:

list-bullets

You can customize these bullets by adding a Custom Class in the Advanced option of the design bar, and setting a custom icon with the list-style-image property.

  1. Click on Advanced in your widget’s Design Bar
  2. Add a unique name to the Custom Class field. In this example, we use made-w-layers . For details on using custom classes. see the Advanced Option tutorial
  3. In the CSS field, start with your custom class, then select the list items, ie ul li . If you want to select the list items in a specific column, you must give that column a unique class name using the column’s Advanced option, then add it to the order like this: .made-w-layers .your-column-name ul li
  4. Click on the column’s Featured Image option and click Select Image to access the media library. Upload or locate your icon and copy the File Url from the right side under the image details. Cancel or X out of the media library.
  5. Return to the Advanced panel and set the URL in the list-style-image property to your image.

list-bullets-custom

Example:

For alternative ways to customize bullets without using custom icons, see list-type