Advanced Technique

How to Add a Card Flipper to Your Pages

A card flipper allows you to create a box that contains information. When the user hovers over the box, the card 'flips' to introduce more information on the backside of the card.

This is going to be a little bit of an advanced technique as it will require you to edit HTML code. This tutorial will try to make the edits as easy as possible, but some existing HTML knowledge may be required.

 

Card Flips Can Work Great on Your Site For:

  • About Out Team Page

  • Testimonials

  • FAQs

  • Games - like Trivia Questions

  • Flash Cards (for a Study Guide)

  • Product Information (include a link to add to you cart)

 

The Card Flip

Hover over the cards below to see the effect in real time. Each separate card shows an example of each card flip idea listed above.

Hover Over Each Card

card image

About Our Team

Tom Cone has been working with MemberGate since it's launch in 2000.

Tom Cone

Tom is not just the managing director. He is also the proud owner of many MemberGate powered sites including ezs3.com, and bandbowner.com.

card image

Testimonial

MemberGate is a fantastic and easy to use CMS.

Johnny Crosby

I have been using MemberGate for over 10 years. The continuous enhancements and up to date security functionality keeps my subscription site a safe and fun environment. My members get exactly what they need, and I do too!

St Paul, Minnesota
JoinMySubscriptionSite.com

card image

FAQ

What is PCIDSS?

PCIDSS

PCIDSS stands for Payment Card Industry Data Security Standard It is the security scheme introduced by the credit card issuers - Amex, Visa, MasterCard etc. The scheme was created to rebuild the trust between purchasers, card brands and vendors.

card image

Games - Trivia Questions

What island is considered the largest in the world?

Greenland

Both Antarctica and Australia are technically larger, but are not considered islands. Those are considered continental landmasses. Because of that, Greenland takes the top honors of world's largest island.

card image

Flash Card Study Guide

What is the capital of South Carolina?

Columbia

Named after Christopher Columbus, Columbia became the state capital in 1786.

card image

Product Information

2 Year SSL Certificate

GeoTrust 256 bit SSL

Save $39 by purchasing 2 years. GeoTrust 2048 bit SSL certificate for 24 months.

MemberGate will take care of everything from ordering to installing to updating your site so it is secure.


Buy Now

 

 

The Process

There are three steps to adding the card flipper to your pages

  1. Download the HTML Code

  2. Download the CSS Code

  3. Edit the Code

Click on each tab for more information about completing the steps

Download the HTML Code

The flip code uses Bootstrap. Bootstap elements can be used within MemberGate, because MemberGate has built in the code necessary for Bootstrap to work.

In the most simplest terms, Bootstrap allows for faster and easier development. Anything that is rendered using Bootstrap can be added to your MemberGate pages.

The first step to adding the flip cards to your site is to access the code. Click the button below to copy the native code:

DOWNLOAD NOW

 

Click on each section to below to expand for more information:

1. Click the HTML code tab and copy the HTML code

Click the HTML code tab

 

 

 

Copy the HTML code from the comment 'Team' code to the bottom of the code (ending 'team' comment code).

Top of the code

 

Bottom of the code

 

2. Paste the Code onto a Content Page

Paste the Code onto a Content Page

  1. Add a New Content Page

  2. Click the Source Code button on the WYSIWYG Editor





  3. Paste the Code into the WYSIWYG Editor



3. Delete Two Lines of Code

Delete Two Lines of Code

  1. On the third line of code, delete the  < div class="container"> tag





  2. On the third line from the bottom, delete the closing div tag < /div>





In the Second Step, Copy and Paste the CSS Code

Click on each section to expand for more information:

1. Click the CSS code tab and Copy the CSS code

On the Bootstrap Page:

 

Click the CSS Code Tab

 

 

 

Copy all of the CSS Code

 

 

 

2. Paste the CSS code into the Head of the Content Page

Paste the CSS Code into the Head of the Content Page Where the Accordion Will Appear

  1. Edit the Content Page

  2. Click the Button next to the 'Custom Header + Footer Javascripts'





  3. Add Opening and Closing style tags to the 'Custom Header Javascript' box





  4. Paste the CSS Code after the opening style tag 





3. Delete Two Lines of Code

Delete the First two lines of code

/ * FontAwesome for working BootSnippet :> */

@ import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');





Edit the Flip Cards for Your Use

The flip cards can be customized by editing the HTML code directly. 

In the WYSIWYG editor on the 'edit content' page, click on the Source Code button again if the HTML code isn't showing:


There can be 7 sections to edit when customizing the flip cards on your pages (1 section for the Title of the whole flip card area, and then 6 on each individual cards)

Each individual card contains the following sections:

  1. Image on Front of Card

  2. Title of Front of Card

  3. Description on Front of Card

  4. Title of Back of Card

  5. Description on Back of Card

  6. Social Media Icons on Back of Card

 

Editing each Indivdual Card can be Completed in the Following Steps:

Click on each section to expand for more information

1. Edit the Title of the Card Flipper Section

Edit the Title of the Card Flipper Section

 

Location of the Title Area on the Live Page

 

 

 

The HTML Code

Look for the following code and update the "OUR TEAM" Text

< h5 class="section-title h1">OUR TEAM< /h5>

 

 

 

2. An Invidual Card Code

The Individual Card Code to Edit

Each individual card information can be found in the HTML code between the commented code:

< !-- Team member --> and < !-- Team member -->

Each individual card contains the following sections:

  1. Image on Front of Card

  2. Title of Front of Card

  3. Description on Front of Card

  4. Title of Back of Card

  5. Description on Back of Card

  6. Social Media Icons on Back of Card

Any of those sections can be customized or deleted if not in use

.

 

The Code

 

 

3. The Image

The Image

 

Location of the Image on the Live Page

 

 

 

Edit and Upload the Image

The image should be edited using an image editing program and then uploaded to your MemberGate site.

The image should be sized as a square 100x100 - 150x150 pixels.

 

After edited and resized, the image can then be uploaded to your MemberGate site:

  1. In the control panel under 'Utilities' choose 'File Upload'

  2. Choose the folder to upload (for example, Public Image Storage Area)

  3. Click the 'Upload Files' link and choose the file from your local drive

  4. Copy the resulting file path and paste it into the HTML code

 

 

The HTML Code

Look for the following code and paste the path of the Image in between the src= quotation marks replacing the https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png

< img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image">

 

 

 

4. Title of Front of Card

Title of Front of Card

 

Location of the Title of Front of Card on the Live Page

 

 

 

The HTML Code

Look for the following code and update the "Sunlimetech" Text

 < h4 class="card-title">Sunlimetech

 

 

 

5. Description on Front of Card

Description on Front of Card

 

Location of the Description on Front of Card on the Live Page

 

 

 

The HTML Code

Look for the following code and update the "This is basic card with image on top, title, description and button" Text

< p class="card-text">This is basic card with image on top, title, description and button.

 

 

 

6. Title of Back of Card

Title of Back of Card

 

Location of the Title of Back of Card on the Live Page

 

 

 

The HTML Code

Look for the following code and update the "Sunlimetech" Text

< h4 class="card-title">Sunlimetech

 

 

 

7. Description on Back of Card

Description on Back of Card

 

Location of the Description on Back of Card on the Live Page

 

 

 

The HTML Code

Look for the following code and update the "This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button" Text

< p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.

 

 

 

8. Social Media Icons on Back of Card

Social Media Icons on Back of Card

 

Location of the Social Media Icons on Back of Card on the Live Page

 

The HTML Code

Look for the following code and update the href="#" Text. This is a link that will link to your social media pages.

 

 

 

Each Individial Social Media Icon

 

Location of Facebook Icon on Back of Card on the Live Page

The Facebook HTML Code

Look for the following code and update the # with the URL for your Facebook page.

< li class="list-inline-item">
< a class="social-icon text-xs-center" target="_blank" href="#">
< i class="fa fa-facebook">
< /a>
< /li>

 

 

 

 

Location of Twitter Icon on Back of Card on the Live Page

 

 

The Twitter HTML Code

Look for the following code and update the # with the URL for your Twitter page.

< li class="list-inline-item">
< a class="social-icon text-xs-center" target="_blank" href="#">
< i class="fa fa-twitter">
< /a>
< /li>

 

 

 

 

Location of Skype Icon on Back of Card on the Live Page

 

 

The Skype HTML Code

Look for the following code and update the # with the URL for your Skype page.

< li class="list-inline-item">
< a class="social-icon text-xs-center" target="_blank" href="#">
< i class="fa fa-skype">
< /a>
< /li>

 

 

 

 

Location of Google Icon on Back of Card on the Live Page

 

The Google HTML Code

Look for the following code and update the # with the URL for your Google page.

 < li class="list-inline-item">
< a class="social-icon text-xs-center" target="_blank" href="#">
< i class="fa fa-google">
< /a>
< /li>

 

 

 

 

Other Social Media Icons

If you are using or would like to link to other Social Media sites, the icons can be found at Font Awesome.

 

Repeat Each Step for All of the Cards