
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.
Headliner Changelog
Version 1.0.2
- Added an option for adjusting spacing to the right of images
- Added an option for using image backgrounds with a color overlay
- Fixed height issue with content section
Version 1.0.0
- Create Headline slides with images, text, and full article sections
- Full page article view
- Headline Slider
- Shared & Individual styling
- Responsive layout option
- Simple Google Webfonts
- Stunning animations