NexaBlocks

Docs

Flip Box

Getting Started

  • Getting Started With nexablocks
  • Installation & Editor
  • Set Global Style & color Palette
  • Create Patterns & Header & Footer
  • Copy & Paste Styles

Blocks

  • Container
  • Button
  • Advanced Heading
  • Icon Box
  • Social Icons
  • Google Map
  • Accordion
  • Image Accordion
  • Social Share
  • Flip Box
  • Slider

Modules

  • Template Library
  • Advanced Tab
  • Custom Css
  • Responsive controls

Flip Box

  • Add Flip Box
  • Content
  • StyleitemiconTitle & description
  • item
  • icon
  • Title & description

Create a wide variety of Flip Boxs with customizable options, allowing you to match your unique design vision.

Add Flip Box #

Click the ‘+’ icon in the top-left corner to access a wide range of blocks for building your content.

Content #

– Choose from various pre-designed box styles with unique animations, including normal flip and 3D flip, to add dynamic effects to your content.– Customize the animation direction, display of icons, titles, and descriptions, and control the content alignment within your boxes for a tailored look.– Add a Flip box content for the front & back face.

Style #

First: Start by setting the desired height for your box using the height property.

Second: Choose whether to edit the front or back face of the item to customize its appearance

Third: Customize the appearance of individual items within your layout, including the icon, title, description, and overall style.

item #

  1. Border & Border Radius: – Choose a border style– Set the Border Width – Border color(First color for normal & second for Hover)– Create rounded corners of the box.
  2. Padding :set the inner spacing between the edges and the content.
  3. Box Shadow: Create an easy box shadow effect.
  4. Background:Add a solid background Background image or a stunning gradient effect or to the item.

icon #

  1. Color:Use the color picker tool to assign a color to the icon.
  2. Size:set icon size
  3. Width & Height:Customize the size of your icon container.
  4. Border & Border Radius: – Choose a border style– Set the Border Width – Border color(First color for normal & second for Hover)– Create rounded corners of the box.
  5. Spacing:-Add padding for the inner spacing between the text and the content.-Add a margin for the outer spacing between the text and the Content.
  6. Background:Add a solid background or a stunning gradient effect to the icon.

Title & description #

  1. Color: Use the color picker tool to assign a color to the text.
  2. Typography: Set font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing.
  3. Margin: Used for the outer spacing between the item and other content.

Read to grow your business digitally with us?