Headliner

Table of Contents

• How to use
• Edit Mode
• General
• Headlines
• Headlines > Full Page View
• Colors & Fonts

---

---

Introduction

Here you can learn how to use the Headliner stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. ^_-

---

How to Use

Headliner is a very simple stack to use with a lot of power!

Simply add the stack to your site, and then add headlines (pages) using the (+) button. You can edit the information such as Headline text, image placement, padding, and sizes, by clicking on the main Headliner stack, and then going to the stacks settings panel in RapidWeaver.

For adding individual images, you can click on an individual item and look in the settings panel. Also, you can set custom individual colors for any item, by checking any of the custom colors that you want to apply, and then adjusting them in the settings panel.

Enjoy : )

---

Edit Mode Goodies

Hide Contents in Edit Mode

Article contents can get quite long, which is why we have provided a feature for hiding the contents in edit mode. : )

General

Rotate Automatically

If this option is checked, the headlines will automatically be looped through. When hovered the slide functionality will pause.

When this option is checked you will also see an input appear for setting the loop speed.

Rotate Direction

Headlines can be set to rotate vertically or horizontally. Note that in full page mode, articles will aways slide horizontally.

Z-Index

This is for the full page view. If you find that Headliner is behind hidden by other floating stacks, increase this option.

Max Width

This simply sets the maximum with of the headlines.

Slider Mobile

At a specified point, the headlines in slider mode will wrap and become responsive. Set this breakpoint here.

Article Mobile

Full page articles will also wrap at a specified point for mobile devices, set this breakpoint here.

---

Headlines

Here you will find the options for editing the headlines such as sizes, padding, and layout

Padding (Vertical & Horizontal)

Here you can set the padding on the outer edges of the headlines

Radius

Sets the corner roundness of the headline items

Padding (Vertical & Horizontal)

Sets the inner padding of the headline items

Headline Shadow (Properties & Color)

Here you can set a box-shadow for the headline items

Title Text

This refers to the text content of the title on each headline item. The "title" refers to the part of the headline items that reads "NEWS" or whatever you would like it to be. This title shows up on all headlines.

Title Size

Simply sets the font size of the headline titles

Toggle Text

Each headline item has a toggle which the user can click to view the full article of the headline item. You can set the text content of this button here.

Toggle Size

This sets the font size of the text within the more button.

Toggle Radius

Here you can set the corner roundness of the more button.

Toggle Padding

This sets the inner padding of the more button.

Image Size (Desktop & Mobile)

Here you can specify the dimensions of the headline images in there slide state. Note that all images are square. You can set the image size for both Desktop and Mobile sizes.

Image Radius

Here you can set the corner roundness of the headline images.

Image offset

By default headline images are slightly offset to provide a neat looking affect. You can set this to 0 for no offset, or increase/decrease the value to a position that you prefer.

Image Shadow (Properties & Color)

Here you can set a box-shadow for the headline images.