Boost Toolbar

Setup

Drag and drop the stack into the Stacks editor at the top of the page and make sure not to place it inside of another stack container (“drop stacks here” section).

From here, hardware acceleration is automatically enabled. If your page has a lot of content and you were experiencing stuttering and choppy movements, you should notice a boost in the performance. In the stack settings you can disable hardware acceleration to see the difference it makes when enabled/disabled.

The quick access toolbar will also be enabled by default. To set it up follow the on screen instructions.

You can hide the instructions by disabling “Show Toolbar Info” in the settings panel. Note that when dragging and dropping a stack into the editor from the toolbar, you must hold the option key.

Holding the option key automatically creates a copy of the stack and places it where you drop it without affecting the original.

Any stack placed into the toolbar can be selected and edited. Any edits you make to the stack settings will be applied every-time you use the toolbar to add a stack to the editor.

Cling

Setup

After adding the stack to your project’s Stacks page, simply place any content you want to cling to the window inside the “drop stacks here” section.

When the browser window reaches the content it will automatically cling to the window. See the Settings Panel sections below for more info on adjusting the position and styles of the content.

Note: There must be enough space beneath the content for the content to attach on scroll.

Sticky Settings

The Sticky Position options let you chose from one of the three positions: Top, Center, or Bottom. This defines the vertical position the content will attach to on the browser window.

The Sticky Offset value adjusts the sticky position by a pixel value. For example, if the position is set to “Top” an offset value of 100px will make the content attach 100px from the top of the browser window.

The “Center” and “Bottom” position offset values adjust the distance in the opposite direction.

The Z-index value can be adjusted if another stack needs to be placed over top or below the stack in the z direction. The higher the number, the higher priority Cling will have. In most cases you will not need to adjust this value.

Enabling Set a stopping point will reveal a special class name in the Stacks editor. This class name can be added to any stack on the page to define a scroll location for the stack to stop following (detach from) the browser window.

Note: This option only reveals the class name and instructions for setting/marking a stopping point. It does not need to be enabled for the stopping point to apply.

To add this special class to a stack, select the stack in the Stacks editor. In the Settings Panel > HTML section, add the full class name to the CSS classes field.

If the stack you selected does not have this field, you can simply add a blank “Column” stack to the location and add the class name to that. This column stack will not be visible outside of the Stacks editor.

Note: The CSS Classes field is only available in Stacks version 4+. If you are using a prior version of Stacks, please contact 1LD support to request a special class name stack.

Content Styles

The Align setting will adjust the horizontal position of the Cling content within the available space. However, the Max Width defaults to a value of 9999px which is essentially equal to no max width. Without a max width the content will fill all available horizontal space and the the Align setting will not make a difference. If the Max Width is set to a lower value, the content will only fill up to that set width and the Align setting will apply.

Examples:

Enabling Full width when sticky will let the content expand to the edges of the browser window when it is attached. The full width setting is useful when you would like to attach the content to the edges of the browser but the theme or framework you are using does not give you access to that space.

Note: This setting expands the available horizontal space and will adjust the appearance of the content as it fills that extra space. The Max Width and Align settings are important for adjusting the content appearance accordingly.

Settings Panel > Content Styles (Continued)

In the following styles you will notice there are two settings for each, one default and one “Sticky”. The default settings adjust the appearance of the content before it has attached to the browser window. The sticky settings adjust the appearance of the content after it has attached to the browser window. Some content needs to be condensed to save window space while others need to expand to take focus. The extra sticky settings allow you to expand, condense, or just change the look of the content as it transitions from static to sticky.

The Background setting has a few options for adding a background to your content. Only the Color option has a specific sticky color setting.

There are also Shadow options to apply a shadow or glow to the content. The Custom option allows you to define the shadow using CSS.

Note: If Full width when sticky is enabled the background and shadow will always stretch horizontally to the edges of the browser window, regardless of the Max Width value. The Max Width value only applies to the width of the content.

Mobile Sticky Settings

By default, Cling content will not attach to the window of a device less than 767px wide. This is because the page layout usually condenses below this width and sticky content can cover too much of the browser window. However, there is an option to enable it either for Tablet sized devices or for both Tablet and Mobile Sized devices.

Once enabled you are presented with a Sticky Offset setting for both device sizes. These may need to be adjusted to get a better fit.

You can also adjust the Breakpoints settings to define at what width each of the Sticky Offset values apply or to  define the width at which the sticky feature no longer applies.

Using Show/Hide Classes

You can add special class names to stacks placed within the Cling stack to have them hide or show when the content attaches to the browser window. The two available class names are:

cling-hide
cling-show

To add a class to a stack, select the stack in the Stacks editor. In the Settings Panel > HTML section, add the class name to the CSS classes field.

Hide (cling-hide)

Use this class when you need to remove stacks from the content. This is useful when you need to save space, but only when the content is attached to the browser window.

Show & Swap (cling-show)

Use this class when you need to add stacks to the content. This is useful when you are using the class in conjunction with the cling-hide class. For example, if you have an image that you want to be large when the content is static, but smaller when the content is attached to the browser window, you would add both the small and large image to the content. The cling-show class would be added to the large image and the cling-hide class to the small image. The large image will then swap with the smaller image when the content attaches to the browser window.

Timed Content

Setup

After adding the Timed Content stack to the editor you will see three “Drop stacks here” sections. 

Each one is referred to as a “State”. Stacks placed in State 1 will display before the defined date and time range, i.e. “sale coming soon” content. Stacks placed in State 2 will display between the defined date and time range, i.e. the active “sale” content. Lastly, stacks placed in State 3 will display after the defined date and time range, i.e. “sale has ended” content.

Each section has a short description of when the content will be active with all times given in a 24 hour format. Times will display in green with the start of the date/time range in blue and the end of the date/time range in red.

Now that we have an understanding of the layout we can begin setup. In this example we will be creating a 5 day long discount sale. We will add appropriate stacks content to each of the states in the editor.

Date & Time

Using the Start and End fields we can define the exact date and time of the sale. In our example the sale will begin 2/10/2020 at 12:00:00 AM. 12AM means the sale will start at midnight leading into the 10th. Our sale will end on 2/14/2020 at 11:59:59 PM. We use 11:59:59 PM so that the sale ends at midnight on the 14th.

This is a one time sale so we will leave the Repeat setting on None. More information on this setting can be found in the “Create Repeating Intervals” tutorial.

The Time zone setting defaults to using the time zone of the page visitor. In this example we will not need to define a specific time zone. More information on this setting can be found in the “Define A Time Zone” tutorial.

The last setting, Show time zone info in preview is a checkbox that is enabled by default. This will display time zone information that is useful for testing time zone values. The info is only visible when switching to preview mode and will not display on your live site even when enabled.

Countdown

We will keep Show countdown in State 1 and Show countdown in State 2 enabled. The countdown in state 1 will display a clock that counts down till the start of our sale. The countdown in state 2 will display a clock that counts down till the end of our sale. The countdown clocks are optional and you can disable them if you do not need or want to use them.

At this point the Stack is completely setup. See the Style Settings section below for more info on the remaining countdown style settings.

Style Settings

Countdown

Place countdown below content
If you want the countdown clock to display below your content keep this setting enabled. If this setting is disabled the countdown clock will display above the content.

Theme
This setting has 7 options that change the visual appearance of the countdown clock. The 8th option titled “Inline Text (shortcode only)” is unique allows you to place a text countdown anywhere inside the content. You can find out more about this option in the “Using An Inline Text Countdown” tutorial.

Padding
Adjust the space above/below and left/right of the countdown clock.

Background
By default, the background color is set to transparent. This setting changes the color of the background behind the countdown time elements.

Corner rounding
This setting adds corner rounding to the background behind the countdown time elements. It only applies if the background color is not transparent.

Countdown Elements

Size
Adjust the width in pixels of each of the countdown time elements. Each of the three values apply to different screen sizes.

Background
Change the background color of the countdown time elements.

Text: Number & Titles
Change the color of the number and the titles beneath the time elements.

Colon: Dots & Bg (Background)
Change the color of the “:” and the background behind it. The background option is transparent by default, the only reason you would want to change this color is if you would like to connect the time elements visually when using the “Default” or “Digital” countdown Theme.

Corner rounding
This setting adds corner rounding to the countdown time elements.

Shadow Opacity
By default each of the countdown time elements have a shadow around them. Use this setting to adjust the intensity of the shadows.

Show: Years, Months, Days, Hours, Minutes, & Seconds
Choose which countdown time elements you want to display, each with a customizable title. If an element that would contain a value is removed, its time will be applied to the next available element. For example, if there are 2 hours 0 minutes and 0 seconds remaining, and only the minutes and seconds are showing, the countdown clock would read 120 minutes and 0 seconds.

Auto remove “00” time elements
When enabled any countdown time element that has a value of “00” will automatically be removed. For example, if the clock reads 2 minutes 0 seconds, it will then count down to 59 seconds instead of showing 00 minutes 59 seconds.
Disabled:

Enabled:

Center time elements
Enabled by default, this setting keeps the time elements together in the center of the available space. Disable this setting if you would rather the time elements align the the left.

Create Repeating Intervals

Using the Date & Time > Repeat setting will change the functionality of the stack slightly. We will refer to State 2 as the “Sale” (though it can represent anything you need it to).

Here is a refresher on the what the 3 states represent when Repeat is set to its default option “none”:
State 1 = Before the “Sale”, countdown till the sale starts
State 2 = During the “Sale”, countdown till the sale is over
State 3 = After the “Sale”, no countdown, the sale is over and will no longer display

The Repeat options loop back and forth between State 1 and State 2 until the defined End date.

Note that the Start and End fields contain both a date “2/6/2020” and a time “12:00:00 AM” separated by a comma. By default and when Repeat is set to “None” the date and time are combined to define the exact start and end date and time. When any other option is chosen, these two values are no longer combined, The date range (circled in blue) is used to define the start and end date of the entire repeating process. The time range (circled in green) is used to define the start and end of each individual loop in a single day. Below we will give an example of how this works for each of the different Repeat options.

Here are the changes to the states when using a Repeat option:
State 1 = Before the “Sale” date range or outside of the sale time range, countdown till the sale starts or starts again.
State 2 = During the “Sale” time range, countdown till the sale time range is over
State 3 = After the “Sale” date range, no countdown, the sale is over and will no longer display (no change)

Every day

In this example, State 2 will be active every day between 1PM and 4PM. Any time outside of those hours State 1 will be active instead. The repeat loop will begin on the date 2/10/2020, and until that date arrives State 1 will be active. On the date 2/14/2020 the final loop will happen and after it finishes, State 3 will always be active.

If we wanted the repeat loop to begin right away we would only need to set the Start date to the current date or before. If we would like the repeat loop to continue for the foreseeable future we can change the End date to a very distant year, i.e. 9999.

Every week

In this example, State 2 will only be active on the weekends. State 1 will be active during the weekdays. Because we have set the start time to 12AM and the end time to 11:59:59 PM, State 2 will be active all day Saturday and Sunday. We could define a time range if we only wanted State 2 to be active during a certain time of the day on Saturday and Sunday. At least one day of the week should be enabled for this repeat loop to work. The date range has been set to start immediately and end indefinitely. This essentially means State 3 will never be active and the stack will loop between States 1 and 2.

Every nth weekday of every month

In this example, State 2 will be active every 1st and 3rd Tuesday of every month between 12PM and 930PM. State 1 will be active outside those hours and on all of the remaining days of the month. This example is also set to loop indefinitely like the previous example. State 3 will never be active.

Every Month

In this example, State 2 will be active on the 10th day of every month between 12PM and 3PM. The repeat will start immediately and will repeat for the last time on December 10th, 2022. The date range is defined only by the month and year of the date. The “Every month” setting is useful when you have a specific day each month you want the “Sale” to be active. Note: The “Every nth weekday of every month” also loops by month and is more useful for those who want the “Sale” to last multiple days according to the day of the week.

Every Year

In this example, State 2 will be active every year on the first day of June till Midnight on June 10th. Because the Start date range begins in 2021, the loop will not begin until then. The final “Sale” will happen in the year 2030. After that State 1 and State 2 will no longer activate and State 3 will be shown. The date range is defined only by the year value in the date.

Define A Time Zone

You can define a custom time zone if you want activate the states at the same date and time across the entire globe. These time zones must be defined in a specific way. You can find the value for your time zone using the map on the page linked below. Select your time zone or country and copy the value that appears at the top of the map into the Time zone value field.

https://onelittledesigner.com/rapidweaver-stack/timed-content/#timezonepicker

Alternatively, if you want to use a timezone not based on a country, find the timezone in the Wikipedia article linked below and use the value in the “TZ database name” column.

https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Using An Inline Text Countdown

The Date & Time > Theme setting has a special option titled “Inline text”. When this option is selected the visual countdown clock is removed, as well as the settings relating to its style. This inline countdown will display simply as numbers and text.

2 Years 3 Months 5 Days 18 Hours 23 Minutes 41 Seconds

You must copy the shortcode (HTML element):

<countdown><countdown/>

and place it inside of text stack.  The text countdown will replace the shortcode when the page is loaded. You can still decide which countdown time elements are used and customize their titles. The shortcode must be placed inside of the State 1 or State 2 content and the respective “Show Countdown in State #” setting needs to be enabled.

Advanced: Use Delay/Time Only

Timed content has an advanced setting titled “Use time only”. When enabled the Date & TimeStart, End, and Repeat settings are ignored. Instead you can define in seconds how long you want to delay the activation of State 2 in the field titled Delay Time. State 1 will be active on page load and display until the delay time runs out. State 3 will activate after State 2 when the defined Active Time has run out.


In this example, State 1 will show for 10 seconds followed by State 2 for 3600 seconds (1 hour). After 1 hour State 3 will then show.

Troubleshooting: Prevent Animation Clipping

Some of the countdown clock themes have animations that move outside of the contained area. The Stacks plugin by default prevents stacks from overflowing into or over other stacks content. This can sometimes cause the animations to clip or suddenly disappear. This can be remedied by adding padding to the bottom or top of the Timed Content Stack. This will ensure that there is enough space for the animation to move without overlapping other content.

 

 

 

 

 

 

Motion Looper

Setup

After adding the stack to your stacks page, add any content that you want to animate to the “Drop stacks here” section. In our example we will be using an image and creating a bounce animation that only activates on hover.

The red square below the image shows a demonstration of the animation according to what has been defined in the settings panel. You can refer to it as you make changes.

In the settings panel change the Easing option to *Bounce. Options that begin with an asterix “*” disable some of the settings as they do not apply to these easing options.

Next change the Loop option to Only on hover. This will make it so the animation only activates when a mouse cursor is directly above the stack.

After that change the Duration “Delay” value to 0 and leave the “Animation” value at 1 second. This will remove the pause between animations.

In the settings panel section labeled States, adjust the Position y setting to -60px. This will make the animation move the stack up 60 pixels from its default position.

Switch to preview mode and hover the stack with your mouse cursor to test the animation. You may notice that the stack is being clipped during the animation.

If this happens, it is because Stacks pages prevent stacks from overlapping other content. Padding needs to be applied in the direction of the animation equal to the distance set in the Position y setting to give the animation enough room to animate. To do so, switch back to edit mode and add a single column stack and add 60px padding to the top of it. Then move the Motion Looper stack inside of the single column stack.

Note: You may instead simply add Padding to the image stack itself, but it will change how the stack animates with any 3d position settings as that padding will be added to the overall size of the stack instead of above it.

Switch to preview mode to see the completed animation.

Settings Panel

Easing: Select from 10 different options that modify the animation’s acceleration curve so that the speed varies over its duration. Linear is robotic while the rest mimic realistic motions.

Direction: Select whether the animation should play forwards, backwards, or alternate back and forth between the two states (The states are defined in the “States” section below).

Show demonstration in edit mode: Disable this to hide the red demo square.

Loop: Select when and for how long the animation plays or stops/pauses.

Duration: Define in seconds the interval between animations and how long the animation takes to complete. Animation duration will effectively adjust the speed of the animation.

Delay Opacity: Adjust the opacity of the stack while in-between animations. This option is only available when the delay duration is greater than 0.

Initial State: The default position of the stack. When the animation stops or pauses, the stack will return to this position. These values will in most cases be left at 0.

To State: The position the stack will animate to.

Position x: Define the horizontal position of the stack. A negative value will move the stack left while a positive value will move it right.

Position y: Define the vertical position of the stack. A negative value will move the stack up while a positive value will move it down.

Position z: Define the 3D horizontal position of the stack. A negative value will move the stack further away while a positive value will move it closer.

Rotation x: Define the 3D horizontal rotation of the stack in degrees 0-360.

Rotation y: Define the 3D vertical rotation of the stack in degrees 0-360.

Rotation z: Define the rotation of the stack in degrees 0-360.

Stretch x: Define the width of the stack by percentage. A negative value will thin the stack while a positive value with thicken the stack.

Stretch y: Define the height of the stack by percentage. A negative value will shorten the stack while a positive value will heighten the stack.

Skew x: Define a horizontal skew distortion by degrees.

Skew y: Define a vertical skew distortion by degrees.

3D Origin: Select the point around which the 3d position is applied. See an example of each here.

Perspective: Define the 3D perspective in pixels. This value represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view. The greater the value, the further away the perspective of the user is.

Adjust position: Define the x and y position of the stack. These values adjust the position of the entire animation. Use this setting to make adjustments to the overall position of the stack.

Disable page wide stack clipping: Enable this to allow elements on the entire page to over lap with each-other. Use this option if you are having issues with the animation clipping. Note: This setting will adjust the entire stacks page and may result in undesirable effects. 

Absolute position: Enable this option to place the stack above other static content. Once enabled, new stacks sections will appear above and below the Motion content. Content placed in these sections will not be apart of the animation.

Width: Define the width of the absolutely positioned Motion content. This option is only available when Absolute position is enabled.

Align: Select the horizontal alignment of the absolutely positioned Motion content.

Readable

Setup

Just by adding the stack to the stacks editor it will automatically override your theme or framework base font size and line-height and scale all elements based on the Golden Ratio for typography . By default the font-size is set to 18px and this can be adjusted between recommended font sizes of 16 to 24px. Depending on the font you use you may need to make adjustments to the line-height. It can be adjusted from 3-7 (the number represents the value in tenths + 1 = 1.3 to 1.7).

Mobile will automatically be set to a recommended font-size of 16px. This can be changed by disabling the “Auto adjust for mobile” option. The remaining settings are optional and are gone over in the Menu Settings section below.

Menu Settings

Base Text Settings

Font size: Sets the base font size for the entire stack page. All elements will scale in size according to this value. This setting is limited to recommended values for readability.

Line height: Adjusts the space between lines. This setting is limited to recommended values for readability.

Auto adjust for mobile: The recommended base font size for mobile is 16px. Disable this option if you want to set your own values.

Optional Text Settings

Text colors: Enable to define page wide default text colors.

Default text colors: Color settings for all of the headings, text, and links on your stacks page. These colors will apply to all text but can be overwritten by any stack that allows you to color text.

Dark background text colors: Color settings for all of the headings, text, and links that have dark color backgrounds. These colors will only apply if the “Auto identify dark backgrounds” option is enabled and if any dark backgrounds are identified. Image and gradient backgrounds cannot be identified automatically.

Font family: Enable to define custom fonts for the headings and text on your stacks page. Custom fonts are case sensitive and should include quotation marks.

Font sizes: Enable to define specific font sizes for each element. These font sizes can be overridden by any stack that allows you to adjust font size.

Font weights: Enable to define specific font weights for each element. Each value is in hundreds (IE 4 = 400). The font you are using must support the values you set. If you are using the Webfont Helper stack fonts, the corresponding weights by title are:

  • 100 = [Font-name] Thin
  • 200 =[Font-name] ExtraLight
  • 300 =[Font-name] Light
  • 400 =[Font-name]
  • 500 =[Font-name] Medium
  • 600 =[Font-name] SemiBold
  • 700 =[Font-name] Bold
  • 800 =[Font-name] ExtraBold
  • 900 =[Font-name] Black

Text Margins: Enable to define specific top and bottom margins for each element.

Typography Tools

Auto identify dark backgrounds: Enable to have the stack automatically identify text with dark backgrounds and apply lighter defined text colors (If text colors are enabled).

Apply ideal line length: Enable to have the stack automatically apply an ideal max-width to all text for readability purposes. This setting may not work for every page. Switch to preview mode to see a message and to get the width value. Use this value manually if the automatic line length causes issues or does not work properly. The message only appears in preview mode and not when published.

Remove preview message: This will hide the “Apply ideal line length” option message in preview mode.

Add missing paragraph tags: Enable this to have the stack wrap loose text with <p> tags. Some text stacks do not properly identify paragraphs as such. Enabling this option will help the “Apply ideal line length” tool apply to the right text.

Rate text color contrast: Enable this to have the stack rate the color contrast of all of the text on your stacks page. You must switch to preview mode to see the results. The results are just suggestions and may not be 100% accurate. Text with gradient or image backgrounds will not return a usable rating.

Show demo text in edit mode: Enable this to see an example of every element in edit mode. This can make it easier to make adjustments to the settings.

Demo dark background: Will change the background color of the demo text. The “Font color” option should be enabled when using this option.

Using Big & Small Tags

You can use the <big> html tag to force any text to be 150% larger. This works for all elements from headers to paragraphs. All you need to do is wrap what ever text you want to enlarge with <big> and </big>.

<h2><big>Lorem Ipsum</big></h2>

Likewise, you can do the same with the <small> tag to make text 20% smaller. This is good for fine print  or note style text.

<p><small>Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.</small></p>

Alternatively, you can adjust the font size of any text using any stack that supports styled text. Note however that only the <big> and <small> tags adjust the line height of the text to match the font size.

Using Webfont Helper

Add the Webfont Helper stack to the stacks editor. Then simply select the font you want to use and drag/drop it anywhere outside of the Webfont Helper stack.

Important: Do not publish your project with the Webfont Helper stack still in the editor. While this will certainly not cause any harm to your project/website it can cause an insanely long upload time as there are over 1000 font files included in this stack. We have broken each of the 45 fonts into separate stacks that can be dragged and dropped outside of the Webfont Helper stack to use. Once you have chosen fonts you want to use, delete the Webfont Helper stack from the editor and only the selected font files will be uploaded.

Then in the Readable stack settings enable the “Font family” option. Add the title of the font inside either the Headings or Text fields surrounded by quotation marks to apply the font IE “Nunito”.

The first title in the font stack will apply default font weights automatically. If you would like to apply a specific font weight, use the title of the font that includes the font weight IE “Nunito ExtraBold”

Webfont Helper

Setup

Add the Webfont Helper stack to the stacks editor. Then simply select the font you want to use and drag/drop it anywhere outside of the Webfont Helper stack.

Important: Do not publish your project with the Webfont Helper stack still in the editor. While this will certainly not cause any harm to your project/website it can cause an insanely long upload time as there are over 1000 font files included in this stack. We have broken each of the 45 fonts into separate stacks that can be dragged and dropped outside of the Webfont Helper stack to use. Once you have chosen fonts you want to use, delete the Webfont Helper stack from the editor and only the selected font files will be uploaded.

Each individual font stack has its own settings for implementation.

Manually

By default you must apply the font manually by using any of the highlighted font titles in a “Font-family” field inside of another stack. You may need to add quotation marks (“”) around the title depending on the stack you are using.

If you are familiar with CSS you can use the titles in the “font-family” rule. The example below will apply the font to the entire webpage.

body {
  font-family: “Nunito”;
}

Headers, Text, Headers & Text

There are options to automatically apply the font to Headers, text, or both.

Note: Some stacks may overwrite the font if they have their own font settings.

Wrapped content

When set to apply to wrapped content, only text content placed inside of the font stack will have the font applied to it.

Custom CSS Class

There is also an option to create a custom class if you have the ability to add classes to your elements.

GDPR Compliance

Google Fonts fall into a grey area with the new GDPR regulations and most professionals suggest you do not load fonts externally to be safe. This stack allows you to use some great fonts hosted on your own server without linking to Google.

More info: https://www.lifehacker.com.au/2018/06/how-to-be-gdpr-compliant-if-you-use-google-fonts-on-your-website/

Horizon Parallax

Choosing a Parallax Style

Horizon Parallax comes with three different parallax effect types. All of the types can be found in the menu – Parallax section – Style setting.

There are six single layer options, two three layer options, and a custom option. See the Using Single Layer Presets tutorial for using any of the six single layer options, Using Three Layer Presets tutorial for “Cave” and “Horizon” options, and Creating a Custom Parallax Effect for the “Custom” option.

Using Single Layer Presets

Select any of the first 6 options to use the single layer parallax type. This is the most common type that you will find used on the web.

The In focus setting is used to determine when the content should be fully visible during the parallax animation. By default it is set to be in focus when the section is at the top of the browser window. You can also set it to when the section is in the center of the browser window. The last option “Bottom of the browser window” is for when Horizon Parallax is the last section on the page. This is so the content can be in focus when it comes into the window because it may not be able to reach the center or the top of the browser.

Inside the Horizon Parallax stack you will see a “Layer” stack. This is where you can place content like text, images, or other stacks. You can leave the Layer stack empty if you do not wish to display content and are only using a background image.

Next select the Horizon Parallax stack again to bring up the settings menu. In the Background section – Type setting select “Image”. There are also options if you do not wish to use a background image. Without a background image only the content will appear to move when the page is scrolled.

Select or drag and drop and image you want to use. Make sure that the image you use is optimized. Images that are greater than 1Mb is size can impact the performance of the parallax effect and the rest of your website. If you do not have a image optimization app, I would recommend using the free online compressor found at imagecompressor.com

If the image you are using is intended to be used as a pattern you can set Image tiling to “Both” and Image size to “Actual size” or “Use custom size”. If you are using a full image you will not need to adjust any of the settings found in this section.

In the Layout section you can adjust the position and size of the background and content. Enable Content Max-width if you are using a framework or theme that supports full-width content. Here you can apply a width to the content in pixels and optionally have it centered within the available space.

By default Horizon Parallax will match the height of the content you place inside of it. If you are not adding content or if you want the image to fill the entire browser window you can enable Match browser height. Enabling it will give you an option to match the height based on a percentage. You can use the Layer position setting to change the vertical alignment of the content when there is available space. Only the first three options “Top”, “Center”, and “Bottom” will have an effect on single layer parallax types.

The remaining settings allow you to add classes and an ID to the stack but are not necessary for setup.

You will need to add content below Horizon Parallax in order for there to be enough space to scroll and test the effect. If you have done that, you can switch to preview mode to test it out and make adjustments if necessary.

Using Three Layer Presets

In the Style setting select either “Cave” or “Horizon”.

The In focus setting is used to determine when the content should be fully visible during the parallax animation. By default it is set to be in focus when the section is at the top of the browser window. You can also set it to when the section is in the center of the browser window. The last option “Bottom of the browser window” is for when Horizon Parallax is the last section on the page. This is so the content can be in focus when it comes into the window because it may not be able to reach the center or the top of the browser.

The Layer shape setting will let you choose from five different predefined shapes that display at the bottom and/or top of the Horizon Parallax stack. If you have the Shape Sector stack and plan on using your own shape you can ignore this setting.

The Layer offset setting is only visible if you are using the “Horizon” option. This will add space at the top of the stack. This is mostly useful for adjusting how much of your background image shows through above the shapes and content. In most cases you will leave this value at 0px.

Inside the Horizon Parallax stack you will see three (Horizon) or two (Cave) “Shape Layer” stacks. Each shape is defined by the Layer shape setting. By default each layer color is set to black. Select each shape layer to change the color. You also have the option to adjust the height of each shape layer thought it is not necessary to do so. If you are using the “Horizon” option each layer will need to be a different color for the effect to appear properly.

If you have the Shape Sector stack and want to use different or custom shapes you can delete the shape layer stacks and replace them with Shape Sector.  

Above the shape layer stacks is a section for adding content. This is where you can place content like text, images, or other stacks. You can leave the section empty if you do not wish to display content and are only using a background image.

Next select the Horizon Parallax stack again to bring up the settings menu. In the Background section – Type setting select “Image”. You must use the image option for the parallax effect to appear properly with the three layer presets.

Select or drag and drop and image you want to use. Make sure that the image you use is optimized. Images that are greater than 1Mb is size can impact the performance of the parallax effect and the rest of your website. If you do not have a image optimization app, I would recommend using the free online compressor found at imagecompressor.com

If the image you are using is intended to be used as a pattern you can set Image tiling to “Both” and Image size to “Actual size” or “Use custom size”. If you are using a full image you will not need to adjust any of the settings found in this section.

In the Layout section you can adjust the position and size of the background and content. Enable Content Max-width if you are using a framework or theme that supports full-width content. Here you can apply a width to the content in pixels and optionally have it centered within the available space.

By default Horizon Parallax will match the height of the content you place inside of it. If you are not adding content or if you want the image to fill the entire browser window you can enable Match browser height. Enabling it will give you an option to match the height based on a percentage. You can use the Layer position setting to change the vertical alignment of the content when there is available space. This setting affects the layout of each layer when the stack is in focus. Below is a visual example of each of the options.

Typically, for the “Horizon” and “Cave” presets you will want to leave this option set to “Center”.

You will need to add content below Horizon Parallax in order for there to be enough space to scroll and test the effect. If you have done that, you can switch to preview mode to test it out and make adjustments if necessary.

Creating a Custom Parallax Effect

In the Style setting select “Custom”.

The In focus setting is used to determine when the content should be fully visible during the parallax animation. By default it is set to be in focus when the section is at the top of the browser window. You can also set it to when the section is in the center of the browser window. The last option “Bottom of the browser window” is for when Horizon Parallax is the last section on the page. This is so the content can be in focus when it comes into the window because it may not be able to reach the center or the top of the browser.

The Layer offset setting will add space at the top of the stack. This is mostly useful for adjusting how much of your background image shows through above the shapes and content. In most cases you will leave this value at 0px.

Inside the Horizon Parallax stack you will see three “Layer” stacks. Each layer can animate in one of four different directions (up, down, left, right) at different speeds or intensity. No matter how you set up the animations,  the layers will display in the order they are when the Horizon Stack is in focus (determined by the In focus setting). Their distance from each other will depend on any margin you set or the Layer position setting if you have enable Match browser height in the Layout section ahead.

If you have the Shape Sector stack you can place it into any of the layers for it to automatically work as a moving shape divider. 

You can place any content like text, images, or other stacks into each of the three layers. You do not need to use all three layers and any layer that is left blank will not display. Leaving all three sections blank will make Horizon Parallax collapse and it will not display unless you have enable Match browser height in the Layout section ahead.

Next select the Horizon Parallax stack again to bring up the settings menu. In the Background section – Type setting select “Image”. There are also options if you do not wish to use a background image. Without a background image only the content will appear to move when the page is scrolled.

Select or drag and drop and image you want to use. Make sure that the image you use is optimized. Images that are greater than 1Mb is size can impact the performance of the parallax effect and the rest of your website. If you do not have a image optimization app, I would recommend using the free online compressor found at imagecompressor.com

If the image you are using is intended to be used as a pattern you can set Image tiling to “Both” and Image size to “Actual size” or “Use custom size”. If you are using a full image you will not need to adjust any of the settings found in this section.

In the Layout section you can adjust the position and size of the background and content. Enable Content Max-width if you are using a framework or theme that supports full-width content. Here you can apply a width to the content in pixels and optionally have it centered within the available space.

By default Horizon Parallax will match the height of the content you place inside of it. If you are not adding content or if you want the background image to fill the entire browser window you can enable Match browser height. Enabling it will give you an option to match the height based on a percentage.

You can use the Layer position setting to change the vertical alignment of the content when there is available space. This setting affects the layout of each layer when the stack is in focus. Below is a visual example of each of the options.

In the menu’s Parallax section under the heading “Background” you can change the Intensity of the background image parallax effect. 0% means the image moves with the rest of the page as it scrolls as normal not moving at all. 100% means the image appears to stay perfectly still while the page scrolls because it is moving at 100% the rate the page is scrolling, but moving downward while the page scrolls upward. Typically you will want to set a value somewhere between 0% and 100%.

Below the background setting you will find three settings for each of the three layers.

The Intensity setting works the same as it does for the background. However, instead of just moving downward while the page scrolls up you can change the direction the layer animates by using the Direction setting.

Each layer also has a Z-index setting to change which layer appears over top of another if they move past each other. The higher values will appear on top.

You will need to add content below Horizon Parallax in order for there to be enough space to scroll and test the effect. If you have done that, you can switch to preview mode to test it out and make adjustments if necessary.

 

Clean Menu

Setup & Settings Menu Explanation

Sections

To get started, add the Clean Menu stack to your stacks page. There are 3 main sections of the stack: Toggle, Menu, and Logo.

Note: In edit mode the top level menu will not be able to display your menu items and will instead display some example items. Switching to preview mode will reveal your actual menu items.

By default, the stack will display your project files top level pages in the top level navigation menu and all sub-level pages will only be found in the dropdown menu that appears when the toggle is clicked.

Background

To get started we will add an optional background color to our menu.

The  background color will extend to the edges of your content area. Depending on the theme or framework you are using it may extend to the edge of the browser window (You may have a setting to change the content width or max-width to allow it to do so). The theme we used restricted the content space to the center.

Layout

We don’t want our menu to extend to the browser window edges so we will add padding to the left and right in order to keep the toggle and logo from hugging the edges.

Border

You can also adjust the border settings to change the appearance of the menu. We will add 4px rounded corners.

General Settings

Next, navigate to the settings menu and open the “General Settings” tab. The first setting titled “Column layout” will allow you to choose the location of each of the 3 menu sections. In our setup example we are going to use the option “Logo – Menu – Toggle”.

The next setting “Merge columns” will allow you to combine the center section with the left or right sections of the menu. This setting is optional, but we will select the option “Right 2” to combine our menu with the dropdown toggle. If you want to keep your 3 menu sections separate leave this setting set to “None”.

To set up our logo we can either drag in an image or text stack to create a title for our menu or website.

The “Vert. align” setting will change the vertical alignment of all 3 menu sections in relation to eachother. You will not notice much of a difference between the options unless your logo or title text is taller than your menu and toggle sections. Typically, you will want to leave this set to it’s default option “Center”.

The “Text colors” setting will change the over all color theme for the toggle and menu items. Since our background is black we will select “White”. There is also an option titled “Custom” that will allow you to set specific colors for the toggle and menu items.

The “Max-width” setting will change how wide your combined 3 menu sections will be. If there is enough space the menu contents will be 1280px wide. This option will not effect the width of the background color we set and is most useful for when your background extends to the browser edges. In our case, the width is being determined by the theme so we can change this value as is.

The “Align” setting will change the horizontal alignment of the menu sections. Typically you will want to leave this set to it’s default option “Center”. The “Left” option is only useful if your content area extends to the browser edges.

When the “Sticky” setting is enabled your menu will stick to the top of the browser window when it is scrolled to and past. When enabled you will have two extra settings: “Z-index” which only needs to be adjusted if your sticky menu is sliding behind other elements on your page (rare cases) and “Background” which is were you define the background color of the menu when it is attached to the browser window. The sticky menu will always extend to the browser edges no matter what theme or framework you are using. We will not be enabling this option in our example.

When the “Custom menu items” setting is enabled, a new section that allows you to add your own menu items will appear in edit mode. You will also have an additional setting to disable your project file’s navigation menu items and only use the custom menu items. We will be adding custom menu items in our example.

Clean Menu Item Settings

In the editor you will now see a new section titled “Custom Menu Items” with a single menu item added by default (You can add more custom menu items by clicking the blue add icon). Double click the title to change it.

Selecting the item will bring up it’s own settings menu.

The “Enable link” setting can be disabled to remove the link from this specific menu item. This is useful for when you want to add categories or titles to your toggle dropdown menu that are not links.

The “Hide in menu” and “Hide in dropdown menu” settings allow you to chose where the selected menu item will display. “Hide in menu” refers to the top level navigation menu.

The “Add children items” setting allows you to drag and drop other menu items beneath it as sub-menu items. These sub-menu items will only display in the toggle dropdown menu.

The “Call to action” setting give us extra color and border radius settings to make the selected menu item unique from the rest of the menu items. For our example we will enable this option.

The “Group with previous item” settings removes the space between the selected item and the item to the left of it. This is useful for grouping small icon links next to each other.

Next, we need to click on our Clean Menu stack in the editor to bring it’s settings menu back up.

Top Level Navigation Menu

In the “Menu” tab we can optionally disable the top level navigation men, set a specific font-size for our menu items, and bold the menu item text. If you have selected “Custom” in the previous “Text colors” settings there will also be some color settings in this tab. We wont need to change any of the settings found in the “Menu” tab in our example.

Toggle / Dropdown Menu

In the “Toggle / Dropdown Menu” tab we can optionally disable the toggle dropdown menu.

Note: If the toggle is disabled no sub-menu navigation items will be displayed. This option is only useful for those with small websites who only have a few top level links.

The point at which the mobile version of the toggle is displayed is defined by the “Breakpoint” setting. If the browser is more narrow than the defined breakpoint, the top level menu navigation will hide and only the mobile toggle will display. The mobile toggle menu will contain all links defined in both the top level navigation and toggle dropdown navigation.

The “Toggle icon” setting lets you choose between 3 different animated toggle icons.

When the “Dropdown menu full-width” setting is enable the dropdown menu will match the width of the entire Menu stack. This is most useful when your dropdown many has a lot of sub-menu items. We do not need to enable this option in our example.

If you have selected “Custom” in the previous “Text colors” settings there will also be some color settings in this tab.

Logo

In the “Logo” tab we can optionally disable the logo. There is also an option to enable an extra stacks space to add a text title. This will force the logo section to be smaller and is mostly useful for square logos with text titles.

The “Width” setting defines the width of the entire logo space. If you are only using an image, you can use this setting to adjust the size of your logo.

The “Logo link” is where you can add a link to your logo. Typically you will want to set this link to your website’s homepage.

After the logo is setup, our menu is complete.

Same Page Navigation

The Clean Menu stack link’s support navigating to sections found on the current/same page. You will just need to know the ID of the element you want to navigate to.

You can find the ID of a section using the developer tools of any browser or set an ID using a stack that allows you to assign your own. The Layouts stack supports setting an ID (as of version 1.0.4) so we will be using that stack in this example.

We will add 3 Layouts stacks to the stacks page. Each one will represent a different section: Top, Middle, and Bottom.

In the Settings Menu “Layout” tab of each Layouts stack we will assign a unique ID. The ID is case sensitive and must not contain any spaces or special characters other than dashes “-” or underscores”_”. We will simply ID our sections “top”, “middle”, and “bottom”.

Now we will add the Clean menu stack to the top Layouts stack and enable the “Sticky”, “Custom menu items”, and “Custom menu items only” options. Sticky will ensure that the menu is always available for navigating to new sections.

With the Custom menu items enabled we will add three items, each one titled appropriately.

Next we need to click on each item and use the “Set link” button. In the link dialog window, type a hash symbol followed by the unique ID of the relevant section.

Finally, we just need to add our website content to each section. It’s important to keep all of our content inside these 3 Layouts stack sections so that the “Current” menu item can highlight properly depending on where the page is currently scrolled.

The menu will now automatically scroll to each section when each of the menu items are selected.

 

Image Sector

Setup

This stack has 4 different modes for achieving different effects and designs.

  1. Edge creates large background graphics that extend to the browser edge.
  2. Image allows you to place large images that sit outside the content area.
  3. Shape creates large background graphics that are contained inside the content area.
  4. Object creates shapes that behave like images and can be placed inside any stack that supports content.

Edge, Image, and Shape modes are background graphics and when using these modes the stack is intended to be used as a wrapper for your other stacks. Object mode is for placing inside other stacks. Below you can find a setup tutorial for each mode.

Edge Mode Setup

To get started, add the Image Sector stack to your stacks page. By default the stack is set to Edge mode.

While in Edge mode, it should not be placed inside of another stack. Placing it inside of another stack may disable the ability for the graphic to extend to the edge of the browser window.

Next select a shape to use. You can also select “Custom” to add your own, more info on that in the “Creating custom shapes” tutorial below. In this example we will be using the “Triangle right” shape and placing a 3-column stack inside Image Sector.

In the “Layout & Size” section choose a layout. Each option refers to the the content space. This space is where your stacks content boundaries are. It will be different depending on the theme or framework you are using. In the image below, the theme restricts the content space to the center.

Setting the layout to “Right half” means the shape will fill the right half of the content space. In the image below you will see that the left edge of the shape is in the center of the content space and the right edge is at the right of the content space.

Because we are using a theme that restricts the content space, we will need to enable “Force visibility to browser edges” to get the edge to extend to the edge of the browser window.

This option only needs to be enabled if the edge of the shape does not extend to the browser edge. Though Image Sector has been tested in 3rd-party themes and frameworks, there may be a few themes that have display issues. If you have any trouble feel free to contact our support and we can add support for your specific theme or framework.

In our example, we are going to set our layout to “Left two thirds”. Because we are using a left layout we will need to flip our shape horizontally so that the edge extends the the left instead of the right.

There is also an option to flip the shape vertically to turn the shape upside down. In our example we will not be flipping it vertically. We will also remove left and center column content from our 3-column stack so that the space above our graphic is empty.

After that, we will need to style our shape by giving it a color or adding a background image. If you add an image, you can align the image vertically or horizontally inside of the shape. The image will automatically scale and clip to fill the entire shape.

The shape will always match the height of your content, in our example it is matching the height of the text on the right. For greater effect, you can add padding to the top and bottom of the Image Sector stack to have it extend past the content.

Lastly, you may want to adjust the responsive behavior. By default, any screen smaller than 770px wide will have the shape removed and the image (if one is set) placed at the top of the content.

Other options are to have it placed as an image below the content, used as a background image, keep it as a shape making no adjustments, and removing the shape and image all together. After selecting an option that best suits your design, setup is complete. See the Settings menu breakdown below for more info on the different options.

Image Mode Setup

To get started, add the Image Sector stack to your stacks page. By default the stack is set to Edge mode. Click in the “Image” button to switch.

While in Image mode, it should not be placed inside of another stack. Placing it inside of another stack may disable the ability for the graphic to extend past the content space of the theme or framework you are using.

In the “Layout & Size” section choose a layout. Each option refers to the the content space. This space is where your stacks content boundaries are. It will be different depending on the theme or framework you are using. In the image below, the theme restricts the content space to the center.

Setting the layout to “Right half” means the image will be contained in the right half of the content space + plus the space to the right of it extending to the browser’s edge.

In our example we are using a theme that restricts the content space, we will need to enable “Force visibility to browser edges” to get the image to extend beyond the content space.

This option only needs to be enabled if the image is being cut off. Though Image Sector has been tested in 3rd-party themes and frameworks, there may be a few themes that have display issues. If you have any trouble feel free to contact our support and we can add support for your specific theme or framework.

In our example, we are going to set our layout to “Left two thirds”. Inside the Image Sector stack we will place a 3-column stack and only place content in the right most column so that the image does not have any content over top of it.

Now if you switch to preview mode you may notice that the image appears quite small. This is because by default, the size is set to “Contain”. The image will resize to match the height of your content, in our example it will match the height of the text on the right. For greater effect, you can add padding to the top and bottom of the Image Sector stack to have it extend past the content.

If you want the image to always be a specific size, you can use the Size option and select “Define width & height” to set specific dimensions.

After that, we need to adjust the alignment of the image. By default it will be centered in the defined layout space. Use the alignment options to adjust where the image displays.

Lastly, you may want to adjust the responsive behavior. By default, any screen smaller than 770px wide will have the image placed at the top of the content.

Other options are to have it placed as an image below the content, used as a background image that covers the entire width of the screen, keep it as a background image making no adjustments to its position, and removing the shape and image all together. After selecting an option that best suits your design, setup is complete. See the Settings menu breakdown below for more info on the different options.

Shape Mode Setup

To get started, add the Image Sector stack to your stacks page. By default the stack is set to Edge mode. Click on the “Shape” button to switch.

While in Shape mode, it should not be placed inside of another stack. Placing it inside of another stack may disable the ability for the graphic to extend to the edges of the browser window.

Next select a shape to use. You can also select “Custom” to add your own, more info on that in the “Creating custom shapes” tutorial below. In this example we will be using the “Diamond” shape and placing a 3-column stack inside Image Sector.

In the “Layout & Size” section choose a layout. Each option refers to the the content space. This space is where your stacks content boundaries are. It will be different depending on the theme or framework you are using. In the image below, the theme restricts the content space to the center.

Setting the layout to “Right half” means the shape will fill the right half of the content space. The shape will always be contained inside of the the content space unless the “Full browser width” layout option is selected.

If you are using the “Full browser width” layout option and using a theme that restricts the content space, you will need to enable “Force visibility to browser edges” to get the layout space to extend to the edges of the browser window.

This option only needs to be enabled if the shape is being cut off when you preview it. Though Image Sector has been tested in 3rd-party themes and frameworks, there may be a few themes that have display issues. If you have any trouble feel free to contact our support and we can add support for your specific theme or framework.

In our example, we are going to set our layout to “Left two thirds”.

By default the size is set to “Contain”, this option will automatically fill as much space as possible without clipping or distorting the image. If you want the iamge to always be a specific size, you can use the size option and select “Define width & height” to set specific dimensions.

Next, use the align options to adjust where the shape displays in the defined layout area.

There are options to flip the shape vertically and horizontally as well as rotate it by 90 degrees, but since our shape is symmetrical, non of these options will have much effect . We will remove the left and center column content from our 3-column stack so that the space above our graphic is empty.

After that, we will need to style our shape by giving it a color or adding a background image. If you add an image, you can align the image vertically or horizontally inside of the shape. The image will automatically scale and clip to fill the entire shape.

The shape will always match the height of your content, in our example it is matching the height of the text on the right. You can add padding to the top and bottom of the Image Sector stack to have it extend past the content.

Lastly, you may want to adjust the responsive behavior. By default, any screen smaller than 770px wide will have the shape removed and the image (if one is set) placed at the top of the content.

Other options are to have it placed as an image below the content, used as a background image, keep it as a shape making no adjustments, and removing the shape and image all together. After selecting an option that best suits your design, setup is complete. See the Settings menu breakdown below for more info on the different options. If you would rather keep the shape somewhere in line with the content, you may want to see the “Object Mode Setup” tutorial below.

Object Mode Setup

To get started, add the Image Sector stack to your stacks page. By default the stack is set to Edge mode. Click on the “Object” button to switch

Next select a shape to use. You can also select “Custom” to add your own, more info on that in the “Creating custom shapes” tutorial below. In this example we will be using the “Diamond” shape.

By default the size is set to “Contain”, this option will automatically fill as much space as possible without clipping or distorting the shape.

If you want the shape to always be a specific size, you can use the size option and select “Define width & height” to set specific dimensions.

Next, select a horizontal alignment for the shape.

There are options to flip the shape vertically and horizontally as well as rotate it by 90 degrees, but since our shape is symmetrical, non of these options will have much effect.

The “Force visibility to browser edge” option is for the other modes and should be left disabled.

Lastly, we will need to style our shape by giving it a color or adding a background image. If you add an image, you can align the image vertically or horizontally inside of the shape. The image will automatically scale and clip to fill the entire shape.

Settings Menu

Mode: Choose from 4 distinct modes.

  1. Edge creates large background graphics that extend to the browser edge.
  2. Image allows you to place large images that sit outside the content area.
  3. Shape creates large background graphics that are contained inside the content area.
  4. Object creates shapes that behave like images and can be placed inside any stack that supports content.

Shape (Edge/Shape/Object): Choose from a predefined shape or select “Custom” to use an included icon path or to add your own path created with the shape tool.

Shape Path (Edge/Shape/Object): Available when the “Shape” option is set to “Custom”. Paste an included icon path here or paste a path created with the shape tool.

Artboard (Shape/Object): Available when the “Shape” option is set to “Custom”. By default, the shape tool artboard is set to 500px by 500px. If you wish to create different sized shape, you can adjust the artboard size in the shape tool. You will then need to copy the artboard size into these fields.

Layout (Edge/Image/Shape): Define the area you would like the background graphic to fill.

Size (Image/Shape/Object): Allows you to either set the graphic to automatically fill the selected layout area with the “Contain” option, or define a specific width and height.

Dimensions (Image/Shape/Object): Available when the “Size” is set to “Define width and height”. Allows you to define a width and height to the graphic in a pixel value.

Ver. align & Hor. align (Image/Shape): Change the alignment of the graphic inside of the defined layout space.

Flip horizontally/Flip vertically/Rotate 90 degrees (Edge/Shape/Object): Optionally change the direction of the design. This option is most useful for asymmetrical shapes.

Force visibility to browser edges: Forces the theme or framework to allow the graphic to extend outside of the defined content area. This option only needs to be enabled if the shape is being cut off by the content area. Though Image Sector has been tested in 3rd-party themes and frameworks, there may be a few themes that have display issues. If you have any trouble feel free to contact our support and we can add support for your specific theme or framework. This option should be ignored and left disabled if you are using the “Object” mode.

Creating custom shapes

A shape tool is included when you download the stack. You can also use the online version found here: shape tool

With this tool you can create your own shapes to add to the Image Sector stack.

The artboard is 500px wide by 500px tall by default and starts with a single point shown as a green dot. To add new points hold down the command key and click anywhere on the artboard grid. The artboard can be adjusted for Shape and Object modes. For Edge mode the artboard must be set to 500px by 500px to work properly. Your design must also include a point at the top right and bottom right of the artboard so that the graphic can extend properly to the edge of the browser.

Each new point can be set to 4 different types. “L” is for “Line” and will simply be a straight line from the previous point. “Q” stands for “Quadratic Bezier” and will give you two handles to adjust the S curve of the line leading up to this point. “C” stands for “Cubic Bezier” and will give you a single handle to adjust the curve of the line leading up to this point. “A” stands for “Arc” and will create a circular shape between the selected point and the one preceding it.

Continue to add more points and adjust them to create a completed shape. Make sure your design covers most of the artboard space so that it can scale properly inside the Image Sector stack.

Once you are satisfied with the design, copy and paste the “Shape Path” into the Image Sector stack’s shape path field. You can then use the stack’s settings menu to adjust how the shape fits. If you have adjusted the artboard size, you will also need to copy over the artboard dimensions in the the “Artboard” fields.

Shape tool settings

Width and Height: Adjust the size of the artboard. If this value is changed, you will need to update the “Artboard” fields to match in the stack settings menu.

Close path: By default the shape will automatically be closed. Disable the “Close path” option if you would like to close the path manually after completing the design (By adding a new point in the same exact position of the starting point).

Grid size: Adjust the size of the grid lines by px.

Snap grid: When enabled, newly created points and points that have been moved will automatically attach to the closest grid intersection.

Show grid: When enabled, grid lines based on the grid size will display on the artboard.

Reset Path: Will remove all the points from the artboard except for the starting point.

Point x position: The position of the currently selected point along the x or horizontal axis.

Point y position: The position of the currently selected point along the y or vertical axis.

Shape Sector

Setup

After adding the stack to the Stacks page you will notice that the stack’s background has been set to a gradient. This is so that the shape and color is visible in its default state. You can disable the gradient background in the stack’s menu “Background” section. If you intend to keep the shape’s color white, you will need to add a background color, image, or use a gradient background.

In the settings menu “Shape” section you can select from any of the 34 pre-made shapes and optionally flip the design to adjust the appearance.

There is also a custom option that allows you to add your own shapes. See the “Creating custom shapes” tutorial below to learn more.

By default, the shape will display at the bottom of the section. You can change its position in the stack’s menu “Shape Settings” section. This section is also where you can modify the style and size.

Generally, you will want to leave the shape size set to “Cover”, the height set to 120px, and the horizontal align to “Center”. You can adjust these options to get a different fit if you need to, but they are not necessary for setup.

Select a color for your shape and add a new Shape Sector stack (or any other section/column stack) below this one. The background of the added stack needs to be set to the same color to complete the section divider effect.

Settings Menu

Shape: Choose from 34 shapes to divide your content. You may also select “Custom” to add your own path created with the shape tool.

Flip horizontally: Optionally flip the shape to change the direction of the design. This option is most useful for asymmetrical shapes or for when creating a section frame.

Shape size: Select how the shape fills the space between your sections. By default “Cover” will make sure the shape does not distort but will clip the left and/or right sides of the shape to make sure it covers the entire area. “Contain” will also make sure the shape does not distort but the entire shape will always be visible which may leave space to the left and/or right. “Fit” will cause distortion but the entire shape will always be visible without any space to the left and/or right side.

Height: Adjust how much space the shape takes up vertically. This will also adjust the size and/or fit of the shape depending on what shape size option you are using.

Position: Optionally move the shape above the content instead of below.

Hor. align: Change the alignment of the shape. By default the shape will be centered, aligning the shape to the left or right will change how it is clipped if the shape size is set to “Cover”.

Hide shape on mobile screens: Disable the shape on mobile devices.

Creating section frames

You can create frames simply by nesting the Shape Sector stack inside of another Shape Sector stack.

You will need to select one of the two stacks and set it’s position to “Top” in the stack’s menu “Shape Settings” section. The shape will be flipped vertically or modified to match as the top part of the frame.

Creating custom shapes

A shape tool is included when you download the stack. You can also use the online version found here: shape tool

With this tool you can create your own shapes to add to the Shape Sector stack.

The artboard is 1440px wide by 90px tall and starts with a single point shown as a green dot. To add new points hold down the command key and click anywhere on the artboard grid.

Each new point can be set to 4 different types. “L” is for “Line” and will simply be a straight line from the previous point. “Q” stands for “Quadratic Bezier” and will give you two handles to adjust the S curve of the line leading up to this point. “C” stands for “Cubic Bezier” and will give you a single handle to adjust the curve of the line leading up to this point. “A” stands for “Arc” and will create a circular shape between the selected point and the one preceding it.

Continue to add more points and adjust them to create a completed shape. Make sure your design covers the entire grid area from left to right in order to fit all device screen sizes.

Once you are satisfied with the design, copy and paste the “Shape Path” into the Shape Sector stack’s shape path field. You can then use the stack’s settings menu to adjust how the shape fits.

Shape tool settings

Close path: By default the shape will automatically be closed. Disable the “Close path” option if you would like to close the path manually after completing the design (By adding a new point in the same exact position of the starting point).

Grid size: Adjust the size of the grid lines by px.

Snap grid: When enabled, newly created points and points that have been moved will automatically attach to the closest grid intersection.

Show grid: When enabled, grid lines based on the grid size will display on the artboard.

Reset Path: Will remove all the points from the artboard except for the starting point.

Point x position: The position of the currently selected point along the x or horizontal axis.

Point y position: The position of the currently selected point along the y or vertical axis.

Quick Editor Admin

Please click the link below to see the tutorials and troubleshooting information for Quick Editor Admin. The tutorials have been moved to the stack preview page so that you can enable the editor and follow along with the “Using the editor” steps.

Quick Editor Admin Tutorials

 

Text Detect

Setup

After adding Text Detect to your stacks page you will see two color coded sections.

In the dark blue “Inputs” section you will need to place any stack or form element that accepts user input. This is where the page visitor will type and the stack can try to find matches for key terms or phrases.

If you do not want to place form elements or other input stacks and would rather just have a space for someone to type, add a HTML stack and place a textarea element inside by like so:

<textarea></textarea>

Next, in the red “Pop-ups” section you can add your custom notices. Click on the Pop-up stack to see it’s settings menu.

Here you can create a list of comma separated terms and/or phrases that you want to trigger this specific pop-up. Disable “Case sensitive” if you want a word/phrase to match regardless if it has capitalizations or not. You can also disable the “Allow partial word matches” when you don’t want a word to match when it is apart of a different word (IE the word “firetruck” would not trigger a match for the word “fire” when this is disabled).

Add any content that you need to the Pop-up to display to the user when a term/phrase is detected. Finally, click the blue add button if you would like to create more pop-ups.

 

 

Layouts

Text & Image Setup Example (Using Stacks 4)

Drag and drop the stack into the editor to get started.

By default a single column stack will be present in the main Layouts stack (The main Layouts stack is highlighted in blue in the screenshot above). Though the Main Layouts stack has column and sizing settings, it’s recommended that you leave those settings set to their default values and use the inner column stack settings instead. The main Layouts stack serves as a complete content section where you define the background color/image and add padding to separate it from other content sections.

For our example we will be adding 120px of padding to the top/bottom and setting the background color as white.

Next we will select the preloaded column stack and change it to a row by using the “Content” setting. After that we will change the “Column count” to 3.

We can then click on the + icon in the stacks editor to automatically add 1 more inner column stack.

Each column can have their own sub-columns and can also be adjusted to take up variable widths based on the column count of the parent “Row” stack. In our example we are going to expand the second column by changing its “Column Width” setting to 2. This means it will take up 2 of 3 columns spaces or 2/3 of the entire row (The 3 in 2/3 was defined when we set the parent Row stack column count to 3).

From here we can optionally add more column stacks to create other unique layouts inside this row. In our example we are going to click on a + icon to add 2 more stacks and use the “Content” setting to change them into a heading and text stack. We can then move those two stacks into the first column.

In the second 2/3 column we will add an image. By default, each column’s content will align to the top of the Row. In our example we want the text to align to the middle of the image we have added. To achieve this, select the first column and change the “Align self” setting to “Center”.

We have now created a simple image and text section. See the Stack settings section below to learn more about the different things you can do with the Layouts stack.

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.

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 – 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.

Align self – This sets how the column itself aligns vertically to the other columns in the row. The default setting “Auto” will not align the column but rather stretch the column to match the height of the other columns. This can only been seen if a background color is set to the column. See below for a visual example of the remaining options.

Note: The column must be shorter in height than one of the other columns in the row for these options to have any effect. Like in the example above, the images are already at both the top and bottom of the row and cannot be aligned.

Align content – This setting is only available in column stacks without sub-columns. This sets how the content aligns vertically inside of the column.  See below for a visual example of the options.

Note: The column content must be smaller than the total height of the  column for these options to have any effect. A column with content equal to the height of the column has no space to align.

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.

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%.

 

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

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

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~

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.

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

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!

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.