Quick Editor Admin

Setup

  1. Add the stack to any page you want the text and images to be editable on.
  2. In the stack’s settings menu, create a username and password for login.
  3. Preview the site in a browser or upload your site and in the browser address bar add ?admin to the end of the address. Press enter/return to load the the login screen for that specific page. Once logged in you will be able to edit any text or images found on that page. *This excludes any content that is not already available on page load. Stacks or plugins that append content after load will not be editable.

Restricting the editor to specific regions or stacks

You can specify what content is editable by adding the included Quick Editor Admin Wrapper stack to your page. In the wrapper stack’s settings “Wrapper type” is set to “Editable content” by default. Any text or images placed inside this stack will be editable. If the wrapper stack is placed on the page with this wrapper type enabled, all content not found inside this (or any other wrapper stack set to “Editable content”) will not be editable.

If you would rather specify which areas are not editable you may switch the “Wrapper type” to “Noneditable content”. The wrapper stack also include two more types. “Admin only content” will set anything placed inside the stack to only be visible in the admin or editor. “Admin hidden content” will hide the content when in the admin or editor and will show the content to page visitors only.

Editor toolbar breakdown

The toolbar can be moved around by clicking and dragging the handle found at the top (three dots).

List of options from left to right, top to bottom:

Bold  Adds a <strong> tag to the selected text.

Italicize Adds an <em> tag to the selected text.

Link Adds a link to the selected text.

Align text left, center, right Aligns the text of the selected element

Heading 1-3 Changes the tag of the selected element into the corresponding <h> tag

Heading 4 Changes the tag of the selected element into a <h4> tag

Paragraph Changes the tag of the selected element into a <p> tag

Loose text Changes the tag of the selected element into a <span> tag

List Changes the tag of the selected element into a <ul> tag. Pressing enter/return will add new <li> items.

Ordered list Changes the tag of the selected element into a <ol> tag. Pressing enter/return will add new <li> items.

Table Opens a table dialog that allows you to create a table to insert below the selected element.

Indent Lowers the level of the selected list’s <li> items.

Unindent Increases the level of the selected list’s <li> items.

Line break Adds a line break to the end of the selected element. Any text added after will still be apart of the same element. If you wish to create a new element, hit enter/return to create a new element.

Insert image Opens a dialog to upload and insert a new image.

Insert video link Opens a dialog to embed a video by URL.

Preformatted Changes the tag of the selected element into a <pre> tag.

Undo

Redo

Delete

Advanced: Editing element attributes/properties

At the bottom of the editor you will se a purple tag that represents whatever element you have selected.

Clicking on this tag will open a popup menu with some additional advanced settings. In this menu you can click the gear icon to add or edit the element’s attributes/properties in name value pairs. You can add classes, an id, alt tag, or any other element attribute. Press enter/return after adding a value to add another attribute.

Advanced: Editing the element’s HTML

At the bottom of the editor, click on the purple tag for the selected element to open a popup menu with some additional advanced settings. Click the “</>” icon to see the html in an editable format.

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

Layouts

Stack settings

Layouts (Main stack)

Column count – The amount of columns that will appear on one row. This value should be set higher if you wish to create mixed column widths. The inner column stacks width are set by units based on this value.

Gutter – The space between the columns in pixels.

Row max-width – Optionally declare a maximum width to the content. This option is useful when used with the included Blank theme or inside of a stacks framework.

Match browser height – Optionally force the minimum width of the section to match the browser height by percentage.

Layouts Item (Column stack)

Content – Choose between 4 options. “Column” is default and can contain all other stacks inside it. “Row” is like column but will automatically fill an entire row regardless of what column width is set for the stack. “Heading” is a quick add option if you would like to add a header stack. The contents of this stack can be edited as styled text (color, text alignment, etc) unlike the built-in header stack. “Text” is a quick add option if you would like to add a styled text stack.

Sub columns / Column count – Like the “Column count” setting in the main stack, this will set the amount of sub columns that appear on one row. If this value is above 1 it will also add an additional setting found in the “Responsive” section (detailed below).. Note: If the value is increased above the default, the content will reset, be sure to add your content after setting this value.

Gutter -Like the “Gutter” setting in the main stack, this adjusts the space between the sub columns in pixels.

Column width – Set the width of the column in units based on the “Column count” in the main stack. If this value is 0, it will automatically fill an entire row’s width, this is useful when creating headings. If the main stack “Column count” is 3, setting this value to 2 would take up 2/3 of the width of the row. If the main stack “Column count” is 6, setting this value to 2 would take up 2/6 or 1/3 of the width of the row. Setting a high column count on the main stack is useful for creating more detailed column widths.

Vertical Align – This sets how the column’s content aligns to the other columns in the row. This option is also useful for centering content in the middle of the screen when the main stack is using “Match browser height”.

Responsive: Behavior – This setting is only enabled when the column stack “Sub columns” or “Column count” is greater than 1. It will allow you to declare custom behavior for the columns contained in this stack. “Off” is default and will keep the column count the same no mater what width the browser is. “Auto” will adjust the contents automatically for each device. “Custom” will allow you to set a custom column count for each device. “Advanced” allows you to create even more advanced layouts as well as set a different layout for each device.

Using the advanced responsive behavior setting

Enable advanced responsive behavior

The “Behavior” setting is only enabled if the column stack (Layouts Item) column count or sub column count is above 1.

When the responsive behavior is set to “Advanced” you are presented with 4 input fields. Each field controls the layout for a different device. When advanced is selected the sub column or column count is ignored and the “Desktop” field now controls the column count. By default, the fields use “fr” units, we will refer to these units as fractions. 1fr = 1 fraction.

Using fractions widths

Each device field allows you to set custom widths for each column in a row. Each width should be declared in a pixel value (200px) or as a fraction (1fr) separated by a space. The more widths you declare the more columns a row will have. The value “1fr 1fr 1fr” will translate to 3 columns, each will be 1 fraction of the width of the row, this means you will have 3 evenly wide columns.

You can increase the value of the fr units to increase the width of a single column. The value “1fr 2fr 1fr” will translate to 3 columns with the center column being twice as wide as the left and right columns.

To calculate the width of a column just divide the value by the total fr units added up. The value “5fr 4fr 3fr 2fr 1fr” will translate to 5 columns with varying widths. If you add all of the fractions up you will get 15. This means the first column will be 5/15 (or 1/3) the width of the row. The remaining column widths in order will be: 4/15, 3/15 (or 1/5), 2/15, 1/15 wide.

Using pixel widths 

You are not limited to using fractions. If you need a column to be a specific width you can use a pixel value instead. The value “200px 1fr 1fr” will translate to 3 columns with the first column being exactly 200 pixels wide while the last two column are 1 fraction of the remaining space (which calculates to the last two columns being 1/2 of the remaining space each).

Each column can have a pixel width, but you will always need to include at least one fraction value to maintain responsive behavior. Each device field can have a different value, just keep in mind as you go down the fields you will have less and less room to play with.

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

Restrict Content

Stack settings

Restriction Settings

Content type – All content placed inside of the “Drop stacks here” section of the stack will be automatically converted into a single image. The content you place inside this section is not able to be interacted with and the HTML and CSS is also not inspectable by your page visitors. Use this option to add additional layers of restriction.
Add blur – Adds settings to allow you to degrade the quality or completely blur the content.
Gradient fade out – Will fade half of the content out towards the bottom.
Add watermark – Adds settings to allow you to add a custom watermark over your content.

Blur – Value in pixels that adjust how strong the blur effect is. Use small amounts 1-5px to degrade the quality of an image and large amounts to completely hide or censor your content.

Image watermark – This image will be placed over the top of your content. If a visitor downloads the image, your watermark will be on the image. Watermarks are removed if the content is unlocked.

Image size – Select how you want your watermark to cover your image.

Position – Select a position for your watermark.

Opacity – Adjust how visible your watermark is, a lower percentage is best if you do not want to obstruct the content.

Repeat – Optionally repeat the image in both the x and y directions to cover the entire content section. Note: this option only effects the image watermark.

Text watermark – Add a text watermark over your content. This field should be left blank if you are opting to use a image watermark instead. Text watermarks automatically repeat and cover the entire content section. Watermarks are removed if the content is unlocked.

Text size – Adjust the font size of the watermark text.

Text color – Change the color of the watermark text. Note: The opacity setting also effects the text watermark.

Enable call to action – Optionally add content over the top of your restricted content. When enabled, a new “Drop stacks here” section will display below the locked content section in the stacks editor. This section is able to be interacted with by page visitors. If the content is unlocked, the call to action section is removed.

Unlock Settings

Allow Access – Optionally allow page visitors to unlock the content. Once the content is unlocked it will be presented just as you have created it in the stacks editor. Visitors will have full access to the content.
With password – Set a password to allow users to unlock your content.
With confirmation button – Place a button or link on the page that will allow page visitors to unlock your content.

Password – place the password you want your visitor’s to use here. The password is case-sensitive.

Allowed attempts – The amount of password attempts a visitor has. If they input a password wrong this many times they will be locked out for a time.

Placeholder text – The text inside of the password field until it has been clicked on or selected.

Invalid text – What is shown when an incorrect password is provided.

Failed text – What is shown when someone has been locked out for too many failed attempts.

Field position – Select where you want the password field to display.

Show password field on hover – When enabled, the password field will only be visible when the content is hovered or selected.

Enable light-box on image – When the content has been unlocked, this option will add a simple light-box effect to all images inside the content.

How to create a confirmation button or link

After setting the “Allow access” settings to confirmation button, some info will display below the stack in the editor. There you will see some values you need to use as well as some instructions on how to create a link or button.

  1. In this example we will be using Stacks’ built-in button. You can add the button anywhere on the stacks page.
  2. In the button’s settings panel select the “Set link” button. In the window that opens add any value after the “#” (Example: #unlock). Note: If this anchor tag is left blank, the browser will jump back to the top of the webpage when the link is clicked. 
  3. Click the “+” button to add a new attribute. In the “Name” column add class and in the “Value” column add the value that is provided in the instructions below the stack in the stacks editor. Do not forget to add the underscores “_” and do not add any spaces.
  4. Click “Set link” to finish. When this button is clicked, the content of the associated stack will automatically be converted into HTML. Visitors will have full access to the content.

How to support iframe videos/content

Iframe content cannot be converted into a canvas image so iframes will show up blank until the content is unlocked. There is a work around however, you can create a thumbnail image or screenshot of the video player to serve as a placeholder until the content is unlocked.

After you have created a thumbnail, set the “Content type” to add a watermark. Place the image in the “Image watermark” setting and then set the opacity to 100%.

 

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

Assemble

Setup

settings

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

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

Settings Panel

Type: Choose between 17 different animations.

Speed: Adjust the animation speed in milliseconds.

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

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

Target Mode:

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

Filter Grid

Grid

Hide Grid Tags

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

Max Width

The maximum width of the grid

Columns

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

Col Min Height

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

Gutter

The amount of space inbetween grid items

Tag Block

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

Tooltip Text

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

Tooltip Radius

The corner roundness of the tag block tooltps.

Tooltip Padding

The amount of padding around the tooltip text.


Select Text (Select All/ Deselect All)

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

Width

Sets the width of the dropdown toggle

Text

Sets the font size of the dropdown toggle main title text

Icon

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

Radius

Sets the corner roundness of the dropdown toggle.

Padding

Sets the inner padding of the dropdown toggle.


Max Width

Sets the maximum width of the dropdown list

Radius

Sets the corner roundness of the dropdown list

Text

Sets the font size of the dropdown list items

Radio

Sets the size of the dropdown list item radio buttons

Color Blocks

Sets the size of the dropdown list item color blocks

Color Radius

Sets the corner roundness of the color blocks

Padding

Sets the inner padding of the dropdown menu list items


Colors & Fonts

List Item Font

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

Toggle (Text & Background)

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

Item Text (Initial & Hover)

Set the color of the dropdown list item text

Item Background (Initial & Hover)

Set the background color of the dropdown list item text

Item Radio (Initial & Hover)

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

Tool Tip (Text & Background)

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

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

Swoop

General

Max Width

Sets the maximum width of the slider

Min Height

Sets the minimum height of the slider

Radius

Sets the corner roundess of the slider

Responsive Point

The responsive pixel breakpoint


Nav

Max Width

Sets the maximum width of the nav section on the left

Padding

Sets the inner padding of hte navigation section

Item Size

Sets the font size of the nav item text

Item Font

Sets the font family for the nav item text

Item Padding

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

Item Blur

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

Arrow

Sets the size of the navigation arrow button

Arrow Icons

Sets the size of the navigation arrow icons

Arrow Radius

Sets the corner roundness of the navigation arrow buttons


Content

Padding

Sets the inner padding of the content sections

Header Font

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

Text Font

Sets the font family for all text in the content section


Stack Colors

Nav Item

Sets the text color of the nav items

Arrow BG

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

Arrow Icons

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

Nav Background

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

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

Content Background

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

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

Custom Styles

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

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

Split

General

Radius

The corner roundness of the entire stack

Max Width

The maximum width of the entire stack

Mobile Points

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

Responsive Point

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

Split Items

Auto Shrink Width (Checkbox)

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

Shrink Widths (Desktop, Tablet, Mobile)

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

Min Height (Desktop, Tablet, Mobile)

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

Padding

The inner padding of the split item panels

Content Width

The maximum width of the inner content container

Titles (Desktop, Tablet, Mobile)

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

Title Spacing

The amount of space below the titles

Title Font

Select a font for the titles

Descriptions (Desktop, Tablet, Mobile)

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

Description Spacing

The amount of space below the Descriptions

Description Font

Select a font for the descriptions

Icons (Desktop, Tablet, Mobile)

Here you can set the size of the icons

Icon BGs (Desktop, Tablet, Mobile)

The size of the background surrounding the icons

Icon Radius (Desktop, Tablet, Mobile)

The corner roundness of the icon backgrounds

Icon Spacing

The amount of space below the icon backgrounds

Button Text

The font size of the button text

Button Radius

The corner roundness of the split item buttons

Button Padding

The inner padding of the split item buttons

Button Font

Select a font for the split item buttons

Advanced

Disclude Google Fonts

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

Individual Item Options

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

Text Align

The text alignment of the particular split item

Vertical Align

The vertical alignment of the content inside of the split item

Horizontal Align

The horizontal alignment of the content inside of the split item

Colors

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

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

Fix

General

Z-index

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

Radius

Controls the corner roundness of the stack

Max Width

Sets the maximum width that the stack can expand

Breakpoint

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

Columns

Determines the number of columns to display on Tablet and Mobile

Gutters

Determmines the amount of space inbetween items

Fix Items

Radius

Sets the corner roundness of the fix items

Padding

Sets the inner padding of the fix items

Text Size (Desktop, Tablet, Mobile)

Sets the text font size for all device sizes

Icon Size (Desktop, Tablet, Mobile)

Sets the fix item icon size for all device sizes

Icon Spacing

Adjusts the amount of spacing between fix items

Mobile Header

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

Text Size

The font size of the Menu Title

Icon Size

The font size of the toggle icon

Padding

The inner padding of the menu toggle

Stack Colors

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

Background (Main Background)

Here you can set the main background of the fix menu

Items Background (Initial & Hover)

Sets the background color of fix items on initial and hover

Item Icons (Initial & Hover)

Sets the item icon colors for initial and hover states

Item Text (Initial & Hover)

Sets the item text colors on initial and hover states

Mobile Header

Sets the background and text color of the mobile header toggle

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

Rotate

General

Autoplay (Checkbox)

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

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

Alignment (Horizontal)

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

Max Width

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

Content Width

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

Min Height

Here you can set a minimum height for the rotater.

Radius

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

Padding

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

Rotate Items

Padding (Vertical & Horizontal)

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

Icon Size

This sets the size of the item icons

Icon Spacing

This adjusts the amount of space below the item icons

Text Size

This sets the size of the item text

Text Spacing

This adjusts the amount of space below the item text

Text Font

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

Btn Radius

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

Btn Text Size

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

Btn Padding (Vertical & Horizontal)

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

Btn Font

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

Colors

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

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

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

Main Icon

Here you can set the color of the Item Icons.

Main Text

Here you can set the color of the Item Text.

Action Btn Text (Initial & Hover)

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

Action Btn Background (Initial & Hover)

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

Background

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

Enjoy!

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

Assist

Toggle

Hide Text & Icon

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

Alignment

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

Icon Font

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

Padding (Vertical & Horizontal)

Radius

Controls the corner roundness of the toggle

Icon Size

Controls the font size of the icon

Icon Spacing

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

Text Size

Controls the font size of the toggle text

Toggle Text & Toggle BG

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


List

Orientation

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

Max Width

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

Radius

This option simply controls the corner roundness of the menu.

Background

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

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient

List Items

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

Padding (Vertical & Horizontal)

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

Icon Size & Spacing

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

Text Size

This determines the font size of list item text.

Detail Text

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

Detail Padding

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

Close Icon

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

Icon Type

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

You can choose between:

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

Item Titles (Color)

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

Item Text (Initial & Hover)

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

Item Background (Initial & Hover)

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

Detail Colors

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

Back Icon Colors

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

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

Fifty Fifty Slider

General

Max Width

This option sets the maximum width of the slider

Min Height

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

Mobile Point

The point at which the slider becomes responsive

Radius

The corner roundness of the slider

Content Align

The vertical alignment of the slider content


Slides

Hide Titles, Text, Buttons

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

Title, Text Font

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

Padding (Vertical & Horizontal)

Sets the inner padding of the slide content section.

Title Size

The font size of the slide titles

Title Spacing

The amount of space below the slide titles

Text Size

The font size of the slide text

Text Spacing

The amount of space below the slide text

Button Text

The actual text content of the slide buttons

Button Size

The font size of the button text

Button Radius

The corner roundness of the slide buttons

Button Border

The thickness of the border around the slide buttons

Button Padding (Vertical & Horizontal)

The inner padding of the slide buttons

Image Mobile Height

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


Slide Navigation

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

Padding (Vertical & Horizontal)

The amount of padding around the navigation arrows and slide count

Count Size

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

Icon Size

The font size of the navigation arrows

Button Size

The width/height of the navigation arrow buttons

Button Radius

The corner roundness of the navigation buttons

Button Border

The border thickness of the navigation buttons

Button Spacing

The amount of space between the navigation buttons


Slide Colors

Title

The color of the slide titles

Text

The color of the slide text

Button Text (Initial & Hover)

The color of the action button text within each slide

Button Border (Initial & Hover)

The border color of the action button within each slide

Button Background (Initial & Hover)

The background color of the action button within each slide

The text color of the nav count

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

Background

The general background color of all slide

Setting Custom individual slide colors

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

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

Step

General

Maximum Width

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

Minimum Height

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

Radius

Sets the corner radius of the edges of the stack.

Mobile Point

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

Sidebar Width

Here you can set the sidebar width for desktop devices

Text Size

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

Text Padding

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

Sidebar Font

Here you can select a font family for the sidebar

Text Color (Initial & Active)

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

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

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

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

Steps

Padding

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

Step Count (Text & Number)

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

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

Count Text

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

Title Size

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

Text Size

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

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

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

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

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

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

You can edit this “Complete” text here.

Title, Text, Count FONTS

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

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

Count Colors (Text & Number)

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

Toggle Colors (Initial & Active)

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

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

Main Title

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

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

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

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

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

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

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

Completed Step

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

Completed Icon

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

Complete Title

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

Complete Description

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

Restart Icon & Button Sizes

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

Icon Color

Changes the color of the checkmark icon.

Title & Description Colors

Changes the text color of the title and description.

Restart Button (Icon & Background)

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

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

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

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

Feature Slider

General

Autoplay

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

Active Slide

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

Max Width

This specifies the maximum width of the slider

Min Height

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

Radius

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

Slides

Hide (Titles, Descriptions, Icons, Buttons)

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

  • Titles
  • Descriptions
  • Icons
  • Action Buttons

Fonts (Title, Description, Button)

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

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

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

Example Name: Open Sans


Title Size

This sets the font size for all slide titles

Title Max Width

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

Title Padding (Vertical & Horizontal)

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


Description Size

This sets the font size for all slide descriptions

Description Max Width

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

Description Padding (Vertical & Horizontal)

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


Icon Size

This sets the size for all slide icons

Icon Outer

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

Icon Radius

This sets the corner radius of the outer icon area

Icon Padding (Vertical & Horizontal)

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


Btn Text

This sets the font size of all action buttons

Btn Radius

This set the corner roundness of all action buttons

Btn Padding (Vetical & Horizotnal)

This sets the inner padding of the action buttons

Btn Content

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


Slide Colors

Title Color

Simply sets the text color of all titles

Description Color

Simply sets the text color of all descriptions

Icon Colors (Icon & Background)

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

Btn Colors (text & Background)

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

Background

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

  • Color
  • 2 Color Gradient
  • 3 Color Gradient

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

Setting individual Slide Colors

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

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

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

Arrow Size

Simply sets the font size of slide arrows

Padding (Vertical & Horizontal)

This controls the padding around the nav arrows and action buttons

Arrow Colors (Initial & Hover)

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

Overlay BG

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

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

Circle Menu

General

Open on start

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

Offset Items

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

Number of Items

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

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

Font Family

Choose the general font family for the menu here

Inherit Radius

Inherit Radius

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

Size

Sets the size of the toggle button

Icon size

Sets the size of the icon inside of the toggle button

Radius

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

Shadow

Allows you to set the shadow properties for the toggle button

Open Border

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

Icon Color

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

Background

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

Hover Background

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

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

Padding

Controls the inner padding of the menu

Outer Margin (Vertical & Horizontal)

Sets the spacing around the outside of the menu

Background

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

Round Icons

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

Button Size

Sets button the size of the menu items

Icon Size

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

Label Size

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

Hover Border

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

Icon & Label Color

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

Hover Border

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

Background

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

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

Article

General

Collapse in edit mode

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

Truncate description text

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

Max width

Determines the maximum width that the stack can stretch

Mobile Point

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

List Padding

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

List Radius

Controls the corner radius of the entire list.

Articles

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

Padding (Vertical & Horizontal)

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

Title Size

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

Title Weight

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

Title Font

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

Description Size

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

Description Font

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

Image Size

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

Image Radius

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

Image Spacing

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

Hide Info 1 & 2

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

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

Info Prefix 1 & 2

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

Info Size

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

Articles > Expanded

Max width

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

Padding (Vertical & Horizontal)

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

Title Size

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

Description Size

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

Image Size, Radius & Spacing

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

Content Text

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

Font Family

Here you can select a font for the article content.

Back Arrow Size

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

Colors

Title

The color of article titles

Description

The color of article description text

Info (Text & Highlight)

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

Divider Color

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

Content Headers

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

Content Text

The color of all general text in the content area.

The color of all links within in the content area.

Back Arrow

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

Image Icon (Initial & Hover)

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

Image Bacgkround

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

Main Background

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

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

Mega Menu

Getting Started

Mega Menu consists of 4 stacks total

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

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

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

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

Edit Mode

Collapse all in edit mode (checkbox)

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

General

Position

  • Fixed
  • Inline

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

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

Z-Index

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

Max width

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

Margin

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

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

Breakpoint

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

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

Item Text Size

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

Item Icon Size

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

Item Padding

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

Main Item Font

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

Mega Dropdowns

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

Content Align

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

Min Height

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

Column Padding

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

Item Padding

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

Link Size

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

Text Size

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

Title Size

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

Title Spacing

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

Title Weight

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

Title Case

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

Icon Spacing

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

Mega Dropdown Font

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

Header (Logo & Toggle)

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

Logo Size

The font size of the logo

Toggle Size

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

Colors

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

Logo Color

The color of the logo text.

Toggle Icon (Initial & Hover)

The color of the toggle icon on mobile devices

Toggle Background (Initial & Hover)

The background color of the toggle icon

Main Item Text (Intial & Hover)

The color of the top level items of the menu.

Main Item BG (Intial & Hover)

The background color of the top level items.

The color of Mega Menu Item links in mega dropdowns.

The color of Mega Menu Item Text in mega dropdowns.

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

Title Border

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

Thickness

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

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

  • A single color
  • A gradient (two colors)

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

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

Events

General

Toggles

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

Maximum Width

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

Wrapping Point

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

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

Responsive Breakpoints (Tablet & Mobile)

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

Events > General

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

Radius

This determines the corner roundness of each event card.

Margin (Vertical & horizontal)

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

Padding

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

Content Spacing

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

Title (Desktop, Tablet, & Mobile Sizes)

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

Title Weight

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

Description Size (Desktop, Tablet, & Mobile Sizes)

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

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

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

Font Family

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

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

Event > Dates

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

Date and time formatting codes can be found here:

Date & Time Format Codes

Top Format

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

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

Bottom Format

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

Min-width

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

Padding

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

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

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

Font Family

Here you can set the font family for the Dates

Events > Details

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

Toggle Text

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

Padding (Vertical & Horizontal)

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

Text Size

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

Font Family

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

Events > Colors

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

Title

The color the main title of the event

Description

The color the short description just below the main title

Info 1 & 2

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

Date Top

The color of the top date in the date section

Date Bottom

The color of the bottom date in the date section

Header Tags

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

Text

The general color of all text within the details section.

The genera color of all links within the details section.

Shadow Color

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

Background

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

  • None
  • Color
  • Gradient

Date Background

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

  • None
  • Color
  • Gradient

Details Background

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

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

Testimonials

General

Autoplay (Checkbox)

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

Max Width

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

Breakpoints

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

Connect Arrows (checkbox)

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

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

Align Vertical

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

Align Horizontal

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

Size

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

Icon Size

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

Radius

The radius controls the corner roundness of the arrow buttons.

Color

The color option controls the color of the arrow icons.

Background

The background option controls the color of the arrow buttons.

Hover Color

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

Hover Background

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

Cards

Min Height

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

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

Margin

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

Padding (Vertical & Horizontal)

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

Inner Padding (Padding around content)

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

Radius

The radius controls the corner roundness of the cards.

Background

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

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

Shadow

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

Cards > Content

Text Color

This controls the color of the actual testimonial text itself.

Text Size

This controls the font-size of the testimonial text.

You will find options for Desktop, Tablet, and Mobile

Text Align

This controls the horizontal alignment of the testimonial text.

Font Family

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

Hide Names

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

Name Color

This controls the color of the actual testimonial Names.

Name Size

This controls the font-size of the testimonial Names.

You will find options for Desktop, Tablet, and Mobile

Name Spacing

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

Name Align

This controls the horizontal alignment of the testimonial Names.

Font Family

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

Cards > Quotation Marks

Hide Left Quotation Mark

This option will hide the beginning quotation mark

Hide Right Quotation Mark

This option will hide the ending quotation mark

Orientation

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

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

Alignment

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

Color

This simply controls the color of the quotation marks

Size

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

You will find options for Desktop, Tablet, and Mobile

Bold Quotes

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

Cards > Images/Icons

Hide Images

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

Align Vertical

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

Offset

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

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

Align Horizontal

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

Size

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

You will find options for Desktop, Tablet, and Mobile

Spacing

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

Radius

This controls the corner roundness of the images

Icon Color

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

Background

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

Cards > Ratings

Hide Rating

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

Type (Stars / Hearts)

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

  • stars
  • hearts

Hopefully more icons will be added soon.

Align

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

Color

This simply sets the color of the stars/hearts

Size

This simply sets the size of the stars or hearts

Spacing

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

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

Simple Tabs

General

Max Width

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

Floating Pill Style

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

Connect Tabs

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

Active Tab

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

Tabs

Alignment

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

  • Left
  • Right
  • Center

Text Size

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

Icon Size

Determines the size of the icon inside of each tab

Spacing

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

Padding

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

Radius

Controls the corner roundness of each tab

Text

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

Background

Sets the background for all tabs

Active Text

Sets the color of the active tab

Active BG

Sets the background of the active tab

Tabs > Responsive

Breakpoints (Tablet & Mobile)

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

Columns

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

Hide Text

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

Hide Icons

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

Content

Padding

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

Radius

Controls the corner roundness of the content area

Text

Sets the color of the text within the content area

Background

Sets the background color of the content area

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

Link Drawer

Link Drawer Tutorial

General

Start Collapsed (checkbox)

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

Position (Dropdown)

Options:

  • Fixed
  • Inline

Fixed

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

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

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

Inline

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

Z-index

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

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

Max-width

This determines the maximum width for the drawer

Breakpoints

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

Columns

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

Drawer

Font Family (Dropdown)

This dropdown allows you to choose the font for Link Drawer

Outer Margin

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

Corner Radius

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

Border Weight & Color

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

Shadow (ON or OFF)

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

Background (Off, Color, Gradient, Image)

You can choose between 4 options for the Drawer background:

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

Items

Icon Size (Desktop, Tablet, Mobile)

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

Text Size (Desktop, Tablet, Mobile)

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

Icon Color (Initial & Hover)

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

Text Color (Initial & Hover)

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

Backgorund Color (Initial & Hover)

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

Border Color (Initial & Hover)

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

Gutters

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

Content Spacing

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

Padding

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

Radius

Determines the corner roundness for the Link Items.

Toggle

Hide Icon (checkbox)

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

Fill Mode (Full or Pixel)

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

Alignment

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

  • left
  • center
  • right

Height

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

Text (Open and Close text)

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

Icon Size (Open & Close icons)

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

Background (Initial & Hover)

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

Icon / Text

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

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