Article sections

    The flip box makes it possible that, when users hover over an image/text, a div with text inside will appear.

    Open the list of components and choose Flip Box. Use drag-and-drop to add the component to the page you are customizing.

    To adjust settings for the Flip Box, click on the component and make sure you have the corresponding settings category open in Customizer.

    Flip Box Properties

    Settings for the Flip Box in normal state

    Vertical position – this defines the placement of the content on a vertical axis. The content can be placed at the top of the section, in the middle or at the bottom of the section.

    Horizontal align – this defines the placement of the content on a horizontal axis. The content can be placed to the left, at the center or to the right of the section.

    Height – from here, you can select a specific value that controls the height of the section dedicated to the Flip Box.

    E.g. Flip Box with a height of 472:

    Space between content – this defines the space between the title and the content of the section

    Settings for the Flip Box on hover

    These settings refer to how the content displays, when users hover over the section with their mouse.

    Vertical position – this defines the placement of the content on a vertical axis. The content can be placed at the top of the section, in the middle or at the bottom of the section.

    Horizontal align – this defines the placement of the content on a horizontal axis. The content can be placed to the left, at the center or to the right of the section.

     

    Link – fill in the blank space with the URL of the destination page where users will be taken, once they click on e.g. “MORE INFORMATION”

    Effect settings

     

    Effect Type – this option refers to the way the initial content is replaced by the div with the text inside it.

    The effects can be:

    • Bounce
    • Flip
    • Fade
    • Rotate
    • Slide
    • Zoom

    Try different effects and choose the one that best represents the style of your new website.

    Effect Direction – this option refers to the direction where the effect is taking place, from the initial state to the state on hover (up/down/left/right).

    Effect Duration – this option allows you to adjust the time while the effect is taking place.

    To better see the customizations you make to Effects, click on Play Effect at the end of the settings list.

    Style

    Flip Box in normal state

    Background color – this is the color of the background for the Flip Box in normal state.

    Background type – if you don’t want to use a simple color for the background, you can choose to apply an image or a gradient to the background, and customize them accordingly:

    Image background:

     

    Gradient background:

     

    Typography – click on the pencil icon next to Typography to open the panel with further customization options for the text of the Flip Box:

    Flip Box on hover

    Background color – this is the color of the background for the Flip Box on hover (when users hover their mouse over the section).

    Background type – if you don’t want to use a simple color for the background, you can choose to apply an image or a gradient to the background, and customize them accordingly:

     

    Image background:

    Gradient background:

     

    Typography – click on the pencil icon next to Typography to open the panel with further customization options for the text of the Flip Box:

     

    Style for the Entire Box

    You can choose to create a visible border for the box including the flip box.

    Border type

    Choose the border type:

    • Solid line
    • Dashed line
    • Dotted line
    • Double line, etc.

    Border thickness

    For the border to be visible, you have to select specific values for the border thickness (the values need to be greater than 0).

    Border color

    Choose a color for the border of the box including the flip box. Select the preferred color, from the color picker.

    Border radius

    These values define how round the border corners are. Greater values mean rounder corners of the border.

    Box Shadow

    Enable the option to show a box shadow and create a stylish effect for this component. Click on the pencil icon next to Box Shadow to open the panel with further customization options for the shadow.

    Example of customized box for the flip box:

     

     

    in Advanced Components