Flip Box Effect in Divi

Flip Box Effect in Divi

Andy Hooke posted a great article on B3 Multi Media on how to make flip boxes on the Divi theme.

Flip box effects are one of the most requested Divi features.  But unfortunately Elegant Theme’s still haven’t added them as a module to use within the builder. Luckily for us though, they’re fairly simple to create with a little bit of HTML and CSS, and in this tutorial we will show you how to do that in a few simple steps.

Sneak Peak
Here is a sneak peak of the module we will be building today.

View Demo →

  •  
  •  
  •  

  •  
  •  
  •  

Download Free Divi Sections .JSON file
You can follow this tutorial or download ready to use .json file with several sample sections that you can import to your Divi Library and use in no time! Subscribe to download free section →

 

1.  Create a section

Create a new section and add a row with 3 columns.

  •  
  •  
  •  
 

2.  Add text module and HTML

Add a text module, make sure you’re on the “Text” tab, then paste in the following html:

 

 

  •  
  •  
  •  
 

3.  Customise HTML

For the frontside: In the space marked [add image], replace with an image from the media library using Add Media button. Make sure the image is at least 400px wide.

For the backside: Look for the part of code which looks like this:

Then replace the following
– The text which says “Project Title” inside the h3 tag
– The description text directly below which starts with “A short…” inside the p tag

 

4.  Add in link (optional)

If you’d like to turn the flip card into a link, you can add in a module link to the text module.

  •  
  •  
  •  
 

5.  Choose which flip direction

You can choose 4 different directions for the flip: left, right, up, down.

Add the following class into the css class box in the advanced tab of the text module:

• Left: flip-card-rotate-left
• Right: flip-card-rotate-right
• Up: flip-card-rotate-up
• Down: flip-card-rotate-down

  •  
  •  
  •  
 

6.  Add in other boxes

Copy and paste the text module into the other two columns, then repeat step 3-4 to customise each flip card. Then save the layout.

  •  
  •  
  •  
 

7.  Add custom CSS

Add the code below into your child theme style.css (or the Custom CSS tab of your Divi Theme Options):

8

Save CSS

Save the CSS settings and you’re done!

View Demo→

Subscribe to download free sections →

  •  
  •  
  •  

Mobile Version

The mobile version of this layout is set to overlay the background text over the front image.

The reason being as there’s no text on the front, users might think it’s just an image and not think to click it, therefore missing the text on the back.

If you’d like to have the cards active on mobile though, it’s an easy fix. You just need to do the following:

1. Remove the media query from the CSS. The part you need to remove is highlighted below.
2. If you’re using a module link, remove it
3. Reply the “View project” text on the back with a link

And that’s it!

CSS to remove:

 

Flip Box Effect in Divi

Remove Featured Image

Unlike many themes you do not need to edit any code to disable the featured image at the top of the post in Divi.  However it is quite difficult to find the settings if you do not know where to look.

How to disable the featured image in Divi

Go to Divi -> Theme Options -> Layout  -> Single Post Layout  -> Disable “Place Thumbs on Posts”

Now your blog posts will not have a featured image at the top of the post and you will be able to add the image inline in your text where ever you would like.

Keygcco.com Website Goes Live

Keygcco.com Website Goes Live

Keygcco.com, the website for Key General Contractors went live today.

Key General Contractors, an 8(a). MBE, DBE has been in operation since April 11, 2011. Key GC is located in Colorado Springs and is a full service company offering design/build, general contracting and construction management services. The principle members of the organization together have over 33 years of experience in the construction industry. Since its inception Key GC has used this experience and knowledge to deliver the highest quality projects at the best value possible for the Government. We believe that it is necessary for all parties involved in a project, from the owner to the subcontractor, to be kept informed. Having these strong lines of communication has helped us to achieve final products that ate delivered on time and within budget.

Key General Contractors has a long history of providing outstanding quality, using efficient construction methods, and maintaining exceptional professionalism in its workforce.

Child Theme Configurator

Child Theme Configurator

What is a Child Theme?

A child theme is a special feature of WordPress that lets you override specific styles and functions of another theme. By using a child theme, you can update any WordPress theme without losing your changes.

Child Theme Configurator makes it easy.

Child Theme Configurator is a fast and easy to use CSS editor that allows you to create Child Themes and customize them beyond the options of the WordPress theme Customizer. It helps you easily identify and override the exact CSS attributes you want to change and gives you unlimited control over the look and feel while leaving your WordPress Theme untouched.

Thousands of users have already seen the benefits of Child Theme Configurator making it one of the most popular plugins on WordPress.org.* Read the reviews

Child Theme Configurator parses and indexes a WordPress theme

Modify The Copyright Line and Tag Lines in the Divi Footer

Divi Logo Size

To change the size of the logo on the Divi theme, add the following CSS to Custom CSS panel on the Theme Options page.

.et_fixed_nav #logo {
max-height: 75px;
}
.et-fixed-header #logo {
max-height: 50px !important;
padding:0 !important;
}

Modify The Copyright Line and Tag Lines in the Divi Footer

Divi Sidebar CSS Examples

h4.widgettitle {
background-color: #b5121b;
padding: 10px;
width: 100%;
font-weight: 700;
font-size: 24px;
color: #fff;
margin-bottom: 20px;
}

SideBar Exp 1

.widgettitle {
text-align: center;
border-top: 3px solid #ffcc0d !important;
border-bottom: 3px solid #ffcc0d !important;
padding-top: 12px;
margin-bottom: 12px;
font-weight: 900;
}

SideBar Exp 2

Pin It on Pinterest