The Wordpress Admin Page looks like this:
And the Shortcodes are customize like this:
<div>
<h2>Auto Flipping Cards - All at once</h2>
<div style="max-width:752px;">
[flippingCard type="auto" background="#0959EA" border="0" color="white"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/ie.png" style="margin:0;border-radius:0;"/>
[/fc_front]
[fc_back]
<h3>Internet <br > Explorer</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#791869" border="0" color="white" direction="left"]
[fc_front]
<h2>Flipping Card</h2>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img2.png" style="margin:0;border-radius:0;" />
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#C23B3D" border="0" color="white" direction="top"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/chrome.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Google <br >Chrome</h3>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#00AFF0" border="0" color="white" direction="bottom"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/skype.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Skype</h3>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#F27A00" border="0" color="white" direction="right"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/firefox.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Mozilla<br >Firefox</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#0959EA" border="0" color="white" direction="left"]
[fc_front]
<h2>Flipping Card</h2>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img3.png" style="margin:0;border-radius:0;" />
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#88B500" border="0" color="white" direction="top"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/android.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Android</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#C23B3D" border="0" color="white" direction="bottom"]
[fc_front]
<h2>Flipping Card</h2>
<h4>(Right)</h4>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img4.png" style="margin:0;border-radius:0;"/>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#00AFF0" border="0" color="white" direction="right"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/safari.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Safari</h3>
[/fc_back]
[/flippingCard]
</div>
<div style="clear:both;"></div>
<h2>Auto Flipping Cards - At different times</h2> <!-- -------------------------------------------------- -->
<div style="max-width:752px;">
[flippingCard type="auto" background="#0959EA" border="0" color="white" autoflip="9000" autoflipstart="1000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/ie.png" style="margin:0;border-radius:0;"/>
[/fc_front]
[fc_back]
<h3>Internet <br > Explorer</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#791869" border="0" color="white" direction="left" autoflip="9000" autoflipstart="4000"]
[fc_front]
<h2>Flipping Card</h2>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img2.png" style="margin:0;border-radius:0;" />
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#C23B3D" border="0" color="white" direction="top" autoflip="9000" autoflipstart="2000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/chrome.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Google <br >Chrome</h3>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#00AFF0" border="0" color="white" direction="bottom" autoflip="9000" autoflipstart="5000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/skype.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Skype</h3>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#F27A00" border="0" color="white" direction="right" autoflip="9000" autoflipstart="3000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/firefox.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Mozilla<br >Firefox</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#0959EA" border="0" color="white" direction="left" autoflip="9000" autoflipstart="9000"]
[fc_front]
<h2>Flipping Card</h2>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img3.png" style="margin:0;border-radius:0;" />
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#88B500" border="0" color="white" direction="top" autoflip="9000" autoflipstart="6000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/android.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Android</h3>
[/fc_back]
[/flippingCard]
[flippingCard width="368px" type="auto" background="#C23B3D" border="0" color="white" direction="bottom" autoflip="9000" autoflipstart="8000"]
[fc_front]
<h2>Flipping Card</h2>
<h4>(Right)</h4>
[/fc_front]
[fc_back]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img4.png" style="margin:0;border-radius:0;"/>
[/fc_back]
[/flippingCard]
[flippingCard type="auto" background="#00AFF0" border="0" color="white" direction="right" autoflip="9000" autoflipstart="7000"]
[fc_front]
<img src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/safari.png" style="margin:0;border-radius:0;" />
[/fc_front]
[fc_back]
<h3>Safari</h3>
[/fc_back]
[/flippingCard]
</div>
<div style="clear:both;"></div>
<h2>Over Flipping Cards</h2> <!-- ----------------------------------------------------------------- -->
[flippingCard]
[fc_front]
<h2>Over this card</h2>
<h4>(Right)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard direction="left" padding="0px"]
[fc_front]
<h2>Over this card</h2>
<h4>(Left)</h4>
You can add images too
[/fc_front]
[fc_back]
<a href="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img.png"><img style="margin:0;border-radius:0;"src="http://www.castlecodeweb.com/wp-flippingcards3d/wp-content/uploads/2020/07/img.png" alt="img" width="200" height="200" class="aligncenter size-full wp-image-12" /></a>
[/fc_back]
[/flippingCard]
[flippingCard direction="top"]
[fc_front]
<h2>Over this card</h2>
<h4>(Top)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard direction="bottom"]
[fc_front]
<h2>Over this card</h2>
<h4>(Bottom)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
<div style="clear:both;"></div>
<h2>Over Flipping Cards - Border Radius at 50%</h2> <!-- --------------------------------------------- -->
[flippingCard borderRadius="50%"]
[fc_front]
<h2>Over <br >this card</h2>
<h4>(Right)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard direction="left" padding="0px" borderRadius="50%"]
[fc_front]
<h2>Over <br >this card</h2>
<h4>(Left)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard direction="top" borderRadius="50%"]
[fc_front]
<h2>Over <br >this card</h2>
<h4>(Top)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard direction="bottom" borderRadius="50%"]
[fc_front]
<h2>Over <br >this card</h2>
<h4>(Bottom)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
<div style="clear:both;"></div>
<h2>Click Flipping Cards</h2> <!-- ----------------------------------------------------------------- -->
[flippingCard type="click" direction="right"]
[fc_front]
<h2>Click this card</h2>
<h4>(Right)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard type="click" direction="left"]
[fc_front]
<h2>Click this card</h2>
<h4>(Left)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard type="click" direction="top"]
[fc_front]
<h2>Click this card</h2>
<h4>(Top)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
[flippingCard type="click" direction="bottom"]
[fc_front]
<h2>Click this card</h2>
<h4>(Bottom)</h4>
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
[/fc_back]
[/flippingCard]
<div style="clear:both;"></div>
<h2>Button Flipping Cards</h2> <!-- ----------------------------------------------------------------- -->
[flippingCard type="button" direction="right"]
[fc_front]
<h2>Some <br >Random Text</h2>
<input type="button" value="click me" class="cbutton">
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
<input type="button" value="click me" class="cbutton">
[/fc_back]
[/flippingCard]
[flippingCard type="button" direction="left"]
[fc_front]
<h2>Some <br >Random Text</h2>
<input type="button" value="click me" class="cbutton">
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
<input type="button" value="click me" class="cbutton">
[/fc_back]
[/flippingCard]
[flippingCard type="button" direction="top"]
[fc_front]
<h2>Some <br >Random Text</h2>
<input type="button" value="click me" class="cbutton">
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
<input type="button" value="click me" class="cbutton">
[/fc_back]
[/flippingCard]
[flippingCard type="button" direction="bottom"]
[fc_front]
<h2>Some <br >Random Text</h2>
<input type="button" value="click me" class="cbutton">
[/fc_front]
[fc_back]
<h2>This is <br >the backside</h2>
<input type="button" value="click me" class="cbutton">
[/fc_back]
[/flippingCard]
<div style="clear:both;"></div>
<h2>Note: You can also add flipping cards in the side bar widget</h2>
</div>