Looking for Advice When Krafter Presets Are Not Available on a Plugin Module
I am adding some Divi Pixel flip box cards to my website. Unfortunately, Krafter presets are not available on this plugin module, and I have become spoiled by having them available everywhere. Is there a way to make Krafter presets to work in a situation such as this?
Hello Robert.
There is a way to create such flip modules yourself. A card, like the one Mak created in a video, with two group modules inside the column of the row. The outer group and the inner group. It would be possible to use presets there. However, the CSS code is quite extensive.
I just recreated it and yes, it works. It took some time to solve the initial problems, but now it is stable. However, since the third-party flip cards already have the full logic implemented in CSS, it is highly possible that presets can be applied but will not deliver the desired results—meaning their settings get ignored. I experienced this during my testing as well, until I solved it.
Regarding the modules you are currently using, it is not the fault of Mak or other preset creators, because they have no influence on the CSS code of third-party modules. A manual adjustment and overriding of CSS code is always necessary here—specifically the CSS code of the third-party providers.
Regards, Frank
This is the CSS code that is required. However, a sort of switch needs to be added as a class so that either the front or the back can be styled as desired without the card flipping on hover.
But do not USE this CSS-Code !!! Its only for demo !!!
Currently, I am working on a solution to design a card and implement the CSS code in a way that allows the card to be created as a module, for using it in an flexbox with autogrid.
.fsc-flip-stage {
--fsc-flip-height: 480px;
--fsc-flip-duration: 0.7s;
position: relative !important;
height: var(--fsc-flip-height);
min-height: var(--fsc-flip-height);
perspective: 1200px;
overflow: visible;
isolation: isolate;
}
.fsc-flip-stage > .fsc-flip-face {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0 !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform var(--fsc-flip-duration) ease;
will-change: transform;
}
.fsc-flip-top-down > .fsc-flip-front {
transform: rotateX(0deg);
}
.fsc-flip-top-down > .fsc-flip-back {
transform: rotateX(-180deg);
}
.fsc-flip-top-down:hover > .fsc-flip-front,
.fsc-flip-top-down:focus-within > .fsc-flip-front {
transform: rotateX(180deg);
}
.fsc-flip-top-down:hover > .fsc-flip-back,
.fsc-flip-top-down:focus-within > .fsc-flip-back {
z-index: 3;
transform: rotateX(0deg);
}
.fsc-flip-bottom-up > .fsc-flip-front {
transform: rotateX(0deg);
}
.fsc-flip-bottom-up > .fsc-flip-back {
transform: rotateX(180deg);
}
.fsc-flip-bottom-up:hover > .fsc-flip-front,
.fsc-flip-bottom-up:focus-within > .fsc-flip-front {
transform: rotateX(-180deg);
}
.fsc-flip-bottom-up:hover > .fsc-flip-back,
.fsc-flip-bottom-up:focus-within > .fsc-flip-back {
z-index: 3;
transform: rotateX(0deg);
}
.fsc-flip-right-left > .fsc-flip-front {
transform: rotateY(0deg);
}
.fsc-flip-right-left > .fsc-flip-back {
transform: rotateY(180deg);
}
.fsc-flip-right-left:hover > .fsc-flip-front,
.fsc-flip-right-left:focus-within > .fsc-flip-front {
transform: rotateY(-180deg);
}
.fsc-flip-right-left:hover > .fsc-flip-back,
.fsc-flip-right-left:focus-within > .fsc-flip-back {
z-index: 3;
transform: rotateY(0deg);
}
.fsc-flip-left-right > .fsc-flip-front {
transform: rotateY(0deg);
}
.fsc-flip-left-right > .fsc-flip-back {
transform: rotateY(-180deg);
}
.fsc-flip-left-right:hover > .fsc-flip-front,
.fsc-flip-left-right:focus-within > .fsc-flip-front {
transform: rotateY(180deg);
}
.fsc-flip-left-right:hover > .fsc-flip-back,
.fsc-flip-left-right:focus-within > .fsc-flip-back {
z-index: 3;
transform: rotateY(0deg);
}
/ Rückseite bearbeiten: oben nach unten /
.fsc-flip-top-down.fsc-flip-edit-back > .fsc-flip-front {
transform: rotateX(180deg) !important;
}
.fsc-flip-top-down.fsc-flip-edit-back > .fsc-flip-back {
z-index: 5;
transform: rotateX(0deg) !important;
}
/ Rückseite bearbeiten: unten nach oben /
.fsc-flip-bottom-up.fsc-flip-edit-back > .fsc-flip-front {
transform: rotateX(-180deg) !important;
}
.fsc-flip-bottom-up.fsc-flip-edit-back > .fsc-flip-back {
z-index: 5;
transform: rotateX(0deg) !important;
}
/ Rückseite bearbeiten: rechts nach links /
.fsc-flip-right-left.fsc-flip-edit-back > .fsc-flip-front {
transform: rotateY(-180deg) !important;
}
.fsc-flip-right-left.fsc-flip-edit-back > .fsc-flip-back {
z-index: 5;
transform: rotateY(0deg) !important;
}
.fsc-flip-stage > .fsc-flip-face {
overflow: hidden !important;
background-clip: border-box;
Hi, Frank,
As always, thank you for the very thoughtful response. I do realize that KrafterPRO was never intended to work with third-party tools. My question was intended to probe whether it was possible primarily because I want to retain the responsiveness and consistency that Mak has built into KrafterPRO. As I said, he has spoiled me. Perhaps it is more accurate to say he has shown me how and why to use a design system to improve the way I use Divi.
In this case, the Divi Pixel tool seems to be responsive to the point that it will be acceptable, but the design will be done manually as in the pre-Krafter days. More importantly, you answered a question that I suspect others in the community also harbored. There may be times when specific third-party tools fill a void in the Divi solution stack, but we should not expect that KrafterPRO can be used in conjunction with them. Elegant Themes has added many new features, some of which directly compete with the third-party tools that were created to fill the void in Divi 4. As is often the case, these new tools may not be as full featured as those offered by the third-party developers, but for some users that maybe all they need. Each of us must determine what works best for us. My preference will be to use Divi modules to the greatest extent possible so I can apply KrafterPro principles consistently, and to use third-party tools only when they provide something I cannot create efficiently or effectively in the Divi system.
Hello Robert.
You are absolutely right. When you already use helpful tools that existed before Divi 5, you are very familiar with them and will remember how to adapt them even after six months. Sometimes it helps to experiment and see if various settings can be adjusted using your own or existing variables, or if you need to configure them directly in the properties using fixed values.
Divi 5 offers so many different paths and possibilities. Even though I like tweaking CSS code and others prefer working visually without much CSS, everyone has the opportunity to apply their own style—whether with or without KrafterPRO. Wherever possible, I love using KrafterPRO. When I need something specific, I also always try to solve as much of it as possible with KrafterPRO first, and then handle my specific needs with additional code. If I like the result, I turn it into either modules or my own presets.
With my reply, I wanted to support your article, which is why I took a closer look at the Divi Pixel tools. There are some great features there that can be implemented quickly for various projects without having to reinvent the wheel.
Best regards,
Frank