Turn Playing cards are a amusing means for customers to engage along with your site. No longer simplest does it supply a fab turn animation, it additionally permits you to be offering additional info in a single concise location. On this educational, I’m going to turn you methods to flip Divi Modules into turn playing cards with out the usage of a plugin! With this system, it is possible for you to to make use of one Divi module because the entrance of a card and every other Divi module because the again of a card. You’ll even design each and every module (back and front) alternatively you prefer the usage of the divi builder. The capability is achieved thru only a few snippets of CSS (no jquery).
I feel you are going to be shocked at simply how easy and amusing development those playing cards will also be.
Let’s dive in!
Sneak Top
Here’s a sneak top of the design we will be able to be development these days.
What You Want for This Educational
All you are going to want for this Educational is Divi! No plugin wanted. We can even be the usage of the App Developer Format Pack which is FREE and to be had inside the Divi Builder.
The Fundamental Thought Defined
The foundation for this idea in fact got here from this basic example of methods to design turn playing cards. All it took used to be a little bit re-engineering to assign the div categories to Divi rows, columns and modules after which blank up the CSS a bit of.
The Divi format is composed of a typical segment with 4 one-column rows. In each and every row, I added two blurb modules stacked on most sensible of one another (even if any Divi module would paintings as smartly). The highest blurb serves because the entrance of the turn card and the ground blurb serves because the again of the turn card. Via making use of “show:flex” to the segment, the rows are structured horizontally like columns. This permits to the playing cards to be aligned facet by means of facet into 4 columns.
Here’s what the setup looks as if earlier than we upload the customized CSS.
Then I added the customized CSS to web page settings and added the corresponding CSS categories to each and every row, column, and module.
That’s it!
Growing Divi Turn Playing cards The usage of a Premade Format
Including the Premade Format to Your Web page
To get issues rolling, cross forward and create a brand new web page, come up with web page a name, after which click on to make use of the Divi Builder. Choose the choice “Make a selection a Premade Format”. From the Load from Library popup, make a selection the App Developer Format Pack after which click on to make use of the App Developer Touchdown Web page format.
As soon as the format so much to the web page, post your web page after which click on the button “Construct at the Entrance Finish”. Now you’re ready to begin growing the Turn Playing cards.
Putting in place the Segment, Rows, and Modules
Below the primary segment of the format, upload a brand new common segment with a one-column row. Don’t upload any modules but. Open the row settings and replace the next:
Customized Margin: 20px backside
Customized Padding: 0px most sensible, 0px backside
Save settings.
Then replica the row thrice so that you’ve a complete of 4 rows within the segment.
Now open the segment settings and upload the next customized CSS to the Primary Component:
show:flex;
This adjustments the rows to show horizontally which mainly converts our rows into 4 columns even if technically they’re nonetheless Divi rows each and every with one column.
Including the Modules to the Rows
That is the place our premade format turns out to be useful for this educational. We can use the 4 blurb modules within the most sensible segment of the format to jumpstart the design of our turn playing cards. The usage of the precise click on choices or the shortkeys ctrl+c and ctrl+v (home windows) and cmd+c cmd+v (mac), reproduction and paste the premade modules into each and every of the rows we simply created. Be sure that each and every row has replica variations of the similar module.
Now your segment will have to seem like this.
Designing the Entrance and Again Turn Card Modules
The 2 modules stacked in each and every row might be used as the back and front of the turn playing cards. The highest module in each and every row will function the entrance and the ground module will function the again. For the reason that design of the entrance card (most sensible module) is already achieved because of our premade format, all we want to do is modify the design and content material of the again card (backside module).
The usage of Divi multiselect function, make a selection all backside modules in each and every row after which open the part settings to customise all 4 modules on the identical time.
Now we will replace the part settings choices to genre the again model of our turn playing cards. Replace the part settings as follows:
Content material: “This can be a description.”
Background Colour: #00a2fa
Textual content Colour: Mild
Including Customized CSS and CSS Categories
Now it’s time for the customized CSS that may give us the turn card capability. Open the web page settings and upload the next Customized CSS:
@media (min-width:980px){
.flip-box-row {
background-color: clear;
width: 250px;
peak: 250px;
point of view: 1000px;
}
.flip-box-column {
place: relative;
width:100%;
peak: 100%;
transition: remodel 0.8s;
transform-style: preserve-3d;
}
.flip-box-row:hover .flip-box-column {
remodel: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
place: absolute;
width:100%;
peak: 100%;
backface-visibility: hidden;
}
.flip-box-back {
remodel: rotateY(180deg);
}
}
Realize that the above CSS categories are named in some way that are supposed to permit you to perceive what each and every is doing. Additionally it is a useful indicator as to the place we want to upload the ones CSS categories to our Divi components. As an example, the category “flip-box-row” is supposed to genre each and every of the 4 rows; due to this fact, each and every row must have that CSS elegance.
Including CSS Categories to the Divi Parts
The usage of Multiselect, make a selection all 4 of the highest modules (entrance playing cards) in each and every of the rows. Then upload the next CSS elegance:
CSS Elegance: flip-box-front
Then, use multiselect to make a choice all 4 of the ground modules (again playing cards) in each and every of the rows and upload the next CSS Elegance to these modules:
CSS Elegance: flip-box-back
Finally, use multiselect to make a choice all 4 rows and provides them the next CSS Categories:
CSS Elegance: flip-box-row
Column CSS Elegance: flip-box-column
Ultimate Design on Desktop
With all our CSS categories added, our turn playing cards are absolutely purposeful. Take a look at the general design on desktop.
Customizing the Design for Cellular
Within the customized CSS code that we already added to the web page settings, there’s a media question that limits the turn card capability to desktop simplest. Alternatively, we nonetheless want to disguise the entrance variations of our turn playing cards on pill and smartphone in addition to be certain that our rows stack well when adjusting browser widths.
To cover our entrance card blurb modules, use multiselect to make a choice the entire most sensible modules (entrance playing cards) in each and every row (this might be more uncomplicated in wireframe view mode since issues might be transferring round within the entrance finish builder) and replace the next:
Disable on: Telephone and Smartphone
Then open the segment settings and upload another line of CSS to the principle part along with the only added in the past:
flex-wrap:wrap;
This may be certain that the rows will stack on cellular.
Now let’s take a look at the general design on pill and smartphone.
Bonus Possibility: Vertical Turn Playing cards!
If you need your turn playing cards to turn vertically as an alternative of horizontally, you simplest want to alternate a two letters (actually) within the customized CSS. Open the web page settings and find the 2 puts the place “remodel: rotateY(180deg)” is getting used. Then exchange the “Y” with “X”. Should you haven’t guessed already, this adjustments the rotation to rotate at the X axis as an alternative of the Y axis.
Lovely cool stuff! Take a look at the end result.
Ultimate Ideas
You don’t need to hotel to a plugin to create nice having a look Turn Playing cards in Divi. With this educational, you will have a framework to create numerous designs and mixtures of turn card content material. Don’t omit that you’ll be able to make a selection any two modules to function the back and front of your playing cards. So be happy get ingenious!
I am hoping this used to be useful and I look ahead to listening to from you within the feedback under.
Cheers!
The submit How to Create Flip Cards with Any Module in Divi Without a Plugin seemed first on Elegant Themes Blog.
WordPress Web Design