1. Drag the Siphon Stack into the Stacks editor.

Once the Stack is in the editor, you will see three components. The Container on the outside wrapping a single Slide, and the Slide wrapping a single Answer. The container is purple, the slides have a black border around them, and answers have a white border around them. There are also blue buttons that will allow you to add more slides to the container or add more answers to a single slide.

siphon components


2. Change the text “What do you want to ask?”, found above the answer, and replace it with a relevant question.

In this example we will ask “What is your name?”.

Now we need to set up how the form users will reply to this answer. Since the answer will be unique we need to use an input field. By default the answer is set to “Clickable Content”, to change it:

3. Click on the answer component to bring up its settings panel to the right of the editor. Change the option Answer Type to “Input Field”.

There is also an option to change what the label says underneath the input field. We will change it to “Name”. We will not be checking the Required option, but if you do enable it, page visitors will not be able to leave the input blank and progress to the next slide.

Version 1.5.0+ adds a new option titled “Validate as email”. Enabling this option will not allow the page visitor to progress to the next slide until they have entered a valid email address format. Best to ignore this for now.

answer settings

4. Click on the Slide component to pull up it’s settings panel and give the slide a unique Slide ID.

The ID can be anything you want it to be, but every slide should have it’s own unique ID. The value is case sensitive and you should avoid using special characters (!@#$%^& etc) with the exception of dashes - and underscores _ .

There are three fields in the settings panel, but we will only need to set the Slide ID for this slideIn this example we will give it the ID “q1″ (for question 1).

Leave Display order set to “Automatic”, we will go over this option later.

Version 1.5.0+ adds per slide background style settings, these are cosmetic and completely optional.

slide settings

The first slide is now finished and does not need anymore content, but you can add any additional info or Stacks content by dragging and dropping other stacks inside the Slide’s black border. You could also add more answer input fields if you wanted to get more information from a single slide.

5. Click the Add New Slide button to add a second slide.

In this slide we can use Siphon’s short-codes to greet the page visitor by name. An example of how to do so would be to change the question value ”What do you want to ask?” to “Hello [q1], what is the best way to contact you?”. The short-code:


is simply made by wrapping the first slide’s Slide ID in brackets. The short-code will be replaced by the value given in that specific slide.

short-code example

Now we need to create answers for this second slide. This slide is going to have multiple choice answers, so we can leave the Answer component set to “Clickable Content”.

6. Drag and drop a Text Stack into the “Drop Stacks here” section of slide 2′s answer component.

For our example, we are going to change the text value to “Phone”.

7. Click on the answer component to open it’s settings panel and create a Value for the answer.

Unlike the input field, which gets it’s value from what has been typed in by the page visitor, “Clickable Content” answers do not have a value by default so one will need to be createdIn our example, we will change the value of this answer to “contact by phone”. When a page visitor clicks on this answer, that value will be recorded.

To add a second answer, you can either duplicate the phone answer or:

8. Click the Add New Answer button to add a second choice for the page visitor.

In this answer we will add the text “Email” with the answer value being “contact by email”. 

Version 1.5.0+: Enable the “Validate as email” option so that the form verifies the email format.

Answer values

Just like we did for the first slide we need to:

9.  Create a unique Slide ID for this slide.

In this example we will give this slide the ID “q2″.

Note: It’s very important to remember to give each slide an ID. If a slide is missing an ID it can cause errors when page visitors try to use the form.

Now we need to show conditional slides according to how the second question is answered. First we will create a slide for people who want to be contacted by phone.

10. Add a new slide. This slide will only display on a condition based on the previous slide’s answer.

For our example the question will be “What number should we use to contact you?”. The answer should be an input field and in our example we are using “q3a” as the Slide ID.

conditional slide

We do not want this slide to display automatically, so:

11. In the slide settings panel uncheck the option “Automatic”. Two new fields will appear. To set what slide should come before this one, type in the previous slide’s ID into the After Slide ID field.

This slide is based on the second slide’s answer so we will put “q2″.

We want this slide to show only if the page visitor has chosen “Phone”.

12. Set the field Has Value equal to one of the answer values of the previous slide.

Version 1.5.0+ adds a new option titled “Has any Value”. For more information on what that does see the section titled “Creating Multiple Branches” below. For now you can ignore this option.

In our example we will put “contact by phone”.

This field is case sensitive and the value should match completely to the value you added to the answer in question 2.

conditional slide

13. Create a new slide just like the previous conditional slide.

In this new slide the question will be “What email address should we use to contact you?” and we want it to show when slide ID “q2″ has the value “contact by email”. This new slide ID will be “q3b”.

Now we can create a submit slide to do something with the collected answers. You can definitely create more slides gathering more information or skip adding a submit slide altogether if you just want to provide links or display conditional content. For this example we just want to cover all of the information you need to create a form.

14.  Add a new slide and in the slide’s settings panel, change the slide type to “Submit /  Email Data”.

submit slide

This will remove the Question field and add a submit button. When page visitors click the submit button all of the chosen and filled in answer values will be emailed to the address you provide.

15. While still in the settings panel, set the From field by using a Slide ID from a corresponding slide that has an email value.

In our example slide “q3b” will have the page visitors email address.

Note: Our example is just to teach you how to set up Siphon. You may want to make sure every page visitor provides an email address an not just those who want to be contacted by email.

16. Set the To field to the address you want to receive the form data. You can also change the Email Subject to whatever you would like as well as the text found in the submit button.

17. Give the submit slide a unique Slide ID.

submit slide

We now need to create a final slide to show once all other slides have been filled out and submitted.

18.  Add a new slide and in the slide’s settings panel, change the slide type to “End /  Complete”. This is a blank slide that you can add any stacks content to. This slide will only display if the submit slide has successfully send the message.

Note: No error will display if you have entered in an email address wrong. Be sure to check your To email field for spelling errors.

19. Finally, you can click on the outer Container element to get to the Siphon Styles settings panel. In this panel you can customize the form.


Siphon includes an example file showing you how a simple contact form is set up. If you need to re-download the example file you can use the Purchase Order Lookup Form.

Settings Panel

margin and padding

Content Width – Set the a limit to how wide the content can be. The content will be centered with equal padding added to the left and right  if the browser window or parent stack is wider than the set amount.

background styles

Background Gradient Mode & Animate Gradient - If the background has been set to gradient, you can animate it by enabling the “Animate Gradient” option. This will cause the background to move slowly back and forth in the direction of the gradient.

Background Image Mode & Attachment - If the background has been set to image, you can make it so the image does not move when the page is scrolled adding a parallax style effect by settings Attachment to “Fixed”.

question font styles

Question Styles - These settings only effect the question or text found at the top of each slide.

text font styles

Answer & Text Styles - These settings affect all the text below the question or text found at the top of each slide.

Hover Color – This setting affects the color of the answer elements when they are hovered.

Input Color - This setting affects the color of the text inside the input elements when they are filled in.

Input Bg Color - This setting affects the color of the background of the input elements.

Input Style (v1.5.0+) - Change the style of the input fields from underlines to boxes.

debug mode

Debug Mode - If you are having trouble with the Stack, you can enable this mode to have the console display a log of what is happening step by step. We only recommend enabling this option when contacting support to help resolve an issue.

Creating Multiple Branches

Version 1.5.0+ allows you to create multiple branches each with their own submit and end slides. This way you can combine multiple forms into a single Siphon Stack.

multi branch flow chart

Lets say you wanted to create a multiple branch form like in the illustration above. The grey box shaped like a chat bubble would be slide ID: s1 while the branch on the left would be slides: red1, red2, and red3. We will ignore the other two branches as they will be set up the same way the red one will be.

s1 would ask a question and give you three answers to choose from: Red Branch, Green Branch, and Blue Branch. 

For slide red1 we will set it to display after slide s1 has the value Red Branch.

has value

Slide red2 will then need to be set to display after slide red1 “Has Any Value”. The “Has Value” field should be left blank as it does not mater what value is given in slide red1, this slide will display always after slide red1.

has any value

If we had set slide red2 to display Automatically it would have displayed regardless if slide red1 was displayed at all.

Slide red3 would then also need to be set to display after slide red2 has any value.

Siphon includes an example file showing you how to set up multiple branches. If you need to re-download the example file you can use the Purchase Order Lookup Form.

Conditional Content Within a Slide

Version 1.5.0 introduces a new included “If” Stack. This stack can be used to show conditional content in a slide depending on how a user has answered a previous slide. As an example you ask a user their age and show different content to people younger than 18 than those over 18, even changing what choosable answers there are.

if stack

The stack functions as if you were reading it from top to bottom. In the above screen shot it would read:

“Show this content if slide key i1 is greater than or equal to 1 and (if) slide key i1 is less than or equal to 10″

This means this content would show if values 1-10 are given and would not display if the value was too high, too low, or if text was given instead. You can also use text values instead of numbers.

Siphon includes an example file showing you how to use the “If” Stack. If you need to re-download the example file you can use the Purchase Order Lookup Form.

Using Multiple Input Fields

If you want to use multiple input fields (Input or Text) in a single slide you are able. You can not however mix “Input fields” & “Text Fields” with “Clickable Content”.


Display Slide Value-  To use a value from a previous slide, simply take the Slide ID (of slide that contains the answer value you want to use) and wrap it in brackets [ ]

For example, if I had a slide with the id “slide3″, I would place the short-code


anywhere text is accepted in any following slide. That short-code will be replaced by the value given by the page visitor.

Multiple Input Fields -  When you want to create a short code for an input field value that comes from a slide with multiple input fields, you will need to reference which value you want to use by adding a dash (-) followed by a number representing it’s placement order. For example, If I had two input fields and one text field in a single slide, and I wanted to get the value from the second input field, my resulting short-code would be


slide3 example

Submit / Email Data Slide - You can also use short codes in the From and Email Subject fields of a Submit / Email Data slide. If you have a slide that collects the page visitor’s email address use that slide’s ID in the From field. Do not include the brackets when placing the slide’s ID in this field. You can also include multiple short-codes in the Email Subject field to help you quickly identify the contents of the email message.

submit short codes


Submit Slide – Autoreply

When setting the Slide Type to “Submit / Email Data”, you will have the option to send an automatic reply message when a user submits the form.



Add your email address to the “From” field to allow users to reply to your automated message. You can add a value like “No-reply” if you do not want users to be able to reply to the message. The subject and body fields support short-codes so that you can add information gathered by the form (like a name for instance).

Note: If one of the slides has not asked the user for their email address the Autoreply will not have an address to reply to. The Submit Slide From field will need to contain the Slide ID of the slide that gathers the user’s email address.

short-code email address


Custom Email Format

The “Submit / Email Data” Slide Type will send a message with the user’s answers to the email address you specify. By default, when a user submits the information, the message sent to your email will contain all the answers given by the user separated line by line. To create a custom layout and to make the email more readable for your specific needs you can enable the “Custom Email Format” option.

custom format


This will allow you to use short-codes to organize the slide answers, adding titles and grouping them together.

AJAX to PHP (Advanced)

ajax to php

This Slide type is meant for those users who know a little about PHP and have or will write a custom script to handle the submitted form values. The values will be posted to a custom URL. The posted values can be used like so:

$data = $_POST["submitted_data"];


Please follow & like us :)
Follow by Email

Live Data


1. Create a new or open a saved spreadsheet in Google Docs:

2. In your RapidWeaver Stacks’ page, place the Live Data Stack at the top of the editor.

3. In order to import data you will need to obtain a key from your Google Spreadsheet. In the settings panel click the “Show Obtaining Key Tutorial” checkbox to learn how to get your key.

spreadsheet key

3a.(Optional, skip if you are not using tabs in your spreadsheet, if you don’t know what I am talking about it’s best to skip this step) Change the Tab # value to match the tab you want to use (tabs are found at the bottom of the Google Spreadsheets editor).

3b.(Optional, skip this step if you only plan on using one Live Data Stack) In order to use more than one Live Data Stack to import multiple spreadsheets, you will need to create a unique Shortcode ID for each. The ID is case sensitive and should not have spaces or contain any special characters (-_+=!@#$ etc).

id to ratings

4.  You will be using short-codes to let the Stack know where you want data to be placed and to declare what cell in the spreadsheet to use.

What is a Short-code?
A short-code is a short line of code that lets you do things with little effort. Short-codes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Short-code = shortcut.

In the example short-code below, the first part “data” is the Shortcode ID of the Live Data Stack and the second part “A1″ is the cell location of the data to use.


After creating a short-code, you can place it anywhere text is accepted.


If you have changed the default Shortcode ID from “data” to “ratings”,

id to ratings

and in the spreadsheet that you have gotten a key from has a value in cell G3 that you want to use, your resulting shortcode will be:


Place this code anywhere text is accepted to have the value from cell G3 display in that location.

shortcode example

You can import as many cells as you need to from the spreadsheet. I.E. [ratings-A1], [ratings-B3], [ratings-AA22], etc, all on the same Stacks page.

Note: The shortcode is case sensitive and requires the dash between the Shortcode ID (ratings) and the Cell location (G3).

Additional Settings

 Live Updating – Enable this option if you want the data to update at timed intervals. This will allow that data to update without your page visitor reloading the page. After enabling this you can set how long in seconds the Stack will check the spreadsheet for updates.

Example – Using Live Data with IFTTT and Super Forms/Siphon

In this example we will be using an automated recipe service called IFTTT along with the Super Forms Stack or Siphon Stack to create a form users can fill out that will automatically send data to a Google spreadsheet. This tutorial assumes you have already gone through the basic setup for the Live Data stack found in the tutorial above.

The result will be the same as the example found on the preview site for Live Data under the heading “Stacks Integration”.

stacks integration

1.  Log into your IFTTT account or create an account (It’s Free). IFTTT stands for IF This Then That, which in our example will mean, IF This(someone submits a form using Super Forms) Then That(store the data from the email in a Google spreadsheet).

2. Once logged in to IFTTT, click on your user name in the menu in the top right corner, a dropdown menu will appear, now click on “Create“. We will be creating a new recipe that does the work for us.

create new recipe

3. In the new page, click on the word “THIS” written in big blue letters. We will be setting what needs to happen first.

4. In step 1 of setup for your IFTTT recipe, search for “email” and select the icon labeled “email”.

that - email

5. Then in step 2 select “Send IFTTT an email tagged”. This option means if the IFTTT email address receives an email from your account’s email address (the address associated with your IFTTT account) with a specific tag in the subject line, it will execute your “That” part of the recipe, which we are about to define after this. Don’t worry if it’s not making much sense yet, just follow the steps and once we are done you can see it in action.

email tagged

6. In the 3rd step you can create any tag that you deem relevant, but for our example we will use “#rating“. Click “Create Trigger” to proceed.

rating tag

7. In the new page, click on the word “THAT” written in big blue letters. We will be setting what needs to happen after the email is received.

8. In step 4 search for “spreadsheet” and click on the “Google Drive” icon.

spreadsheet ifttt

9. Then in step 5 select “Add row to spreadsheet”. This will create a new row in your spreadsheet containing the information sent in the email from the “This” part of the recipe.

google spreadsheet

9. In step 6 of the IFTTT recipe setup, you can leave everything the same and click “create action“, and then click “create recipe” in step 7.

10. The IFTTT recipe will automatically be active so now we need to setup Super Forms to get it’s forms to submit emails to the IFTTT email address

11. In your RapidWeaver Stacks page, add Super Forms or Siphon to the editor.

Super Forms:  Add a Select field Stack.

super forms

Siphon: Add 5 answers to the first slide by clicking the “Add New Answer” button.

12. Create the selectable values.

Super Forms: Edit the Select field Stack’s options to have selectable values between 1 and 5. We have also placed a title above the Select field “How are you feeling today?”.


Siphon: Change the first slide’s question to “How are you feeling today?” and add text to each of your answers listing the numbers 1-5.


Siphon: Each answer needs to have a “Value” associated with the text in the answer.

answer value

13. We will need to edit some values in Settings Panel to get it to submit it’s emails to IFTTT.

Super Forms: In the “Email” field put , In the subject line put the tag you created in step 6 above (Step 3 of the IFTTT recipe setup), for our example it was #rating. Then in the settings panel under the heading “Troubleshooting” enable “Send from my email” and type in your own email address (the email address you used to sign up for IFTTT) into the email field below it.


Siphon: Add a new slide and change it to a “Submit / Email Data” slide type. In the settings panel for that slide, add to the “To” field. In the “Email Subject” field put the tag you created in step 6 above (Step 3 of the IFTTT recipe setup), for our example it was #rating. In the “From” field type in your own email address (the email address you used to sign up for IFTTT).

submit slide

14. Publish this page and after it is published, navigate to the page online and use the form to see if it is working. If the email sends successfully you can go to Google spreadsheets and see if IFTTT has automatically created a spreadsheet with the data. If everything worked you will find a spreadsheet titled “Send IFTTT an email tagged“.


15. Inside the document you will see a row similar to the screenshot below.


Notice that the value “5″ is being added the the D column. Every time someone submits an email using the Forms the email body will appear in this column.

Super Forms: We need to remove the text from this column to find an average value so we will select cell E1 and add the formula:

=SPLIT( LOWER(D1) , "abcdefhijklmnopqrstuvwxyz:" )

Siphon: We will not need to filter any text out, skip to step 16.

cell e1
Super Forms: This will move the value from column D into column E without the text. Now we just need to copy the formula into the entire E column. To do so, highlight and copy (Cmd + C) cell E1 and then click on the E above that cell to highlight the entire column then paste (Cmd + P).

highlight column

16. Now we just need to find the average by using the formula:

Super Forms:

=AVERAGEIF(E1:E, ">0")

You can place this formula in cell F1. This will find the average of all the values in column E. We do not have much data now but as page visitors use the form more values will appear.


=AVERAGEIF(D1:D, ">0")

You can place this formula in cell D1. This will find the average of all the values in column D. We do not have much data now but as page visitors use the form more values will appear.

17. Finally, you will just need to set up Live Data (just like in the Setup tutorial at the top of this page) to use cell F1.

Please follow & like us :)
Follow by Email


HTML Element Settings

html settings

Element Tag - This field is where you will declare what type of HTML element to use. Accepts any valid HTML element (div, section, article, a, input, img, etc). Note: The element that is created will not be wrapped in Stacks’ standard div elements.

Classes - Optionally declare an unlimited amount of CSS classes. Each class should be separated by a space. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

ID - Optionally declare a single ID for the element. Your ID should be unique and not contain any spaces. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

Href/Src - Use RapidWeaver’s link window to set a link to a page or resource. This field is only visible if the element has been set to “a” or “img” element.

Attributes - Optionally add any custom attribute. The attribute should be added in the following format with the equal sign and quotation marks added: attribute-name=”attribute-value”

Content Type - “Wrap” will allow you to nest other HTML elements and stacks inside this element. “HTML text” will allow you to type in text, which is useful if your element is a header or paragraph tag. In the image below, the top element is set to “Wrap” while the bottom is set to “HTML text”. The element type will display in the Stacks’ editor as well as the assigned class names to help with organization.



CSS Settings

CSS Only / Remove Element - Enable this option if you do not wish to create a new HTML element but declare a CSS Rule instead. Once enabled the HTML element will be removed and the CSS Selector Title will display in the Stacks’ editor. This title will only display in edit mode and wont add anything to the actual published HTML. All of the declared CSS will be added the the current page’s Stacks CSS file.

Element Selector - By default this field is set to “[this]“. This value will automatically apply a random generic classname to the element and apply all of the non-default CSS to this element only. To apply the non-default CSS to elements with a specific class you can create a unique classname.

To create a classname type a period ( . ) into the “Element Selector” field, this period stands for “class”. Follow the period by typing any unique name. The name must begin with a letter (a–z) and accepts more letters, numbers, hyphens ( – ), and underscores ( _ ) with no spaces in-between. The name must also be at least 2 characters long.

Good Examples:


Incorrect Examples:

.my class (has a space)
.2myClass (begins with a number)
.&my-class (contains unsupported "&" character)

You can then add this classname to any HTML element’s “Classes” field to have the CSS apply to it. Since this field is specific to classnames you will not need to add the class symbol (or period symbol) to the name when entering it into this field. Each classname you add should be separated by a space.

Note: If you leave the “Element Selector” field blank none of the CSS rules will be applied.

Single class example:



An advanced selector example with IDs and element selectors:

detailed name

CSS Rules - An explanation of every CSS rule will not be detailed in this tutorial. We recommend checking out w3schools for a property by property explanation.

CSS Properties

Custom Rules and Media Queries

custom feilds

If there is a rare CSS rule that is not listed in the settings panel you can add it to the “Custom Rules” fields. Additionally if you need to add an “!important” tag to a specific field you can declare it here as well. To do so, list the rule title followed by a colon (:) and then the value. You will not need to add a semi-colon(;) to the end unless you wish to declare a second rule in the same field (good for copy and pasting large amounts of CSS rules).

Media queries can be declared for responsive purposes. To add a media query size declaration first type in “and” followed by the rule encased in parenthesis. You can add multiple size declarations in a single field as long as each is prefixed by the word “and”. For example, “and (max-width: 1000px) and (min-width: 600px)” can be typed into the same field as opposed to one in each of the two fields.

Please follow & like us :)
Follow by Email



walkthrough core image

1. Before adding the Walkthrough Stack to your Stacks page you must add the Walkthrough Core Stack. This Stack will enable all the Walkthrough Stacks you add to your page. The Core stack must be placed above the other stacks and preferably at the top of your Stacks page.

core at the top

2. Drag Add drop a Walkthrough Stack above the Stack element you want to highlight. In this example I will be highlighting a “Text” stack.

walkthrough stack

above the element

3. Now grab the Stack element you want to highlight ( ”Text” stack in this example) and drop it into the top “Drop stacks here” section, above the chat bubble in the Walkthrough stack.

nested element

4. Repeat steps 2-3 until you have added as many steps as you want to display.

Note: After you are done with setup, select the first Walkthrough Stack you added and change it’s Secondary Button “Function” to “Close Steps” or “None”. If you leave the function as “Previous Step” there will not be a previous step to go back to.

close button


Customization Options

Walkthrough Core Stack

The Walkthrough Core Stack is where you will find the global settings and color settings for all of the notice/alert chat bubbles.

Activate – Setting this to “On Load” will make Walkthrough automatically start when the page has been loaded. Setting this to “On Hover” will make Walkthrough start whenever the visitor hovers the mouse pointer over any of the Walkthrough elements, once the Walkthrough has been closed it will not re-initiate. Setting this to “On Click” will make Walkthrough start when any part of the Walkthrough elements have been clicked.

Delay – Set how long in seconds to delay initializing Walkthrough. This option is only available if the “On Load” Activate setting has been selected.

Width – This sets how wide all of the Walkthrough notice/alert chat bubble will be.

Show Header Close Icon – Enabling this will display an “X” icon in the top right of the Walkthrough chat bubbles.

Overlay & Transparency – These color settings allow you to place an overlay behind the active element to hide or fade the rest of the web page, bringing focus to the the active element. To remove the overlay just set the Transparency value to 0%.

Walkthrough Stack

Some options need to be set specifically per element. The Walkthrough Stack is where you find these specific options.

Scroll to Element – Enabling this will cause the browser to automatically jump to the location of the element when it is highlighted. If this is disabled, the chat bubble will still appear in the window and will attach to the element when it is scrolled into view.

Show Header – Enable this to show a colorable header to the chat bubble.

Header Title – Add a title to the Header of the chat bubble. This option is only available if “Show Header” is enabled.

Order – Set the order (in increasing numbers) that the steps will appear. Setting the value to “1″ will make it appear before “2″ and so on.

Position – Select where you would like the chat bubble to appear in relation to the highlighted element. You can also choose “Center in the Window” to display the chat bubble in the center without highlighting any element.

Secondary Text – Change the secondary button’s text

Secondary Button Function – Choose what the button will do when clicked. You can have it navigate to the previous step, close the Walkthrough, Navigate to a custom link, or you can remove the button.

Primary Text – Change the primary button’s text

Primary Button Function – Choose what the button will do when clicked. You can have it navigate to the next step, close the Walkthrough, Navigate to a custom link, or you can remove the button.

Please follow & like us :)
Follow by Email

Page Flux


1. Add the Page Flux stack to any part of your stacks page and it will automatically be enabled for that page.

2. Adjust the options in the settings panel till you get the animation and colors you want to use. While in edit mode, Page Flux will show examples of the selected in and out animations as well as display the currently selected loader and styles. Selecting a new animation option will cause the examples to reanimate, giving you a general idea of what the animations will look like.

3. Add a single Page Flux to each of your websites pages to ensure the animation is fluid between all pages.

Importing Page Flux into a non-stacks page

You can add Page Flux to non-stacks pages by importing it using the PlusKit plugin.

1. Add the PlusKit plugin to your RapidWeaver project. This will allow you to import Stack pages into non-stack pages.

add pluskit

2. Now you will need to add a new stacks page to import into your preferred non-stacks page.

add new stacks page

3. Give a unique title to this new stacks page, in this example we will be simply calling it “Page Flux”.

page flux page title

4. Add the Page Flux stack to this blank stacks page and style it how you would like it to animate. Be sure to open the Page Inspector > General Settings and disable “Show in navigation” so that this page does not show up on your site as it’s own standalone page.

disable show in navigation

5. Navigate to the non-stacks page you wish to import Page Flux into and open the Page Inspector > Sidebar. Add the code below into the sidebar and replace “PageNameHere” with the title you created in step 3.


For our example the import code would be “@import((Page Flux))”. Note: The page name is case and space sensitive.



import page flux


6. Highlight the  import code and select “Ignore Formatting” from the “Format” dropdown menu.

ignore formatting


Animation Settings

In Animation – Sets how the page will animate in when it is loaded.

In Duration – Controls the speed of the In Animation.

Out Animation – Sets how the page will animate out when a new page is loading in.

Out Duration – Controls the speed of the Out Animation.

Use Overlay Animations – Enable this option to replace the animation in and out options with overlay animations. Note: If using Overlay animations it is recommended that you use them in every page of your website. If one page does not have the overlay the effect can be lost.

Loading Settings

Loader  - Choose an loading icon animation. You can also use a custom image that display while the page is loading.

Size – Controls the size of the loader

Speed – Sets the speed at which the loader rotates or animates.

Override Theme Body Color – Enable this option to set the color of the background. This will keep the background from flashing white in-between page loads.


Please follow & like us :)
Follow by Email

Scroll Up

Definition of Terms

General Options

Theme : Three themes comes with the stack (Default, Image, Tab). Default is a simple container that has the sorta look that it’s floating, Image allows you to replace the button with an image that you can upload (one is provided in the download files), and Tab is a tab that pops out from the bottom.

Font Awesome On : Allows you to easily add font awesome icons in, though you must still activate font awesome with our Free Font Awesome stack (unless your theme has it already) – note that there is a paid version too, but this is not needed for this option to work.

fa- : This option is available only when Font Awesome is turned on and allows for typed in Font Awesome Icons.

Icon After Text : By default the icon will appear before the text, but you can place it after if you like with this checkbox.

Text : This is the text that displays. Note that you can leave this section empty, which can look nice with Font Awesome icons. This section accept HTML, so if you like the icon at the top (as it is in the demo page) you can place a <br> tag before your text.

Image : This option is only available for the Image theme and is a drag and drop section where you can place your image.

Image Width : Width of the image added in pixels.

Image Height : Height of the image added in pixels.

Horizontal Position : You can position Scotty to appear on either the left, right, or center (v1.1.0+ required for center).

Appear Distance : This is the distance down the screen the user must scroll before Scotty appears.

Font Size : Size of the text assuming something is in that field.

Horiz Padding : Horizontal padding from the text (Default theme only).

Vert Padding : Vertical padding from the text (Default theme only).

Tab Width : The tabs width in pixels (an option for the Tab theme).

Tab Height : The tabs height in pixels (an option for the Tab theme).

Horiz Distance : This option has no effect in the Tab theme and controls the distance of Scotty from the bottom.

Border Radius : This option has no effect in the Image theme and controls the roundness of the borders.

Z-index : This will typically not need to be changed, but if there is another addon appearing over Scotty this number may have to be increased. The z-index is an arbitrary number that controls what items appear over each other when positioned in certain ways.


Animation Type : Fade (default), Slide and None are the 3 options. None turns off the animation, and Fade and Slide are named based on their animation effect.

Scroll Speed : This is the speed at which the user will be returned back to the top of the page in milliseconds.

Anim in Speed : This is the speed of the Fade or Slide animation effect as it transitions in.

Anim Out Speed : This is the speed of the Fade or Slide animation effect as it transitions out.

Color Options

Turn Colors Off : If this box is checked the colors will not have an effect (not checked by default).

Background : The main background color (the Gradient colors will override this unless turned off).

Text/Link : Color of the text inside Scotty, which is automatically a link.

Text/Link (hover) : Color of the text on mouse hover.

Border : Color of the border, which will not appear unless the width value is greater than 0.

Border Width : 0 by default – if increased the border will become larger.

Gradient On : Turned on by default this color will override the background color.

Gradient Start : Color of the gradients start.

Gradient End : Color of the gradients end.

Box Shadow On : Turned on by default this option can be turned off for no box shadow.

Box Shadow : Color of the box shadow.

Box Shadow : The field is set to 0 0 2px 1px, but can be changed (the numbers in order mean: horizontal, vertical, blur, spread).

Text Shadow On : Turned on by default this controls the text shadow.

Text Shadow : Color of the text shadow.

Text Shadow : Set to 0 1px 0 by default, but can be changed (the numbers in order mean: horizontal, vertical, blur).

Please follow & like us :)
Follow by Email

Live Search


You only need to drag and drop the Live Search Stack into the Stacks page where you want it to display. No additional setup is necessary for the Stack to function. Note however, the page must be uploaded online for the search feature to work. While in preview mode the pages do not actually exist anywhere, therefore the search cannot look through any of the pages when you search.

Bellow are  some tutorials on optional customization.

Search Bar Options

Show Suggested Search Terms

Suggested Search Terms

Enabling this will allow you to define any number of suggested search terms. These terms will appear as a drop down selection menu that users can click to automatically populate the search bar. The suggested search terms will also display as they are spelled out in the search bar as a form of auto-complete.

Note: This HTML5 feature is not yet supported in Safari browsers.

Allow Auto-complete

Enabling this will allow browsers to auto-complete search terms that have been previously searched for by the same user.

Customize Appearance

Enabling this option will reveal search bar customization settings.

Search Result Options

Results per Page


Define how many search results will display before sorting the remaining results into navigable pages (pagination).

Word Count

Define how many words each search result displays under the page title.

Open Link in a New Window

Enable this to have the search result links open in a new window or tab.

Show File Path

Enable this to show the file path beneath the page title in the search results.

Customize Appearance

Enabling this option will reveal search results customization settings.

  • Theme – Choose between two themes (chat bubble or plain results). You can also choose options that display the results as a popover, hovering over the content, or embedding the results into the page.
  • Focus Overlay – Choose a light or dark option to enable an overlay that will darken or lighten the background content when a search has been performed.

Custom Page Summary

By default, Live Search will display the first 60 words as the description for a page in the search results. If the searched term is not found within the description, a section from the text containing the searched term will be added with ellipsis (…) to the description.

page description text

This Stack includes a snippet that you can place inside any text area to mark where you want the search results to grab the description from (Stacks and non-Stacks pages).

description marker snippet

To change the description on any page, drag and drop the snippet into a text area above the text you want to display as the description for that page. Then highlight the snippet and choose “Ignore Formatting” from the Format drop down menu.

ignore formatting

In the example below, I have placed the Description Marker below the first paragraph and above the second. Now when this page shows up in the search results it will ignore the first paragraph and display the text from the second paragraph, highlighting any terms found in the description.

example description marker

Show Search Results in a Custom Container

By default, Live Search will display the search results directly below the search bar at the same width of the search bar’s container. In some instances you may want to place the Live Search stack into a narrow container (like a sidebar). However if the search bar’s container is narrow, the search results will also be narrow. The image below is an example of what the results would look like.

narrow search results example

This Stack includes a snippet that you can use to declare where you want the search results to display. In this case I want the search results to display in the Main Content container because there it has a bigger width. To mark where you want the search results to display just drag and drop the “Results Element Marker” snippet into any text area. Then highlight the snippet and choose “Ignore Formatting” from the Format drop down menu.

results container snippet

ignore formatting

In the example below the snippet was placed inside the Main Content container.

main content container example


Advanced Options

Customize Text/Language

Enable this option to reveal text input fields that will allow you to change the language of the search’s messages and placeholders.

Search Additional Pages

Enable this option to define pages that you would like to search through that are not in the navigation menu. Each extra page to search is declared by it’s folder path and filename (both found in the Page Inspector > General Settings) and added to the “Extra Pages” field in the Stacks editor. For pages that do not have a folder path just put the filename. There is no limit to how many pages you add to the “Extra Pages” section.

Note: Each defined page needs to be apart of the same domain and website.

Example: We have two pages, one parent page titled “About Us” and a sub page titled “Our History”.

page examples

If both of our example pages are disabled in the navigation menu (or if the theme does not include sub pages in the menu) we will need to add them to the “Extra Pages” field. For the “About Us” page, check the Page Inspector > General Settings tab for the Folder and Filename.

about page example

This page has a Folder titled “about” and a Filename titled “index.html”. So we will put:


into the “Extra Pages” field. If the Filename was “about.html” and there was no Folder value, you would put:


For the sub page “Our History” we will also look at it’s Page Inspector > General Settings Tab for the Folder and Filename.

history page example


This page has a Folder titled “history” and a Filename titled “index.html”. However, this page is a child of “About us” so we will need to include the parent’s folder as well:


If the Filename of the parent page was “about.html” and there was no Folder value, you would not need to include a parent folder since there isn’t one:


You will also need to add a plus symbol and backslash (+\) between each of the URLs you list. Do not add these symbols before the first or after the last URL listed.


live search info

Note: If your website has allot of pages (100+) it may be quite a task to type out each individual URL for each page. Luckily there is an easier way to get a complete list of all the pages to copy and paste. See the section titled “Get sitemap list” below to learn how.

Hide Description Terms

Enable this option to define certain words or phrases you do not want to show up in the search result page descriptions. For instance, if a certain slogan is on every page and you do not want every search result description to have the same text, you can define it here to remove it from the descriptions. You will also need to add a plus symbol and backslash (+\) between each of the listed terms/phrases. Do not add these symbols before the first or after the last term/phrase listed.

Declare Search Container

If you are using a specific theme and you know the class or id name of a specific element, you can define it here and the search will only search that specified container instead of the the entire page. Prefix a class name with a period(.) or and ID with a hash/pound symbol (#).

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available by right clicking the element on the page you want to be searched. It will show up highlighted.

declare search container

Here are acceptable values for the field (using the info from the screenshot above).

#charis-myExtraContent1 (This is the recommended value if the container has an ID [orange # value] )

.charis-ec (This is also acceptable, but unlike an ID [orange # value], classes [blue . value] can be used more than once on other containers, so other containers with the same class will also be searched)

Note: You can only declare a single container in this field.

Exclude a Page from the Search Results

To keep a page from showing up in the search results, add the snippet below to the Header > Prefix section of the page you wish to exclude.


exclude page

Exclude a Section of Text from the Search Results

If you want to exclude a section of text from showing up within a page in the search results, place the snippet below before and after the text you want to exclude.


exclude text

Include the Current Page in the Search Results

If you would like to include the page the Live Search Stack is on in it’s search results,  just enable “Search Additional Pages” in the Advanced Options. Then add the page’s filename (found in the Page Inspector > General Settings) to the Extra Pages field.

Extra Pages Field

 Get Sitemap List

You can use to get a full list of your entire website’s URLs. This is useful for adding a list of additional pages to be searched. (For more info on how to search pages not listed in your website navigation, see the section titled “Search Additional Pages” above).

After opening, enter your full http address into the “Starting URL” field (In this example we will be using our website “”). Ignore the other fields and click the button labeled “Start”.

click start

After some time, a new page will load with a few Sitemap file download links. The file you will need to download is titled “urllist.txt”.

download urllist

After downloading the file, open it with “TextEdit” (This should be the default program text files open with). Now we will need to remove your base http URL from the URL list in order to use it in the Live Search’s “Extra Pages” field. Open “Find and Replace” function by pressing Alt + Cmd + F on the keyboard.

find and replace

Now type in your base http URL into the top input field and press the button labeled “All” to remove them from each URL.

Screen Shot 2016-07-11 at 8.54.21 AM

replace all

You can now copy and paste the entire list into the “Extra Pages” field to include your entire website in the search.


Please follow & like us :)
Follow by Email

Optic Stats


Optic Stats Core Icon

1. Before adding Optic Stats to your Stacks page you must add the Optic Stats Core stack. This stack will enable all the Optic Stats stacks you add to your page. The Core stack must be placed above the other stacks and prefferably at the top of your stacks page.

Core at the Top

2. Drag Add drop the Optic Stats stack onto your stacks page.

Optic Stats Icon

3. Adjust Optics Stats’ Settings:

Text Settings

Text Settings

Number: This is the number that the stack will count up to. The input field accepts numbers (55), numbers with commas (1,000,000), or numbers with a single period (19.99).

Units: This is what will display directly after the value you have put into the Number field. The input field accepts all characters.

Title: This is a title that will display below the number and units.  The input field accepts all characters.

Offset: Increasing this value will add space in-between the Number and Title.

Enable Font-Awesome Icon*: This will allow you to add a Font-Awesome icon to before or after your number value. *Note: you must drag and drop the Font-Awesome Stack (included with Optic Stats) onto your Stacks page for this option to work.

fa-: Add the name of the Font-Awesome icon you want to use here. For a complete list of usable icons and their titles check out this link here:

Postfix: This will place the icon to the right of the Number rather than the left.

Circle Settings

 Circle Settings

Type: You have 2 display options you can choose. ‘Full’ will display as a circle with a progress bar that wraps around the edge. ”Half’ will display as a semi-circle with the progress bar wrapping around the top edge.

Dimension: This sets the size (Height and Width) of the stack. Note: This stack is responsive, so in the event you define a dimension that is larger than the stack’s container it will shrink to fit the container.

Bar Fill Percent: This sets how far the progress bar will animate to when the stack is in view.

Bar Fill Thickness: This sets how wide the progress bar displays.

Bar: This controls color of the progress bar container.

Bar Fill: This controls the color of the progress bar.

Background: This controls the color of the circle’s background.

Transparent Bar: Enabling this will hide the progress bar container.

Transparent Bar Fill: Enabling this will hide the progress bar.

Transparent Background: Enabling this will hide the circle’s background.

Transition Settings

Transition Settings

Count up to number: If you disable this option, the stack will no longer count up to your defined number.

Transition Speed: This sets how long (in milliseconds) the progress bar filling and number counting will take once the stack is visible on screen.

Please follow & like us :)
Follow by Email

Side Accordion

cleanAccordion’s customization options are very intuitive and do not demand much explanation in most cases, with the slight exception of some terminology that can be defined.

General Setup

Side Accordion Container

To create an accordion you must first place the container stack.

Side Accordion Inner

Then place at least one Inner stack inside. To create additional sections place more inner stacks above or below the other inner stacks.

General width and height controls are provided for the overall sizing of the horizontal accordion. For all sizing the accordion will adjust all of it’s content alignment so that things are centered and spaced well.

Side Accordion Title

When controls use the term “Title” they are referring to the tab part of the accordion.

Side Accordion Description

In instances where the term “Desc.” is used, this is an abbreviation for Description and references the larger content section that opens when titles are active.


By default you can set up all your colors in the containing stack.

Side Accordion Override Colors

You can also override the global colors inside of each inner stack. This is not turned on by default and must be done to each individual stack as desired.

Please follow & like us :)
Follow by Email

Linkedin Connect

Basic Setup:

Step 1:

Place Linkedin Connect to the top of the page.Core at the top

Step 2:

Then in options for “Linkedin Type” select Core. This will activate the stack and allow it to work.

/Note :: For all the posts to be viewable the page must be uploaded.

Linkedin Core



Share Button:

Step 1:

In the options select “Share Button”.

Share button


Step 2:

Now get the URL of the Linkedin page that you want to link. Highlight it and copy it.



Step 3:

Take the link that you just copied and paste it into the Website URL option in the Linkedin stack.

Website URL realmac



Follow Button:

Step 1:

In the options select “Follow Button”.

Company Follow Button

Step 2:

Find the showcase page that you want to link. Showcase pages are an extension of your company pages. For this instance we are using RealMac’s showcase page. Highlight and copy the portion of the URL starting with “/company”. In this case we have “/company/realmac-software”, but for you it will contain either your company or another.

Company Showcase

Take what you highlighted  and go to this link On the page, paste in what you copied in the “Company/Showcase Page Name” section.

Showcase name



Step 3:

Now that you have pasted that info click on the “Get code” button. After doing so find the data-id and copy it. showcase data id


Step 4:

Take the data id that you copied and paste it into the showcase id option in the Linkedin Stack.

Realmac showcase id


/note:: the button wont appear till the page is published/

Member Profile:

Step 1:

In the options select “Member Profile”.

Member Profile


Step 2:

Get the link to the member profile that you want to share then copy the link.

Member Profile



Step 3:

Take the copied link and place it in the Member Url section in the Linkedin stack.

Member Paste



Company Profile:

Step 1:

In the options select “Company Profile”.

company profile


Step 2:

Now get the URL of the Company Linkedin page that you want to link. Highlight it and copy it.



Step 3:

Take the link that you just copied and paste it into the Company Id option in the Linkedin stack.

Company Id Paste

Company Insider:

Step 1:

In the options select “Company Insider”.

Company Insider

Step 2:

Now get the URL of the Company Linkedin page that you want to link. Highlight it and copy it.


Step 3:

Take the link that you just copied and paste it into the Company Id option in the Linkedin stack.

Company Id Paste



Please follow & like us :)
Follow by Email

Carousel Complete

Basic Setup

Step 1: Drag & drop the Carousel Complete stack into the stacks editor.

Carousel Complete icon

Screen Shot 2015-06-30 at 3.18.07 PM

Step 2: If you wish to use an image or a video you can Drag & drop the Clean Carousel Slide stack into the “Drop stacks here” section of Carousel Complete. Otherwise you can instead add a text stack or another 3rd-party stack (Some 3rd-party stacks may not be compatible).

Inner Stack Icon or Text Stack or 3rd party stack (Some other 3rd party stack)

Step 3:  Add stacks to the carousel until you have the amount of slides you would like to use by dragging in each one underneath the previous one before it. Make sure all the stacks are contained inside of the Carousel Complete stack.

Note: Carousel Complete requires at least two slides to function.

Video Setup

Step 1: Select the video option in the Carousel Complete Slide stack.

video select

Step 2:  Add the video’s URL to the “Video Url” field. The Carousel Complete Slide stack supports YouTube or Vimeo URLs.

Screen Shot 2015-06-30 at 3.35.52 PM

Carousel Complete General Controls

Slider Type

Slide In Effect – Determines what animation the incoming slide transitions with.

Slide Out Effect – Determines what animation the out going  slide transitions with.

Add Fade Effect – Adds a fade effect to both the incoming and out going slide for a smoother transition. (Some effects already have fades added to them)

Caption Effect – Determines what animation the caption transitions in with.

Carousel Type

Wide Desktop, Desktop, Tablet, Mobile - These numbers set the amount of slides to display at once.

Wide Desktop –  Effects browser windows that are greater than 1200px wide.

Desktop -  Effects browser windows that are less than 1200px wide but greater than 900px wide.

Tablet - Effects browser windows that are less than 900px wide but greater than 600px wide.

Mobile - Effects browser windows that are less than 600px wide.

Slide By – The amount of slide to transition by.

Center Slides –  If enabled,  the slide in the middle of the carousel will be the focused slide and will always remain centered on all browser widths.

Mouse Drag – If enabled, visitors can click and drag the slides left and right to navigate through them.

General Controls

Autoplay – If enabled, the slider or carousel will automatically transition on set intervals.

Autoplay Speed – Sets the speed at which autoplay transitions from slide to slide. (Only visible if Autoplay has been enabled)

Pause On Hover – If enabled, the slider or carousel will pause Autoplay while the cursor is hovering over the slider.

Video Autoplay – If enabled, any videos inside the slider or carousel will automatically start playing when the slide is visible. (Only visible if Autoplay has been disabled)

Auto Height – If enabled, the slider will automatically adjust to the height of the focused slide.

Wide, Desktop, Tablet, Mobile Height – Sets the height of the slider or carousel at the respective browser window sizes.  (Only visible if Auto Height has been disabled)


Slide L/R Padding – Increasing this value will add space in-between the left and right of each slide.

Arrows – If enabled, navigation arrows will display at the right and left of the slider and carousel.

Pagination – If enabled, pagination dots will appear below the slider. Users can click on the dots to navigate through the slider or carousel.

Background Color – If enabled, allows you to set a background color for the slider or carousel.

Edit Mode Help

Slide Width – This option only effects how Carousel Complete looks in edit mode. Reduce the percentage to allow the slides to appear left to right to save space inside of the stacks editor.


Please follow & like us :)
Follow by Email


cleanTips is a great tool for displaying small notes, information, and links next to information that a visitor might have questions about.

Basic Setup

cleanTips ToolTip Sections

cleanTips has two sections in the edit area. In this example the top is the ToolTip message that will appear when the bottom section is hovered over by the mouse arrow. Note that both sections will accept any other stacks: text, images, media, videos, and other stacks.

After you have placed content inside of both sections select a theme: currently there are two themes “Default” and “Outlined.”

Next select a direction for the ToolTip: Top, Bottom, Left, or Right.

Size of ToolTips & Padding is Important!

Important! cleanTips is intended for small amounts of data by design, though it is not limited to it. The larger the toolTip becomes the more you must adjust the container’s padding to account for it’s size. In addition, depending on the direction the ToolTip is appearing, you may need to adjust the ToolTip’s distance from the message it hovers next to.

Important! There are so many influencing factors to the exact positioning of the ToolTips that the alignment of the ToolTip shown in Edit mode will most often vary from the exact position shown in Preview mode. Fine tuning usually isn’t too hard, but will take a few often take a few tries to get perfect.

Positioning Left & Right

cleanTips position left

When positioning to the left and right the ToolTip will appear outside of the box and can even bun unable to edit at times.

cleanTips position shown in edit

For this reason I created the option to turn off the actual position so that it’s easier to edit.

cleanTips position not shown in edit fix

This makes the ToolTip much easier to edit. So why is this even an option? To help you place the ToolTip horizontally & vertically as it will more closely appear in it’s actual position when in Preview.

Sizing & Positioning

Many of the customization options are very straightforward and lack a need of explanation in most circumstances. For that reason I will be focusing more on the ones that seem the most important.

Position. This option is set to make the ToolTip centered by default, though can be adjusted (the arrow can also be adjusted in another option).

Distance. This option refers to the distance of the ToolTip from the message it appears next to. Negative amounts will distance the ToolTip away from the message where positive amounts will bring the ToolTip closer to the message.

Inherit Width. This is an option available for the Top & Bottom positions as it did not make as much sense for Left & Right. It will set the ToolTip to be the same width as the Message section that it appears next to. This can be turned off and a manual width set.

Padding Exceed Width. This option lets you decide if the padding will increase the size of the ToolTip or if it will not (then pushing the content inside rather than growing the size of the ToolTip.

Arrow On & Arrow Position. These refer to the small triangle that appears next to the ToolTip, which is On by default. You can turn it off and also position it in other areas (centered by default).

Please follow & like us :)
Follow by Email

Countdown Clock

Basic Setup

Countdown Clock comes built as 5 functioning pieces that integrate with each other: Wrapper, Days, Hours, Minutes, and Seconds.

Countdown Clock Elements
The first option in the settings panel titled “Section” is where you choose what function the stack will serve.

After you drag and drop the first Countdown Clock stack into the editor it will automatically be set to “wrapper”. You will then need to place a column stack and the 4 inner elements stacks inside the wrapper under the heading “Time Elements”. First place the 4 column stack, then drag and drop 4 additional Countdown stacks (one into each column) and set each “Section” to the corresponding value: Days, Hours, Minutes, and Seconds.

More information on each element below.


The wrapper controls a majority of the settings and all the time elements (days, hours, minutes and seconds) must be contained inside of it.

A majority of these controls in the General Options section are very straight forward. You first set up the date that the clock will countdown to.

Countdown Clock Text Displayed

Text is displayed by default, but can be turned off. This is the text that will display underneath the individual clock numbers (i.e. Days, Hours, Minutes, Seconds). Note that the language for these can be changed in the individual time elements.

Global colors & sizes for the numbers and text can be controlled, but note that you can override these in the individual time elements if you like.

Font declarations can be made, but these require you to import your own fonts. You can do this manually or you can use various tools such as our Font Importer in our Typography stack suite. If you make no font declarations here and make the fields blank then fonts will be declared by your theme.

Symbols can be placed after Days, Hours & Minutes, such as the common colon symbol :

Countdown Clock Responsive Sizing

Responsive sizing is off by default and may not be necessary if you are using responsive columns. Regardless, if you turn it on you can control sizes for the numbers and text at various screen sizes. The sizes will only adjust when they reach the screen size or below and for no errors to occur please keep these in order from largest to smallest… largest screen size at the very top and smallest at the very bottom.

There are four, but if you wish to have less then simply duplicate, but still keep in order from largest to smallest. Example: 767px, 767px, 480px, 480px. That would adjust sizes only at 767px screen width and 480 screen width, but does assume you also set the number and text size to be the same in each relative screen width.

Adding Time Elements (Days, Hours, Minutes, Seconds)

time elements

As mentioned before, Countdown Clock comes built as 5 functioning pieces that integrate with each other (all found inside the “Section” option). Now that we have explained the wrapper we need to set up the Days, Hours, Minutes, and Seconds which we will refer to as “Time Elements”.

Countdown Clock Adding Time Elements

The basic setup shows where to place the time elements in the green alerts. Time Elements are at the top and the completion message at the bottom.

Time Elements in Columns

Stacks Columns

Though not necessary, it is highly recommended that the time elements be placed in columns for most basic setups. You can use a responsive columns stack, such as Responsive Grids, or the free built-in columns that come with Stacks.

Countdown Clock with Columns Added

After doing this your setup should appear something like this. Note that the numbers do not represent the actual numbers for your clock as this is controlled through JavaScript, which does not run in edit mode.

In the section below “Countdown Complete Message” you can place whatever you would like to display once the clock has finished. This can be any other stack content including text, images, other media and even other stacks.

Time Element Controls

Countdown Clock Time Element Controls

Each time element can align the numbers & text left, right and center. Additionally, you can control the text that is displayed (text display must be turned on in the wrapper). You can control the text for both singular & plural – singular will only be shown when the number 1 is reached in the clock.

Finally, you can override colors and sizing for each individual time element, which will override the colors and sizing set in the wrapper.

Overlay Mode

Overlay Mode allows you to cover an entire page instead of just a section of a page. Once the Countdown Clock has finished the page will be exposed – for added security there is also a Redirect to URL option that will instead send the user to a new URL once the clock has finished.

Controls for this section are very straight forward and all content will automatically center both vertically and horizontally in this mode.

Below the Time Elements there is an Optional Content Area, which allows you to place text, images, media and other stacks. This section will disappear when the clock has finished and so is only added so you can give viewers some added information, such as what will be displayed when the clock is finished. Note that everything will be auto-centered, so it is recommended that you do not add too much to this section.

Version 1.0.2+ Close Overlay option

Countdown Clock - Close Overlay

A close overlay link can be placed in version 1.0.2 that will close the overlay and reveal the page behind it. Simple assign the class of “pageOverlay” to a link.


There are currently 3 themes and their effects can be seen in both edit and preview mode. The “Wireframe” theme will automatically adjust to the color of the background of Overlay if you have turned Overlay On. We plan to add more themes in the future as well, so please feel free to send us requests.

Please follow & like us :)
Follow by Email

Cinema Slider

Set up

  1. First drag and drop the Cinema Slider Stack into the Stacks editor. It should appear like the screenshot below.Screen Shot 2015-05-28 at 10.20.44 AM
  2. Then drag and drop the Cinema Slide Stack into the “Drop stacks here.” section located underneath the heading “Add Slide Stacks Below”. Repeat this step until you have as many slides as you want to use. Your finished result should appear like the screen shot below.Screen Shot 2015-05-28 at 10.24.15 AM
  3. Now select the first Cinema Slide stack and in the panel on the right side of RapidWeaver click the browse button underneath the section labeled “Slide Settings”. Locate the first image you wish to use. Repeat this step for all of the slides you have added.

For additional help on styling your slider refer to the Slider Settings guide below.

How to Add Captions

All you need to do is drag and drop a text stack inside the Cinema Slide‘s “Drop stacks here” section to add captions to your slides. For additional help on styling your captions refer to the Slide Settings guide  below.

How to Create a YouTube Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the YouTube Video slide type.
  2. Locate the video you want to use on and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string (after “?v=”) Screen Shot 2015-05-28 at 11.14.23 AMor found in the share tab for the video after the last slashScreen Shot 2015-05-28 at 11.12.20 AM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

How to Create a Vimeo Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the URL Video slide type.
  2. Locate the video you want to use on Vimeo and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string after the last slashScreen Shot 2015-05-28 at 1.59.17 PM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

Slider Settings Guide


Image Alignment - This sets what area of the image the slider will focus on if the image is too large to fit the aspect ratio. Note: The images will still scale to fit the slider, cropping will only happen if the images have a different aspect ratio than what the slider has.

Height Type - There are three options for height type: Aspect Ratio, Percentage, and Static Pixel Height.

  • Aspect Ratio – If you know what aspect ratio your images are use this option. This will keep the slider fully responsive and ensures a great fit for most photos and videos.
  • Percentage – Use this option if you want to adjust the height till you get a good fit for your non-standard sized images. The percentage is in relation to the slider’s width (I.E. 50% means one half the size of the width or 2:1 ratio) This option will also keep the slider fully responsive.
  • Static Height – This option will keep the slider at a specific height no mater what size the browser window is. This option is not fully responsive for images and videos.

Slider Max Width -  This option is for when you don’t want your slider to fill the entire width of where you place it. Set a max value and the slider will not stretch to fill the width.

Slide Hang Time - This sets the time between the end of the last sliding effect and the start of the next one.

Transition Time - This sets the length of the transition effect.

Autoplay - Enabling this will set the slider to automatically start playing when the page is loaded.

Navigation Hover - If this is enabled the navigation buttons (prev, next and play/stop buttons) will be visible on the mouse hover state only, if this is disabled they will be visible always.

Frame Settings

Detailed Size - Use this option to set specific values for the frames top, bottom, left, and right widths.

Size - This sets the size of the frame on all sides.

Style - These are different templates to add shadows to the frame (for sliders with frames) or to the slider (for sliders that use the frame as a background instead). To use the frame as a background be sure to set you slider’s max-width and the slider will automatically center inside the frame.

Texture - Add a colorable texture to the frame or background.

Advanced Settings

Slider Min-Height - Set the minimum value height the slider can be regardless of the aspect ratio. This is useful only for mobile sized screens, when the slider becomes too small. increase this value to enlarge the slider.

Secondary Slider - Enable this option if there is already another Cinema Slider on the page. This will reduce load time by removing unnecessary code as it can “borrow” the code from the first slider you placed.

Don’t Crop Images - This will disable cropping on the image. Useful if you want to use portrait style images.

Hide Prev/Next Buttons - Enable this to hide the prev/next buttons.

Hide Play/Stop Button - Enable this to hide the play/stop button.

Show Thumbnails - This will display the thumbnail images you have set inside each Slide Stack below the slider so that users can navigate through the slider by clicking on them. If you also enable “Show Pagination”, the thumbnails will display when the pagination bullets are hovered instead of below the slider. Note: This option only works if you have set thumbnail images for each of the slides in your slider. See the Slide Settings Guide below to learn about adding those thumbnail images.

Disable Pause On Hover - By default the slider will pause whenever the mouse is over it. Enable this option to turn that feature off.

Show Pagination - Enable this to show a bullet style navigation in the bottom right corner of the slider. As mentioned above, if you enable “Show Thumbnails” with this option also enabled, thumbnail images will display above the bullets when hovered.

Show Loader -  Enable this to show a circular loader while the slide hangs. The slider will transition to the next slide when the bar fills the entire circle.

Loader Position - Choose where the loader will display.

Loader Opacity - Set how transparent the loader will be. 10% is barely visible and 100% is opaque.

Loader Diameter - This controls the size of the loader.

Loader Stroke - This controls the thickness of the loader bar.

Slide Settings Guide

Slide Settings

Slide Type – You are able to choose either an image, YouTube video, or other video (I.E. Vimeo). There is also an option titled “No Image (Caption Only)”, use this option when you do not want to add and image but are going to use Stacks content instead.

Image – Browse for the image you want to use for the slide.

Transition – This sets what animation the slide transition will use.

Caption Settings

Text – This sets the color of your captions text, this can be overwritten by the stacks you place inside of the caption area.

Background Style – Set a color as a background for the caption so that it can be more easily read.

Transparency – Change the opacity of the captions background.

Advanced Settings

Thumbnail – Add a thumbnail of your image. This is only useful if you are using the “Enable Thumbnails” advanced setting in the Cinema Slider.

Add Link – Optionally add a link to your slide, so that when it is clicked, it will navigate to there.

Please follow & like us :)
Follow by Email

Pinterest Connect


The Pinterest Connect script is not supposed to run multiple times on a page, though this may not always cause a problem. However, it is recommended by Pinterest to never run it more than once and to run it below all Pinterest API calls.

Disable Pinterest Script

For this reason please make sure that only the last instance of Pinterest Connect on your page has the script enabled. All other instances should have the script disabled (the last customization option).

Image Hover Button

Note also that the Image Hover Button option will only work if the script is running, so if you wish to take advantage of this option on your page you must have it selected in a Pinterest Connect instance where the “Disable Script” option is not selected (by default it is not selected).

Pin It Buttons

Pinterest Pin It Buttons


Pinterest provides 4 images each with 2 different sizes.

Pin It Button Options

These buttons can be easily changed and the sizes can be easily selected.

Image Hover Button

Image Hover Buttons

Additional, yet identical, options appear for the Image Hover Buttons in case you would like to use different buttons.

Follow Link

The follow link creates a Pinterest URL option. This URL should be an individual Pinterest URL.


If you wish to change this:

Pinterest Edit Profile

Select the Edit Profile button in the top right of your personal Pinterest Profile Page (if you don’t have one you must create one).

Pinterest Edit Profile URL

In the middle is an option to change your Username, which also controls your personal URL address.

Embed Portfolio

Embedding a portfolio creates a Pinterest URL option. This URL should be an individual Pinterest URL.

To change this please reference the previous steps in the Follow Button tutorial directly above.

Embed Board

Embedding a board creates a Board URL option. This URL should be the same as the URL you find when entering any Pinterest Board.


Embed Individual Pin

Embedding an individual pin creates a Pin URL option. This URL should be the same as the URL you find when entering any individual Pinterest Pin.


Please follow & like us :)
Follow by Email


Here is a customer review/tutorial on Ice Box by William Winter

Typography Stack SuiteTypography is a stack suite comprised of 6 stacks

  1. Core
  2. Font Import
  3. Headers
  4. Texts
  5. Buttons
  6. Code


Typography Core The core is intended to assist many of the stacks within, though is primarily built to support Headers, Text & Font Importing. It is not necessary in all cases, but will often assist with stronger CSS that may assist in overriding conflicting theme styles.

In addition, and perhaps more importantly, the Core allows you to set global sizing and color controls to effect other Typography stacks that are placed within it. This saves you the time of re-styling in many cases and also allows for much easier responsive controls where you can set both the responsive breakpoints and the effects they have on font sizes.

Typography Core Default and HTML Wraps

By default the Core will not override anything allowing your theme defaults to be the standard and any styles that you make in Typography’s inner stacks (the other 5). You do have to choose from a list of HTML/HTML5 wrappers. The ‘Div’ is the default and is a basic wrap that typically inherits no particular styles from themes without a specific ID or Class being assigned to it.

Typography Core - Global Styling

Selecting the “Global Styling” checkbox opens styles that can be applied to the inner Typography stacks. The color controls are very straight forward and selecting the “Unique Header Colors” allows you to assign colors to the specific <h1> – <h6> tags.

Typography - Font Size Controls

Selecting Font Size controls gives you global control over all your text and header font sizes. Additionally you can alter the line-heights if you wish, which is the height of the line that the text takes up, though by default this will typically be managed well without adjusting.

Typography Core - Responsive Font Sizes

By selecting Responsive Font Sizes you are given 5 breakpoints, which by default will progress in the following order:

  1. 320px (iPhone portrait)
  2. 480px (iPhone 5 Landscape)
  3. 768px (iPad)
  4. 1024px (laptop)
  5. 1224px (desktop)

These do not effect the exact measurements, but rather everything at their size and below – once the screen width is reduced to the set with is when the font sizes will adjust. For example, at 800px the adjustments for 768px will not occur, but rather the adjustments for 1024px.

Font Importing

Typography Font ImporterThe Font Import stack is meant to assist/guide in the process of importing fonts, whether they are custom fonts or Google’s Web Fonts. We’ll cover the process of both here.

Google Fonts

Font Import - Google Web Fonts

When selecting Google Web Fonts some basic instructions are given in the customization options.

Font Import - Google Web Font Alert

Additional tips are given in the edit section in a green alert box. These give a couple recommendations of where to find your fonts.

To import a google web font I’ll give the following example, which is the basic process for importing all Google Web Fonts.

Google Web Font

1. Find the font you want

Select Web Font

2. Select the font with the Arrow button

Web Font Link Code

3. Select the <link…> code for the font – single clicking will force a select of the whole line of code. Hit CMD+C to copy, then to paste into the field in RapidWeaver hit CMD+V

Google Web Font Name

NOTE, this has only imported the font, but you still have to copy the name of the font and paste it into any Text, Header, or Button fields for the custom font to apply. This saves valuable load time by importing the font only a single time and allows you to use the font as few or many times as you like without slowing anything down.

From the example above, the only part of the font-family name you need to copy would be ‘Lobster’ and that includes the apostrophe before and after the title. Optionally, you can place a comma and type in the fallback font, which can be the recommended one or any you choose (this is the font that will display if the custom one does not load or is not supported).

Custom Fonts

Importing Custom Font

Importing a custom font is a little more complicated and requires a few additional steps – this is simply because the font is not being stored on a separate server, but is going to run off of yours.

FontSquirrel ChunkFive Font

Here I’ve gone to and chosen a popular font called ChunkFive. Click the “Download OTF” button. After downloading you will need to unzip and the .otf file will be inside, which is a font type.

Most of the fonts on this website are intended to have licenses friendly to designers, but it is recommended that you briefly review the licensing to ensure you can use the font for your intended purposes.

FontSquirrel Webfont Generator

When you’re ready to proceed hit the “Webfont Generator button in the top menu.

FontSquirrel Webfont Upload

From here you’ll hit the “Upload Fonts” button and navigate to your .otf file, select the Agreement (assuming you agree to any licensing attached to the font) and download and a “Download Your Kit” button will appear in the bottom right.

Font Files

Unzip the folder and drag these files into the Resource folder in your RapidWeaver site.

Font in Resources

You should see them appear like this in your Resources section.

Importing Custom Font

Now look back over to the right of the Font Importer. In this example the file names end in the -webfont as shown in the example. Also note the instructions to ignore the exentions (.otf, woff, svg, ttf) – that will be taken care of automatically for you.

In this example we would rename the Font Filename to the following: chunkfive-webfont

Return to the folder with the font files in them and locate a file named stylesheet.css

font stylesheet

Open this with any text editor and locate the file name, which will proceed immediately after the font-family:

In this example it is ‘chunkfiveroman’ and you must include the apostrophe symbols.

This is what will replace the ‘fontname’

Custom Font Final

For this example your final result would look like this.

Text, Headers, Buttons & Code

Fluid. This means that the text or header’s size will automatically adjust it’s font size according to it’s parent container’s width. Note that these do have maximum and minimum font sizes as well, so the adjustment will become more or less apparent depending on what those are set to.

Drop Cap. A Text feature that automatically makes the first letter of a section larger (common in articles). There is allowed unique customization of this letter including changing the font, sizing, coloring, and more.

Important! Note that if you use some of RW’s built-in editors that it will wrap the text in a span, making a bracket the first letter – to avoid this you can simply highlight the first letter and hit CMD + .

Marquee. A typing like effect where text animates from left to write with controllable animation speeds and a limitless amount of lines. Note that you will need to drag in Typography’s Marquee snippet to ensure RW’s built-in auto-formatting does not break this effect.

Typography Snippet

Important! For the Marquee text to work you must use the Snippet that is included. Drag it into the Typography – Headers section and then highlight all the text and hit Command + .

This turns off auto-formatting, which will otherwise turn the quotation markets in to different quotation marks that will not work with the code. You can add as many lines of text as you like, but they must all be separated by a comma as shown in the example (the last line should not have a comma).

Note that you will likely have trouble if you attempt to type this text in without the snippet due to the auto-formatting in RW.

Please follow & like us :)
Follow by Email

Super Forms

Basic Set Up

1) Add Super Forms to your stacks page.

Screen Shot 2015-04-14 at 2.55.52 PM

2) Next you will need to add your email to the Email input box inside of Super Forms’ settings panel. This will tell Super Forms where to send the email once the submit button has been clicked.

Screen Shot 2015-04-14 at 3.01.10 PM

3) Drag and drop the Form Element Stacks into Super Forms’ “Drop stacks here” section to build your form. *More info on the form elements below

Tip: If your form is not fitting well into your page you can set the Width Fit option to 50/50 or 100%. These options work better in narrow areas.

4) After you have published your website, visit the page to test your form. Fill out the required fields and submit the form to see if it works. If you receive a red error please refer to the Troubleshooting section below. You host may have some requirements before it will allow you to send a message.

Note 1: Most hosting providers only allow you to have mail sent to a email address associated with your domain name. This is for security reasons. In most cases you will need to set up an email address with your hosting provider. For example if you own the domain “”, your email would need to be something similar to “” in order for the mail to send. If you are seeing a “Mail has been sent!” message and no email ever comes through, it is likely your hosting has this restriction.

Note 2: If your hosting provider does not support PHP you will not be able to use this Stack to send mail. However, most hosts do support PHP. Please contact your hosting provider to find out.

The Form Elements

Super Forms comes with 9 Form Element Stacks that you can add to build your own custom form. They are Captcha, Checkbox, Date, Email, File, Input, Select, Text Field, and Title.

Title Setting

All of the stacks have a Title Setting. Whatever you put will display as the title and placeholder for the Form Element.

Screen Shot 2015-04-15 at 8.53.45 AM

Screen Shot 2015-04-15 at 8.54.24 AM

Screen Shot 2015-04-15 at 8.54.09 AM

Other Settings

Just about all of the stacks have these checkbox options:

Enable Help Text – Text that appears when the question mark icon has been hovered.
Enable Hint Text – Text that appears when the field has been focused (or clicked on)
Enable Note Text – Text that appears directly below the field
Make Required – If this is enabled the form will not submit unless this field has been filled out. Users will be prompted to fill the field out.

Screen Shot 2015-04-15 at 8.56.09 AM

The help text icon displays to the left of the field, the hint text pops up to the right of the field when the field is focused, and the Note text will display in full below the field.

Some of these stacks also contain these Email Formatting options:

Add to Subject Line – This will add the answer to the subject line of the email that is sent to you.
Add to From Line – This will add the answer as the From value of the email that is sent to you.

Screen Shot 2015-04-15 at 9.11.31 AM

Additional Stack specific settings and setup:

To add options you need to add HTML tags. To do so just type the name of the option you want into the text area and wrap it with <option> and </option>. You can add as many options as you want to.


<option>General question</option>
<option>I need a auote</option>
<option>Feature Request</option>

Screen Shot 2015-04-15 at 9.17.28 AM

Enable Time – This will allow users to select a time as well as date.

Screen Shot 2015-04-15 at 9.18.55 AM


Some host’s may not support the method Super Forms uses to send the email. If you receive an error when trying to use/test the form online, try enabling the “Use Alternative Mailer” option found in the Troubleshooting section of the settings panel.


Some servers may also require email to be sent from the domain owners email address for security reasons. If so, check the ’Send from my Email’ checkbox in the Pure Forms – Settings.
If neither of these two options help, please refer to the additional troubleshooting section below.

Additonal Troubleshooting

If seeing a PHP error message when submitting the form:

- There may be a problem with your host’s PHP setup. It may not be configured correctly to use the PHP mail() function either for security reasons or because they support another PHP mailing system. You should contact your host to determine the best way to fix this issue.

If a captcha error appears, even though the captcha has been entered correctly, Or

If when attempting to send, nothing happens, there are no errors or confirmation:

- The likelihood is that your host does not have PHP sessions enabled. Sessions are simply a way of carrying information between webpages. RapidWeaver uses them for the confirmation messages as well as spam protection. Contact your host explaining that the PHP session on your contact form is not working as it should. They will understand what this means and provide a solution.

If email appears to send correctly:

- The Contact Form script is working just fine and it is an issue either with the server not sending the email or a spam filter catching it. Please check your hosting company’s spam filtering policy. Note: be sure to double check the spelling of the email address you entered into Super Forms’ email setting.

If you’re still having issues getting the Contact Form to work:

- Contact your host for advice. Ensure they are able to send an email from the server using PHP mail() and ‘sendmail’. (Check below to see a sample message to send to your host.)

Sample message to send to your host:


I am currently having trouble sending emails via a contact form on my webhost. a) It would appear that everything is working just fine and the mail is sent yet I do not receive an email. OR b) It would appear that the server is unable to send an email from my server using the PHP mail() function. Would you be able to tell me whether I must do anything specific in order to send an email using your servers. The PHP code relies on sendmail and the standard PHP mail() function and PHP sessions to send the emails. 


Jon Doe

Please follow & like us :)
Follow by Email


Install the stack then drag it onto the page and put anything that you want to hide or show inside it


Setting up

Step1:  Set the the amount of the breakpoint (note: the amount is the the size of the screen or browser)

Screen Shot 2014-11-28 at 11.11.10 AM

Step2: Click on the “Display Off ” option if you want your content to hide.

Screen Shot 2014-11-28 at 11.11.47 AM


(note: if you want the content to disappear on both break points then select it for both or if you want it to show at a certain point then don’t click it. )

Additional information:

-Once the size of the screen reaches the breakpoint amount it will activate.

(for example: if the breakpoint 1 is 800 and breakpoint 2 is 600 then breakpoint 1 will work in-between 800-600. Breakpoint 2 will activate at 600.  )

Please follow & like us :)
Follow by Email

Responsive Grids

Here is a customer review/tutorial by William Winter

Getting Started

Step 0: Download and install stack. 

Step 1: Drag the stack onto the page . After dragging the stack onto the page, select the amount of columns that you want displayed. The selector for that can be found in the stack options under (Column Selection).


Step 2: Input the content that you want into the stack.


Grid Activation

The grid is an option that will reduce the amount of times that you have to drag Responsive Grids onto a page.

Step 1: Turn on the grid option to activate it. “note:anything in the stack prior will be disappear


Step 2: Select the amount of rows that you want to use. “The default is 2″

columns Screen Shot 2014-11-20 at 9.30.09 AM


Spacing Options

Gutter: The gutter has to option to turn off and on.

Screen Shot 2014-11-20 at 9.38.19 AM

Gutter Width: Select the width of the gutter if you have the Gutter option turned on.

Screen Shot 2014-11-20 at 9.38.36 AM

Bottom Margin: Input how much spacing you want bellow Responsive Grids.

Screen Shot 2014-11-20 at 9.38.47 AM



Break Points

Break Point 1: Input the break point for the first media query. “This is usually for tablets on portrait mode.” 

break point

Break Point 2:  Insert the amount of pixels you want for the second break point. “This is typically for mobile phones.”

mobile breakpoint



Advanced options

2 column , single column spacing , single column width , image options


2 Column

Split:  Split is an option unique to the 2 columns option. Choose whether you want the stack to be a  50/50, 40/60,  etc.



Single Column Spacing

The Spacing option is the option for the padding on the top and bottom of the single column stack. This become very helpful if you are doing a single page website or even a portfolio site.

Step 1: Turn on spacing.      Spacing

Step 2: Select whether you want to use pixels or percentage.

px or perc

Step 3:  Input the amount you want on the top and bottom. “There maybe be more spacing on the bottom if you have an amount higher than Zero on the margin bottom option.”

Screen Shot 2014-11-20 at 9.59.16 AM



Single Column Width

Control the max width of the single column. This is a great option if you want something to be a certain size and positioned in a certain way. “It will still be responsive! “

Step 1: Turn on the Max-Width option to activate it. 

Screen Shot 2014-11-20 at 10.11.42 AM

Step 2:  Input how large you want your stack to be.

Screen Shot 2014-11-20 at 10.11.58 AM

Step 3: Select the position of the stack. “center is very useful”

Screen Shot 2014-11-20 at 10.12.29 AM



Image Options

You have a choice to have images be responsive.

Step 1: Activate responsive images.

Screen Shot 2014-11-20 at 10.21.07 AM

Step 2: Input how wide you want your image to be.

Screen Shot 2014-11-20 at 10.21.49 AM




Please follow & like us :)
Follow by Email

Font Awesome Pro

Font Awesome Pro

Font Awesome Pro

The pro version allows customization of the Font Awesome icons. You still need the free version to activate Font Awesome (if your theme doesn’t have it running already). After Font Awesome is activated/imported Font Awesome Pro’s customization options will work.

Note, occasionally fonts may not appear in Edit Mode and often saving the page will cause a reload and then display the icons correctly.

Category: Allows you to select from Font Awesome’s icon categories that they have on their website. Depending on the category you select will depend on what icons appear available in the next drop-down menu. The categories include Web Applications, Form Controls, Currencies, Text Editor, Directional, Video Player, Brand Icons, Medical, and Manual. I added the manual icon in case you want to skip locating the icon in the drop-down menu and simply type in the icon name as found on their website here.

Icon URL On: Make available the following field ‘Icon URL’ which you can type in any URL that will wrap only around the Font Awesome Icon (including any padding and borders you have added).

Icon Size: Pixel size of the icon.

Icon Color: Color of the Font Awesome Icon

Icon Shadow: Sets a text shadow to the Font Awesome Icon (this is not needed if you select the ‘Flat Icon Shadow’ further down).

Shadow Color: Color of the text shadow.

Shadow Amount: Control over the direction and blur of the shadow (x, y, blur).

Flat Icon Shadow: Enables the flat shadow effect you can see on our preview page.

Fade On: Sets the flat shadow to fade if turned on.

Flat Direction: South East, South West, North East, North West.

Icon Background: Enables a background color (following option).

Bg Color: Adds a color to the background behind the icon, though this will not display well without adding some padding and possibly a border (in options bel0w).

Add Section for Text: Creates a Stack’s text section. Note that these may not appear to well unless you float the icon left or right (in options below) or if you center the icon (also in the options below).

Add Section for Stack: Creates an empty Stack’s section (slice) where you can add other stacks in.

Float Direction. Sends the icon left or right, which is most useful when a Stack or Text section is added.

Center Icon. Centers the icon.

Icon Padding amounts (top, right, bottom, left): Adds space between the icon and its outer edges. If a border is used it will display on the outer most edge of the padding and background color will also fill this space.

Icon Margin amount (top, right, bottom, left): Adds space between the icon and surrounding elements. This is most useful when a Stack or Text section is added – you will want to add space so that they are not so close together.

Turn Border On: Adds a border allowing you to control the width, radius (round corners) and color.

Second Border: Adds another border on the outside allowing you to control the width, radius (round corners) and color.


v2.0.0 (June 23, 2014)

  • Includes all new Font Awesome 4.1 icons including new categories
  • Removed a few duplicate Font Awesome items

v1.1.10 (Apr 9, 2014)

  • Fixed 4 directional icons calls

v1.1.9 (Apr 3, 2014)

  • Added option to control fade distance

v1.1.8 (Feb 5, 2014)

  • Vimeo fixed

v1.1.7 (Feb 3, 2014)

  • URL Option added for URL to open in a new tab
  • Rotate Hover added
  • Transition Speed Controls (in/out)
  • Size Hover Added
  • Flat Shadow Hover Removed (currently not supported)
  • URL Default changed from empty to “http://”
  • Corrected Mispellings

v1.0.3 (Jan 29, 2014)

  • New Icon added
  • Added option to add a URL to the icon
  • Fixed built-in breifcase icon
Please follow & like us :)
Follow by Email

Parallax Switch


Step 1: In Parallax Switch’s “General Controls” section select a the number of items you would like to switch between using the “# of Items” option. Typically you will want to select 2 or 3 items, anything higher is for the “Play Items as Frames” Option (this is described under the “Auto Play” heading below).

Step 2: Select a “Position” option.

Step 2a Relative: “Relative” will place the Stack’s content where ever you have placed it, just as you would expect with any other stack you place into your editor.

Step 2b Fixed: “Fixed” means that the stack will not scroll with the page and will instead always be visible in the window. Selecting “Fixed” as an option will add width, height, horizontal position, and vertical position options. The Auto Height and Auto Width are enabled by default. These options match the height and width of the content placed inside of Parallax Switch. If you disable these options you can use the width and height sliders to declare percentage based values. Then all you need to do is adjust the horizontal and vertical positions. The horizontal position is adjusted in a percentage value while the vertical position is set by a pixel value. Change to preview mode to see where your stack sits in the window as these options do not display in edit mode.

Step 3: You now need to assign distance values to each item (Found in the Stack’s area not the Options menu). The first item will automatically display on page load or start. The following items will need to be set in descending pixel values. The “Display at Distance” values will determine when that particular item will display. Setting an item to 400 will make it so that item displays when the top of the browser window is 400px from Parallax Switch (when scrolling).

Example Setup Values:
Item #1: Start (cannot be changed)
Item #2: 500px (will display this item when Parallax Switch is 500px from the top of the browser window)
Item #3: 100px (will display this item when Parallax Switch is 100px from the top of the browser window)
Item #4: -300px (will display this item when the top of the window has scrolled past Parallax Switch by 300px )

Step 4: In Parallax Switch’s “General Controls” section select an “Animation” option. By default Parallax Switch will fade between each item. You can then adjust the speed of each animation’s transition using the “Speed” Slider. Preview your changes and adjust till you get a good fit for your site.

Auto Play

Play Items as Frames: Auto Play, simply put, simulates a GIF. It will automatically cycle through each item in Parallax Shift like frames in a movie. This mode does not support the “Animation” option.

Speed: This is the amount of time that each individual frame will be displayed in milliseconds. So if it’s set to 0, it will cycle through each item very fast, but the higher the number, the slower it will cycle through the items in Parallax Switch.


Display Scroll Position This option displays the position in pixels of how far the top of the window is to the top of the Parallax Switch stack. This will help you set up your “Display at Distance” values.

Please follow & like us :)
Follow by Email