Assemble

Setup

settings

  1. Add the stack to your project.
  2. Drag and drop the element or stack that you want animated into the “Drop stacks here” section.
  3. In the settings panel select an animation type.

The remaining settings are optional for customization. Refer to the Settings Panel section below for a break down of what each one does.

Settings Panel

Type: Choose between 17 different animations.

Speed: Adjust the animation speed in milliseconds.

Stagger: Adjust the total possible time between the first segment animation till the last. 1000ms would mean each segment will animate randomly in between 0 and 1000 milliseconds. Decrease this value to have the segments animate closer together. Note: If the “Target Mode” is set to “Automatic – Whole” this setting controls the delay before the animation instead.

Offset: Adjust the distance from the top of the browser window the animation initializes. 100% will cause the animation to start as soon as it is inside the browser window. 30% will cause the animation to start only when the element is in the top half of the window.

Target Mode:

  • Automatic – Segmented: The stack will automatically determine which elements should be segments.
  • Automatic – Whole: Removes the segments and animates the element has a whole like a more traditional in view animation.
  • Manual – Segmented: The stack will not automatically determine which elements should be segments. You can instead manually choose elements and/or list classes to let the stack know which should be segments.
    Custom Elements example: table, hr, span
    Classes example: .myClass, .another-class, .third-class
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Filter Grid

Grid

Hide Grid Tags

Check to not show color tags at the bottom of grid items

Max Width

The maximum width of the grid

Columns

Sets the number of columns per row. Set custom values for Desktop, Tablet, and Mobile.

Col Min Height

Optionally set a minimum height for columns. Set a custom value for Desktop, Tablet, and Mobile.

Gutter

The amount of space inbetween grid items

Tag Block

Sets the size of tag blocks that appear at the bottom of each grid item.

Tooltip Text

The text size of the tag tooltip that appears when a tag block is hovered.

Tooltip Radius

The corner roundness of the tag block tooltps.

Tooltip Padding

The amount of padding around the tooltip text.


Select Text (Select All/ Deselect All)

Set custom text values for the “select all”/”deselect all” button at the top of the dropdown menu.

Width

Sets the width of the dropdown toggle

Text

Sets the font size of the dropdown toggle main title text

Icon

Sets the font size of the filter and close icon in the dropdown toggle

Radius

Sets the corner roundness of the dropdown toggle.

Padding

Sets the inner padding of the dropdown toggle.


Max Width

Sets the maximum width of the dropdown list

Radius

Sets the corner roundness of the dropdown list

Text

Sets the font size of the dropdown list items

Radio

Sets the size of the dropdown list item radio buttons

Color Blocks

Sets the size of the dropdown list item color blocks

Color Radius

Sets the corner roundness of the color blocks

Padding

Sets the inner padding of the dropdown menu list items


Colors & Fonts

List Item Font

Sets the font of the dropdown toggle and dropdown menu list items

Toggle (Text & Background)

Set the text color and background color of the filter dropdown toggle

Item Text (Initial & Hover)

Set the color of the dropdown list item text

Item Background (Initial & Hover)

Set the background color of the dropdown list item text

Item Radio (Initial & Hover)

Set the color of the radio buttons that appear in the dropdown menu

Tool Tip (Text & Background)

Set the text and background color of the grid item tag tooltips

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Swoop

General

Max Width

Sets the maximum width of the slider

Min Height

Sets the minimum height of the slider

Radius

Sets the corner roundess of the slider

Responsive Point

The responsive pixel breakpoint


Nav

Max Width

Sets the maximum width of the nav section on the left

Padding

Sets the inner padding of hte navigation section

Item Size

Sets the font size of the nav item text

Item Font

Sets the font family for the nav item text

Item Padding

Sets the inner padding of the nav items (space around them)

Item Blur

Controls the amount of blur for the items that are not active

Arrow

Sets the size of the navigation arrow button

Arrow Icons

Sets the size of the navigation arrow icons

Arrow Radius

Sets the corner roundness of the navigation arrow buttons


Content

Padding

Sets the inner padding of the content sections

Header Font

Sets the font family for all header tags in the content section

Text Font

Sets the font family for all text in the content section


Stack Colors

Nav Item

Sets the text color of the nav items

Arrow BG

Sets the background color of the navigation arrow buttons. It can be set for the initial state and the hover stacte.

Arrow Icons

Sets the color of the arrow icons. It can be set for the initial state and the hover stacte.

Nav Background

Here you can set the background for navigation section to the left. It can be set to:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image

Content Background

Here you can set the background for ontent section to the left. It can be set to:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image

Custom Styles

Items can have their own custom styles, such as a custom nav item text color, custom background color, and custom content text color. Click on an individual item to set custom colors~

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Split

General

Radius

The corner roundness of the entire stack

Max Width

The maximum width of the entire stack

Mobile Points

The points at which the tablet, and mobile settings are applied

Responsive Point

The point at which the split panels become vertical for mobile devices

Split Items

Auto Shrink Width (Checkbox)

It is possible to set custom shrink widths for the non-active split item, although, if you want the width to be calculated automatically, check this option.

Shrink Widths (Desktop, Tablet, Mobile)

If Auto Shrink Width is off you will be able to set the width of the nonactive split panel when it is shrunk.

Min Height (Desktop, Tablet, Mobile)

Here you can set a minimum height for the split panels on Desktop, Tablet, and Mobile

Padding

The inner padding of the split item panels

Content Width

The maximum width of the inner content container

Titles (Desktop, Tablet, Mobile)

Here you can set the font size of the split item titles

Title Spacing

The amount of space below the titles

Title Font

Select a font for the titles

Descriptions (Desktop, Tablet, Mobile)

Here you can set the font size of the split item descriptions

Description Spacing

The amount of space below the Descriptions

Description Font

Select a font for the descriptions

Icons (Desktop, Tablet, Mobile)

Here you can set the size of the icons

Icon BGs (Desktop, Tablet, Mobile)

The size of the background surrounding the icons

Icon Radius (Desktop, Tablet, Mobile)

The corner roundness of the icon backgrounds

Icon Spacing

The amount of space below the icon backgrounds

Button Text

The font size of the button text

Button Radius

The corner roundness of the split item buttons

Button Padding

The inner padding of the split item buttons

Button Font

Select a font for the split item buttons

Advanced

Disclude Google Fonts

If you do not want to include external google fonts on your web pages, feel free to check this option. Be aware that you will not be able to use any of the fonts provided in the font list or material icons, you will have to use your own.

Individual Item Options

Here you can find all of the settings for each split section such as the icons and text, along with the link for the split item button

Text Align

The text alignment of the particular split item

Vertical Align

The vertical alignment of the content inside of the split item

Horizontal Align

The horizontal alignment of the content inside of the split item

Colors

This is where you will find all of the color options, including the background settings for the split item. The colors are very straight-forward and easy to setup.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Fix

General

Z-index

Controls the z-index axis of the stack. Adjust this if you find the Fix stack being hidden by or cover other stacks.

Radius

Controls the corner roundness of the stack

Max Width

Sets the maximum width that the stack can expand

Breakpoint

Determines the pixel widths at whic Tablet and Mobile styles will apply

Columns

Determines the number of columns to display on Tablet and Mobile

Gutters

Determmines the amount of space inbetween items

Fix Items

Radius

Sets the corner roundness of the fix items

Padding

Sets the inner padding of the fix items

Text Size (Desktop, Tablet, Mobile)

Sets the text font size for all device sizes

Icon Size (Desktop, Tablet, Mobile)

Sets the fix item icon size for all device sizes

Icon Spacing

Adjusts the amount of spacing between fix items

Mobile Header

On Mobile devices, the fix menu turns into a toggle which can then be expanded. You can change this mobile toggle here.

Text Size

The font size of the Menu Title

Icon Size

The font size of the toggle icon

Padding

The inner padding of the menu toggle

Stack Colors

Here you can edit all of the colors of the stack. Note that if you want to have custom colors for an item, click on the item itself and click ‘custom colors’

Background (Main Background)

Here you can set the main background of the fix menu

Items Background (Initial & Hover)

Sets the background color of fix items on initial and hover

Item Icons (Initial & Hover)

Sets the item icon colors for initial and hover states

Item Text (Initial & Hover)

Sets the item text colors on initial and hover states

Mobile Header

Sets the background and text color of the mobile header toggle

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Rotate

General

Autoplay (Checkbox)

Here you can select whether or not the stack should rotate through text sections automatically

If you check this option, you will also see an input for setting the speed at which the items should rotate. 1000ms = 1 second;

Alignment (Horizontal)

Here you can determine the general alignment of text and content within the items. You can choose between Left, Right, or Center

Max Width

Here you can set a maximum width for the entire stack.

Content Width

Here you can set a maximum width for the content within the stack. This is useful when you want a full screen rotater without having your content stretch to fill the entire page.

Min Height

Here you can set a minimum height for the rotater.

Radius

Here you can set the corner roundness of the entire rotater.

Padding

This determines the amount of padding around the edges of the stack.

Rotate Items

Padding (Vertical & Horizontal)

Here you can set padding on the inside of the rotate items.

Icon Size

This sets the size of the item icons

Icon Spacing

This adjusts the amount of space below the item icons

Text Size

This sets the size of the item text

Text Spacing

This adjusts the amount of space below the item text

Text Font

Here you can set a font for the item text. You can choose from a font within the dropdown list, or you can select custom to provide your own URL and font name.

Btn Radius

Each item has it’s own action button that you can link to a page. You can adjust the corner roundness of this button here.

Btn Text Size

Here you can adjust the font-size of the text within the action button.

Btn Padding (Vertical & Horizontal)

Here you can adjust the vertical and horizontal padding on the inside of the action button.

Btn Font

Here you can set a font for the action buttons. You can choose from a font within the dropdown list, or you can select custom to provide your own URL and font name.

Colors

Here you can specificy all of the colors for the stack. Styling is very simple. : )

Here you can adjust the color of the arrow icons within the navivgation buttons that appear on hover.

a
Here you can adjust the background color of the navigation buttons tha appear on hover.

Main Icon

Here you can set the color of the Item Icons.

Main Text

Here you can set the color of the Item Text.

Action Btn Text (Initial & Hover)

Here you can set the text color of the action buttons.

Action Btn Background (Initial & Hover)

Here you can set the background color of the action buttons on initial and hover states.

Background

Here you can set a background for the entire stack. Turn it off if you would like to place the rotater within your own custom section.

Enjoy!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Assist

Toggle

Hide Text & Icon

If you check these toggles you can hide either the toggle text or icons

Alignment

This option determines the horizontal alignment of the toggle, as well as the alignment of the list menu as it drops down underneath the toggle.

Icon Font

Here you can select an icon font, as well as the corresponding icon code for the icon that you want to use.

Padding (Vertical & Horizontal)

Radius

Controls the corner roundness of the toggle

Icon Size

Controls the font size of the icon

Icon Spacing

Controls the amount of space between the toggle icon and the toggle text

Text Size

Controls the font size of the toggle text

Toggle Text & Toggle BG

Here you can change the text and background color of the toggle on both initial and hover states.


List

Orientation

Here you can determine whether or not the menu will appear above the toggle icon or below it. Depending on where you place your assist menu, you may want to change this.

Max Width

This determines the maximum width of the list when it is first open. Note that you can set custom widths and heights for a specific details section when opened. This value simply determines the initial width of the menu.

Radius

This option simply controls the corner roundness of the menu.

Background

Here you can set a background for the menu. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient

List Items

Here you will find all of the options for editing individual list items and details sections.

Padding (Vertical & Horizontal)

This determines the amount of vertical/horizontal padding around all list items, and list titles.

Icon Size & Spacing

Here you can set the size of list item icons as well as the amount of space between the icons and list item text.

Text Size

This determines the font size of list item text.

Detail Text

Here you can set the default font-size of text in the details section.

Detail Padding

Here you can set the amount of padding around the content of the details section.

Close Icon

Here you can set the font-size of the close icon

Icon Type

Here you can select the type of icon you would like for the “close/back icon”.

You can choose between:

  • Close (X)
  • Chevron (<)
  • Arrow (?)

Item Titles (Color)

Here you can set the text and background color of list titles

Item Text (Initial & Hover)

These options control the list item text on both initial state and hover

Item Background (Initial & Hover)

These options control the list item text on both initial state and hover

Detail Colors

Here you can set the text color for Headers, Text, and Links in the details section.

Back Icon Colors

Here you can set the color of the back icon on both initial and hover state.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Fifty Fifty Slider

General

Max Width

This option sets the maximum width of the slider

Min Height

This option sets the minimum height for the slider. Note that all slides will automatically readjust of they are taller than the min height, though setting a min height helps to make all slides look equal.

Mobile Point

The point at which the slider becomes responsive

Radius

The corner roundness of the slider

Content Align

The vertical alignment of the slider content


Slides

Hide Titles, Text, Buttons

If you would like to hide any portion of the slide content such as the titles, text, or buttons, you can do so by checking any of these options.

Title, Text Font

Here you can select a font for the slide titles and text from a list. You also have the option to choose a custom font, just provide the URL nd the name of the font.

Padding (Vertical & Horizontal)

Sets the inner padding of the slide content section.

Title Size

The font size of the slide titles

Title Spacing

The amount of space below the slide titles

Text Size

The font size of the slide text

Text Spacing

The amount of space below the slide text

Button Text

The actual text content of the slide buttons

Button Size

The font size of the button text

Button Radius

The corner roundness of the slide buttons

Button Border

The thickness of the border around the slide buttons

Button Padding (Vertical & Horizontal)

The inner padding of the slide buttons

Image Mobile Height

On mobile devices, images move on top of the slide content, and the require a minimum height to be set. The default is 300px. You can make the images larger or smaller on mobile by adjusting this option.


Slide Navigation

The Slide navigation revers to the arrows and slide count that appear at the bottom of each slide.

Padding (Vertical & Horizontal)

The amount of padding around the navigation arrows and slide count

Count Size

The font size of the slide count displayed at the bottom of each slide

Icon Size

The font size of the navigation arrows

Button Size

The width/height of the navigation arrow buttons

Button Radius

The corner roundness of the navigation buttons

Button Border

The border thickness of the navigation buttons

Button Spacing

The amount of space between the navigation buttons


Slide Colors

Title

The color of the slide titles

Text

The color of the slide text

Button Text (Initial & Hover)

The color of the action button text within each slide

Button Border (Initial & Hover)

The border color of the action button within each slide

Button Background (Initial & Hover)

The background color of the action button within each slide

The text color of the nav count

The color of the nav arrow icons and nav arrow button border

Background

The general background color of all slide

Setting Custom individual slide colors

By default all slides share the same colors, but you can set custom individual colors an a specific slide if desired.
Simply select the slide that you want to set custom colors for, and you will see a list of check boxes for toggling custom colors for different elements of the slide.
Check the options that you would like to customize, and then use the color inputs to set the desired color.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Step

General

Maximum Width

This option sets the maximum width of the entire stack. Note that it will automatically be centered if the browser is greater than this width.

Minimum Height

For an elegant look, you can set a minimum height for the stack here.

Radius

Sets the corner radius of the edges of the stack.

Mobile Point

This point determines the pixel width at which the Step stack will become responsive. Note, here the sidebar will hide, and can be toggle by clicking on the clipboard icon.

Sidebar Width

Here you can set the sidebar width for desktop devices

Text Size

Here you can set the font-size for the list item text within the sidebar

Text Padding

Here you can set the amount of padding around the list item text within in the sidebar.

Sidebar Font

Here you can select a font family for the sidebar

Text Color (Initial & Active)

Here you can set the color of the list item text within the sidebar. You can set it for the normal list items, and for the active list item. Note the the back arrow on mobile devices will inherit the color of the active list item.

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the side bar. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)

Steps

Padding

Here you can set the amount of padding around the inner step content. Note that this doesn’t include the step count or the navigation. Simple the inner content that you place within the “Drop Stacks Here” section.

Step Count (Text & Number)

In the right corner of each step you will see the text “STEP” followed by the current step number.

These inputs allow you to set the size of both the text and the number.

Count Text

Here you can edit the actual text content of the “STEP” text before each step number.

Title Size

Each step has a main title. You can edit the size of this title here.

Text Size

Here you can set the default font-size for any text placed within the “Drop stacks here” section. Note that any custom stacks you place here may behave differently.

Here you can set the padding of the “BACK” & “NEXT” buttons that navigate through each step.

Here you can set the corner radius of the navigation buttons.

Here you can set the font-size of the text in the navigation buttons.

Here you can set the actual text content of the navigation buttons, both “BACK” and “NEXT”

Once the slider reaches the last slide, the “NEXT” button text will change to read “COMPLETE”, which will then lead the user to the completed step page.

You can edit this “Complete” text here.

Title, Text, Count FONTS

Here you can select a font for the main title, text, and count fonts.

Note that any header tags placed within the content area of a step will inherit the main title font.

Count Colors (Text & Number)

Here you can change the color of the count text and numbers

Toggle Colors (Initial & Active)

Here you can change the color of the sidebar toggle icon in the left corner of each step.

You can change the initial icon color, as well as the active color (when the sidebar is displayed)

Main Title

Here you can change the color of the main title for each step.

Here you can change specific text colors for the content area including header tags, general text, and links.

Here you can change the text color and background color of the navigation buttons.

Here you can set a basic color background for the navigation area.

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the steps. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)

Completed Step

Once all of the steps are completed, a final completed page will display, allowing the user to move on, or to restart the guide if desired. Here you can edit specific styles for this completed page.

Completed Icon

The completed page has a large checkmark icon that displays to the user. You can edit the size of this icon here.

Complete Title

There is also a title that is displayed on the completed page. You can edit the font-size of this title here.

Complete Description

There is also a short description that is displayed on the completed page. You can edit the font-size of this description here.

Restart Icon & Button Sizes

There is a restart button displayed on the completed page. You can edit the icon size, and the width and height of this button here.

Icon Color

Changes the color of the checkmark icon.

Title & Description Colors

Changes the text color of the title and description.

Restart Button (Icon & Background)

Here you can edit the color of the restart button icon and background

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the completed page. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Feature Slider

General

Autoplay

Checking this option will make the slider rotate automatically through each slide. If checked you can also set a duration for how often the slides should transition.

Active Slide

This tells the stack at which slide should first be shown on page load.

Max Width

This specifies the maximum width of the slider

Min Height

This specifies a minimum height for all slides. Note that the slider will automatically adjust to slides of different heights, but for a better looker slider, we recommend setting a min-height that makes all of your slides equal.

Radius

This sets the corner radius of all slides in the Feature slider.

Slides

Hide (Titles, Descriptions, Icons, Buttons)

The hide toggles can be used to hide different parts of each slide. For example if you do not want to have any descriptions in your slides, simply check the “Hide Descriptions” option. This can be used to hide any of the following parts of a slide:

  • Titles
  • Descriptions
  • Icons
  • Action Buttons

Fonts (Title, Description, Button)

You will find 3 dropdown menus for setting the fonts of the Titles, Descriptions, and Action Buttons.

Select a font from the dropdown list, or select “custom” to include a font of your own. In order for a custom font to work you must include a URL for the font and a NAME for the font.

Example URL: https://fonts.googleapis.com/css?family=Open+Sans:300,400,700

Example Name: Open Sans


Title Size

This sets the font size for all slide titles

Title Max Width

This option is mostly useful for full page sliders. It specifies a maximum width for slide titles so that the text can wrap at a point of your choice, rather than stretching the full width of the screen.

Title Padding (Vertical & Horizontal)

Here you can set the vertical and horizontal padding around the slide titles


Description Size

This sets the font size for all slide descriptions

Description Max Width

This option is mostly useful for full page sliders. It specifies a maximum width for slide descriptions so that the text can wrap at a point of your choice, rather than stretching the full width of the screen.

Description Padding (Vertical & Horizontal)

Here you can set the vertical and horizontal padding around the slide descriptions


Icon Size

This sets the size for all slide icons

Icon Outer

This sets the size of the outer circle/square area of all slide icons

Icon Radius

This sets the corner radius of the outer icon area

Icon Padding (Vertical & Horizontal)

Here you can set the vertical and horizontal padding around the slide icons


Btn Text

This sets the font size of all action buttons

Btn Radius

This set the corner roundness of all action buttons

Btn Padding (Vetical & Horizotnal)

This sets the inner padding of the action buttons

Btn Content

This sets the text content of all action buttons. Note if you would like to have individual text for a particular slide, simply click on the individual slide and check the “Custom btn content” option.


Slide Colors

Title Color

Simply sets the text color of all titles

Description Color

Simply sets the text color of all descriptions

Icon Colors (Icon & Background)

Here you can set the background color and icon color of all slide icons

Btn Colors (text & Background)

Here you can set the text and background color of all action buttons.

Background

Here you can set the background for all slides. You can choose between:

  • Color
  • 2 Color Gradient
  • 3 Color Gradient

Note: if you would like to use an image background, click on the specific slide that you want, check the “Custom background” option, and then you can select a background image for that particular slide.

Setting individual Slide Colors

By default all slide colors are shared. If you want a particular slide to have custom colors, such as a custom background, icon ,title, button, etc. Click on the particular slide that you want and look under the “Custom Colors” section. Here you will find a list of check boxes like so:

  • Custom Background
  • Custom Title
  • Custom Description
  • Custom Icon
  • Custom Button
  • Custom Nav

Checking any one of these options will make a color input appear for setting a unique color for that particular slide.

Arrow Size

Simply sets the font size of slide arrows

Padding (Vertical & Horizontal)

This controls the padding around the nav arrows and action buttons

Arrow Colors (Initial & Hover)

Allows you to set the color of the navigation arrows on initial state and hover

Overlay BG

Here you can set the background color of the navigation for each slide.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Circle Menu

General

Open on start

If this option is checked the menu will be opened when the page loads

Offset Items

By default items are on the inside of the menu with padding, if this option is checked the items will hang off the edge of the menu

Number of Items

You can choose to have a menu with up to 4 items, or 8 Items. Here you can choose the number of items for your menu.

You can choose to have a Circular menu or a Square Menu Here

Font Family

Choose the general font family for the menu here

Inherit Radius

Inherit Radius

If you want the toggle to inherit the radius of the menu, check this option.

Size

Sets the size of the toggle button

Icon size

Sets the size of the icon inside of the toggle button

Radius

If the “Inherit Radius” option is not checked, you can set a custom radius for the menu toggle here

Shadow

Allows you to set the shadow properties for the toggle button

Open Border

When the menu is opened, the toggle gets an overlay border around it, you can set the thickness and color of this border Here

Icon Color

Sets the color of the icon inside of the menu toggle on initial and hover states

Background

Allows you to set a background for the menu toggle, it can be a color or a gradient

Hover Background

Allows you to set a background for the menu toggle when hovered, it can be a color or a gradient

Allows you to set the size for the menu, it is recommend to be somewhere between 200~320px

Padding

Controls the inner padding of the menu

Outer Margin (Vertical & Horizontal)

Sets the spacing around the outside of the menu

Background

Allows you to set a background for the menu, it can be a color, gradient, or image

Round Icons

If this option is unchecked, you can set a custom radius for the menu icons, otherwise they will be circular by default

Button Size

Sets button the size of the menu items

Icon Size

Sets the size of the icons inside of the menu item buttons

Label Size

When an item is hovered a label will show up in the center of the menu, you can set the font-size for these labels here

Hover Border

When hovered, items have a transparent border that displays, set the size of this border here

Icon & Label Color

These color options simply control the color of the icons and the labels in the menu

Hover Border

The color of the borer that displays around menu items on hover

Background

Sets the background color of the menu items, it can be a color or gradient

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Article

General

Collapse in edit mode

If this option is checked all content sections will be hidden in edit mode. Useful for compressing content!

Truncate description text

If this option is text, then description text will be cut off at one line with an eillipses (. . .) at the end.

Max width

Determines the maximum width that the stack can stretch

Mobile Point

This determines the point at which the stack will adapt for mobile. basically it is the point at which the article thumbnails will wrap for mobile devices.

List Padding

This refers to the outer padding of the list. There are options for both Vertical and Horizontal padding.

List Radius

Controls the corner radius of the entire list.

Articles

Here you will find the styles for editing articles in their normal list state.

Padding (Vertical & Horizontal)

This controls the padding around the content of each individual list item.

Title Size

Controls the font size of the titles in their list state.

Title Weight

Controls whether or not the title will be bold or normal.

Title Font

Here you can set the font family for the article titles. You can choose between a list of fonts or you can select a custom font by providing a url for the font and a name.

Description Size

Controls the font size of the descriptions in their list state.

Description Font

Here you can set the font family for the article descriptions. You can choose between a list of fonts or you can select a custom font by providing a url for the font and a name.

Image Size

Here you can set the size of the images in the article list state.

Image Radius

This allows you to control the corner roundness of the images.

Image Spacing

Here you can set the amount of space next to the images in the article list state.

Hide Info 1 & 2

There are two information sections in each article. By default one reads “By author name”, and the other reads “posted January 28th, 2018”

You can edit the text for both of these information sections to be anything that you would like. You can also toggle them on or off by clicking on the “Hide Info #” check box.

Info Prefix 1 & 2

Here is where you can edit the actual text that shows up before the info sections

Info Size

Here you can edit the font-size of the info text.

Articles > Expanded

Max width

When expanded the article background covers the whole page, but the content can be contained in a max-width. You can set that here.

Padding (Vertical & Horizontal)

This is the padding around the outside of the article when expanded.

Title Size

Here you can set a new size for the title in the articles expanded state.

Description Size

Here you can set a new size for the description in the articles expanded state.

Image Size, Radius & Spacing

Here you can set a new Size, Radius, and spacing for the article image in the articles expanded state.

Content Text

This controls the default font size for text in the content area.

Font Family

Here you can select a font for the article content.

Back Arrow Size

Sets the size of the back arrow in the top right corner.

Colors

Title

The color of article titles

Description

The color of article description text

Info (Text & Highlight)

Info prefixes will be set to the text color, while custom inputted text will be set to the info highlight color.

Divider Color

There is a small divider between each article item, and also between the article header and content when expanded. Set the color of this divider here.

Content Headers

The color of all header tags (h1, h2, h3, h4, h5) in the article content area.

Content Text

The color of all general text in the content area.

The color of all links within in the content area.

Back Arrow

The color of the back arrow that appears in the expanded state.

Image Icon (Initial & Hover)

When no image is available, a small placeholder icon will appear in its’ place. Here you can set the color of that icon for both its’ initial state, and it’s hover state.

Image Bacgkround

Here you can set a background for the image placeholder/overlay. It can be a single color or a gradient.

Main Background

The main background for articles in both their list & opened state. It can be a single color or a gradient.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Mega Menu

Getting Started

Mega Menu consists of 4 stacks total

  • Mega Menu (Main Stack)
  • Mega Menu Dropdown
  • Mega Menu Columns
  • Mega Menu Items

In order to get Mega Menu working, you will need to drag the mega Menu stack onto the stacks page. You will then see that it automatically adds 1 mega menu dropdown with 3 columns inside of it.

The way that Mega Menu works, is that you add a mega menu dropdown, and inside of that you add columns. Inside of those columns you can add Mega Menu items, which can be links, titles, text, or stacks!

This is the basic setup for a mega menu. Add in your dropdowns, then your columns, and then your items.

Edit Mode

Collapse all in edit mode (checkbox)

If this option is checked all mega dropdowns will be collapsed in edit mode. This helps for condensing the stack so it doesn’t take up as much space.

General

Position

  • Fixed
  • Inline

Mega menu can be set to be fixed to the page, or inline with your content.

If the fixed option is checked, you will see another dropdown appear that will allow you to choose whether the menu be placed on the top or the bottom of the page.

Z-Index

This controls the vertical index of the menu. Increase or decrease this to place the menu on top or below other fixed items on your page.

Max width

The max width option simply controls the maximum width of the menu itself.

Margin

The margin controls the space around the mega menu. If the menu is fixed, this margin controls the amount of space between the edge of the browser window and the menu.

This can be used to offset the menu from the edge of the page.

Breakpoint

At a certain point, mega menu becomes completely responsive, transforming into a mobile dropdown menu. This breakpoint determines the pixel width that the menu will transform.

The main menu section controls the very top level items in the menu.

Item Text Size

This controls the font size of the very top level (main) items of the menu.

Item Icon Size

This controls the font size of the icons next to the top level menu item text.

Item Padding

These two inputs control the amount of padding around the text/icons of the main menu items.

Main Item Font

Here you can select a font for the top level menu item text.

Mega Dropdowns

Here you will find the majority of styles for editing the dropdown menus.

Content Align

This refers to the text alignment for each column of the dropdown menus. You can basically think of it as Text Alignment

Min Height

Here you can set a minimum height for the dropdown menus. This is useful when you want to have a set height for the mega menu.

Column Padding

These two inputs control the amount of vertical/horizontal padding aroudn the outside of each column

Item Padding

These two options control the amount of padding around the Mega Menu Item stacks such as links/titles/text/ or stacks.

Link Size

This simply controls the font size of Mega Menu Item links in the dropdown menu.

Text Size

This simply controls the font size of Mega Menu Item text in the dropdown menu.

Title Size

This simply controls the font size of Mega Menu Item titles in the dropdown menu.

Title Spacing

This controls the amount of space below each Mega Menu Item title.

Title Weight

Here you can choose whether titles be bold or just normal.

Title Case

Here you can choose whether titles be uppercase or just normal case.

Icon Spacing

This controls the amount of space between title/link icons and the text.

Mega Dropdown Font

Here you can specify the font family for the mega dropdowns, this includes links/titles/text/etc.

Header (Logo & Toggle)

Mega Menu comes with a built in Logo and a toggle when the menu becomes responsive. Here you will find a couple of options for custimizing the sizing of both of these.

Logo Size

The font size of the logo

Toggle Size

The Size of the Toggle Icon (The outer size of the icon is calculated automatically)

Colors

With Mega Menu, all of the colors can be shared or set individually for each column. You can set the shared controls on the main Mega Menu stack. If you want to have custom colors for a particular column, then you can simply click on the column stack, and then check the (use custom colors) option, which will override the shared colors.

Logo Color

The color of the logo text.

Toggle Icon (Initial & Hover)

The color of the toggle icon on mobile devices

Toggle Background (Initial & Hover)

The background color of the toggle icon

Main Item Text (Intial & Hover)

The color of the top level items of the menu.

Main Item BG (Intial & Hover)

The background color of the top level items.

The color of Mega Menu Item links in mega dropdowns.

The color of Mega Menu Item Text in mega dropdowns.

The text color of Mega Menu Item Titles in mega Dropdowns.

Title Border

The border color of Mega Menu Item Titles in Mega Dropdowns.

Thickness

This controls the thickness of the border for Mega Menu Item Titles.

This controls the background of the mega dropdowns! It can be set to:

  • A single color
  • A gradient (two colors)

This controls the background of mega menu overall. It will control the background behind the logo & top level items, and the background of the stack on mobile devices. It can be set to:

  • A single color
  • A gradient (two colors)
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Events

General

Toggles

  • Shop Top Date
  • Shop Bottom Date
  • Shop Description
  • Shop Info 1 (Location)
  • Shop Info 2 (Time)

Maximum Width

This sets the maximum width that the event cards can expand. They will automatically shrink to become smaller when the device size is changed.

Wrapping Point

At a specific points, the event cards will wrap, meaning that the dates will stretch the full width, and the title/description/info content will wrap below the date. This is the look for mobile devices.

You can choose the specific breakpoint width at which this point will happen. It is recommended that you set it to somewhere around 500px.

Responsive Breakpoints (Tablet & Mobile)

Throughout the stack you will find that there are specific sizing options for Desktop, Tablet and Mobile. These breakpoints will determine the point at which the Tablet, and Mobile sizing options are applied.

Events > General

You will find general styling and sizing options for events, including Radius, Padding, Margin, Title, Description, and Info (Time/Local/etc.) settings.

Radius

This determines the corner roundness of each event card.

Margin (Vertical & horizontal)

The margin is the spacing around each event card. If you want to add more space between each event card, then increase the vertical margin.

Padding

The padding refers to the amount of padding inside the content area of the events, e.g. the title, description, info, toggle, etc.

Content Spacing

The content spacing refers to the amount of space between the title, description, and info. Increase this option to add more space between them.

Title (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the title for Desktop, Tablet, and Mobile devices.

Title Weight

Here you can choose whether or not the font-weight of the title should be set to bold or normal. On some fonts bold looks too extreme, therefore we’ve included this option.

Description Size (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the description for Desktop, Tablet, and Mobile devices.

Info 1 & 2 Sizes (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the info sections (time, location, or whatever icon you choose). The size can be set for Desktop, Tablet, and Mobile devices.

Font Family

Here you can select from a list of fonts for the event Title, Description, and Info.

You can also select a custom font by choosing “Custom” from the list, and then specifying the font URL along with the font name.

Event > Dates

**NOTE: There are two dates included with the Events stack, a TOP date and a BOTTOM date. This is useful for creating different combinations of dates.

Date and time formatting codes can be found here:

Date & Time Format Codes

Top Format

The top format option referrs to the format of the date that will display. By default it is set to: “DD” which refers to the 2-digit day of the month (01, 10, 24, etc.)

It can also be set to a time by doing something like “h:mm” meaning 8:00, or 10:00.

Bottom Format

The bottom format is the same as the top format, refer to the top format about for more information.

Min-width

Because certain date-names or times may be longer in width than others, we’ve provided a minimum width for the date section. This helps to keep all of the date sections the same size! It keeps them neat and sharp. If you find that one date/time is too long compared to the others, then increase this option and they will all be at-least this width.

Padding

The padding refers to the amount of padding within the date section.

Date Top & Bottom Sizes (Desktop, Tablet, & Mobile)

Here you can find the font-sizing options for both Top and Bottom dates, which can be edited for Desktop, Tablet, and Mobile

Font Family

Here you can set the font family for the Dates

Events > Details

The details sections refers to the area where you add in your own stacks or content. There are just a few basic options for the details section of the events.

Toggle Text

After the wrapping point for mobile devices, some useful text appears next to the toggle which reads “View Details”. You can customize this text here.

Padding (Vertical & Horizontal)

Here you can specify the vertical and horizontal padding of the details section.

Text Size

This refers to the general text size of the details section. Though, some stacks may override this text size.

Font Family

This specifies the font of the content inside of the details section.

Events > Colors

With Events, all of the color options are placed together, making it quick and easy to style everything all at once. The color options will be explained breifly below:

Title

The color the main title of the event

Description

The color the short description just below the main title

Info 1 & 2

The color of the info text & icons(time/location/etc.) below the description.

Date Top

The color of the top date in the date section

Date Bottom

The color of the bottom date in the date section

Header Tags

This refers to any h1, h2, h3, h4, h5, h6 tags that may appear in the details section.

Text

The general color of all text within the details section.

The genera color of all links within the details section.

Shadow Color

Here you can specify a color and various properties for the shadow behind each event card. Set all values to “0” if you want to have no shadow.

Background

This refers to the general background of all event cards. You can choose between:

  • None
  • Color
  • Gradient

Date Background

This refers to the background of all Date sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient

Details Background

This refers to the background of all detail sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Testimonials

General

Autoplay (Checkbox)

If you check the autoplay option the carousel will automatically slide through all of the items. Also, once checked, you will see an input for setting the speed of the carousel.

Max Width

The max width determine the width of the testimonial cards, although cards will shrink when necessary on smaller devices.

Breakpoints

Here you can set the breakpoints for both Mobile, and Tablet

Connect Arrows (checkbox)

If the connect arrows option is checked, then there will be no space between the arrows, and they will be connected together like a button group.

If this option is unchecked then a space will be placed between the arrows, and you will see an option for setting exactly how much space is between them.

Align Vertical

This select dropdown allows you to place the arrows on the Top or Bottom of the carousel.

Align Horizontal

This select dropdown allows you to place the arrows on the Left or Center, or Right.

Size

The size option determines the size of the outer button of the arrows.

Icon Size

The icon size controls the size of the arrow icons inside of the arrow buttons.

Radius

The radius controls the corner roundness of the arrow buttons.

Color

The color option controls the color of the arrow icons.

Background

The background option controls the color of the arrow buttons.

Hover Color

The color option controls the color of the arrow icons when hovered.

Hover Background

The background option controls the color of the arrow buttons when hovered.

Cards

Min Height

The min height controls the minimum height for all cards. This is useful when you want all cards to be a similar size despite the amount of content inside of them.

You will find options for Desktop, Tablet, and Mobile devices.

Margin

The margin controls the spacing around the inner cards of the carousel. Use this to control the spacing between each card.

Padding (Vertical & Horizontal)

Here you can set the padding of the cards, both vertical and horizontal.

Inner Padding (Padding around content)

The inner padding specifically controls the padding around the testimonial text itself. This is useful when you want to add padding between the quotes and the inner text.

Radius

The radius controls the corner roundness of the cards.

Background

The background controls the background of the cards you can choose from:

  • None
  • Single Color
  • Gradient Background (including orientation)
  • Image background (With overlay if wanted)

Shadow

You can also add a box-shadow to the cards by turning the shadow option on and then configuring the shadow properties.

Cards > Content

Text Color

This controls the color of the actual testimonial text itself.

Text Size

This controls the font-size of the testimonial text.

You will find options for Desktop, Tablet, and Mobile

Text Align

This controls the horizontal alignment of the testimonial text.

Font Family

The first font family option controls the font of the testimonial text. It comes with some preset options, or you can choose custom and select your own font by including a URL and the name of the font.

Hide Names

If you check this option, the names of the testimonial cards will be hidden.

Name Color

This controls the color of the actual testimonial Names.

Name Size

This controls the font-size of the testimonial Names.

You will find options for Desktop, Tablet, and Mobile

Name Spacing

This controls the amount of space between the testimonial text and the name.

Name Align

This controls the horizontal alignment of the testimonial Names.

Font Family

The first font family option controls the font of the testimonial Names. It comes with some preset options, or you can choose custom and select your own font by including a URL and the name of the font.

Cards > Quotation Marks

Hide Left Quotation Mark

This option will hide the beginning quotation mark

Hide Right Quotation Mark

This option will hide the ending quotation mark

Orientation

Here you can choose to have the quote be placed on the top and bottom, or on the left and right of the card content.

This is useful when you want to have a unique design with vertical quotes that are centered, or vice versa.

Alignment

  • Normal (beginning quote on top, ending quote on bottom)
  • Swapped (ending quote on top, beginning quote on bottom)
  • Center (places both quotes in the center)

Color

This simply controls the color of the quotation marks

Size

This controls the size of the quotation marks, note that you will need to set a fairly large size, around (50 – 100) is best.

You will find options for Desktop, Tablet, and Mobile

Bold Quotes

If this option is checked, the quotes will be bolded. This is the default. You may want to uncheck this for certain fonts.

Cards > Images/Icons

Hide Images

If this option is checked all images/icons will be hidden.

Align Vertical

Here you can choose to have images/icons placed on the Top or Bottom of the cards

Offset

This can be used to pull the images/icons slightly outside of the card.

Note: Set this to 0 if you want the images to be inside of the cards

Align Horizontal

Here you can choose to have the images placed on the Left, Center, or Right

Size

Here you can set the size of the images or placeholder icons.

You will find options for Desktop, Tablet, and Mobile

Spacing

This input controls the amount of space between the content and the image.

Radius

This controls the corner roundness of the images

Icon Color

This controls the color of the placeholder icon when an image isn’t specified.

Background

This controls the background of the image placeholder when an image is not specified.

Cards > Ratings

Hide Rating

If this option is checked, all ratings (stars/hearts) will be hidden.

Type (Stars / Hearts)

Testimonials allows you to specify the type of rating icons that will be used. You can choose between

  • stars
  • hearts

Hopefully more icons will be added soon.

Align

This allows you to set the horizontal alignment of the stars/hearts, you can set them to be Left, Center, Right

Color

This simply sets the color of the stars/hearts

Size

This simply sets the size of the stars or hearts

Spacing

This controls the amount of space between the ratings and the other content.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Simple Tabs

General

Max Width

Determines the maxium width of the stack, including the contents and tabs

Floating Pill Style

This is a neat feature that creates a floating pill as the selected tab marker, which will then resize and move to the active tab when a tab is changed.

Connect Tabs

This will connect the tabs to the content area, and remove border-radiuses where necessary

Active Tab

Here you can set which tab will be active when the stack initially loads

Tabs

Alignment

Here you can select the horizontal alignment for the tabs you can set them to be:

  • Left
  • Right
  • Center

Text Size

Determines the font-size of the text inside of each tab

Icon Size

Determines the size of the icon inside of each tab

Spacing

Controls the space around each tab, both vertical and horizontal spacing options are avialable.

Padding

Controls the amount of space inside of each tab (around the text and the icon)

Radius

Controls the corner roundness of each tab

Text

Sets the basic text color of all tabs (not selected ones)

Background

Sets the background for all tabs

Active Text

Sets the color of the active tab

Active BG

Sets the background of the active tab

Tabs > Responsive

Breakpoints (Tablet & Mobile)

Here you can set the points at which the tabs will turn into columns for mobile devices. You can set both the tablet and mobile breakpoints

Columns

Here you can set the number of columns for the tab grids on mobile devices. For example 3 columsn means 3 tabs per row, etc.

Hide Text

Simple tabs allows you to hide text optionally for Desktop, Tablet, and Mobile devices, you can select more than one option at a time.

Hide Icons

Simple tabs allows you to hide icons optionally for Desktop, Tablet, and Mobile devices, you can select more than one option at a time.

Content

Padding

Sets the amount of vertical/horizontal spacing around the content inside of the content area

Radius

Controls the corner roundness of the content area

Text

Sets the color of the text within the content area

Background

Sets the background color of the content area

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Link Drawer

Link Drawer Tutorial

General

Start Collapsed (checkbox)

This check box will determine whether or not the drawer is collapsed or open when the page loads

Position (Dropdown)

Options:

  • Fixed
  • Inline

Fixed

Fixed means that the drawer will stick to the top/bottom of the page, and follow the user as they scroll. Once this option is selected, you will see a new dropdown appear for select the orientation (top/bottom) of the drawer.

When this option is selected you will also see some display options such as:

  • Always
  • On Scroll (Appears on the page when scrolled to)
  • On Scroll Past (Appears on the page when scrolled to and hides again when scrolled above)

Inline

Inline means that the drawer will sit with the content wherever you place it on the stacks page, it will not follow the user as they scroll.

Z-index

The index determines the 3D position of the drawer. If you find that the drawer is being hidden behind other stacks, increase this value.

NOTE: You do not have to worry about setting individual z-indexs for multiple Link Drawers, this is already handled automagically ^_^

Max-width

This determines the maximum width for the drawer

Breakpoints

Here you can set the Tablet, and Mobile Breakpoints for the stack. The number of columns and other responsive options, will change at these specific points. All default values apply to desktop sizes.

Columns

Here you can set the number of columns for the item grid. A separate number of columns can be set for Desktop, Tablet, and Mobile.

Drawer

Font Family (Dropdown)

This dropdown allows you to choose the font for Link Drawer

Outer Margin

This is used to set spacing around the outside of the Link Drawer, It comes in handy when the browser shrinks, but you don’t want the sides of the drawer to touch the edge of the page.

Corner Radius

Determines the roundness of the corners of the drawer and the toggle button.

Border Weight & Color

You can add a border to the drawer by setting a weight, and adjusting the color. For no border, simply set the weight to 0.

Shadow (ON or OFF)

You will see the option to toggle the shadow on or off. Once turned on you will find inputs for adjusting the shadow of the stack.

Background (Off, Color, Gradient, Image)

You can choose between 4 options for the Drawer background:

  • Off (No background)
  • Color (One single Color)
  • Gradient (Two colors, and options for gradient direction)
  • Image (A custom background image of your choice)

Items

Icon Size (Desktop, Tablet, Mobile)

Here you can set the size for icons of the Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Text Size (Desktop, Tablet, Mobile)

Here you can set the size for the text of Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Icon Color (Initial & Hover)

Here you can set the color of the Icons, for both the initial state and hover state

Text Color (Initial & Hover)

Here you can set the color of the Text, for both the initial state and hover state

Backgorund Color (Initial & Hover)

Here you can set the background color for the Link Items. You will see options for the initial background and the hover background

Border Color (Initial & Hover)

Each item has a 1px solid border around it, which is set to opacity 0 by default. If you want to apply a border to the initial or hover state, change these colors and increase the opacity to what you desire.

Gutters

This determines the amount of space inbetween all of the link items

Content Spacing

The determines the amount of spacing between the icons and the text in the link items.

Padding

Here you can set the vertical and horizontal padding for each item.

Radius

Determines the corner roundness for the Link Items.

Toggle

Hide Icon (checkbox)

If this option is checked, then the icon for the toggle will be hidden and only text will appear. Useful for button like toggles.

Fill Mode (Full or Pixel)

  • Full (The toggle extends the full width of the stacks max-width)
  • Pixel (Allows you to set a custom pixel width for the toggle)

Alignment

If the toggle is set to a Pixel width, then a dropdown menu will appear to set the horizontal alignment of the toggle. You can set it to:

  • left
  • center
  • right

Height

This input determines the height (size) of the menu toggle

Text (Open and Close text)

Here you can set the actual text content for the toggle in it’s open and closed states

Icon Size (Open & Close icons)

This allows you to set the size for the open and close icons

Background (Initial & Hover)

Here you can set the initial background color and the hover background color for the toggle

Icon / Text

Here you can set the color of the icon and text of the toggle button, for both the Initial and Hover states.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Feature Section

General

Feature Section Tutorial - General

Cards

Feature Section Tutorial - Cards

Card Icons

Feature Section Tutorial - Card Icons

Card Content

Feature Section Tutorial - Card Content

Hover Effects

Feature Section Tutorial - Hover Effects
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Expanse

Explanation

Expanse has two states. On load the Stack will be condensed into a “Card”. When a user clicks the open button it will animate open into an expanded state. By default the expanded state will fill the entire screen unless margin has been added in the settings panel. Set up is simple and you only need to add your desired content to the Stack. You can use the settings panel to customize the appearance of the Card when it is condensed and when it is expanded.

Settings

Animation

Animation – Choose from 11 different options that change how the Stack expands.

Speed – Adjust the speed of the expand animation in milliseconds.

Card Layout

Card Type – Choose from 3 options. “Template | Icon Button” is a preset layout with an image and an overlapping round button. “Hover & Click” will make the Stack expand when any part of the card has been clicked on. “Button” will add a button to the Stack that can be clicked to make it expand. These last 2 options do not have a template and will allow you to set up your own layout.

Card Width – Adjust the width of the Stack when it is condensed or in it’s “Card” state. If this width value is more than the value of it’s container, the Stack will scale it’s entire size to fit inside. This will cause the contents and text to shrink. If you do not want the contents to shrink, you will need to adjust this value so that it is equal to or less than the width of the container.

Card Height – Adjust the height of the Stack when it is condensed or in it’s “Card” state.

Margin T/B – Adjust the space below and above the Stack when it is condensed or in it’s “Card” state.

Card Styles

Header Image (“Template | Icon Button” Card Type) – Add an image to display at the top of the the template. The image will automatically scale to fill the entire height and width of the Header. The aspect ratio of this image is 21:9.

Card & Button Colors – BG = Background, Cls = Close

Button Icons (“Template | Icon Button” Card Type) – Choose from 4 different sets of expand and condense icons for the template’s round button.

Border Radius – Add/Adjust the round corners of the Card.

Shadow – Enable/Disable a subtle shadow around the Card.

Title Font – Optionally declare a custom font for the Header Titles in the Card and in the expanded content.

Text Font – Optionally declare a custom font for the text in the Card and in the expanded content.

Hover Animation – Choose from 3 different options that add hover animations to the entire Card. “Overlay & Message” will display a message when the Card is hovered. “Shadow” will add a shadow when the card is hovered. “Opacity” will make the card slightly transparent and opaque when hovered.

Truncate Type – Choose from 3 different options for how the Card handles overflowing content. “Text Ellipsis” will add “…” to any text that overflows at the bottom of the card. This option only works if the content at the bottom of the card is text. “Gradient Fade” will make the content fade out at the bottom of the card. “Clip” will not apply any effect and the content will simply not overflow past the bottom of the card.

Expanded Layout

Content Width – Adjust the width of the expanded content. This option will not effect the width of the stack when it is expanded but rather the content inside of the Stack.

Margin – This will add space around the edges of the expanded Stack equal to the value you set.

Padding T/B – Adjust the top and bottom padding of the expanded Stack’s content.

Padding L/R – Adjust the left and right padding of the expanded Stack’s content.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Author Card

Setup

After adding the Author Card Stack to the Stacks’ page, add the included Font-Awesome Stack to enable the icons. After this you can use the Settings Panel to customize your card and select a theme.

Settings Panel

Author Settings

Profile Image – Add your image here. Profile images should be square. Non-square images will be cropped and centered.

Name – Add a name or business name.

Title – Add an occupation or subtitle.

Hover Greeting – This greeting will display in a white chat bubble above the profile image when the card is hovered by a mouse. Keep this value short in order to prevent the chat bubble from covering too much of the photo.

Enable Hover Greeting – Disable this option to remove the “Hover Greeting”.

General Settings

Theme – Choose from 4 card layout themes.

Width – This will adjust the width of the card (The height is determined by the content you add to the card). If the container width is less than the width of the card, the card will adjust to fit inside the container. On mobile screens the card will automatically display in “Vertical Mode”.

Vertical Mode – Optionally display the card in a vertical orientation on all screen sizes.

Name Font – Optionally declare a custom font that will only effect the Name text.

Text Font – Optionally declare a custom font that will effect all text excluding the Name text.

Round Corners – Adjust the radius of the card corners.

Shadow – Select from 6 predefined shadow styles.

Show Content – Show/Hide the “Drop Stacks Here” section of the card.

Show List Items – Show/Hide the “List Item” section of the card (found directly below the “Drop Stacks Here” section).

Show Footer – Show/Hide the footer that contains the social media icons.

Theme Styles

Round Profile Image – Enable/disable a round profile image. This option is only available in the “Standard” and “Solid” themes.

Text – Adjust the colors of the

1: Name

2: Title

3: Content in the “Drop Stacks Here” section and “List Item” section

4: All the links contained on the card.

Background – Adjust the colors of the

1: Main background (Except the “Solid” theme)

2: Footer gradient left (Background gradient left of the “Solid” theme)

3: Footer gradient right (Background gradient right of the “Solid” theme)

4: Dividers found above the “Drop Stacks Here” section and “List Item” section

 

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS

Pagelit

Setup

Drag the Pagelit Stack into the editor.

Pagelit starts with a single page, clicking the blue “Add Page Button” will add additional pages.

The top Page will be used as the Book or Magazine cover and the last page at the bottom will be used as the back cover. The cover pages will be highlighted with a blue rectangle and will be labeled “Front Cover” or “Back Cover” in edit mode.

Each Page Stack has a front and back represented by two “Drop Stacks here” sections. The front section (located at the top of each individual Page Stack) is for the content that will display when the page is on the right side of the book. Once the page is turned it moves to the left side and  reveals the back section (Located at the bottom of each individual Page Stack). Inside of each page you can drag any Stack content you wish, including images, video, text, and even other stacks.

Click on individual Page Stacks to reveal background options in the “Settings Panel”. Here you can set the color of the background or set an image to display as the content. You can also use “Warehoused” images by enabling  “Use URLs”.

If you are creating a book or magazine made from images you can simply drag and drop the images into each Page Stack’s Settings Panel “Front Image” or “Back Image” section.

Additional customization and settings will be explained in the Settings Panel Breakdown below.

Pagelit Settings Panel Breakdown

Type – Choose between 3 different modes:

  • Book – Soft Pages will make the first and last pages animate as a hard cover.
  • Book – Stiff Pages will make all pages animate as solid and stiff card stock.
  • Magazine will make all pages animate as paper. This option removes the “Cover Size +” and “Page Rounding” settings.

Page Width – Adjust the width of the pages. The book will be double this value when opened. If the container is not wide enough to fit Pagelit while it is open, it will scale to fill the available space. This will also cause the content to shrink as if it were an image.

Page Height – Adjust the height of the pages. The height will also scale if the container is not wide enough to fit Pagelit while it is open.

Margin – Adjust the space at the top and bottom of Pagelit.

Cover Size – Adjust how much larger the cover pages are in relation to the inner pages. This setting is disabled if the “Type” is set to Magazine.

Navigation Type – Choose between 3 different modes:

  • Page Click will allow users to navigate forward and backward by clicking or touching the cover,  left page, or right page. Users will not be able to interact with the content inside the pages if this mode is enabled.
  • Buttons will add navigation buttons below Pagelit that will allow users to navigate forward or backwards. This option is best if you want users to interact with the content inside the pages.
  • Page Click and Buttons will add navigation buttons below Pagelit and allow users to click or touch to navigate.

Page Rounding – Adjust the corner radius of the book edges. This setting is disabled if the “Type” is set to Magazine.

Page Padding – Adjust the padding around the edges of each page.

Page Shading – Enable/Disable inner page shading at the spine of the book or magazine.

Enable Page Numbers – Enable/Disable page numbers that display at the bottom of each page.

Font Size – Adjust the size of the enabled page numbers.

Speed – Adjust the speed (in milliseconds) of the page turn animation. This will also adjust the speed of the “Pop Out” animation when enabled.

Quality– Choose from three modes:

  • Automatic will make Pagelit automatically adjust the detail of the animation depending on the user’s device pixel density or browser type. This is the recommended setting.
  • Best Performance will always use the lowest level of detail for the animation. This prioritizes the animation to be a smooth as possible.
  • Best Quality will always use the highest level of detail for the animation. This setting is only recommended if your page dimensions are less than 400 (page width) by 600 (page height) as larger books or magazines can be quite demanding on high dpi (IE Retina) screens and some browsers.

Pop Out – Enable/Disable a pop out animation that will remove Pagelit from it’s container and place it in a full screen overlay. If Pagelit has been scaled to fit it’s container, it will grow to the set height once it leaves the container.

Loader Size – Adjust the height of open space shown while the book is loading.

Page Settings Panel Breakdown

Front Image & Back Image – Select an image to display stretched out over the entire page. The image will match the dimensions you set in Pagelit’s Settings panel.

Use URLs – Enable/Disable input boxes that allow you to declare the location of a warehoused image.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
https://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks">
RSS