(Free) Flip Text

• Support: [email protected]
• Free install (1 site). Extra fee with more customizing
• See paid version here.
• View Demo – Password: abc

Description: Flip Text Effect, use Text Block

#1. Install Code

First, hover on page where you want to use Flip Effect > Click Gear icon

Next, click Advanced > Paste this code.

<!-- @tuanphan Flip Text -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1761552369208fliptext.css"/>
<script src="https://code.beaverhero.com/file?filename=1761552402054fliptext.js"></script>

#2. Usage

You can add Text Block

Use @@ before text, like this

@@ Constantly putting out fires when random things pop up in your day to day
@@Knowing the day to day is handled, so you can step into a leadership role

#3. Customize

#3.1. To change Flip Card Height, you can use this code under plugin code

<style>
div.flip-card {
    height: 400px !important;
}
</style>

#3.2. To change Flip Card background color, use this under plugin code

<style>
div.flip-card-front {
    background-color: #f1f !important;
}
.flip-card-back {
    background-color: red !important;
}
</style>

#3.3. To change Flip Card text color, add this under plugin code

<style>
.flip-card-front {
    color: #fff;
}
.flip-card-back {
    color: #000;
}
</style>