Flip Box (PRO)

Flip Box allows you to create a block of content that will flip, slide or fade when hovered, allowing you to present content to the users in a dynamic and fascinating way. Element available on Quix Pro only.

To use this element, please follow this steps:

  1. After adding a Section and Column, click the Plus icon to open the available elements.
  2. Click Flip Box and it will be added to your page and its settings window will automatically open so you can start configuring it.

On it's Settings pop-up you will find three tabs, General, Styles and Advanced. On each tab you will find the different options available to modify and customize the element.

General Tab

  • Front - General settings for the Front part of the Flip Box.
    • Title - Type the Flip Box's title here. The title represents the whole content of the Flip Box, allowing your visitors to have an idea of the content.
    • Content - Here you need to write the information that the Flip Box will contain. You can also style the text using the options available on the text editor, insert lists, tables, creating lists and selecting the text alignment.
    • Title HTML Tag - Here you can select the HTML tag for the title, you can select from H1 to H6, DIV, and Span and P. This is useful to keep your code organized for SEO purposes.
    • Enable Content Image - Enable this option if you would like to add an image to the content of the Flip Box.
    • Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab, an Icon on the Icons tab or download an image from Unsplash on the Unsplash tab.
    • Size - If an icon was selected, this option will appear so you can set the size for it.
    • Color - If an icon was selected, this option will appear so you can set the color.
    • Enable Background - Enable this option to be able to configure the background of the Flip Box.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab or download an image from Unsplash on the Unsplash tab.
  • Back - General settings for the Back part of the Flip Box.
    • Title - Type the Flip Box's title here. The title represents the whole content of the Flip Box, allowing your visitors to have an idea of the content.
    • Content - Here you need to write the information that the Flip Box will contain. You can also style the text using the options available on the text editor, insert lists, tables, creating lists and selecting the text alignment.
    • Title HTML Tag - Here you can select the HTML tag for the title, you can select from H1 to H6, DIV, and Span and P. This is useful to keep your code organized for SEO purposes.
    • Enable Content Image - Enable this option if you would like to add an image to the content of the Flip Box.
    • Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab, an Icon on the Icons tab or download an image from Unsplash on the Unsplash tab.
    • Size - If an icon was selected, this option will appear so you can set the size for it.
    • Color - If an icon was selected, this option will appear so you can set the color.
    • Enable Background - Enable this option to be able to configure the background of the Flip Box.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab or download an image from Unsplash on the Unsplash tab.
    • Enable Button - Enable this option to display a button on the Back of the Flip Box.
    • Flip Box back button text - This text is what will show on the button, this text should help the users know what will happen when clicking it.
    • Flip Box back button link - Type the link here, you can use relative or absolute links. Click the Gear icon to set if the link should open on a new window and to add the No Follow property.
    • Flip Box back button type - You can select the type of Buton you want to display from the available options, this will display it using predefined styles. You can customize this more with the options available on the Styles tab.
    • Outline Style - Enabling this option will remove the background of the button leaving only the border.
    • Full Width Button - Enabling this option will make the button use all the available width of the column.
  • Additional Settings - This settings will affect both the Front and the Back of the Flip Box.
    • Enable Height - Enable this setting if you want to set a fixed height for the Flip Box.
    • Flip Box Height - You can easily set the height of the Flip Box by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Width - You can configure the width of the border line for the Flip Box here.
    • Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Color - Set the color for the border.
    • Border Radius - Use this option to set the radius of the corners to give them a rounded look.
    • Flip Box Effect - Select the effect the Flip Box will use to go from the Front to the Back content. The options are: Flip, Slide, Push, Zoom In, Zoom Out and Fade.
    • Flip Box Direction - Select the direction of the Flip Box Effect, the options are: Left, Right, Up and Down. This setting is avaliable for the Flip, Slide and Push effects.
    • 3D Depth - Enable this option to give the Flip Box a 3D effect when hovered. This option is only available if the Flip Box Effect is set to Flip.

Styles Tab

The Styles Tab will help you style the Flip Box element. You will find two different options, Front and Back, each with its particular settings.

  • Front - Style settigns for the Front part of the Flip Box.
    • Image Width - This setting will allow you to set the Content Image width. You can easily set the value by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Padding - You can use this setting to increase the space between the Content Image and the rest of the Content.
    • Position - You can select the alignment for the content here, you can set it to Left, Center, Right or Justified.
    • Media Spacing - Set the distance between the Image and the Title.
    • Content Position - You can select if the content is aligned to the Top, Center or bottom of the panel.
    • Typography Options - You will find first the typography options for the Title and right after the Typography options for the Content.
      • Title Color/Content Color - Select the color for the Title/Content.
      • Spacing - Set the distance between the Title and the Content.
      • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
      • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
      • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
      • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
      • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
      • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
      • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
      • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
      • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
  • Back - Style settigns for the Back part of the Flip Box.
    • Image Width - This setting will allow you to set the Content Image width. You can easily set the value by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Padding - You can use this setting to increase the space between the Content Image and the rest of the Content.
    • Position - You can select the alignment for the content here, you can set it to Left, Center, Right or Justified.
    • Content Position - You can select if the content is aligned to the Top, Center or bottom of the panel.
    • Media Spacing - Set the distance between the Image and the Title.
    • Typography Options - You will find first the typography options for the Title and right after the Typography options for the Content.
      • Title Color/Content Color - Select the color for the Title/Content.
      • Spacing - Set the distance between the Title and the Content.
      • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
      • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
      • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
      • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
      • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
      • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
      • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
      • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
      • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Button Settigns - You will find all the Button style settings below.
      • Color - Set the color for the text.
      • Hover Color - Set the color for the text when the button is hovered.
      • Padding - You can use this setting to increase the space between the border of the button and the text, making the button bigger.
      • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
      • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
      • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
      • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
      • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
      • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
      • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
      • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
      • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
      • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
      • Background Type - Here you can select if you want a solid background or a gradient background.
      • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
      • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
      • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
      • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
      • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
      • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
      • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
      • Border Type - Use this setting to define the type of border you want for the Button, there are four options: Solid, Double, Dotted and Dashed.
      • Border Radius - Use this option to set the radius of the Button's corners to give them a rounded look.
      • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.

Advanced Tab

As it's name says, here you can find the Advanced settings for the element. You can choose to edit them or leave them the way they are depending on your needs.

  • Element Style - Here you will find the settings for Margin, Padding and Z-Index values of the element.
    • Margin - Margins allow you to add space around the element, outside of its container.
    • Padding - Paddings allow you to add space around the element, inside of its container.
    • Z-Index - When two items overlap, the Z-Index value control which one appears on top of the other. An element with a Z-Index of 0 will appear behind an element with a Z-Index of 1.
  • Background - Here you will be able to configure the Background for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
  • Border & Box Shadow - You wil be able to configure Borders and Shadows for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders and shadows for each state.
    • Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - If a Border Type other than None is selected, this option will appear so you can configure the width of the border line for the element.
    • Border Radius - Use this option to set the radius of the corners to give them a rounded look.
    • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
  • Animation - If you want to give your element movement, here is the place to do it.
    • Entrance Animation - Select the animation you want from the options avaliable on the dropdown.
    • Animation Repeat - You can enable this option if you want the animation to repeat everytime the element is visible on the screen. The default value is No, which only plays the animation the first time the element is viewed.
    • Animation Delay - You can set a delay from the moment the element is on the screen to the moment the animation starts. Specially useful if you want to create a cascading effect.
  • Custom CSS (PRO Only) - If you require a bit more customization, you can add your custom CSS here.
    • CSS Code - You can write your own CSS code here that will affect the element. No style tags required.
  • Identifier - Here you can find and customize the unique information for the element.
    • CSS ID - The unique identifier assigned to the element. You can change it, specially to make it easier to work with anchor links, but it always has to be unique to avoid issues.
    • CSS Class - If you would like to write CSS code on an external CSS file to customize the element, you can add an specific CSS Class to identify it so the changes are only applied to the element with the class.
    • Access Control - You will find all the User Groups you have configured on Joomla here. This option will allow you to configure who can view and interact with the access and with what permissions to the page.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us