Melodeon
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. : )