Tutorials stack icon

Hop

Beautiful animated pages with unlimited nesting by Weavium

Table of Contents

  • How to use (Start Here)
  • Setup
    • Content Types
    • Hop Starter Content Stack
  • General
  • Content
  • Colors & Fonts
  • HOP Starter (Content Stack)


How to use

Get up in running with Hop in seconds!

Firstly, add the stack to your page. You'll then see that there are two sections in the stack – Initial Content & Additional Content

Content Types

  1. The initial content section is the content that will be displayed when the page first loads.

  2. The additional content is the content that will be displayed when the HOP stack is clicked on, and expanded.

You can choose to keep the initial content after expand, or you can choose to hide it. This allows for a wide range of possibilities, as you will see in the included example page.

There is no limit to the number of HOP pages that can be nested. You can nest page after page, and as the user clicks back/close they will go through each page.

HOP Starter Content Stack

Although the content sections are open for you to add anything you would like, we have included a handy little Starter content stack. Simply search for HOP in the RapidWeaver stack library and you will find it next to the main HOP stack.

The HOP Starter Content Stack comes with some basic content fillers for the Initial content section such as an Icon, Title, Description, etc. All of these are toggle-able and can be mixed-&-match, ordered, and arranged as you like.



HOP – General Settings

Name

This is the name/title of your page. It will appear at the top of the page when the content section is expanded.

Leave blank if you do not wish to have a title.

This section does NOT need to be unique, so no worries about naming conflicts.

Radius

This sets the corner roundness of the outer stack container.

Max Width

This sets the maximum width of the stack. (NOTE: All pages expand to full-width when opened.)

Min Height

Here you can set a minimum height for the stack. This is useful for making even cards and larger sections.

Animation

This is an option you will want to focus on. It controls how the page will transition to its expanded state when clicked on. You can choose between:

  • Even Spread
  • Width to Height
  • Height to Width
  • Slide
    • From Top
    • From Bottom
    • From Left
    • From Right
  • Box Layer
    • Horizontal – From Left
    • Horizontal – From Right
    • Vertical – From Top
    • Vertical – From Bottom
  • Border Expand


HOP – Content

Max Width

This sets the maximum width of the inner content. You can set a separate maximum width for the initial content, and for the content in the expanded page states.

Padding (Top, Bottom, Left, Right)

Here you can set the padding surrounding the inner content. We've provided separate options for creating uniquely arranged content cards.

Titlebar Text

When a page is expanded, a title bar appears at the top containing the page name/title and the close/back button. This option sets the font-size of the title text.

Titlebar Control

This sets the size of the close/back icon in the titlebar after a page is opened. The defaults should be perfect, but we've included an option for you just in case.

Content Text

This sets the general font size for the content of the stack.

Box Shadow

Here you can add a box shadow to your hop page. This shadow will display around the initial section, and of course, will hide when expanded.

(We will be adding hover styles in the future, so look forward to this!)

Close Button

Here you can choose what type of close button your page will have. You can choose between:

  • Back Arrow (Positioned to the left)
  • Close X Icon (Positioned to the right)

The positioning of these icons is based on common UI.



HOP – Colors & Fonts

Here you can edit the colors & fonts for the HOP Stack.

Fonts

Here you can set the font for the HOP Page.

There are 3 options for selecting fonts:

  • Preset (choose from a list)
  • Custom Google Font (Quick Google Font by name)
  • Custom Font (Your own custom font name)

If you choose Custom Google Font all you need to do is type in the name of the google font that you want to add, it will work like magic!

You can find Google Web fonts here: www.fonts.google.com

If you select "custom" you will need set a custom font name of your own. Note, that you must provide your own font library somehow.

Initial Colors

These are the main colors of the stack. By default, HOP pages don't change colors on expand. If you want to have custom expanded colors, or custom content colors, you can check the options found below, and set your colors there.

Initial Text (Headers, Links, Text)

Here you can set the color of text within the stack. We've kept it simple to allow for maximum creativity.

Initial Background

For the header background, you can choose between 5 different options:

  • Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image with a single color overlay
  • Image with a gradient overlay

Expanded Colors

If you want your HOP page to change background & text color after being opened, you can check the Change colors on expand option, and then edit the colors below.

Expanded Text (Headers, Links, Text)

Here you can set the new text colors of the page after being opened.

Expanded Background

Here you can set the new background for the page after being opened.

For the header background, you can choose between 5 different options:

  • Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image with a single color overlay
  • Image with a gradient overlay

Separate Content Colors

A common UI pattern is where a page expands into a header, with a separate content section. If you would like your content section to have a separate background & text colors, check this option.

This is useful for creating pages like this:

EXAMPLE HERE

HOP STARTER STACK

The HOP Starter stack is a special convenience that we have added for creating quick sections. It comes with easily configurable content for your HOPs initial card content such as:

  • Icon/Image
  • Title
  • Description

It also includes multiple color options for initial & expanded pages states.

NOTE: Expanded colors will only appear if you have checked the "Change colors on expand" option

The options for the starter stack are very straightforward and easy to follow.

THAT'S IT!

HOP is one of those stacks that is valuable and powerful because of it's simplicity. We really wanted to make a stack that allows for the creativity of page-builders and doesn't force you to stick to our way of doing things. We hope you like it! : D

Hop Changelog

Version 1.0.1

  • Added a z-index option

Version 1.0.0

  • Initial Release