How to Add a Flip Animation to your Page

Navigate To The Page

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages.

3. From the content page list either add a new page or edit an existing page.

Note: Information on how to Add a New Page and how to Edit an Existing Page can be found in more depth within separate knowledgebase articles.

Adding a Flip Tool

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Flip Tool” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a section is covered in its own knowledge base article.

Editing the Flip Tool

1. Once a section has been added onto a page, you will notice a front and back tab. These are for which content will be displayed on the front and which content is displayed on the back once the flip tool is clicked. Select the tab for the section you wish to add content to and drag and drop the content into the flip tool section.

2. You will have the ability to edit the Flip Tools formatting. This can be done by clicking the flip tool module on the page and clicking the edit button, the edit button appears as a pencil icon in the top right of the section.

3. Once the edit button has been clicked an edit window will appear, there are numerous options across multiple tabs, you can find an overview of the primary settings below:

• Layout

  • Flip Animation: This will allow you to choose the animation when the flip tool is clicked, you are given the options for:
    1. Slide Top
    2. Slide Bottom
    3. Slide Left
    4. Slide Right
    5. Flip Horizontal
    6. Flip Vertical

  • Height: This allows you to set the height of the animation box

  • Transition Speed: This allows you to set the speed of the animation transition.

  • Container Class: This area is for our designers to apply custom styling to the flip tool

• Front Styles

  • Border: This will allow you to create a border around the section or columns within the section

  • Text Align: This will allow you to choose the text alignment.

  • Add background: This will allow you to choose a background colour or image for your section or a column within the section.
    1. Background Colour: This will allow you to choose the background colour for this section
    2. Background Size: This will give you the options of: "Fit to section (cover), Fit to Image Size or Custom Size.
    3. Background Image: This will give you the option to set a background image for the section with options for repeating the image and settings a position for the image.

  • Padding: This will allow you to add space between the section or columns within the section and other sections or columns.

  • Margin: This will allow you to add margins between the section or columns within the section and other sections or columns.

• Back Styles

  • Border: This will allow you to create a border around the section or columns within the section.

  • Text Align: This will allow you to choose the text alignment.

  • Add background: This will allow you to choose a background colour or image for your section or a column within the section.
    1. Background Colour: This will allow you to choose the background colour for this section
    2. Background Size: This will give you the options of: "Fit to section (cover), Fit to Image Size or Custom Size.
    3. Background Image: This will give you the option to set a background image for the section with options for repeating the image and settings a position for the image.

  • Padding: this will allow you to add space between the section or columns within the section and other sections or columns.

  • Margin: This will allow you to add margins between the section or columns within the section and other sections or columns.

3. Once you have applied the section settings click the “Save” button to save the section changes and close the edit window. Your section will now be ready to add in content, the addition of content modules will be covered in depth within other knowledge base articles.

Adding content to the Flip Tool

1. Once the flip tool has been added onto a page, you will now be able to add content to the front and back tab. These where the content will be displayed on the front and which content is displayed on the back once the flip tool is clicked. Select the tab for the section you wish to add content to and drag and drop the content into the flip tool section.

2. All the drag and drop elements can be added into the flip tool.

3. Once you have added your section and applied the settings click the “Save” button located at the bottom of the side menu, this will save your page.

Note: These settings mentioned are the primary settings for section edits, there are further settings that you can tweak to your liking, that can be used alongside the above.

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.

View and example of the Flip Tool  HERE