Layers Post Carousel Widget

Product Guides  Since: 1.0 Last Updated: Layers ver. 1.6 Time to Read: 10 minutes

post-carousel

The Layers Post Carousel widget found in Layers Pro provides a quick and simplified way to add a post slider to your Layers pages.

  • To setup custom slides for featuring any kind of content, use the Slider Widget

post-carousel-widget

Design Bar

When you add a new  widget, or if you have created a page using one of the Preset layouts that use this widget, it will display with some default settings and content.

The design bar, located on the right side of the widget, controls the overall style and layout for the widget.

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.

Columns

Choose the number of columns for your layout, to a maximum of 6.

  • The number of columns you choose combined with the Layout will determine how large featured images in your posts need to be to fill the column space.
  • For best results, use images at least 960px wide.

Background Color

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

  • Background colors will automatically convert the post content text color. Dark background colors will have white text, and light colors will have black text.

Gutter

This option controls spacing between posts in the grid.

Uncheck the gutter option to remove the spacing.

This section controls the visibility and style of the slider elements.

Show Slider Arrows

Check this option if you want the left and right slider arrows to show when the mouse hovers over the slide. If your widget only has one slide, this option is ignored.

Arrows are best if you want your visitors to be able to click back and fourth on their own. We do not recommend enabling arrows if you have Auto-Play enabled.

Show Slider Dots

Check this option to show navigation dots at the bottom of the slider. These can be used alone or in combination with the arrows, but are best used when you have the slider set to auto-slide (when the arrows should be disabled)

Slider Controls Color

Choose a color for your arrows or dots (white by default)

Auto-play Slides

Check this option if you would like your slider to advance automatically. This option should not be used if you have Featured Video in any of your slides.

 

This section controls the visibility of all the things that your posts include by default.

Title & Excerpt Position

  • Regular places the post title and excerpt below the image
  • Overlay places the post title and excerpt on top of the image when the mouse hovers over it. This option is best used with all other meta turned off.

Show Pagination

Off by default. Check this option to display pagination below the posts.

Show Featured Images

On by default. Uncheck this option to hide the featured images or video attached to your posts. This media will still display on the post itself.

Show Post Titles

On by default. Uncheck this option to hide the post title.

Show Post Excerpts

On by default. Uncheck this option to hide the excerpt.

Excerpt Length

If Show Post Excerpts is checked, enter your desired character count here (200 by default).

Show Post Dates

On by default. Uncheck this option to hide the published date.

Show Post Author

On by default. Uncheck this option to hide the author.

Show Tags

On by default. Uncheck this option to hide the tags.

Show Categories

On by default. Uncheck this option to hide the category link(s)

Show “Read More” Buttons

On by default. Uncheck this option to hide the Read More button.

“Read More” Text

If Show “Read More” Buttons is checked, you may customize the button text here

The buttons control relates to the clickable part of each accordion.

Size

Select from Small, Medium, Large or Massive to set the overall height of each accordion toggle. You can also add padding with borders, explained in a bit.

Background Style

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

Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)

Border Width

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

If the border is enabled, choose a border color.

Rounded Corner Size

Slide the toggle to increase or decrease the rounded edges of the accordions.

  • For square corners, set it to 0.
  • For “pill” style accordions, set it to 100.

Button Shadow

Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.

Image Ratio options control how your featured images are scaled or cropped.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 960px 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 480×480 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 should be square. Portrait and Landscape originals may produce ovals.

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

Background Color

Click SELECT COLOR 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

Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

  • 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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

This option aligns your image and can help you adjust the placement of the subject of your background if needed.

Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

Parallax

Parallax 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 widget’s height to allow for scrolling.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

Title

Sets the heading on the widget, appearing above your widget content and may be left blank.

Click the text-icon button to choose your alignment, size and color:

Heading Type

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 Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

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 Color

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 SELECT COLOR  to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

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.

Content Editor Toolbar

These menus allow you to filter the posts the widget displays.

Category to Display

Choose a specific category to filter by, or select All

Number of Items to Show

Choose how many posts to pull in. For best results, choose a multiple of the number of columns you chose in the design bar. For example, if you chose 3 columns, you should set this to 3,6,9, or 12 etc.

If you have sticky posts, increase this by the number of stickies shown.

Sort By

Choose how to sort your posts, if desired. By default they are listed in chronological order with the newest post first/left to right.

Custom Order is only possible if you have installed a plugin like Admin Management Xtended which allows post ordering. See How to Manually Order Posts for details on using this option.

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 widget with this class is loaded. This is useful in cases where you want to style widgets 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 increase or decrease widget padding and margins here.

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

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.