Tutorials stack icon

View More

Unique, stylish, & expandable view-more sections - by Weavium

Table of Contents

  • How to use
  • General
  • Header
  • Content
  • Footer
  • Section Colors
  • Action Button


Introduction

Here you can learn how to use the View More 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

View More is super easy to get started with! Simply drag the stack onto a stacks page, and then edit your title, description, icons, as well as other sizing options. Lastly, all you'll have to do is add your content to the view more section!

In the settings panel, you will notice that there are multiple sizing options for both the initial state and the expanded state of the stack.

The quickest way to get started is to grab one of the examples we've included, and simply change up the colors to your liking! : )


General

This is where you can find the general options for your view more section! The main things that can be edited here are the max width and the outer corner radius.

Max width

The maximum width that the container can extend.

Radius

The roundness of the outer corners of the stack.


Header

The header section is where you will find most of the sizing options for the stack. The header specifically refers to the are with the icon, title, and description.

Padding

This controls the outer padding around the icon, title, and description.

Padding Expanded

This controls the outer padding aroudn the icon, title, and description after the view more button has been clicked and the section expands.

Title Size (Initial & Expanded)

These two inputs control the font size of the title. You will find one input for the initial size, and another for the size of the title after the section has been expanded.

Title Spacing (Initial & Expanded)

These two inputs control the space below the title. You will find one input for the initial spacing, and another for the spacing below the title after the section has been expanded.

Title Width

This controls the maximum width for the title. It is useful for long titles that you may want to wrap at a certain point.

Title Weight

Here you can specify whether or not the title should be bold or normal weight.

Title Font

Here you can select a font for the title. You will find a dropdown with preset fonts, or the option to apply your own Google Web Font.

Setting a Google Web Font is super easy. Just type in the name of the font that you want to use after selecting the 'Custom Google Font' option from the dropdown list!

Description Size (Initial & Expanded)

These two inputs control the font size of the description. You will find one input for the initial size, and another for the size of the description after the section has been expanded.

Description Width

This controls the maximum width for the description. It is useful for long descriptions that you may want to wrap at a certain point.

Description Font

Here you can select a font for the description. You will find a dropdown with preset fonts, or the option to apply your own Google Web Font.

Icon Font

Here you can chooes a font and a code for the icon.

Icon BG Size (Initial & Expanded)

This refers to the size of the outer background of the icon. You can set two different sizes, one for the initial state and one for the expanded state.

Icon Size (Initial & Expanded)

This refers to the size of the actual icon inside of the icon background.

Icon Radius (Initial & Expanded)

This controls the corner radius of the icon background.

Icon Spacing

This controls the amount of space below the icon.


Content

Here you can find the options for editing the content section.

Padding (Vertical Horizontal)

This simply controls the padding of the content area.

Max Width

This allows you to set a max width for the content section. Useful if you want content to be center in big sections.

Content Font

Here you can choose a font for the content section.


Footer

This is where you will find options for editing the view more and close buttons in the stack.

Padding

Controls the padding around the view more and close button area.

Btn Text

This controls the font size of the buttons

Btn Padding

Here you can set the padding on the inside of the buttons.

Btn Radius

Here you can control the corner roundness of the buttons.

Btn Spacing

This controls the amount of spacing between buttons when both buttons are visible.

More Btn Text

Here you can control the text content for the view more button.

The view more button has 2 states: Open & Close

Initially it reads "View More" and then after the section is expanded, it reads "Close"

Action Btn Text

An action button appears after the stack has been expanded. Here you can control the text content inside of the action button.


Section Colors

Here you will find all of the options for changing the colors of the View More Stack.

Title Color

Controls the text color of the title

Description Color

Controls the text color of the description

Icon Color

Controls the color of the icon

Icon BG Color

Controls the background color of the outer part of the icon

Open Header BG

Once the section has been expanded, the header has an overlay background. You can set the color of this background here. If you don't want to have a header background show up, then simply set this opacity to 0.

Content Headers

This controls the color of h1 - h6 tags that appear in the content area.

Content Text

This controls the text color of all general text in the content section.

Content Links

This controls the color of all links in the content section.

More Btn Text

This controls the text color of the View More & Action Buttons.

More Btn Background

This controls the background of the View More & Action Buttons

Close Btn Text

This controls the text color of the Close button

Close Btn Background

This controls the background of Close button.

Main Background

This controls the main background color of the stack.


Action Button

No Action Button (Checkbox)

If you do not want to have an action button, you can turn it off by checking this option. When checked, only a close button will appear when the section is expanded.

Action Type

You can choose to have the action be a link, or a custom javascription funciton.

View More Changelog