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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

[add image]

</div>

<h3>Project Title</h3>

A short description of the project. Enim mollit irure Lorem nisi occaecat sint consectetur. View project →

</div>

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:

1

2

3

4

5

6

7

8

9

<h3>Project Title</h3>

<p>A short description of the project. Enim mollit irure Lorem nisi occaecat sint consectetur.</p>

<p class=“link-styling”>View project →</p>

</div>

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):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

/* Set height of card. The image is set to cover, so increasing the height won’t distort the image.*/

.flip–card {

height: 300px;

perspective: 1000px;

–webkit–perspective: 1000px;

}

/* This container is needed to position the front and back side */

.flip–card–inner {

position: relative;

width: 100%;

height: 100%;

text–align: center;

transition: transform 0.8s;

–webkit–transition: transform 0.8s;

–webkit–transition: –webkit–transform 0.8s;

transform–style: preserve–3d;

–webkit–transform–style: preserve–3d;

}

/* Position the front and back side */

.flip–card–front, .flip–card–back {

position: absolute;

width: 100%;

height: 100%;

backface–visibility: hidden;

–webkit–backface–visibility: hidden;

}

/* Add background to front incase image doesn’t load */

.flip–card–front {

background: #0D1B22;

}

/* Set the image to cover, so if you increase height it won’t skew image. Image height and .flip-card height should be the same. */

.flip–card–front img {

height: 300px;

object–fit: cover;

}

/* Style the back side */

.flip–card–back {

padding: 40px;

background–color: #0D1B22;

display: table;

}

/* Vertically centre align text on back */

.flip–card–back–inner {

display: table–cell;

vertical–align: middle;

max–width: 300px;

}

.flip–card–back h3 {

color: white;

margin–bottom: 10px;

}

/* Color the view project text to look like a link */

.link–styling {

color: #F56640 !important;

}

/* Reverse back of card so is correct orientation after flip */

.flip–card–rotate–left .flip–card–back,

.flip–card–rotate–right .flip–card–back {

transform: rotateY(180deg);

–webkit–transform: rotateY(180deg);

}

.flip–card–rotate–up .flip–card–back,

.flip–card–rotate–down .flip–card–back {

transform: rotateX(180deg);

–webkit–transform: rotateX(180deg);

}

/* Flip animation on mouse hover – rotate right */

.flip–card–rotate–right .flip–card:hover .flip–card–inner {

transform: rotateY(180deg);

–webkit–transform: rotateY(180deg);

}

/* Flip animation on mouse hover – rotate left */

.flip–card–rotate–left .flip–card:hover .flip–card–inner {

transform: rotateY(–180deg);

–webkit–transform: rotateY(–180deg);

}

/* Flip animation on mouse hover – rotate up */

.flip–card–rotate–up .flip–card:hover .flip–card–inner {

transform: rotateX(180deg);

–webkit–transform: rotateX(180deg);

}

/* Flip animation on mouse hover – rotate down */

.flip–card–rotate–down .flip–card:hover .flip–card–inner {

transform: rotateX(–180deg);

–webkit–transform: rotateX(–180deg);

}

/* Responsiveness – turns off the flip animation on mobile and layers the text over the image with a background overlay.*/

@media (max–width: 980px) {

.flip–card–rotate–left .flip–card–back,

.flip–card–rotate–right .flip–card–back{

transform: rotateY(0deg);

–webkit–transform: rotateY(0deg);

background–color: rgba(13,27,34,0.5);

}

.flip–card–rotate–up .flip–card–back,

.flip–card–rotate–down .flip–card–back {

transform: rotateX(0deg);

–webkit–transform: rotateX(0deg);

background–color: rgba(13,27,34,0.5);

}

.flip–card–back p {

color: white;

}

.flip–card–rotate–left .flip–card:hover .flip–card–inner,

.flip–card–rotate–right .flip–card:hover .flip–card–inner{

transform: rotateY(0deg);

–webkit–transform: rotateY(0deg);

}

.flip–card–rotate–up .flip–card:hover .flip–card–inner,

.flip–card–rotate–down .flip–card:hover .flip–card–inner {

transform: rotateX(0deg);

–webkit–transform: rotateX(0deg);

}

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

/* Responsiveness – turns off the flip animation on mobile and layers the text over the image with a background overlay.*/

@media (max–width: 980px) {

.flip–card–rotate–left .flip–card–back,

.flip–card–rotate–right .flip–card–back{

transform: rotateY(0deg);

–webkit–transform: rotateY(0deg);

background–color: rgba(13,27,34,0.5);

}

.flip–card–rotate–up .flip–card–back,

.flip–card–rotate–down .flip–card–back {

transform: rotateX(0deg);

–webkit–transform: rotateX(0deg);

background–color: rgba(13,27,34,0.5);

}

.flip–card–back p {

color: white;

}

.flip–card–rotate–left .flip–card:hover .flip–card–inner,

.flip–card–rotate–right .flip–card:hover .flip–card–inner{

transform: rotateY(0deg);

–webkit–transform: rotateY(0deg);

}

.flip–card–rotate–up .flip–card:hover .flip–card–inner,

.flip–card–rotate–down .flip–card:hover .flip–card–inner {

transform: rotateX(0deg);

–webkit–transform: rotateX(0deg);

}

Source: B3 Multi Media

Website Migration with WPvivid

...

Free SEO Tools

...

Perfect Blog Post Blueprint

...

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.

BLOG: TJ Webs

Website Migration with WPvivid

Free SEO Tools

Perfect Blog Post Blueprint

TJ WEBS

Colorado Springs, CO

(719) 377-0436

tj-webs@outlook.com

Blog Stats

34,492 hits

How to Change Slider Height on Divi Theme

Today I

How To Make Divi Blog Grid Posts The Same Height

I love Divi

Changing the Divi Header Top Header Styles

The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. Here

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.

Modify The Copyright Line and Tag Lines in the Divi Footer

If you’re a website developer modify the

Change the Divi Read More button into outline button

/*Change the read more button into outline button on next line in Divi using this custom CSS in a child theme or your ET theme options panel*/

a.more-link {

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

1. Create a section

2. Add text module and HTML

3. Customise HTML

4. Add in link (optional)

5. Choose which flip direction

6. Add in other boxes

7. Add custom CSS

Save CSS

Mobile Version

Recent Posts