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

Press

General Settings

Link

The Link option will allow you to set a link for your your Press button. It uses RapidWeavers built in link interface, making it easy to add links to pages on your site, and external pages as well.

Button Style

There are two button styles with the Press stack:

Icon/Text Centered & Icon/Text Separated

The Icon/Text Centered style of button simply places the Icon or Text content that you have and places either or both of them in the center of the button.

The Icon/Text Separated option will separate the Icon from the text and place it on either side of the button. You have the option to choose which side the icon will be placed on. You can read more about this under the icon section.

Button Text

Show Button Text

This checkbox simply allows you to choose whether or not you want your button to contain text. Turning this option off is great for creating icon only buttons.

Text Font

With the Press stack, we’ve included a list of the best fonts on the web. You can choose from one of these included fonts, OR you can also included custom fonts of your own.

If you want to use a custom font, simply select the “Custom Font” option from the font dropdown list.

After doing so you will see two new input fields appear. One for the URL of the icon font that you want to include (Note icon fonts must be included from a url on the web, which is extremely common these days), The next input will be for the Icon Font Name, for example Roboto, or Railway.

If you include the URL, and the name of your font, your font will be applied to the button.

Button Text (Color)

This color picker will simply allow you to set the text color for your button.

Font Size & Line-height

The font-size and line-height options are straight-forward and will do exactly what you expect.

We’ve included the line-height option for buttons with longer text that may need to wrap, this way you can be sure that your text looks good even when being wrapped.

Text-Padding

The text padding is the padding that will be placed directly around the text. By default it is set to 0, as the button element itself also has padding options.

The text padding is simply for those who would like to add special padding specifically around the button text.

Button Icon

Show Button Icon

This checkbox will allow you to choose whether or not your Press button will have an icon in it or not. By default press buttons do not have icons, but if you want to add one, simply check this box, and you will see an icon appear.

Icon Font

After turning on the “Show Button Icon” option, you then need to select the icon font for the icon that you want to use.

We’ve included three of the major icon fonts on the web: Google Material Icons, Font-Awesome Icons, and Ionicons.

Icon Code

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Button Icon (Color)

This color picker will simply allow you to set the color for the icon in your button.

(Icon) Background

We’ve included the additional option to add a background specifically to the icon of the button. You can choose between a solid color, a gradient, an image, or no background.

By default the icon will have no background, and no padding set on it.

The Icon background option is mostly useful when it comes to using the Icon/Text Separated button style, as it will allow you to add a flush look to the icon, that separates it from the text, similar to the YOUTUBE BUTTON on our preview page.

Icon Spacing

The Icon spacing option is for adding spacing between the icon and the text of your button. In some cases you may want a larger icon with more space between the text of your button, in which case you might find this option useful.

Icon Padding

We’ve also included specific padding options for the icon of the button, as an extra feature. It is unlikely that you will need to adjust this, but if you do want to add specific padding around your icon, you can do so with this option.

Button Initial State

This is the section where you will find the majority of styling options for your button, including the width, margin, padding, background, border, shadow, radius and more.

Fill Mode

The fill mode dropdown list will allow you to select the width (size) of your button. There are four options:

– Fill

The fill option will make your Press button stretch all the way across the page.

– Auto

The auto option will make your Press button only as wide as the content inside of it. It will fit the size of the icon/text contained.

– Pixel Width

The pixel width option will allow you to set a specific width for the button. Note that this width is fixed and not responsive.

– Percentage Width

The pixel width option allows you to specify a percentage for your button to fill. It will fill the percentage that you choose of it’s direct parent container.

Padding, Margin, Radius

The padding option simply allows you to set the inner padding of the button.

The margin option simply allows you to set the space around the edges of the button.

The radius option allows you to control the roundness of your notifications corners.

Button Background

The background option allows you to set a custom background for your button, you can choose between:

– None (no background)

– Solid Color (a single color)

– Gradient (a gradient between two colors, including the direction)

– Image (an image of your choice, the sizing is up to you)

Border

The border option is straight-forward and simply allows you to add a border to your notification, you can control the weight, color, and style of the border.

Shadow

The shadow option allows you to add a box shadow to your notification. You can choose the color and other basic box-shadow properties such as x and y offsets, blur, and spread distance.

Adding Special Hover & Active Styles

With the Press button stack, we’ve provided a really great and innovative way for adding specific styles to your button in different states. You can add custom styles for both the hover state of your button or the active state. This is great when you want to change the background color on hover, or if you want to add a drop-shadow on hover, etc.

If you take a look at the “Button Hover State” and “Button Active State” sections in the settings panel, you will find that there are 5 checkboxes at the top of each section:

– Custom Text

– Custom Icon

– Custom Background

– Custom Border

– Custom Shadow

Simply check the specific style that you want to be applied on the Hover or Active State. This is great for mixing and matching specific styles. You can choose which styles you want to remain the same as the initial state, and which styles you would like to change.

Of course, you will find all of the proper controls for customizing these styles such as the text, icon, background, border, shadow under the checkboxes.

Animations

As an additional feature, we’ve added the ability to animate your button on hover. If you want your button to animate, simply check the “Animate on Hover” option, and then select from a list of cool animations!

Advanced

In the advanced section you will find an input that allows you to access the class attribute of the Press button. This is great for developers who might want to target their button specifically and set up a special javascript function for the button to trigger. Simply type in the classes that you want to add, separated by spaces.

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

Notice

Show Settings

The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.

Show Type

The show type option allows you to select how and when your Notice notification will appear on the page. There are four options to choose from:

– Open on Start

– Open on Timer

– Open on Scroll to

– Open on Notice Trigger Only

Each type will be explained below:

Open on Start

The Open on Start type simply makes the notification appear as soon as the page finishes loading. This is the default type and is useful when you want your users to see your notification right away.

Open on Timer

The Open on Timer type allows you to show your notification after a certain amount of time has passed. Once you select this option you will see that an input field appears, for you to input the amount of time to wait before the notification is show. The timer works in Milliseconds, meaning 1000ms = 1s.

Open on Scroll to

The Open on Scroll to type will show the notification as soon as the user scrolls to the position where the notification is placed on your stacks page. No need to do anything special here, just place the notification on the stacks page where you want it to appear, and set it to the Open on Scroll to type.

Open on Notice Trigger Only

The Notice Stack comes with a sub-stack called the Notice Trigger, which allows you to trigger your notification when some other content on your page is clicked. It’s a simpler container that you can use to wrap content. It works with buttons, images, text, anything you can think of.

The Open on Notice Trigger Only type is useful when you do not want your Notice notification to appear automatically, but you only want it to appear after a trigger is clicked. In these situations, select this option.

You can read more about the Notice Trigger stack at the very bottom of the tutorial page.

Show Animation

The show animation list is simply a list full of awesome animations used for displaying your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.

Hide Settings

Hide Settings

The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.

Hide Type

The hide type option allows you to select how and when your Notice notification will disappear from the page. There are only two options to choose from:

– Hide Manually

– Hide on Timer

Each type will be explained below:

Hide Manually

By default the “Hide Manually” type is selected. This simply means that the notification will remain open until the user manually clicks the Close Button (X) at the top, or the “Close” action at the bottom of the notification.

Hide on Timer

The Hide on Timer option allows you to hide your notification after a certain amount of time has passed. The timer works in Milliseconds, meaning 1000ms = 1s.

Hide Animation

The hide animation list is simply a list full of awesome animations used for hiding your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.

Main Notification

Main Notification Settings

The Main Notification Settings section is where you will set up the majority of layout, content, and styling options for your notification.

Content Type

The Notice stack allows you to choose from two content types:

– Text / Icons (Built in content with controls)

– Stacks (Add your own content entirely)

Text / Icons

By default the Notice stack content is set to text / icon. You will find as soon as you open the stack that you can edit the notification text, and you can add an Icon using the settings.

We’ve included a lot of settings for customizing the Text / Icon for your notification already. You can create a wide variety of notifications using the built in content provided.

Stacks

If text and and Icon are simply not enough for you, we’ve added the ability to add stacks content to the notification instead. You can literally create anything you can imagine with stacks content. Just like our example page, you will see we’ve made some very creative notifications.

Fill Mode

The fill mode option will allow you to select the width of your Notification. It can be full width, a fixed pixel width, or a percentage width. All notifications will scale to fit mobile devices, therefore this width is really the “Maximum” width of the notification.

Z-Index

Yes, we have allowed full range of the z-index for the Notice stack. No more z-index conflicts, if you need to raise or lower the z-index of your stack, please do so.

The z-index controls the layer on which the notification appears, therefore if your notification is appears below some content that it should be on-top of, then you should raise the z-index, and vise-versa.

Position Vert (vertical positioning)

The Position Vert option allows you to choose how your Notification will be aligned vertically to the page. You can choose to align the notification to the:

– Top of the page

– Center of the page

– Bottom of the page

NOTE: If you choose to align your notification to the vertical center of the page, animations will not work. : ( Unfortunately this is just the nature of web development at the moment. No need to worry though, we were able to create a default fade-in/fade-out effect for vertically centered notifications. That way, it isn’t completely boring. : )

If you select Top, or Bottom for the vertical positioning, you will find that an input box appears that will allow you to set the offset from the top/bottom of the page respectively.

Position Horiz (horizontal positioning)

The Position Horiz option allows you to choose how your Notification will be aligned horizontall to the page. You can choose to align the notification to the:

– Left of the page

– Center of the page

– Right of the page

Side Margin

The Side Margin option includes two input fields; one for setting the left margin of your notification, and one for setting the right margin.

For notifications that are flush with the edge of the page, leave these options set to 0.

For notifications that you would like to be spaced out from the sides of the page, increase these values accordingly.

Padding & Radius

The padding option simply allows you to set the inner padding of the notification.

The radius option allows you to control the roundness of your notifications corners.

Content Width

The content width option allows you to choose the maximum width of your notifications inner content.

In some cases you will not want your inner text to space the entire width of the notification, in these cases you can decrease the size of the inner content.

By default inner content will not be longer than 960px, but you can change this to whatever you’d like.

Background

The background option allows you to set a custom background for your notification, you can choose between:

– None (no background)

– Solid Color (a single color)

– Gradient (a gradient between two colors, including the direction)

– Image (an image of your choice, the sizing is up to you)

Border

The border option is straight-forward and simply allows you to add a border to your notification, you can control the weight, color, and style of the border.

Shadow

The shadow option allows you to add a box shadow to your notification. You can choose the color and other basic box-shadow properties such as x and y offsets, blur, and spread distance.

Main Notification > Text

Main Notification > Text

The Main Notification > Text section is where you will find basic settings to control text properties such as fonts, font-sizes, line-heights, text color, text alignment, etc.

These options are are fairly straightforward, therefore we won’t explain all of them. The only important thing that you need to know is how to add custom fonts, which you can read below.

Text Font

We’ve included a bunch of preset fonts with Notice, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Main Notification > Icon

Main Notification > Icon

Here you will find the ability to add custom icons, as well as edit the icon font, icon positioning, size, coloring etc.

Notification Icon (checkbox)

By default an icon is not used with the Notice stack, though adding one is really easy! Simply check this option and you will see that an icon appears in your notification. : )

Icon Font

We’ve included three of the major icon fonts on the web: Google Material Icons, Font-Awesome Icons, and Ionicons.

Icon Font

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Icon Position

With the Notice stack, you can choose to position your icon in two ways:

– Side (Left or Right)

– Top (with Left, Right, Center alignment options)

Side

If you select Side, the default option, you will see that another dropdown appears allowing you to align the icon to the Left or to the right of your notification.

Top

If you select Top, the default option, you will see that another dropdown appears allowing you to align the icon to the Left, to the Center, or to the Right of the notification.

Icon Spacing

We’ve including the ability to add custom spacing around your icon, this is because all icons are different, and it allows you to create a wide variety of styles!

You can control the Top, Bottom, Left, and Right spacing around your icon.

Icon Color

Here you can simply set the color of your notifications icon. Opacity is also enabled which is great for creating flat style design colors.

Main Notification > Close Button

Main Notification > Close Button

The close button refers to the (X) in the top right hand corner of the notification. This is a standard practice for closing popups on the web. There is only and only option for the close button, and that is choosing whether to use it or not. Read more below.

Show Top Close Button

This checkbox allows you to choose whether or not you want to use the top close button (X). By default the close button will appear, and it will match the color of your notifications text.

Because we’ve also included custom action buttons, including a close action, we’ve included the ability to hide the top close button (X), just in case. That way you don’t have to have 2 close buttons in your notification. This way, you can mix and match.

Main Notification > Action Buttons

Main Notification > Action Buttons

With Notice, we have added an awesome feature creating your own action button to your notification! This allows your user to take action after reading the notification! You can link to a separate page, or a section on the same page with a custom button! You can customize the colors, text content, etc. Read more below…

Show Action Button (checkbox)

By default, the Notice stack does not use Action Buttons, if you want to add the action buttons to your notification, simply check this option, and they will magically appear ^_-.

After they appear, you will find that if you double click on the right-hand button that reads “Custom Action Text”, you can customize it to say anything that you’d like.

Link

The link option in this section is the url where the user will be directed to after clicking on the “Custom” action button.

Button Height

Here you can simply set the size of your action buttons. To keep things simple and clean, all you have to do is set the height, and all of the spacing, alignment, responsiveness, etc. will be taken care of! Great huh?! : )

Button Border

The Action buttons have a subtle border that separates them from the notification, you can customize the color and opacity of this border using this color picker.

Custom Action Button Colors (checkbox)

By default Action Buttons will have the same background and text color as the rest of your notification. This makes it easy for creating quick notifications.

That being said, in some cases you may want to set a custom background and text color for your action buttons. If you want to do so, simply check this option, and more color pickers will appear.

You can set the general color of both action buttons, and then you can also individually set the hover background/text of the Close action and Custom action individually.

Advanced Settings

Advanced Settings

Oh boy, it looks like the basic functionally just wasn’t enough for you… That’s okay, hopefully these advanced features will suit your needs.

Trigger ID

We’ve included a simply trigger stack with Notice called Notice Trigger. This stack can be used to wrap content on your page, so that when the user clicks on that content, your Notice notification will appear! Awesome sauce… ^.^

In the advanced settings you will find an input called “Trigger ID”. This is where you can give your notification a custom ID that you can use to trigger with a Notice Trigger.

When you drag a Notice Trigger stack onto the page, you will find that there is an ID field for connecting your trigger to a particular Notice notification. Simply type in the same ID that you used with your notification, and the two will be connected!!!!!

Maximum Height

Responsiveness on the web is hard… There is such a wide variety of content out there, that it is nearly impossible to predict what our users will use.

By default all notifications will stop growing at 70% of the browser windows height, and the remaining content will be scrollable.

There may be some special cases where you want to increase or decrease this height, and thus we’ve included this as an advanced feature. Although, 70% is a very standard height that will fit all devices.

Activate Cookies

The Activate Cookies option can be used for only showing your Notice notification to a user if they haven’t already seen it. This option might be useful for preventing your users from getting annoyed if they often visit your website.

If you check this option, it will create a cookie that detects whether or not the notification has already been seen before, if it has been seen, then the notification will no longer appear.

If you uncheck this option, the notification will return back to its default show behavior.

Position Absolute

This feature is mainly for development purposes, but it is used to set notifications absolutely positioned to their container, rather than the fixed to the page itself. We can’t see any specific reason for using this option, but if you find a use for it, let us know. ^_-

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

HTML Body

Setup

Note: This tutorial assumes that you a familiar with HTML, CSS, and how to use RapidWeaver Stacks.

1 – To get started, you will need to set the RapidWeaver project’s theme to “HTML Body Blank”. This theme was specifically made for use with the HTML Body Stack and will give you access to the <head> and <body> elements. This theme also serves as a truly blank canvas to start your projects. If you want to use the HTML Body Stack inside of a different theme you can skip this step, however you will not have access to the <head> and <body> elements if you do so.

2 – Drag and drop the HTML Body Stack into the editor. The “Mode” option found in the settings panel is set to “HTML Body Blank Theme” by default. If you are using the Stack inside of another theme change this value to “Other 3rd Party Theme”.

This Stack is separated into 3 main sections: “<head>”, “<body>”, and “before </body>”. Each section has a blue button to add their respective elements.

3 – Add all of your project files (css, js, images) to your Resources section found in the Source List to the left of the RapidWeaver window.

4 – Now we can use the “<head>” and “before </body>” sections to create links to those files. Click the blue button in either section to begin adding a link. Select the element that pops up and in the settings panel, set the “Element Type” to either “Link” or “Script”.

Note: This Stack includes a few CDN (content delivery network) hosted libraries that you can add quickly by changing the “Resource” value. You can also add IE conditional comments around the specific links if you need to target specific old versions of Internet Explorer with the “IE Conditional” option.

5 –  Leave the “Resource” option set to “Custom” and click on the “Set Link” Button. In the link dialog window that opens up locate the file you wish to link to and click “Set Link”.

6 – Repeat Step 5 until you have linked all of your necessary files.

Note: The “<head>” and “Before </body>” sections have editable areas below the blue buttons. You can use these areas to type or paste any HTML, CSS, or Javascript you need added to your project.

7 –  To begin creating a project, just click the blue button in the “<body>” section of the Stack. This will automatically add a new HTML Element Stack. You can also manually add HTML Element Stacks by dragging them in from the Stacks’ Library.

8 – Each HTML Element Stack has it’s own settings panel where you can change the Element Tag, add classes, or add custom Attributes (IE you can add an ID by typing in id=“someID” into the “Attributes” field).

9 – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

This concludes all you need to know to get started on your project. For a further breakdown on what each of the settings do see the “Settings Panel” section below.

Settings Panel

HTML Body

Mode – “HTML Body Blank Theme” must be used when the RapidWeaver project’s theme is set to “HTML Body Blank”. This will give you full access to the “<head>” and “<body>” elements. If you are using the Stack simply as an HTML section inside of another theme set the value to “Other 3rd Party Theme”.

Body Attributes – You can optionally add custom attributes to the <body> tag. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

Editor Theme – By default, the HTML Body Stack shows in the Stacks editor as 3 labeled and separate tab sections. You can change this value to either “Dark HTML” or “Light HTML” to make the editor have more of an HTML text editor style of appearance.

Font Size – Adjust this value to increase or decrease the size of the HTML tag labels in edit mode.

HTML Resource

Element Type – Choose “Link” if you would like to create Stylesheet links and “Script” if you wish to link to javascript files. There is also and option for creating custom Meta tags.

Resource – Leave this option on “Custom” if you need to link to a resource found in your RapidWeaver Resources section. You can also choose from any of the included CDN (content delivery network) hosted libraries instead.

Custom –  This is were you can add the link to the resource. Note: this option is ignored if you have chosen a CDN library in the “Resource” option.

IE Conditional – Though older versions of Internet Explorer are being fazed out, you can use this option to add a conditional comment that will allow the linked resource to only load in specific older versions of Internet Explorer.

HTML Element

Type – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

Element Tag – Accepts any HTML tag value.

Classes – You can add multiple classes each should be separated by a space. These classes will also show up in the editor to help you locate and identify sections of your code. When the element is selected, the classes will also show near the </> close tag.

Href – Only visible when the “Element Tag” is set to “a”. Allows you to create a link using the RapidWeaver link dialog window.

Src – Only visible when the “Element Tag” is set to “img”. Allows you to select an image using the RapidWeaver link dialog window.

Alt  – Only visible when the “Element Tag” is set to “img”. Allows you to quickly edit the alt value for an image.

Attributes – Add custom attributes to the element. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

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

Listify


Listify Tutorial

Introduction

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

Listify Stack

The Listify Stack is the main stack for creating lists. Simply drag this stack onto a stacks page, and then add items by clicking on the add ( + ) button.

You will find instructions for all of the Listify Stacks’ settings below:

List
List Items
List Items > Text
List Items > Icons

List Fill Mode

There are two options for the list fill mode, “Fill” and “Pixel Width”.

The fill option will make a Listify list expand to fill the width of it’s container.

Pixel Width allows you to set a specific with for your list. Keep in mind that lists with fixed pixel widths are not be responsive.

List Radius

The list radius option is simply for creating a list with rounded corners. The higher the radius, the rounder the corners will be.

List Padding

List padding refers to the space between the edge of a list and it’s inner content. If you want there to be some extra space around the content, increasing the list padding is the way to do so.

List Margin

List margin refers to the space around the list itself. If you need to add some extra space on the outside of a list, do so with the list margin.

List Background

You will find that there are 4 background options for each list, “None”, “Color”, “Gradient”, and “Image”. If you select one of these options you will see that a specific set of controls will appear for the appropriate option.

List Borders

You can add borders to your list by selecting the “ON” option for the List Border. After doing so, you will find controls for setting the border width, style, and color.

List Shadow

Similar to the list border, you can add a shadow to your list by selecting the “ON” option for the List Shadow. After doing so, you will find controls for setting the shadow color and other properties.

NOTE: The “List Items (Shared Styles)” options are styles that can be used to affect all of the items in your list. This is great for creating basic lists that share similar properties like colors, fonts, sizes, etc.

If you want to style items individually, click on the “List Item” substack, and check the “override shared styles” option. You can read more about this under the “Listify Item” stack section.

Hide All Text

Checking this option will hide the text for all of the items in your list. This is a rare situation, but it can be used when you want to create a list of only icons.

Hide All Icons

Checking this option will hide the icon for all of the items in your list. This is useful when you want to create a list with no icons at all, and only text.

Indent Direction

This is option is specifically for multi-level lists. It controls the direction in which the sub-level items will be indented. You can choose to indent sub-level items from the “Left” or from the “Right”

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Indentation

This option can be used to set a specific pixel indentation for sub-level items. If you set the indentation to “15px” then all sub-level items will be pushed in-wards by 15px.

Item Spacing

Item Spacing is the space inbetween each list item. Specifically it is the bottom margin of each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text(Shared Styles)” options are styles that can be used to affect the text of all items in your list. If you want to set specific text styling for an individual item, click on the item itself, and change it under the “List Item > Text (Individual) settings.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Items > Icons (Shared Styles)” options are styles that can be used to affect the Icons for all items in your list. If you want to set specific icon styling for an individual item, click on the item itself, and change it under the “List Item > Icon (Individual) settings.

In addition, the actual Icon Font and Icon itself cannot be set globally. This is due to limitations in the stacks interface. The Icon Font and Icon Code must be set individually for each Item. If you want to create a list of items that share a similar icon, such as a heart or a star (like a bullet point), then we recommend creating one item, and then copying & pasting it for the rest of the items.

All other styles for icons such as color, padding, size, etc. can be set globally. : )

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Item Stack

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

General
List Item
List Item > Text
List Item > Icon

NOTE: By default all List Items will retain the styles set on the Listify Stack itself. If you want to style an individual item separate from all of the other items, you must check the “Override Shared Styles” option first.

Once you check this option, you will find that you can style an item individually from all others.

Link

The link option is simply for setting a link for a list item. It is not necessary to set a link, but if you want to link an item to another page or resource, then you can do so.

Item Level

The item level option is used for creating multi-level lists. You can set the level of an item to push it inwards by one sub level.

For example, you will see that there are 11 item level options.

– Top

– Sub Level 1

– Sub Level 2

– Sub Level 3

– Sub Level 4

– Sub Level 5

– Sub Level 6

– Sub Level 7

– Sub Level 8

– Sub Level 9

– Sub Level 10

By default, all items are set to top level, Each numbered level, is one level deeper than the rest. For example Sub Level 1 items will be below Top level items, and Sub Level 2 items will be below Sub Level 1 items.

The order of items is VERY IMPORTANT. If you want to create a list with multiple levels, each level must follow the order above, like so:

– TOP

– Sub Level 1

– Sub Level 1

– Sub Level 1

– Sub Level 2

– Sub Level 2

– Sub Level 2

Override Shared Styles

This option is crucial for setting specific styles on an individual list item. If you want to style an individual item differently than the rest, you must check this option first. If not, not of the following styles will apply.

Custom Stack Content

This option can be used to remove both the icon and text from a list item, and replace the inner content of the item with a section for adding custom stacks! It is great for adding things like images or anything else. We specifically use this option for adding images to our pricing table examples.

Hide Text

This checkbox can be used to remove the text content of a list item. It is useful when you want to have an item with only an icon.

Hide Icon

This checkbox can be used to remove the icon from of a list item. It is great when you want to have an item with only text.

List Item Fill Mode

There are 3 fill options for each list item. “Fill”, “Pixel”, and “Percentage”.

Fill will make the item fit the width of it’s parent list.

Pixel will set a fixed with for the item (keep in mind that this is not responsive)

Percentage will make the list item fill a certain percentage of it’s parent list. e.g. an item with the fill set to 50% will fill half the width of it’s parent list.

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Spacing

Item Spacing is the space inbetween each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text (Individual)” options are styles that can affect the text of an individual item only, making it different from the rest.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Item > Icon (Individual)” options are styles that affect the individually selected item only.

Here can you can set the Icon Font and Icon Code for the List Item.

Icon Font

You can select from 3 different Icon Fonts. Google Material Icons, Fontawesome Icons, and Ionicons.

Icon Code

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Group Stack

The Listify Group Stack was created specifically for making groups of list such as pricing tables. It’s extremely easy to use, as all you really need to do is drag multiple lists into a Listify Group.

There is no limit to how many lists you can add to a group, though we recommend no more than 3 or 4.

General

List Alignment

The list alignment option controls how child lists will be vertically aligned. If you want the lists to be aligned all to the top, select “Top”, if you want them to be vertically aligned to the center, select “Center”.

By default, Lists will be aligned to the center.

Wrap Lists

The Listify Group stacks will automatically wrap lists to expand the full width of the page for mobile devices. You can choose the breaking point at which you want your lists to wrap.

There are 3 options, Mobile, Tablet, or Desktop.



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

Side Menu

Side Menu Tutorial

Description

A beautifully customizable dropdown menu that slides out from either side of the page, triggered by a menu toggle. Use Rapidweaver’s built in menu, or create your own custom menus using Stacks, Markdown, or HTML. Get creative with a wide variety of styling, sizing, and layout options.


Tutorial Overview

  • Getting Started
  • Basic Setup
  • Settings
    • General
    • Menu
    • Dropdown Icons
    • Top Level Menu Items
    • Sub Level Menu Items
    • Menu Toggle
    • Advanced
    • Experimental
  • Creating Menus With Stacks Controls
  • Adding List Icons & Subtitles
  • Extra Menu Toggle Stack (included)


Getting Started

Let’s get started using the Side Menu.

Here you’ll learn how to get the menu up-and-running on your web-page.

Don’t worry, it’s suuuper easy! (Drag and drop)

( p.s. if you already now how to download and install, just skip to step 3 )

Step 1

Purchase the Side Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the side_menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called side_menu.stack, double-click on this file to install the stack into Rapidweaver.

Step 3

Now all you need to do is search for the stack in the Stack Library, e.g. “Side Menu” and then Drag and Drop it onto your page

That’s it!

We’ve included great presets that allow your menu to work right away, as soon as you place it on the page.



Settings

Here we’ll go over all of the settings included with the Side Menu.

General Settings

  • Options
    • Unique Menu ID
    • Use Custom List

Unique Menu ID ( INPUT )

The Unique Menu ID will provide your menu with a specific ID that will help distinguish if from other Side Menu’s on the page.

It can also be used to connect your Side Menu to extra menu toggles using the included Side Menu Extra Toggle stack.

NOTE: If you only plan on using one Side Menu on your page, you don’t need to do anything with this value. By default the Side Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

By default the Side Menu stack will use your Rapidweaver site menu.

The Custom List option can be used if you do not want to use your Rapidweaver menu, and instead want to create your own custom dropdown menu, with your own links.

If you check this option, you will see a dropdown list that will allow you to choose between:

  • Stacks, Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Using our stacks controls is the quickest and easiest way to create great looking menus. Markdown is also quick and easy, finally there is HTML, which can be used to create more advanced menus.

Don’t know anything about HTML or Markdown???

Not to worry, If you check the option, you will see that we’ve also provided a default menu example in the input field. Just copy the format and you’ll be good to go! ^^


  • Options
    • Font Family
    • Text Alignment
    • Fill Mode
    • Padding
    • Background Opacity
    • Background
    • Header Section
    • Footer Section

Font family ( SELECT MENU )

Simply allows you to choose a font for your menu from a list of included presets. We’ve chosen some of the top fonts on the web.

Text Alignment ( SELECT MENU )

With the Side Menu, you can choose to align the menu item text to the left, right, or center. To be honest, left aligned menus are the most readable for users and we recommend sticking to this convection. That being said, we’ve provided different text alignment options for your convenience.

Fill Mode ( SELECT MENU )

This option allows you to choose the maximum width of your menu.

You can choose to use a Pixel value or a Percentage based value.

In addition, you will find that you can set three different widths for your menu, one for Mobile, one for Tablets and one for Desktops. This allows you to make sure that you menu fits just right on all devices. Both PIxel and Percentage widths provide these three widths.

Padding ( SELECT MENU )

Here you can set the padding of your Side Menu. You can set the top, bottom, left, and *right padding.

Set the left and right padding to 0 when you want the inner menu items to be flush with the edge.

Background Opacity ( SLIDER )

Here you can set the opacity of your Side Menu’s background. Set it to 1.0 to make the menu fully opaque, or set it to a lower value to make it transparent.

By Default, it is set to 0.8 (slightly transparent)

Background ( SELECT MENU )

This is where you can set the background of your menu. You can choose between

  • None
  • Solid Color
  • Gradient
  • Image

The Options are fairly standard and easy to setup.

One thing to note is that the IMAGE BACKGROUND has a special image cover, for images that might make text harder to read.

This image cover is simply a color option with the ability to change the opacity. Increase or decrease the opacity depending on your image, and how visible your menu text is.

Header & Footer Sections ( CHECKBOX )

At the end of the Menu settings, you will see two checkboxes labeled Header section and Footer Section. Checking either of these options will create a section in RapidWeaver that allows you to add extra content to the menu. The header section will be placed above the menu, below the close icon. The footer section will be placed right below the menu.


  • Options
    • Icon Size
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Icon Size

This is a simple input field that will allow you to set the size of your dropdown icons. Both the open and close icon sizes will be equal whatever value you set.

Open & Close Icons

You can choose an icon for your dropdown Open state, and Close state.

Open is the default state, You should choose icons that tell the user to click on the link to open a dropdown.

Close is the icon that will show when a dropdown link is clicked. This icon should tell the user that he/she can close the menu.

You can select which icon font you would like to use for each icon. We’ve included icons from Google Material Icons, Fontawesome, and Iconicons.

You also need to type in the proper Icon code for the icont you want to use.

NOTE: Due to the way each icon font works, there is a different icon code format depending on which font you use.

Google Material Icon Format: account_circle (lowercase, use underscores _ to separate words)

See all Material Icons here: Offical Material Icon site

Fontawesome Icon Format: arrow-circle-down (lowercase, use dashes – to separate words)

No need to add “fa fa-“, just type in the specific icon code. We handle the rest.

See all Fontawesome Icons here: Offical Fontawesome site

Ionicon Icon Format: ion-arrow-down-b (lowercase, use dashes – to separate words)

With Ionicons, you must include the “ion-” before the code. Their site is set up this way, so you can easily copy and paste the codes directly.

See all Ionic Icons here: Offical Ionicon site

Rotate

You can use the rotation option to make your icon rotate once a dropdown list is opened.

This is handy for rotating plus symbols ( + ) into ( x ) symbols, or rotating down-arrows into up-arrows.

To achieve such an affect, set both the open AND close icons to the same value, e.g. a plus ( + ) or a down-arrow, and then set the rotate to something like 45 or 180(degrees).

( + ) to ( x ) = 45deg

( keyboard_arrow_down ) to ( keyboard_arrow_up ) = 180deg


Top Level Menu Item Settings

  • Options
    • Font size
    • Subtitle Size
    • Padding
    • Vertical Spacing
    • Radius
    • Text (Color)
    • Subtitle (Color)
    • Background
    • Hover Text (Color)
    • Hover Subtitle (Color)
    • Hover Background

These options are very straight forward. I recommend playing around with them to see what happens. If you change them, the menu preview with update too, so you can easily tweak your menu and see the changes right away!

One thing to note is the Vertical Spacing.

This input will determine the amount of vertical space between all menu items in the list.


Sub Level Menu Item Settings

  • Options
    • Font size
    • Subtitle Size
    • Indent with (Sub level indentation – see below)
    • Use Top Level Color Styles (Checkbox)
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are nearly the same as the top level items, with the exception of padding, vertical spacing, and radius. These styles are shared with the top level menu items.

Note: By default sub level menu items with share there color values (text color, background, etc.) with top level menu items

If you want to use custom color styles for sub level items, uncheck the Use Top Level Color Styles checkbox.

Indentation (SELECT MENU)

This option allows you to choose how sub level items will be indented.

Sub level items need to be indented for a user to know that they are below a top level item. There are two types of indentation, Margin, and Padding.

By default, Side Menu sub level items are indented with Margin. This means that Sub Level Items, will have a smaller width that top level items, and they will be pushed inwards.

Choosing the Padding option makes it so that all items (Both top level and sub level) are the same with, but Sub Level items will be pushed inwards with padding. This great for creating menus that are flush to the edge because the shared width makes the menu look clean, but the padded indentation of the sub level items still allows the user to distinguish sub level items.

It might sound a bit complex, but not to worry, try changing the option and see what happens. It’s really easy to understand once you see it in action.



  • Options
    • Show Toggle Text (Checkbox)
    • Show Toggle Icon (Checkbox)
    • Text Font
    • Text (input)
    • Text Font Size
    • Icon Font
    • Icon Code (input)
    • Icon Size
    • Fill Mode
    • Position
    • Vertical Align (Fixed Menus only)
    • Horizontal Align
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background
    • Border
    • shadow

For the most part, the Menu Toggle Settings are straightforward and easy to use. Play around with them and checkout the preview in settings to see the changes directly.

There are a just few options that are important to understand:

Show Toggle Text ( CHECKBOX )

Unchecking this option will hide the text of the toggle button, leaving only the icon

Show Toggle ICON ( CHECKBOX )

Unchecking this option will hide the icon of the toggle button, leaving only the text

Position ( SELECT MENU )

There are two positioning options to choose from with the Side Menu Toggle

Inline or Fixed

Fixed:

By default, the toggle is fixed, meaning it scrolls with the page.

When this option is selected, you can choose the Vertical (top, bottom) and Horizontal (left, right, center) alignment.

Use the margin settings to adjust the spacing of your toggle when fixed.

Inline:

If you select the inline option, your menu will stay inline with the content. You can still set the Horizontal alignment (left, right, center) to make your toggle fit just right.


Close Button

  • Options
    • Use Custom Close Button
    • Size
    • Icon Font
    • Icon Code (input)
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Border

With the Side Menu, we’ve provide the ability to use a custom close button! By default, the close button will be a simple X, the most common close icon on the web. If you want to create your own close button, using an arrow arrow_back or something else, you can use the Use custom close icon option. See more below.

Use Custom Close Button (CHECKBOX)

If you check this option, the default Close Icon will be replaced with a new one that you can fully customize. underneath this checkbox you will see a variety of styling options for the close icon including icon options, color options, backgrounds, radius, sizing, margin, padding, and more.

The icon for the close icon follows the same standards as the icons all throughout the Side Menu. Be sure to use the proper icon code for the icon font that you choose. Other than that cutsomizng the close icon is really easy.


Responsive

You will find a Responsive section in the settings panel, where you will have the option to hide the Side Menu at different screen sizes. Just like typical RapidWeaver stacks, you can choose to hide the stack on:

  • Mobile
  • Tablet
  • Desktop

You can select multiple options at the same time, so choose freely when you want the menu to display.


Advanced Settings

  • Options
    • Show Data ID Info
    • Make Parent Items Clickable

Show Data ID info

As a really cool bonus feature, you can use ANY clickable html element to open up your Side Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="side_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Side Menu’s Unique ID value.

Then, just add the data attribute to a clickable HTML element, such as a link, button, etc.

here are some examples

<a href="#" data-id="side_menu_UNIQUE_MENU_ID"> Open my menu </a>

<button data-id="side_menu_UNIQUE_MENU_ID"> Open my menu </button>

If you check “Show data ID info” option, a snippet of your exact data-id code (including your unique ID) will show at the top of the stack in edit mode. This makes it really easy for copying and pasting the code for use.

You’re welcome. ^_-

Make Parent Items Clickable

By default, parent item will not direct the user to a link, but instead open the dropdown to view sub level items.

In some cases, you might need parent items to link to pages as well. For these cases you can use the Make Parent Items Clickable option, under the Advanced Section

Simply check the option, and you will see that parent items will now link to pages, and the dropdown menu can be opened by clicking the icon button on the right.



Experimental Settings

  • Options
    • Replace Theme Menu

Due to popular request, we’ve developed an experimental feature that is meant to hide your themes default menu, to use the Side Menu instead!

Simply check the “Replace Theme Menu” option, and the magic will take place.

NOTE: This feature is experimental, and may not work with all themes.





Making Custom Lists With Stacks Controls

We’ve created a simple interface that can be used to make custom menus by simply clicking a button to add items, and changing a few settings to customize each link, and link level. You can even easily add List icons & Subtitles ^_^

Here, I’ll show you how to make make custom lists using the new feature:

# 1 Check the “Custom List” option and then select “Stacks”

After doing select stacks, you will see that a new stacks list item has appeared underneath the menu preview, follow by a [ + List Item ] button for adding additional items to your list.

# 2 Customizing List Items

If you click on a stacks list item, you will see that there are some settings in the inspector panel. You can use these settings to Set the link, Set the item level, add list icons, and add subtitles. The settings for each added list item are:

  • Item Link
  • Item Level
  • Item Subtitle
  • Item Icon

Here you will find a “set link” button that will allow you to choose where you want the list item to link to. It uses stacks link creation window, so you can easily link to a page on your RapidWeaver site, or link to an external site.

Item Level

You will use these settings to create dropdown menus of multiple levels. The options are:

  • Top Level
  • Sub Level 1
  • Sub Level 2
  • Sub Level 3
  • Sub Level 4
  • Sub Level 5

By default, added links will be set to “Top Level”, meaning the list item will be always be shown.

You can create a dropdown menu by placing a new list item directly underneath a Top Level element, and then changing the level to Sub Level 1, like so:

Doing so will create a dropdown menu with the Sub Level 1 item underneath the preceeding Top Level item.

You can create more sub levels by following the same rules. For example, create a third level of list items by placing some Sub Level 2 items directly underneath a Sub Level 1 item, like so:

You can create up to 5 levels deep. This should be plenty, we’ve chosen this amount because having more than 5 levels of items is way too confusing for a user. We recommend going no more than 2 or 3 levels deep, unless absolutely necessary.

Item Subtitles

Here you will simply find a checkbox that reads “Add subtitle”, if you check it, a new text-input will appear in the Stack List Item, where you can input some subtitle text.

Item Icon

Here you will find a checkbox that reads “Add Icon”, if you check it, more controls will appear allowing you to choose an icon font, and input the icon code. The rules for creating icon codes are the same for creating menu toggle icons and dropdown icons.

Not only will you see new controls appear, but you will also see the icon show up next to the main text in the Stack List Item.



Adding List Icons & Subtitles

The Side Menu supports creating List Icons & Subtitles!

This feature is only possible when creating custom lists, not when using RapidWeavers built in Menu.

The method for creating list items and subtitles will depend on which type of custom list you’ve selected. Remember there are 3 types of custom lists

  • Stacks *(new)
  • Markdown
  • HTML

#1 Using Stacks

The easiest way to create list items with Icons and Subtitles is to use the new Stacks custom list feature.

If you are using the new Stacks custom list option, then you can simply follow the instructions in the section above

It is as simple as using the settings inspector panel. You can check a box to add a subtitle, or add an icon to each list item. You’ll see more options for customizing there.


#2 Using Markdown or HTML

If you are using markdown or HTML to create a custom list, you will need to use some code snippets for adding Icons and Subtitles. The snippets for both are exactly the same.

Subtitle Snippets

The snippet for creating a subtitle for Markdown or HTML is a simple small tag with your subtitle text inside. like so:

<small> MY SUBTITLE TEXT HERE </small>

Icon Snippet

If you are using Markdown or HTML to create a custom list, you can use an Icon tag to add list icons.

Side Menu supports three different icon fonts, and the icon snippet for each font is different:

Google Material Icons

<i class="material-icons">ICON_CODE_HERE</i>

Font Awesome Icons

<i class="fa fa-ICON_CODE_HERE"></i>

Ionic Icons

<i class="ion-ICON_CODE_HERE"></i>

Simply choose the font of the icon that you want to use, replace the ICON_CODE_HERE text with the code for your icon.


#3 Adding snippets to your Markdown/HTML list items

Markdown

The default format for a Markdown Link is:

- (Item Text)[http://item_link_here.com]
Subtitles

To add a subtitle to your markdown list item, place the snippet right after the Item Text in the Markdown List Item Snippet, like so:

- (Item Text <small> MY SUBTITLE TEXT HERE </small> )[http://item_link_here.com]
Icons

The icon snippet can be added before the Item Text in the Markdown List Item Snippet, like so:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text )[http://item_link_here.com]

A full Markdown List Item Snippet with an icon and subtitle would look like this:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text <small>MY SUBTITLE TEXT HERE</small> )[http://item_link_here.com]

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.


HTML

The default format for an HTML Link is:

<li>
<a href="http://item_link_here.com">
Item Text
</a>
</li>

Subtitles

To add a subtitle to your markdown list item, place the snippet right before the Item Text inside of the A tag, like so:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
    </a>
</li>
Icons

The icon snippet can be added after the Item Text, before the closing A tag, like so:

<li>
    <a href="http://item_link_here.com">
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

A full HTML List Item Snippet with an icon and subtitle would look like this:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.

Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Side Menu. Of course, each Side Menu has a default toggle already included, but we’ve also included a sub-stack called the Side Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Side Menus Unique Menu ID to the Connected ID setting of the Extra Toggle stack. You’ll see it at the very top of the settings panel, in the General Section.

Paste your Side Menus Unique ID here, and voila! You now have an extra toggle that will open your menu.

The settings for the Extra Menu Toggle sub-stack are extactly the same as the Menu Toggle settings for the Side Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment

Hoooraah!

You’ve made it to the end of the tutorial. You’re a beast!

Not to mention you can now create amazing menus for your website~~ ^_-

Go crazy and make something awesome. Feel free to share your menus on our Facebook page

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

Formula

Greater Than Less Than Comparisons

Using Import IDs in Custom Expression Formula Segments

Setup

This tutorial will lead you through the set up of a custom calculator that displays the cost of a hypothetical 199.99 product. The total price output will be based on quantity needed, selectable extras, a slider for adding a ‘tip’, and a checkbox used to offer warranty.

Add the Stack to the Stacks page

formula stack layout

After adding the Stack you will see two sections, one labeled “Calculator (Input Fields)” at the top and another labeled “Formula” at the bottom. The “Calculator” section is where all of the usable input fields will be declared. The “Formula” section is where the math used to calculate the output will be declared, this section is only visible in edit mode while the “Calculator” fields will be visible and usable by page visitors.

Add Input Fields

Number Input

First we will create the Quantity input field. Click on the “Import Value” segment found in the “Calculator” section. In the settings panel found to the right of the RapidWeaver window, leave the “Type” option set to “Number Input” and change the “Import ID” to a unique value. It should start with an alphabet and should only use [ a-z A-Z 0-9  _ – ] characters. For our example we will call it “input-quantity” in order to make it intuitive when reading the formula later on. Set the “Min Value” to “1” so that the user has to at least order at least 1. Our “Max Value” will be set to “10” to put a limit of 10 units to purchase. Set the “Default Value” to “1” so that it is automatically that value when the page loads. Finally, enable the option titled “Show Label” and add the title “Quantity”. We will ignore the “Styles” and “Output” options for now (they will be gone over in the “Settings & Styles” tutorial below).

import value settings

Select Field

Next, add a new “Import Value” segment by clicking on the blue plus button found in the “Calculator” section. Change the “Type” option to “Select”. This will be our selectable options field. Just like the “Import Value” segment before, create a unique “Import ID”, we will call this one “input-options”. Enable “Show Label” and add the title “Options”. Now in the editor, we can add the selectable options. The “Import Value” now has it’s own blue plus button for adding more selectable options. Click the add button 3 times to add 3 more options for a total of 4. You can click each segment to change the title and selected value. Change the first segment to “No Extras” and in the settings panel set the “Value” to “-5” (This will subtract 5 from the total cost if this value is selected). Note: the “Value” field accepts numbers (99), negative numbers (-5), and decimal values separated with a period [.] (12.99). The value must be a numerical.

formula select value

We will update next three select segments with these values:

Title=Extra Paper | Value=0

Title=Extra Paper and Pencils |  Value=5

Title=Full Kit | Value=30

To pick which select option is enabled by default, drag the value you want to the top of the Select list. We will leave “No Extras” as the default value.

Checkbox

Add add a new “Import Value” segment. Set the “Type” to “Checkbox” and the “Import ID” to “input-warranty”. The “Text” option is the text that displays next to the checkbox, let’s change it to “Warranty”. In the formula to be created later, this field will multiply the total cost by 20% and add it to the total if enabled. We will need to set the “Disabled Value” to “1” (The total multiplied by 1 equals no change to the total value) and the “Enabled Value” to “1.2” (The total value multiplied by 1.2 will increase the value by 20%, 0.2 is 20% in decimal form, adding 1 to that value keeps the original value when it’s multiplied). We don’t wont this field to be enabled by default, so leave the “Start Enabled” option disabled.

checkbox example

Slider

Add add a new “Import Value” segment. Set the “Type” to “Slider” and the “Import ID” to “input-tip”. We want to allow the user to add a 0-20% tip so set the “Max Value” to “20” and the “Default Value” to “0”. Leave the “Step” value on “1” so they can choose any value between 0 and 20. Enable “Show Label” and put the title “Include a Tip”. Also enable the “Show Units” options and place a percent symbol [%] in the “Units” field. Note: The Slider type does not allow decimal or negative values.

slider example

 

Note: In version 1.0.1, the slider now accepts negative and decimal values in these settings: Min Value, Max Value, Default Value, and Step.

Now we have added all the of the fields we want the user to fill in, we just need to create the formula that calculates the total cost.

Add Formula Segments

First it is best to write out the formula and then type it into the “Formula” section after we have it laid out how we need it to be. If you need a refresher on the Order of Operations check out the link here. Here is the formula for our example:

((input-quantity * 199.99 + input-options) * input-warranty) * (input-tip / 100 + 1)

Note: The Slider type (Import ID: input-tip) does not allow decimal values. We will need to divide it’s value by 100 to turn it into a percent value in decimal form and add 1 in order for it to calculate the total correctly. (input-tip / 100 + 1)

In order to add the formula you must first add “Formula Segments” by clicking the blue plus button found in the “Formula” section. These segments are the numbers, math symbols, and values to be imported from the input fields found in the “Calculator” section. Each segment has a type that can be declared in the settings panel to the right of the RapidWeaver window. Our first two segments will be open parenthesis symbols [(].

parenthesis open

These formula segments can be dragged and dropped into any order after they have been created/added.

Helpful Tip: When dragging a segment, It’s best to place the segment over the the bottom right corner of the segment you want to place it in front of. Alternatively, you can place it over the top left corner to have it be placed behind the segment you are hovering over.

moving segments

Next we will want to import a value in the next formula segment. Set the “Type” to “Import Value” and in the “Import ID” field put the ID of the corresponding “Import Value” segment from the “Calculator” section. In our example it is “input-quantity”.

match ids

Next insert two more  formula segments and set the first to “Type” to “* Multiply” and the second “Type” to “Number”. In the Number “Value” field add “199.99”.

simple number

Continue to move each part of the formula laid out above until the full formula has been added.

formula complete

Setup is complete, you can now switch to preview mode to see the calculator in action. In the next tutorial we will go over all of the settings and styling.

Alternative Input Method V1.1.0+

Formula Segments can now be condensed together by using the option “Custom Expression”. You can type out entire formulas in a single segment if you wrap import IDs with brackets ([input-quantity]).

condensed formula

Note: If you see errors reporting that any of the “Import Values” are missing, check for typos in the “Import IDs”. 

Settings & Styles

The Formula Stack has three major parts each with their own settings panels. Below we will go over the options found it each one.

settings breakdown

Formula

This settings panel is where you will find all of the style options (Calculator, Input Fields, and Output).

Calculator

Calculator Theme – Choose between 3 different Themes with limited customization options or  “Custom” which will enable more styling options.

Max Width – This sets the width of the Calculator. When the window width is smaller than the set value, the calculator will fill 100% of the width. When the width is greater than the set value the calculator will center itself in the available space.

Background – Set the background color of the the Calculator.

Border Style (Custom) – Change the display type of the Calculator border.

Border Color (Custom) – Individual color settings for each side of the border.

Border Width (Custom) – Individual width settings for each side of the border.

Border Radius (Custom) – Individual rounding settings for each corner of the Calculator.

Box Shadow (Custom) – Declare a shadow using four settings. “X” moves the shadow to the right with a positive value and to the left with a negative value. “Y” moves the shadow downward with a positive value and up with and negative value. “Blur” adjusts how sharp the shadow is, 0 means no blur, 10 means 10 pixels of blur. “Spread” adjust how large the shadow is, a positive value increases the size while a negative value decreases the size.

Shadow Color (Custom) – Set the color of the Shadow.

Input

Input Padding – Adjust how much space sits around the text inside the input field and to the inside of the input field’s border. “T – B” controls the top and bottom and “R – L” controls the right and left.

Font Family – Declare a custom font for the input. “inherit” will use whatever font the theme has set for the page.

Font – Set the font size and line height of the input field text. The “Line Height” value should be greater than the “Size” value.

Text – Individual color settings for the Input text, Labels, and Units.

Font Weight – Set the thickness of the Input text.

Input Bg (Custom) – Set the color of the input background.

Border Style (Custom) – Change the display type of the Input field.

Border Color (Custom) – Individual color settings for each side of the border.

Border Width (Custom) – Individual width settings for each side of the border.

Border Radius (Custom) – Individual rounding settings for each corner of the Input field.

Box Shadow (Custom) – Declare a shadow using four settings. “X” moves the shadow to the right with a positive value and to the left with a negative value. “Y” moves the shadow downward with a positive value and up with and negative value. “Blur” adjusts how sharp the shadow is, 0 means no blur, 10 means 10 pixels of blur. “Spread” adjust how large the shadow is, a positive value increases the size while a negative value decreases the size.

Shadow Color (Custom) – Set the color of the Shadow.

Output

Answer – Set where the outputted answer to the formula will display. “Show Answer / Calculator On / Calculator On” is default and will simply place the answer below the Calculator input. “Export Answer / Calculator On / Calculator On” will reveal more options and allow you to send the value to another Stack’s input field on the page. The last two options are meant to be used in conjunction when using multiple Formula Stacks on one page.  “No Answer / Calculator On / Formula Off” will remove the the output all together (this is useful if you want to display the outputted answer somewhere other than underneath the Calculator). “Show Answer / Calculator Off / Formula On” will only show the answer with no Calculator section (Use the Formula section to import values from another Formula Stack).

Decimal Places – Set how many decimal spaces show for the decimal value. Set this value to 0 to not show a decimal value.

Separators – Change the symbol used as a Decimal (9.99) with the first input and the symbol used to group the numbers (1,000,000) in the second input.

Labels – Add a prefix or postfixed label by typing a value into either input field.

Show Title – When enabled, the “Title” input value will display above the output answer.

Font Family – Declare a custom font for the output. “inherit” will use whatever font the theme has set for the page.

Font – Set the font size and line height of the outputted answer.

Text – Individual color settings for the Answer value, Prefix, and Postfix.

Font Weight – Set the thickness of the Answer.

Field # (Show in an External Field) – Add the numerical value of the field you want to export the answer to.

Help: Show Field # in Preview (Show in an External Field) –  Enable this option to see the numerical value of each of the external input fields found on your page while in preview mode. Locate the field you want to export to and copy the number into the “Field #” setting to have it display there. Make sure to disable this setting after obtaining the value you need.

Import Value

Import Values can be found in the Calculator section. Each Import Value has it’s own settings panel.

Settings

Type – There are six options to choose from, each will display a different input method. To learn more about the “Sub Formula” option, see the tutorial titled “Sub Formulas” below.

Import ID – Expects a unique ID. It should start with an alphabet and should only use [ a-z A-Z 0-9  _ – ] characters. This ID is then used to link this “Import Value” to a “Formula Segment”.

Min Value (Number Input & Slider) – The minimum value that can be entered into this field.

Max Value (Number Input & Slider) – The maximum value that can be entered into the field.

Default Value (Number Input & Slider) – The value that will display when the page is loaded.

Step (Slider) – The amount of steps the slider shifts by when moved left or right.

Text (Checkbox) – Add text that will display next to the checkbox.

Disabled Value (Checkbox) – The value imported into the formula when the checkbox is left unchecked.

Enabled Value (Checkbox) – The value imported into the formula when the checkbox is checked.

Start Enabled (Checkbox) – Enable this to have the checkbox start checked when the page is loaded.

Start Date Text (Date / Time Range) – Text displayed inside the start date field.

End Date Text (Date / Time Range) – Text displayed inside the end date field.

Language (Date / Time Range) –  Set the language the pop up calendar date selector will display in.

Date Format (Date / Time Range) – Set an order for the day, month, and year to display in.

Week Starts On (Date / Time Range) – Choose which day of the week the calendar week starts on.

Enable Sunday-Saturday (Date / Time Range) – Disable or enable certain days of the week. Disabled days are not able to be chosen by the form user.

Include Time (Date / Time Range) – Include a time picker next to the calendar date selector.

Time Format (Date / Time Range) – Select a format for the time display.

Allowed Times (Date / Time Range) – A comma separated list of available times to select. Times listed here will show up for both the start end date time pickers.

Output As (Date / Time Range) – Will change the value imported into the formula based either on days, hours, or minutes.

Styles

Columns – “Single / Full Width” will set the width of the Input Field to fill the full width of the Calculator. “Two /  50% Width” will only fill half of the width of the Calculator and is only useful if the following “Import Value” field is also set to the same to create two columns.

Input Widths – The max width the field will display at.

Labels

Show Label – Displays a label for the field.

Label (Show Label) – Text displayed above the “Import Value” input field.

Show Units – Displays units for the field.

Units (Show Units) – text that will display to the right of the “Import Value” input field. If the input field is too wide for the units to display, they will be moved below the input field instead.

Output

Output Dates to External Fields (Date / Time Range) – Will allow you to set numerical values to output the dates and times to external fields.

Start Field # (Date / Time Range) – Add the numerical value of the field you want to export the start date and time to. Only works if  “Output dates to External Fields” is enabled.

End Field # (Date / Time Range) – Add the numerical value of the field you want to export the end date and time to. Only works if  “Output dates to External Fields” is enabled.

Output Value to External Field – Outputs the difference in days, hours, or minutes to an external field.

Field # (Output Value to External Field ) – Add the numerical value of the field you want to export the answer to.

Help: Show Field # in Preview (Output Value to External Field ) –  Enable this option to see the numerical value of each of the external input fields found on your page while in preview mode. Locate the field you want to export to and copy the number into the “Field #” setting to have it display there. Make sure to disable this setting after obtaining the value you need.

Formula Segment

Type – Choose to import a value from one of the calculator fields or select a math symbol to use.

Import ID (Import Value) – Place the “Import ID” of the corresponding field that you want to add to the formula.

Value (Number) – A numerical value. Accepts decimals and negative values.

Expression (Custom Expression) – In this field you can add any of the supported math operators and or methods (listed in the “Formula Math” section below ). This field is also useful for condensing your formula.

Exporting Values to a Form

The Formula Stack allows you to export calculator values to 3rd-party form fields so they can be saved or used.

To do so, Click on the option “Output Value to External Field” in the “Import Value” settings panel. Then enable “Help: Show Field # in Preview”.

export to external field

Switch to preview mode and you will notice that all of the fields (excluding those found in the Calculator) have numerical values. Find the field you want to export to and copy it’s field number.

field numbers

Switch back to edit mode and change the value “Field #” (in the “Import Value” settings panel) to the number you copied. Now when ever the field in the Calculator is changed, that field will automatically update with the current value.

Sub Formulas V1.1.0+

The Import Value Stack includes a type named “Sub Formula”. This will allow you to create a formula just like in the main Formula section, but the answer will be stored inside of and import ID that you can then use in other formulas on the page. This is useful when you need to repeat parts of a formula. Below is a Mortgage payment calculator as and example of when it is useful.

mortgage formula

The mortgage formula when written in the Formula stack will appear as:

1+[principle] *((( [rate] /100/12)*(1+( [rate] /100/12))** [payments] )/((1+( [rate] /100/12))** [payments] -1))

percent rate year

When we collect the “rate” in the calculator it’s determined as a percentage based on year (I.E. 4%) but the formula calls for the rate based on month and as a decimal value. 4% becomes 0.003333333, and now you can see why it’s better to have the user provide the yearly rate instead of the monthly rate. To get from 4% to 0.00333333 you first need to change the percent value to a decimal by dividing by 100.

[percent-rate-year] /100

Then it needs to be converted from a yearly rate to a monthly one by dividing by 12, with the final formula segment appearing as below.

([percent-rate-year] /100/12)

This formula segment is placed inside the final formula everywhere the Mortgage formula calls for the rate, but we can create a “Sub Formula” out of it so that we can call it just like we call in other Imported values.

sub formula

You would simply add the formula segment to the “Sub Formula” just as you would add a formula to the main “Formula” section. Create an Import ID (This example simply calls it “rate”). Now instead of typing out the full monthly rate out each time its used we can simply use [rate].

sub formula example

Formula Math

Supported Operators

+ Addition

Example: 2+2 = 2

– Subtraction

Example: 2-2 = 0

/ Division

Example: 10/2 = 5

*  Multiplication

Example: 10*2 = 20

% Remainder

Example: 19%5 = 4

( ) Parenthesis

Example: 2*(5+5) = 20

** Power

Example: 2**4 = 16

PI Pie

Example: PI*1 = 3.14

Supported Comparisons V1.1.0+

 > Greater than

Less Than

 >= Greater than or equal to

<= Less than or equal to

Examples:

15 >= 10

Result: 1

15 < 20 

Result: 1

15 < 10

Result: 0

(15 > 20) * 99

Result: 0

(15 >= 10) * 99

Result: 99

(15 >= 10) * (15 < 20) * 99

Result: 99

(15 >= 10) * (15 < 12) * 99 

Result: 0

((15 >= 10) * (15 < 20) * 99 ) + ((15 >= 20) * (15 < 30) * 88 ) 

Result: 99

((25 >= 10) * (25 < 20) * 99 ) + ((25 >= 20) * (25 < 30) * 88 ) 

Result: 88

Supported Methods

abs(x) Returns the absolute value of x

Example: abs(-21) = 21

round(x) Returns the value of x rounded to its nearest integer

Example: round(1.3) = 1, round(1.8) = 2

ceil(x) Returns the value of x rounded up to its nearest integer

Example: ceil(1.3) = 2, ceil(1.8) = 2

floor(x) Returns the value of x rounded down to its nearest integer

Example: floor(1.8) = 1, floor(1.3) = 1

max(x, y, z, …, n) Returns the number with the highest value

Example: max(4, -23, 7, 0) = 7

min(x, y, z, …, n) Returns the number with the lowest value

Example: min(4, -23, 7, 0) = -23

sqrt(x) Returns the square root of x

Example: sqrt(16) = 4

Supported Advanced Methods

random(1) Returns a random number between 0 and 1

cos(x) Returns the cosine of x (x is in radians)

sin(x) Returns the sine of x (x is in radians)

tan(x) Returns the tangent of an angle

log(x) Returns the natural logarithm (base E) of x

acos(x) Returns the arccosine of x, in radians

asin(x) Returns the arcsine of x, in radians

atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians

atan2(y, x) Returns the arctangent of the quotient of its arguments

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

Overlay Menu

Description

A stunning and fully customizable overlay dropdown menu triggered by a menu toggle. Use Rapidweaver’s built in menu, or create your own custom menus. Style to your hearts content with a wide variety of styling, sizing, and layout options.


Tutorial Overview

  • Getting Started
  • Basic Setup
  • Settings
    • General
    • Menu
    • Dropdown Icons
    • Top Level Menu Items
    • Sub Level Menu Items
    • Menu Toggle
    • Advanced
    • Experimental
  • Extra Menu Toggle Stack (included)

Getting Started

Let’s get started using the Overlay Menu.

Here you’ll learn how to get the menu up-and-running on your web-page.

Don’t worry, it’s suuuper easy! (Drag and drop)

( p.s. if you already now how to download and install, just skip to step 3 )

Step 1

Purchase the Overlay Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the Overlay_Menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called Overlay_Menu.stack, double-click on this file to install the stack into Rapidweaver.

Step 3

Now all you need to do is search for the stack in the Stack Library, e.g. “overlay menu” and then Drag and Drop it onto your page

That’s it!

We’ve included great presets that allow your menu to work right away, as soon as you place it on the page.


Settings

Here we’ll go over all of the settings included with the Overlay Menu.

General Settings

  • Options
    • Unique Menu ID
    • Use Custom List

Unique Menu ID ( INPUT )

The Unique Menu ID will provide your menu with a specific ID that will help distinguish if from other Overlay Menu’s on the page.

It can also be used to connect your Overlay Menu to extra menu toggles using the included Overlay Menu Extra Toggle stack.

NOTE: If you only plan on using one Overlay Menu on your page, you don’t need to do anything with this value. By default the Overlay Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

By default the Overlay Menu stack will use your Rapidweaver site menu.

This option can be used if you do not want to use your Rapidweaver menu, and instead want to create your own custom dropdown menu, with your own links.

If you check this option, you will see a dropdown list that will allow you to choose between:

  • Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Markdown is quick and easy, while HTML can be used to create more advanced menus.

Don’t know anything about HTML or Markdown???

Not to worry, If you check the option, you will see that we’ve also provided a default menu example in the input field. Just copy the format and you’ll be good to go! ^^


  • Options
    • Font Family
    • Menu Fill Mode
    • Overlay Opacity
    • Background

Font family ( SELECT MENU )

Simply allows you to choose a font for your menu from a list of included presets. We’ve chosen some of the top fonts on the web.

This option allows you to choose the maximum width of your menu.

You can choose to have it Fill the page, or you can use Pixel / Percentage based widths.

Your menu will automatically default to fill the page on mobile devices and tablets, no matter what fill option you choose.

Overlay Opacity ( SLIDER )

Here you can set the opacity of your Overlay Menu’s background. Set it to 1.0 to make the menu fully opaque, or set it to a lower value to make it transparent.

By Default, it is set to 0.8 (slightly transparent)

Background ( SELECT MENU )

This is where you can set the background of your menu. You can choose between

  • None
  • Solid Color
  • Gradient
  • Image

The Options are fairly standard and easy to setup.

One thing to note is that the IMAGE BACKGROUND has a special image cover, for images that might make text harder to read.

This image cover is simply a color option with the ability to change the opacity. Increase or decrease the opacity depending on your image, and how visible your menu text is.


  • Options
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Open & Close Icons

You can choose an icon for your dropdown Open state, and Close state.

Open is the default state, You should choose icons that tell the user to click on the link to open a dropdown.

Close is the icon that will show when a dropdown link is clicked. This icon should tell the user that he/she can close the menu.

You can select which icon font you would like to use for each icon. We’ve included icons from Google Material Icons, Fontawesome, and Iconicons.

You also need to type in the proper Icon code for the icont you want to use.

NOTE: Due to the way each icon font works, there is a different icon code format depending on which font you use.

Google Material Icon Format: account_circle (lowercase, use underscores _ to separate words)

See all Material Icons here: Offical Material Icon site

Fontawesome Icon Format: arrow-circle-down (lowercase, use dashes – to separate words)

No need to add “fa fa-“, just type in the specific icon code. We handle the rest.

See all Fontawesome Icons here: Offical Fontawesome site

Ionicon Icon Format: ion-arrow-down-b (lowercase, use dashes – to separate words)

With Ionicons, you must include the “ion-” before the code. Their site is set up this way, so you can easily copy and paste the codes directly.

See all Ionic Icons here: Offical Ionicon site

Rotate

You can use the rotation option to make your icon rotate once a dropdown list is opened.

This is handy for rotating plus symbols ( + ) into ( x ) symbols, or rotating down-arrows into up-arrows.

To achieve such an affect, set both the open AND close icons to the same value, e.g. a plus ( + ) or a down-arrow, and then set the rotate to something like 45 or 180(degrees).

( + ) to ( x ) = 45deg

( keyboard_arrow_down ) to ( keyboard_arrow_up ) = 180deg


Top Level Menu Item Settings

  • Options
    • Font size
    • Padding
    • Vertical Spacing
    • Ra dius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are very straight forward. I recommend playing around with them to see what happens. If you change them, the menu preview with update too, so you can easily tweak your menu and see the changes right away!

One thing to note is the Vertical Spacing.

This input will determine the amount of vertical space between all menu items in the list.


Sub Level Menu Item Settings

  • Options
    • Font size
    • Use Top Level Color Styles (Checkbox)
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are nearly the same as the top level items, with the exception of padding, vertical spacing, and radius. These styles are shared with the top level menu items.

Note: By default sub level menu items with share there color values (text color, background, etc.) with top level menu items

If you want to use custom color styles for sub level items, uncheck the Use Top Level Color Styles checkbox.


  • Options
    • Show Toggle Text (Checkbox)
    • Show Toggle Icon (Checkbox)
    • Text Font
    • Text (input)
    • Text Font Size
    • Icon Font
    • Icon Code (input)
    • Icon Size
    • Fill Mode
    • Position
    • Vertical Align (Fixed Menus only)
    • Horizontal Align
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background
    • Border
    • shadow

For the most part, the Menu Toggle Settings are straightforward and easy to use. Play around with them and checkout the preview in settings to see the changes directly.

There are a just few options that are important to understand:

Show Toggle Text ( CHECKBOX )

Unchecking this option will hide the text of the toggle button, leaving only the icon

Show Toggle ICON ( CHECKBOX )

Unchecking this option will hide the icon of the toggle button, leaving only the text

Position ( SELECT MENU )

There are two positioning options to choose from with the Overlay Menu Toggle

Inline or Fixed

Fixed:

By default, the toggle is fixed, meaning it scrolls with the page.

When this option is selected, you can choose the Vertical (top, bottom) and Horizontal (left, right, center) alignment.

Use the margin settings to adjust the spacing of your toggle when fixed.

Inline:

If you select the inline option, your menu will stay inline with the content. You can still set the Horizontal alignment (left, right, center) to make your toggle fit just right.


Advanced Settings

  • Options
    • Show Data ID Info

As a really cool bonus feature, you can use ANY clickable html element to open up your Overlay Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="overlay_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Overlay Menu’s Unique ID value.

Then, just add the data attribute to a clickable HTML element, such as a link, button, etc.

here are some examples

<a href="#" data-id="overlay_menu_UNIQUE_MENU_ID"> Open my menu </a>

<button data-id="overlay_menu_UNIQUE_MENU_ID"> Open my menu </button>

If you check “Show data ID info” option, a snippet of your exact data-id code (including your unique ID) will show at the top of the stack in edit mode. This makes it really easy for copying and pasting the code for use.

You’re welcome. ^_-


Experimental Settings

  • Options
    • Replace Theme Menu

Due to popular request, we’ve developed an experimental feature that is meant to hide your themes default menu, to use the Overlay Menu instead!

Simply check the “Replace Theme Menu” option, and the magic will take place.

NOTE: This feature is experimental, and may not work with all themes.


Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Overlay Menu. Of course, each Overlay Menu has a default toggle already included, but we’ve also included a sub-stack called the Overlay Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Overlay Menus Unique Menu ID to the Connected ID setting of the Extra Toggle stack. You’ll see it at the very top of the settings panel, in the General Section.

Paste your Overlay Menus Unique ID here, and voila! You now have an extra toggle that will open your menu.

The settings for the Extra Menu Toggle sub-stack are extactly the same as the Menu Toggle settings for the Overlay Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment

Hoooraah!

You’ve made it to the end of the tutorial. You’re a beast!

Not to mention you can now create amazing menus for your website~~ ^_-

Go crazy and make something awesome. Feel free to share your menus on our Facebook page

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

Action Menu

#1 Getting Started

  • Download & Install
  • Drag the ActionMenu Stack onto a stacks page
  • Configure your menu options
  • Add Items and links
  • Done

Download & Install

Purchase the stack here and install it into Rapid Weaver

Drag the ActionMenu Stack onto a stacks page

Open up the Library in Rapid Weaver and search for the ActionMenu Stack

Click and Drag the ActionMenu Stack onto a Stacks page

Configure your menu options

By default, ActionMenu will work automatically as soon as you drag it on to the page. The default settings have been carefully chosen to make your menu look as nice as possible, with no initial setup.

If you do want to make some adustments or changes, follow the Instructions Below to configure your menus settings.

Now all you have to do is click on the Add button, (the one with the + symbol) to add items to your menu

Peace of cake!

Thats it!

Getting started is literally as simple as clicking and dragging the stack onto the page, and then clicking the add button to create menu items.

#2 Action Menu Settings

  • General
    • Open on start
    • Show background overlay
    • Orientation
    • Distance
    • Animation Speed

Open on start

Marking this option will make your menu open by default when the page is loaded. If not checked, the menu will be closed initially.

Show Background Overlay

Checking this option will make an overlay background display when your menu is opened. By default this option is un-checked. But in some cases you might want a background overlay to make your menu pop out to the user.

After checking this option you will see that you can also set the Overlay Color and Overlay Opacity

Orientation

These options allow you to position your menu on the page. You can position it vertically on the top or bottom, or horiztonally on the left or right

The items and links will automatically adapt to the orientation you choose, no need for extra setup. ^_^ (Awesome sauce)

Distance

The distance options will determine how far from the edge of the page your menu will be place. You can set both a vertical and horizontal distance.

For example setting a vertical distance of 30px and a horizontal distance of 30px, will display your menu 30px from the top/bottom of the page and 30px from the left/right, depending on your orientation.

Animation Speed

The animation speed option is simply for making the menu items pop-up more quickly or slowly. The default setting is nearly perfect (^_-), but we’ve included the option just in case.

————————

  • Main Toggle
    • Hide Toggle Icon
    • Rotate Toggle Icon
    • Background
    • Icon
    • Size
    • Radius

Hide Toggle Icon

Checking this option will hide the icon in the toggle section. This is useful when wanting to use an image for the background.

Rotate Toggle Icon

By default the toggle icon will rotate when opened. This adds a nice effect. Although, in some cases (like when using image backgrounds ; ] ) you will not want this rotation to occur. If so, check this option.

Background

These settings will allow you to change the background of your menu toggle. There are four different options to choose from:

None, Solid Color, Gradient, Image

Icon

There are a few options for editing your menu toggles icon.

Icon Color Icon Font Icon Code (Which Icon you will use)

First, you can set the color of your Icon, next choose which icon font you want to use, and finally enter the icon code for the icon you desire.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( – ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Toggle Size

These options will allow you to adjust the size of your Menu Toggle and the Toggle Icon inside of it.

Toggle Radius

The slider allows you to adjust the corners of your Menu Toggle, you can set it to be completely circular, rounded, or completely square.

————————

  • All Items
    • Item size
    • Item Icon Size
    • Item Spacing
    • Item Radius

Item Size

This option will set the size for all of the Menu Items in your Action Menu. The items are all meant to be the same size for aesthetic reasons. Plus, it’s easier to set up. : )

Item Icon Size

This option will set the size for all of the Icons in your Menu Items. These are also all the same size, to fit properly with the item size that you choose.

Item Spacing

Adjusting this value will change the amount of space between each menu item. You can increase or decrease the space accordingly.

Item Radius

This slider option will allow you to adjust the corner radius of all menu items. Similar to the menu toggle, you can make it completely circular, rounded, or completely square.

————————

  • All Links
    • Always Show Links
    • Link Text Color
    • Link Background

All options in this section will change every Item Link in your menu.

Checking this option will make it the Item Links display all the time. By default they are hidden and only display when hovering over a menu item.

Link Text Color

This value simply changes the color of the text inside the Item Link area.

Link Background

There are a few different styles to choose from when it comes to link backgrounds. You can choose either none, a Solid Color, or a Shadow.

None:

This will display no background behind the Item Link.

Solid Color:

This will display one solide color behind the Item Link.

Shadow:

This will display a drop-shadow behind the link, giving it a floating affect. (It’s pretty sweet!)

 #3 Individual Action Menu Item Settings

These are the options for each individual Menu Item that you add.

  • General
    • Hide Icon
    • Hide Box Shadow
    • Item Link
    • Item Background
    • Item Icon Color
    • Item Icon Font & Icon Code

Hide Icon

This option allows you to hide the icon inside of the Menu Item. Useful when you want to use a background image.

Hide Box Shadow

Checking this option will hide the box-shadow behind the Menu Item when being hovered. This is usefull when you want to use matching background colors for your Menu Item and your Item Links. It gives them a nice blend affect.

Here is where you will add the URL that you would like your Menu Item to link to. You can set it to anything using Rapid Weavers link interface, including pages from your own site, or external web pages. (^o^)/ Incredible!

Item background

These settings allow you to change the background for the individual Menu Item. You can choose between None, Solid Color, Gradient, or Background Image

Item Icon Color

This value simple changes the color of the Icon inside of the Menu Item

Item Icon Font & Icon Code

Here you can specificy the Icon Font (Google Material, Fontawesome, or Ionicons), and then enter the icon code for the specific icon that you would like to use.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( – ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Hoorah!

You made it! Now you are able to harness the true power of this incredibly simple, yet practical stack, the ACTION MENU

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

Heroic Banner

Setup

1. Add the Stack to the Stack’s Editor.

stack added

2. If you intend to use an image, add an image to the Background Image field in the Stack’s settings panel under the heading “Background”.

background image

3. Add your desired content to the “Drop stacks here” section. This content will appear in front of the background image.

4. Change the Background Padding values to increase or decrease the size of the background area. This is the area where the Background Image displays. The Margin values are optional and only effect the space between the background area and the surrounding content outside of the Stack.

padding

5. Select a Preset value for the effect you want to use.

preset

By default the Preset option is set to “Auto – Animation”, “Auto” means that this preset animates automatically without the user having to do anything, “Mouse” means the effect relies on the position of the mouse, and “Scroll” means the effect relies on the position of the scroll bar. Of the 8 choices, most modes do not require any additional setup unless you wish to customize how it works.

General Customization

Image Size

You can adjust how the background image fits by changing this value.

  • Cover – Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
  • Contain – Scale the image to the largest size such that both its width and its height can fit inside the content area
  • Fit to Width – Scale the background image so that the left and right sides of the image fit to the width of background area. The left and right of the image will always be visible. The image may be cropped vertically or the image may repeat in the vertical direction, depending on the size.
  • Fit to Height – Scale the background image so that the top and bottom of the image fits the height of background area. The top and bottom of the image will always be visible. The image may be cropped horizontally or the image may repeat in the horizontal direction, depending on the size.
  • Actual Size – The image will not be scaled and will display at it actually resolution. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is good for patterns.
  • Use Custom Size – Declare a set height and width of the image. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is for more advanced users and is also good for patterns.

Content Background Color

This adjusts the color of the content inside of the background area. This color value supports opacity.

Content Padding

Increase or decrease the area between the content and the edges of the Content Background.

Max Width

Set a maximum width in pixels that the content can be. The content will be centered when the width of the browser or containing element is larger than the set amount.

Border

A set of options to control the border and border radius of the content.

Shadow

A set of options to add a box shadow to the content.

Preset Specific Customization

Auto – Animation: Direction

Change the direction the image animates.

Auto – Animation: Animation Speed

Increasing this value causes the animation to move more quickly.

Auto – Gradient: Colors 1 & 2

These set the color of the gradient inside of the background area. The color values support opacity, especially useful when also using a background image.

Auto – Gradient: Stop Points

Adjust at what point colors 1 & 2 overlap.

Auto – Gradient: Orientation

Change the direction or shape of the gradient.

Auto – Gradient: Animate Gradient

Enabled by default, this option makes the gradient transition from color 1 to color 2 and back continually.

Auto – Gradient: Animation Speed

Adjust how quickly Animate Gradient transitions between colors.

Mouse – 3D Parallax: Z position

Adjust how far away from the background the content sits in 3D space. A higher value brings the content closer to the screen.

Scroll – Frosted Glass: Blur Amount

Adjust how much blur is applied to the transparent content. Note: the content must have an opacity value lower than 90% to display.

Scroll – Parallax: Parallax Speed

Adjust how fast or slow the background image moves in relation to the browser’s scroll speed.

Scroll – Transition: Switch Point

Adjust how far from the top of the browser the stack should be before it fades the background image out and the transtion image in. Setting the value to 1px will mean the image will not transtion until the stack is 1px away from the top of the browser window.

Scroll – Transition: Animation Speed

Change how fast the image blurs out and in.

Scroll – Transition: Transtion Image

Set an image to transtion to whens the Switch Point has been reached.

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