booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Perspective Card

Perspective Card

Preview Widget
Preview Widget
Getting Started
Content
Perspective Values
Styling

More Widgets

• 3D Card Flip
• Hover Info Box
• Layered Images
• Modern Flip Box

# Getting started

The perspective card widget brings your a unique and modern tool to display your data with its perspective animation.This widget uses a text, an image or icon, and a fully customizable animation that you can control to make your own perspective card display.

Lets go over the details of this amazing widget.

Content

In the content section you can define all the elements of your perspective card.

  • Icon Type : Choose if u want to use an icon, an image or none of the two..
  • Image/Icon : Upload an image or select an icon from our extensive icon libraries..
  • Title :  A title text that gives a global insight about the information or service you are showcasing.
  • Short text : A description text that gives more information about what you want to showcase.
  • Alignement & Position : Horizontally and vertically align your content inside the widget.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.

Perspective Values

Under the perspective values section, you will be able to control all the aspects of the perspective animation.Change the duration, timing, and define the coordinates for the rotation and translation.  

  • : You have the option change the container height to have more control on both the displayed content and the animation.
  • ​Translation Settings : Change the animation duration and select one of the multiple animation timings available.
  • Perspective Settings ​: This is where you can customize the core behavior of the animation.You can change the element initial location coordinates with the translation property and the initial rotation coordinates with the rotate property.Setting every coordinate to 0 will result in no animation because the animation starting position and ending position will be the same.

Styling

Under the styling tab, you will have the full control over the styling of all the design aspects of the perspective card widget.Text, icon, container, everything is available.

  • Text Content Styling

Customize the text properties for the title & short description text.Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements and create a unique design.

-Distances : Control the margins & distances between each element.

  • Container Styling

This section will be used to style the container of the widget.

-Background Type & Colors : You can either upload an image to use as a background or use colors instead.Solid and gradient colors are both available with the addition of having full control on the gradient behavior.

-Borders & Shadows : Control border for your icon & apply custom box shadows.

-Overlay : You can enable an overlay  and customize its color to create fancy designs.

-Container padding : Control the each container inner space.

  • Icon Styling

Control everything about your icon, apply a custom icon & background sizes.

-Gradient Colors : You can apply a solid single color, or a gradient color with custom directions for both the icon and the icon background.

-Borders & Margins: Customize borders for the icon container and apply margins to control the space between the icon and the other elements.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Morocco our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020