Tutorials stack icon

Melodeon

Responsive, expandable, horizontal accordions for RapidWeaver – by Weavium

Table of Contents

  • How to use
  • Edit Mode
  • General
  • Section Panels
  • Colors & Fonts


Introduction

What on earth is a Melodeon?!

Great question! You know those awesome piano looking things that you squeeze back and forth to make music????

Thats it!

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

Melodeon is a super easy to get started with!

Simply add the stack to your site, and then add Melodeon Items using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.

By default all Melodeon colors are inherited by the main stack EXCEPT FOR THE BACKGROUND. If you want a particular melodeon item to override the default colors simply check one of the "Custom (Style)" toggles!

Enjoy! : )


General

Max Width

Simply sets the maximum width of the stack

Mobile Point

This determines the point at which the panels will revert to vertical mode for mobile devices.


Items

Height

Sets the height of the accordion items in desktop mode

Widths (Minimum & Hover)

Here you can set the minimum width that accordion items can shrink, as well as the width that items expand when hovered.

Item Radius

This sets the corner roundness of the accordion items.

Spacing

Simply sets the amount of space inbetween accordion items

Padding

When an accordion item is previewed or expanded the titles shift to the side and a toggle slides in. This padding will determine the distance of the title/toggle frome the edge of the accordion item.

Title Size (Initial & Expanded)

Here you can set the font size of accordion item titles in there initial state and expanded state.

BG Icon Size

Here you can set the size of the background icons that appear when an item is hovered

BG Icon Offset (Vertical & Horizontal)

Here you can offset the background icons for a nicer more stylish look.

Expand Toggle

The size of the more toggle that appears when an item is being previewed.

Toggle Radius

Sets the corner roundness of the more toggle

Content Width

Here you can set a maximum width for the content area of the accordion items

Content Padding (Vertical & Horizontal)

Here you can add padding in the content area.


Items > Mobile

Because of its' unique nature Melodeon Accordions look and works slightly differently on mobile devices. There are just a couple of unique adjustments that can be made.

Heights (Min Height & Hover)

Here you can set the initial height of accordion items on mobile, as well as the amount that they will stretch when hovered.

Expanded Height

Here you can choose the height that items will stretch when being previewed.

On Desktop devices, items simple stretch as far as they can when previewed, but for desktop, they require a specific height to be set.

Title Size (Initial & Expanded)

Here you can set custom title sizes for mobile devices.

Icon BG Size & Offset

Here you can set a custom icon bg size and offset for mobile devices


Colors & Fonts

Here you can edit the colors & fonts for the entire stack

Fonts

Here you can set the font for Title, and Content section of the accordion items.

Simply select the font that you want to use from the list, or select custom and provide the name of a Google Web font that you would like to use.

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

Titles

Sets the color of the accordion item titles

BG Icon

Sets the color of the accordion item background icons

Open Toggle (Background & Icon)

Here you can set the background color and icon color of the more toggle

Close Toggle (Background & Icon)

The more toggle changes into a close button and changes colors when item is expanded.

You can set separate colors for the toggle in this state.

Content Background

Here you can set a background color for the content sections of the accordion items.

Note if you click the (+) button you can set it to a gradient

Content Colors

Here you can set the Header, Text, and Link colors for the content sections.

Main Background

Here you can set a background for the accordion items. Note that by default, each Melodeon item is set to have its' own custom background.


Setting Custom Individual Colors

Note that all colors besides backgrounds are shared by the main stack settings by default.

If you want to set custom colors for titles, icons, help text, etc. Click on the individual melodeon item that you want to customize and check the "Custom (Style)" checkbox. Then you can set the custom color for that particular style. : )

Melodeon Changelog