Documentation
This page wants to be a concrete help to better understand how the project has been structured and a guide for the less experienced user.
Read carefully all the indications and become master of the project: now everything is in your hands 😉.
Getting started
General informations
Project version
The project is available only in Basic version. In this project the back-side for content management is not included.
What's included in the project
Everything you see in this demo is included in the project file.
With Scrollify, you will also receive the project file (based on Email stack) for the email template used in the form.
Setup for publishing
Basic version
Just follow these few steps
- Enter the Web Address data in the RW General settings.
- Enter the credentials in the RW Publishing settings (you will need the FTP information of your server).
- Publish the project file.
Animations
How does it work
General aspects to keep in mind
- Animations are based on the height of the browser window (
height: 100vh). - Each stack is animated based on the position of another stack (also with a height of 100vh) that serves as a scroll marker.
How the scroll animated sections are structured
Sections are generally composed of two main layers:
THE FIXED ELEMENTS
Is the background layer and contains all the elements that do not follow the normal flow during page scrolling. In fact, all of these elements are positioned within a Sticky stack and are overlapped with each other, forming as many layers as the section requires. These elements are animated based on the position of their corresponding "scrollable elements" thanks to the Drift Pro stack.THE SCROLLABLE ELEMENTS
Is the foreground layer and contains all the elements that follow the normal flow during page scrolling. They are essentially (but not always) empty Container stacks used as scroll markers. Based on their position in the viewport, the Drift Pro stack animates the elements in the Fixed Elements layer.
Scroll Markers
Scroll markers in the Preview mode
When you launch the Preview, you will see the scroll markers - these are the red lines that indicate the position of each section and their corresponding scroll marker. They have been added to help the user better understand the animations and the position of the various triggers.
These markers are visible only in Preview mode, so they will not be published if you publish the project. However, in the following section it is indicated how to hide them from the Preview mode.
The continuous red line indicates the beginning of a section.
The dashed red line indicates the stack that serves as a scroll marker.
Hide all scroll markers in Preview mode
To disable all scroll markers at once, select the yellow Pen stack named PREVIEW MARKERS located at the beginning of the page and unselect Do Not Publish Content checkbox.
Scroll markers on the project page
The scroll markers are placed inside yellow Pen stacks called PREVIEW MARKER.
Manage the project
Page structure
Page structure
BASIC version
The structure of the pre-built pages looks like this:
The image is for information purposes only. Pen stack names shown may not exactly match those in this project file.
- Green Pen stacks represent everything related to styles (included the Site Styles stack).
- Yellow Pen stacks represent everything that has to do with the interface of the page.
- White Pen stacks represent the real content of the page.
TIP: To show the contents of all Pen stacks at once just select all the Pen stacks and then click on the Show button (on top right of the work space).
Project styles
The project core
The project core is the partial STYLES COMMON TO ALL PAGES, it contains the Site Styles stack and all other styles.
IMPORTANT: This partial must be placed on each page of the front-side.
Nested Pen stacks
The styles, within the partial STYLES COMMON TO ALL PAGES, are organized within other Pen stacks based on type.
To quickly show/hide the Pen stack content just select it and then press Shift+H.
Exists also a faster and awesome way to show/hide the contents of Pen stacks (or any other stack), just with double click a stack title: find out how to activate this feature.
How to find the styles you need
At the end of each section of this page there is a box with a dashed green border indicating where to find the styles related to the topics covered in that section.
How the styles are structured
This section explains how the STYLES COMMON TO ALL PAGES partial is structured so as to understand its logic and be able to better manage all styles. When you open the partial you will find the following Pen stacks inside it which represent the main types of styles of the project:
SITE STYLES Pen stack, contains the Site Styles stack.
COLOR SETTINGS Pen stack, contains all styles about colors.
ELEMENTS Pen stack, contains all styles (except the color styles).
EFFECTS Pen stack, contains the effects styles (eg. hover effects).
SITE STYLES Pen stack
This Pen stack contains the Site Styles stack. Make any changes you want but completely ignore the following style settings:
- Site Colors
- Text Colors
- Text Sizing
The styles listed above need to be editet inside the COLOR SETTINGS and ELEMENTS Pen stacks.
COLOR SETTINGS Pen stack
This Pen stack contains all styles about colors.
COLOR PALETTE Pen stack is where we need to set all the colors of the project.
These colors are global, so when you set/change a color, all elements that have that color will be changed globally across the entire project.
If you are looking to set/change a color, this is where you need to do it.ELEMENTS COLORS Pen stack is where we assign the colors (set in the COLOR PALETTE Pen stack) to all elements (eg. text, buttons, tabs, etc.).
In practice, in the first Pen stack (COLOR PALETTE) we create the colors and in the second Pen stack (ELEMENTS COLORS) we assign that colors to the various elements of the project.
ELEMENTS Pen stack
The image is for information purposes only. Pen stack names shown may not exactly match those in this project file.
This Pen stack contains contains all styles (except the color styles) of each project element. The styles are organized by type of element in additional Pen stacks.
EFFECTS Pen stack
This Pen stack contains the effects styles (eg. hover effects).
Add a style to a stack
Create a new style
Let's say we want to add a yellow background color to a 1 Column stack, here's how:
- Create a new style, simply adding the desired swatch (based on your need) into the Swatches stack.
- Set the background color and enter a class name to the style in the stack settings panel.
Add the class to the stack
- Select the stack you want add the new style, in this case the 1 Column stack.
- Enter the class name in the Custom Classes textarea in the HTML section in the stack settings panel.
Remember that the class name cannot have blank spaces and start with a number. Use the dash to separate words.
- After adding the class name in the stack settings panel the stack will be displayed with the new style applied.
IMPORTANT: To learn more about styles, refer to the
Email templates
Custom Email
The project file form, as well as for the demo website, is set up with Custom Email template created with Email stack.
The project file based on Email stack is also included in the download package.
TIP: If you are interested in professional email templates you can take a look at our Email Pack project.
Edit the Custom Email
The project file based on Email stack is also included in the download package. You will need to have Email stack installed in order to edit it.
If you want to edit the project file based on Email stack you will need to have Email stack installed in order to edit it. Follow these steps:
- Open the Email Templates project file.
- Select the page (Admin or User) you want to modify.
The image is for information purposes only, it may not correspond exactly to this project file.
- Customize the template to your liking, inserting your logo and data.
- Run the RW preview to generate the HTML code to copy.
- Then switch to the Basic version project file and select the Form stack.
- In the Form stack, select the Email Action child stack (Admin or User depending on what you customized) and paste the code into the Custom Email text area.
IMPORTANT: Obviously, for the form to work properly, you'll have to fill in all the fields of the Email Action child stacks, not only the Custom Email text area.
404 error page
How to set an 404 error page
In the project, the 404 Error page is also included. To set up it correctly you need:
- Have a page to show (obviously 😀).
- Insert a line of code in the htaccess file.
Once you choose the page (this project offers you more than one) and its URL you have to insert the code in the htaccess file, here's how to do it:
- Go to the RW Publishing settings and click the Edit .htaccess File button.
- The following lightbox will open, so click on the text area and enter ErrorDocument 404 followed by the full path to the page you want to show, like this:
ErrorDocument 404 https://www.yourdomain.com/404-error/index.php
- Click the Save and Upload button.
TIP: You can check if it works by trying to type, in the address bar of your browser, a wrong or non-existent URL belonging to your domain.
Styles guide
Colors
The following colors make up the color palette used by all elements of the project (texts, backgrounds, buttons, etc.).
Use the indicated classes to set the corresponding background color.
Keep in mind that colors are global, when you change a color that color changes globally across the whole project.
For example, if you change the primary color, every element of the project with that assigned color will undergo the change, regardless of whether that element is a text, a button, a menu, background color or any other element.
As the
primary color must be set a medium-dark or dark color , that is, a color such that a white text over on it reads well.On the other hand, a
secondary color must be set a medium-light or light color , that is, a color such that a black text over on it reads well.
Compared to the color palette of F6 there are three additional custom colors in the color palette:
bg-almost-white, bg-almost-black and bg-light-overlay.
There is no alternate color for each of these background colors. So, if you assign a background color class to a stack that has a parent stack with the
alt class, the background color remains exactly what you set. Primary
Add the bg-primary class to set this background color.
Primary Dark
Add the bg-primary-dark class to set this background color.
Primary Light
Add the bg-primary-light class to set this background color.
Primary Text
Add the bg-primary-text class to set this background color.
Secondary
Add the bg-secondary class to set this background color.
Secondary Dark
Add the bg-secondary-dark class to set this background color.
Secondary Light
Add the bg-secondary-light class to set this background color.
Secondary Text
Add the bg-secondary-text class to set this background color.
Alert
Add the bg-alert class to set this background color.
Warning
Add the bg-warning class to set this background color.
Success
Add the bg-success class to set this background color.
Light Overlay
Add the bg-light-overlay class to set a light color overlay background.
Dark Overlay
Add the bg-dark-overlay class to set a dark color overlay background.
Light Gradient Overlay
Add the bg-light-gradient class to set a light gradient color overlay on bottom.
Dark Gradient Overlay
Add the bg-dark-gradient class to set a dark gradient color overlay on bottom.
White
Add the bg-white class to set this background color.
Almost White
Add the bg-almost-white class to set this background color.
Light gray
Add the bg-light-gray class to set this background color.
Medium Gray
Add the bg-medium-gray class to set this background color.
Dark Gray
Add the bg-dark-gray class to set this background color.
Almost Black
Add the bg-almost-black class to set this background color.
Black
Add the bg-black class to set this background color.
Where to edit
BACKGROUND
styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
Heading
Each Header stack must have the title class assigned. You can also add other classes as below to add more styles.
Display 1
Add also the display-1 class to display the header at this size.
Display One
Display 2
Add also the display-2 class to display the header at this size.
Display Two
Display 3
Add also the display-3 class to display the header at this size.
Display Three
Display 4
Add also the display-4 class to display the header at this size.
Display Four
Display 5
Add also the display-5 class to display the header at this size.
Display Five
Heading 1
Heading One
Heading 2
Heading Two
Heading 3
Heading Three
Heading 4
Heading Four
Heading 5
Heading Five
Heading 6
Heading Six
Primary Heading
Add also the primary class to display the header at this color.
Primary Heading
Secondary Heading
Add also the secondary class to display the header at this color.
Secondary Heading
Gray Scale Heading
Add also the white, light-gray, medium-gray, dark-gray or black class to display the header at the correspondent color.
Medium Gray Heading
For each gray scale color (White, Light Gray, Medium Gray, Dark Gray and Black) exists an alternate color version. To show the text alternate color just add the alt class to its parent, as shown in the following example and table:
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Normal colors
Header stacks placed into the parent stack with a light background.
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Alt colors
Same Header stacks placed into the parent stack with a dark background and the alt class assigned also.
| Color / Class | If parent has the alt class |
Alt color |
|---|---|---|
White white |
Black | |
Light Gray light-gray |
Dark Gray | |
Medium Gray medium-gray |
Medium Gray | |
Dark Gray dark-gray |
Light Gray | |
Black black |
White |
Quote - Solid style
Add also the quote-solid-before class to display a quote sign at the beginning of the header.
This is my qoute
Quote - Solid style
Add also the quote-solid-after class to display a quote sign at the end of the header.
This is my qoute
Quote - Solid style
Add also the quote-solid-before and quote-solid-after classes to display a quote sign at the beginning and at the end of the header.
This is my qoute
Quote - Light style
Add also the quote-light-before class to display a quote sign at the beginning of the header.
This is my qoute
Quote - Light style
Add also the quote-light-after class to display a quote sign at the end of the header.
This is my qoute
Quote - Light style
Add also the quote-light-before and quote-light-after classes to display a quote sign at the beginning and at the end of the header.
This is my qoute
Where to edit
TEXT styles?
To change the styles, open the Partial and Pen stacks as follows:
Color styles:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
All the other styles:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ TEXT Pen stack
Subheading
Each Text stack must have the above-title class assigned. You can also add other classes as below to add more styles.
Normal Subheading
Subheading
Biggest Subheading
Add also the biggest class to display the text at this size.
Subheading
Bigger Subheading
Add also the bigger class to display the text at this size.
Subheading
Smaller Subheading
Add also the smaller class to display the text at this size.
Subheading
Smallest Subheading
Add also the smallest class to display the text at this size.
Subheading
Primary Subheading
Add also the primary class to display the text at this color.
Subheading
Secondary Subheading
Add also the secondary class to display the text at this color.
Subheading
Gray Scale Subheading
Add also the white, light-gray, medium-gray, dark-gray or black class to display the text at the correspondent color.
Subheading
For each gray scale color (White, Light Gray, Medium Gray, Dark Gray and Black) exists an alternate color version. To show the text alternate color just add the alt class to its parent, as shown in the following example and table:
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Normal colors
Text stacks placed into the parent stack with a light background.
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Alt colors
Same Text stacks placed into the parent stack with a dark background and the alt class assigned also.
| Color / Class | If parent has the alt class |
Alt color |
|---|---|---|
White white |
Black | |
Light Gray light-gray |
Dark Gray | |
Medium Gray medium-gray |
Medium Gray | |
Dark Gray dark-gray |
Light Gray | |
Black black |
White |
Where to edit
TEXT styles?
To change the styles, open the Partial and Pen stacks as follows:
Color styles:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
All the other styles:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ TEXT Pen stack
Text
Each Text stack must have the description class assigned. You can also add other classes as below to add more styles.
Normal Text
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Biggest Text
Add also the biggest class to display the text at this size.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Bigger Text
Add also the bigger class to display the text at this size.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Smaller Text
Add also the smaller class to display the text at this size.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Smallest Text
Add also the smallest class to display the text at this size.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Drop Cap
Add also the drop-cap class to display a drop cap at the beginning of the text with the primary color.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Primary Text
Add also the primary class to display the text at this color.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Secondary Text
Add also the secondary class to display the text at this color.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
Gray Scale Text
Add also the white, light-gray, medium-gray, dark-gray or black class to display the text at the correspondent color.
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.
For each gray scale color (White, Light Gray, Medium Gray, Dark Gray and Black) exists an alternate color version. To show the text alternate color just add the alt class to its parent, as shown in the following example and table:
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Normal colors
Text stacks placed into the parent stack with a light background.
White text
Light Gray text
Madium Gray text
Dark Gray text
Black text
Alt colors
Same Text stacks placed into the parent stack with a dark background and the alt class assigned also.
| Color / Class | If parent has the alt class |
Alt color |
|---|---|---|
White white |
Black | |
Light Gray light-gray |
Dark Gray | |
Medium Gray medium-gray |
Medium Gray | |
Dark Gray dark-gray |
Light Gray | |
Black black |
White |
Where to edit
TEXT styles?
To change the styles, open the Partial and Pen stacks as follows:
Color styles:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
All the other styles:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ TEXT Pen stack
Padding
In this section all the information to set the padding styles. Use the classes as indicated to make the most of them.
Padding for main section containers
For sections with a lot of content, set up the stacks like this:
- Use a Container/Column stack with the
pad-y-firstclass, ideal for the first content of the section. In this way, you will have higher padding on the top side so as to highlight the detachment from the preceding content. - Use one or more Container/Column stacks with the
pad-yclass, ideal for the internal section contents. This class has padding on top/bottom sides but smaller in size. - Use a Container/Column stack with the
pad-y-lastclass, ideal for the last content of the section. In this way, you will have higher padding on the bottom side so as to highlight the detachment from the content that follows.
Top/Bottom Sides
Add the pad-y-first class to add padding top/bottom sides, with higher values on top.
First content area
Top/Bottom Sides
Add the pad-y class to add padding top/bottom sides.
Internal content area
Top/Bottom Sides
Add the pad-y-last class to add padding top/bottom sides, with higher values on bottom.
Last content area
For sections with only one content, set up the stacks like this:
Use a Container/Column stack with the pad-y-single or pad-single class. With the first class you will have higher padding on both top/bottom sides, with the second class you will have higher padding on all sides.
Top/Bottom Sides
Add the pad-y-single class to add padding with high values top/bottom sides.
Content of the section
All Sides
Add the pad-single class to add padding with high values on all sides.
Content of the section
Padding for inner content containers
Padding classes particularly suitable for stacks used for content within the main sections of the page.
All sides
Add the pad class to add padding on all sides.
Content area
Top Side
Add the pad-t class to add padding on top only.
Content area
Bottom Side
Add the pad-b class to add padding on bottom only.
Content area
Left/Right Sides
Add the pad-x class to add padding on left/right sides.
Content area
Left/Right + Top Sides
Add the pad-x-t class to add padding left/right and top sides.
Content area
Left/Right + Bottom Sides
Add the pad-x-b class to add padding left/right and top sides.
Content area
Where to edit
PADDING styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ PADDING Pen stack
Add the op-10 class to set the opacity to 10%.
Add the op-20 class to set the opacity to 20%.
Add the op-30 class to set the opacity to 30%.
Add the op-40 class to set the opacity to 40%.
Add the op-50 class to set the opacity to 50%.
Add the op-60 class to set the opacity to 60%.
Add the op-70 class to set the opacity to 70%.
Add the op-80 class to set the opacity to 80%.
Add the op-90 class to set the opacity to 90%.
Where to edit
OPACITY
styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ OPACITY Pen stack
Normal Colors
No additional class to display Tabs at these colors.
Alt Colors
Add the alt class to parent stack to the display Tabs at these colors.
Primary Colors
Add the primary class to the parent stack to display Tabs at these colors.
Secondary Colors
Add the secondary class to the parent stack to display Tabs at these colors.
On Primary Color Background
The parent stack must have the bg-primary class assigned.
On Secondary Color Background
The parent stack must have the bg-secondary class assigned.
Where to edit
TABS styles?
To change the styles, open the Partial and Pen stacks as follows:
Color styles:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
All the other styles:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ TABS & ACCORDIONS Pen stack
Normal Colors
No additional class to display Accordions at these colors.
- My Section One
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
- My Section Two
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
- My Section Three
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
Alt Colors
Add the alt class to the parent stack to display Accordions at these colors.
- My Section One
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
- My Section Two
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
- My Section Three
Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec.
Add Custom Icons
First of all, to use custom icons you need to set the class for the accordion title into the FontAwesome 5 swatch, in this way:
- Open the STYLES COMMON TO ALL PAGES green Pen stack; then ppen the SITE STYLES Pen stack and select the Font Awesome 5 swatch:
- Make sure to add the
accordion-title:beforeclass within the CSS Selector text area. In this way we set the Font Awesome font for the accordions title icons:
- At this point, just go to the Font Awesome site, choose an icon and copy the its Unicode value.
Make sure to use icons of Font Awesome version 5 only.
- In the Accordions stack settings make sure to enable Use Custom Icons?. Then paste the Unicode values into the "Open" and "Close" fields. Make sure to enter the
\symbol before the Unicode value. - The Use Custom Icons is a global feature, it will change the icons on every Accordion stacks on the page.
Where to edit
ACCORDIONS styles?
To change the styles, open the Partial and Pen stacks as follows:
Color styles:
STYLES COMMON TO ALL PAGES Partial
↳ COLOR SETTINGS Pen stack
↳ ELEMENTS COLORS Pen stack
All the other styles:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ TABS & ACCORDIONS Pen stack
Entry Animations
In this section all the information to set the entry animations styles. Use the following classes to obtain the respective entry animation.
Timeline Scroll-based animation (w/ Drift Pro stack)
Top side animation
Add the ani-t-drift class to set the top side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Bottom side animation
Add the ani-b-drift class to set the bottom side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Left side animation
Add the ani-l-drift class to set the left side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Right side animation
Add the ani-r-drift class to set the right side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Scroll-based animation (w/ Toggler on Scroll swatch)
Top side animation
Add the ani-t class to set the top side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Bottom side animation
Add the ani-b class to set the bottom side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Left side animation
Add the ani-l class to set the left side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Right side animation
Add the ani-r class to set the right side animation.
Markdown
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
Where to edit
ENTRY ANIMATIONS
styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ EFFECTS Pen stack
↳ ENTRY ANIMATIONS Pen stack
Hover Effects
In this section all the information to set the hover effects styles. Use the following classes to obtain the respective hover effect.
Background colors
Transparent to Primary
Add the bg-primary-hover class to set this background color on hover.
Transparent to Primary Dark
Add the bg-primary-dark-hover class to set this background color on hover.
Transparent to Secondary
Add the bg-secondary-hover class to set this background color on hover.
Transparent to Secondary Dark
Add the bg-secondary-dark-hover class to set this background color on hover.
Transparent to Almost White
Add the bg-almost-white-hover class to set this background color on hover.
Transparent to Light Gray
Add the bg-light-gray-hover class to set this background color on hover.
Transparent to Dark Gray
Add the bg-dark-gray-hover class to set this background color on hover.
Transparent to Almost White
Add the bg-almost-black-hover class to set this background color on hover.
Transform
Scale Up
Add the scale-up class to set this effect on hover.
Scale Down
Add the scale-down class to set this effect on hover.
Move Up
Add the move-up class to set this effect on hover.
Move Down
Add the move-down class to set this effect on hover.
Rotate 180°
Add the rot-180 class to set this effect on hover.
Rotate 360°
Add the rot-360 class to set this effect on hover.
Shadow
Normal Shadow
Add the shadow class to set this effect on hover.
Small Shadow
Add the sm-shadow class to set this effect on hover.
Large Shadow
Add the lg-shadow class to set this effect on hover.
Real Shadow
(Ideal for large elements)
Add the real-shadow class to set this effect on hover.
Examples
Of course, you can combine the various classes to achieve the desired effect.
Example 1
Use the bg-secondary-hover, move-up and shadow classes to set this hover effect.
Example 2
Use the bg-black-hover, scale-down and lg-shadow classes to set this hover effect.
Where to edit
HOVER EFFECT
styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ EFFECTS Pen stack
↳ HOVER EFFECTS Pen stack
Responsive Embed Contents
In this section all the information to set the responsive embed content styles. Use the following classes to obtain the respective aspect ratio for maps or videos.
How to set the stacks
- Copy the embed code from Google Maps or Youtube.
- Paste it inside the HTML stack.
- Then place the HTML stack inside 1 Column stack (the wrapper stack).
- To the 1 Column stack add one of the classes as shown below to get the respective aspect ratio.
All widths: 16:9 aspect ratio
Add the ratio-16-9 class to the parent stack to display embed content at this aspect ratio.
All widths: 4:3 aspect ratio
Add the ratio-4-3 class to the parent stack to display embed content at this aspect ratio.
SM + MD: 16:9 aspect ratio
LG: 4:3 aspect ratio
Add the ratio-16-9-4-3 class to the parent stack to display embed content at this aspect ratio.
SM + MD: 16:9 aspect ratio
LG: 4:2 aspect ratio
Add the ratio-16-9-4-2 class to the parent stack to display embed content at this aspect ratio.
SM + MD: 16:9 aspect ratio
LG: 4:1 aspect ratio
Add the ratio-16-9-4-1 class to the parent stack to display embed content at this aspect ratio.
SM + MD: 16:9 aspect ratio
LG: 1:1 aspect ratio
Add the ratio-16-9-sq class to the parent stack to display embed content at this aspect ratio.
SM + MD: 2:1 aspect ratio
LG: 2:3 aspect ratio
Add the ratio-2-1-2-3 class to the parent stack to display embed content at this aspect ratio.
How to set styles for a new aspect ratio
- Open the RESPONSIVE EMBED CONTENT Pen stack (at the end of this section is shown where you can find the styles).
- Duplicate a Pen stack of an exsiting aspect ratio, for example the ALL SIZE: Ratio 4:3 Pen stack.
- Let's say we want to set an aspect ratio of 7:5, so rename the new Pen stack to ALL SIZE: Ratio 7:5.
- Before modifying the CSS code you need to know that it is the value of the
padding-bottomattribute that determines the height of the map based on its width (which is 100%). So just change this value to change the aspect ratio of the map/video. - So if we want to set a ratio of 7: 5 just solve the following equation:
7: 5 = 100% : x → (100x5) / 7 = 71.42 - Now open the CSS swatch and replace the class name with a new one and then replace the existing value on the
padding-bottomattribute with the new one 71.42 as shown in the screenshot below. - Finally, assign the new
ratio-7-5class name to the parent stack. - That's all.
Where to edit
RESPONSIVE EMBED CONTENTS
styles?
To change the styles, open the Partial and Pen stacks as follows:
STYLES COMMON TO ALL PAGES Partial
↳ ELEMENTS Pen stack
↳ RESPONSIVE EMBED CONTENTS Pen stack
Partials
Mini-guide on partials
General
The partial is simply a group of stacks with a fantastic feature: if you place the same partial several times on a page or on different pages, for example on pages A, B and C, and then you modify the partial only on page B, it happens that these changes will also propagate on the same partial positioned on the pages A and C.
In practice, by modifying only one partial, all its instances (or copies) that you will have placed in other pages of the project will also be modified.
How to create a partial
- Select the stack you want transform in partial and then click the green Partial button at the top left.
- From the stacks settings you can assign Title, Subtitle, Author and Tags. You can also just assign the Title (give it a name that makes sense to you based on its content).
- Use Tags to better organize your Partial Library and divide your partials into groups.
- At this point, you will find the partial just created in the Partials Library.
- To view the Partials Library click the green cubes icon () on the left vertical menu of Stacks.
How to edit a partial
- Just double click on it, no matter if it is on the page or directly on the Partials Library.
- Make the changes you need.
- Click the blue Back button at the top left to close (and save) the partial.
How to unpack a partial
- First select the partial (the partial must be on the page).
- Click the green Unpack button at the top left.
When you unpack on a partial, the partial simply transforms into a normal group of stacks, and is therefore totally independent from the other instances of that partial you just unpacked on that page.
If you unpack on a partial which is present on several pages, they will not all be unpacked, only the one you have unpacked will become a normal stack group (all other instances will remain as partial).
How to move a partial from one project to another
- Open the project file with partials.
- Drag the partial (or more partials) you need onto the page.
- Select the partial (or more partials).
- Copy them.
- Paste them on the page of the other project file.
- Now you will find those partials also on the Partial library of this other project file.
Partials Library
Organize the library
Partials are well organized, be sure to arrange the Stack Library as follows:
- Click on the Library Settings icon.
- Select Arrange Stacks and then click on the By Tag.
- In this way all partials included in the project are now arranged correctly, sorted and divided by groups (the image is only a demonstration example, the partials in the image may not be part of this project.).
