New Blog Content
Just putting something here
Test page
Mobile Header 1
Light theme
[ds_layout_sc id="243931"]
How to Keep Divi Columns in Mobile View Using CSS
[dsm_gradient_text gradient_text=”Download Main CSS code and paste into your Divi Theme Custom CSS” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
[caldera_form id="CF5e6ac396af22d"]
Keep Divi Column ratio and build aesthetically beautiful mobile layouts for the Divi Builder. View demos
[dsm_gradient_text gradient_text=”Regular Section” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
After activating the CSS plugin, or copying and pasting the css code in the css custom area, all you have to do next is select the row that you want and type the related CSS class name in the class field for the row container.
1. Select the Regular section
2. Select your desired row
3. Take note of the related class name from the regular section chart for the row that you chose.
4. Open up the Row container settings and type the class name in the CSS Class field.
5. You’re done.
[dsm_gradient_text gradient_text=”Specialty Section” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
As before, after activating the plugin, all you have to do next is enter the correlating class names. However there are two classes we must enter. One for the section column layout and the other for the row container embedded in the specialty section column layout.
1. Select the Specialty Section
2. Select the desired section layout
3. Take note of the related class name from the the column layout that you choose. See specialty section chart below.
4. Open up the Section settings and type the class name in the CSS Class field.
5. This is extra step for the specialty section. After choosing your desired section layout and it’s class name, select the respective row layout and it’s class name from the as seen in the regular section chart. Open the settings for the row container and add the CSS class name to the CSS field. Note that most row containers for the specialty section has up to 3 columns with an exception with 4.
6. All done. Thanks for giving my code a try. Feel free to customize it however you want. Do what works best for you. If you have any questions feel free to contact me through any of my social media handles. All the best to you.
[dsm_gradient_text gradient_text=”Download Colour Layout” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
[dsm_button button_one_text=”Specialty” button_one_url=”https://kerjemtec.com/wp-content/uploads/2020/03/Specialty-Section-Colour-Layout.zip” _builder_version=”4.3.2″ custom_button_one=”on” button_one_text_color=”#ffffff” button_one_bg_color=”#ff9233″ background_layout=”dark”][/dsm_button]
Divi Default Animation Keyframes
CSS animations allow you to traverse from one set of CSS rules to another over a predefined period of time. Transitions between styles based on hover or click may be familiar to you. This is a similar thing except that it does not require any user interaction to initiate. the following is the style sheet for the existing ‘keyframes’ that have been added to Divi.
@-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(10%)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeBottom {
0% {
opacity: 0;
-moz-transform: translateY(10%)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
@-o-keyframes fadeBottom {
0% {
opacity: 0;
-o-transform: translateY(10%)
}
100% {
opacity: 1;
-o-transform: translateY(0)
}
}
@keyframes fadeBottom {
0% {
opacity: 0;
transform: translateY(10%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@-webkit-keyframes fadeLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeLeft {
0% {
opacity: 0;
-moz-transform: translateX(-10%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeLeft {
0% {
opacity: 0;
-o-transform: translateX(-10%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeLeft {
0% {
opacity: 0;
transform: translateX(-10%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-100%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-100%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes fadeRight {
0% {
opacity: 0;
-webkit-transform: translateX(10%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeRight {
0% {
opacity: 0;
-moz-transform: translateX(10%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeRight {
0% {
opacity: 0;
-o-transform: translateX(10%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeRight {
0% {
opacity: 0;
transform: translateX(10%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(100%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(100%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(100%)
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(100%)
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0)
}
100% {
opacity: 0;
-o-transform: translateX(100%)
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0)
}
100% {
opacity: 0;
transform: translateX(100%)
}
}
@-webkit-keyframes fadeInTop {
0% {
opacity: 0;
-webkit-transform: translatey(-60%)
}
100% {
opacity: 1;
-webkit-transform: translatey(0)
}
}
@-moz-keyframes fadeInTop {
0% {
opacity: 0;
-moz-transform: translatey(-60%)
}
100% {
opacity: 1;
-moz-transform: translatey(0)
}
}
@-o-keyframes fadeInTop {
0% {
opacity: 0;
-o-transform: translatey(-60%)
}
100% {
opacity: 1;
-o-transform: translatey(0)
}
}
@keyframes fadeInTop {
0% {
opacity: 0;
transform: translatey(-60%)
}
100% {
opacity: 1;
transform: translatey(0)
}
}
@-webkit-keyframes fadeOutTop {
0% {
opacity: 1;
-webkit-transform: translatey(0)
}
100% {
opacity: 0;
-webkit-transform: translatey(-60%)
}
}
@-moz-keyframes fadeOutTop {
0% {
opacity: 1;
-moz-transform: translatey(0)
}
100% {
opacity: 0;
-moz-transform: translatey(-60%)
}
}
@-o-keyframes fadeOutTop {
0% {
opacity: 1;
-o-transform: translatey(0)
}
100% {
opacity: 0;
-o-transform: translatey(-60%)
}
}
@keyframes fadeOutTop {
0% {
opacity: 1;
transform: translatey(0)
}
100% {
opacity: 0;
transform: translatey(-60%)
}
}
@-webkit-keyframes fadeInBottom {
0% {
opacity: 0;
-webkit-transform: translatey(60%)
}
100% {
opacity: 1;
-webkit-transform: translatey(0)
}
}
@-moz-keyframes fadeInBottom {
0% {
opacity: 0;
-moz-transform: translatey(60%)
}
100% {
opacity: 1;
-moz-transform: translatey(0)
}
}
@-o-keyframes fadeInBottom {
0% {
opacity: 0;
-o-transform: translatey(60%)
}
100% {
opacity: 1;
-o-transform: translatey(0)
}
}
@keyframes fadeInBottom {
0% {
opacity: 0;
transform: translatey(60%)
}
100% {
opacity: 1;
transform: translatey(0)
}
}
@-webkit-keyframes fadeOutBottom {
0% {
opacity: 1;
-webkit-transform: translatey(0)
}
100% {
opacity: 0;
-webkit-transform: translatey(60%)
}
}
@-moz-keyframes fadeOutBottom {
0% {
opacity: 1;
-moz-transform: translatey(0)
}
100% {
opacity: 0;
-moz-transform: translatey(60%)
}
}
@-o-keyframes fadeOutBottom {
0% {
opacity: 1;
-o-transform: translatey(0)
}
100% {
opacity: 0;
-o-transform: translatey(60%)
}
}
@keyframes fadeOutBottom {
0% {
opacity: 1;
transform: translatey(0)
}
100% {
opacity: 0;
transform: translatey(60%)
}
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(-70%)
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(-70%)
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0)
}
100% {
opacity: 0;
-o-transform: translateX(-70%)
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0)
}
100% {
opacity: 0;
transform: translateX(-70%)
}
}
@-webkit-keyframes fadeTop {
0% {
opacity: 0;
-webkit-transform: translateY(-10%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeTop {
0% {
opacity: 0;
-moz-transform: translateY(-10%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeTop {
0% {
opacity: 0;
-o-transform: translateY(-10%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeTop {
0% {
opacity: 0;
transform: translateY(-10%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(100%)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(100%)
}
100% {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@-webkit-keyframes Grow {
0% {
opacity: 0;
-webkit-transform: scale(1,.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1,1)
}
}
@-moz-keyframes Grow {
0% {
opacity: 0;
-moz-transform: scale(1,.5)
}
100% {
opacity: 1;
-moz-transform: scale(1,1)
}
}
@-o-keyframes Grow {
0% {
opacity: 0;
-o-transform: scale(1,.5)
}
100% {
opacity: 1;
-o-transform: scale(1,1)
}
}
@keyframes Grow {
0% {
opacity: 0;
transform: scale(1,.5)
}
100% {
opacity: 1;
transform: scale(1,1)
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes slideWidth {
0% {
width: 0
}
}
@-moz-keyframes slideWidth {
0% {
width: 0
}
}
@-o-keyframes slideWidth {
0% {
width: 0
}
}
@keyframes slideWidth {
0% {
width: 0
}
}
@-webkit-keyframes gridFadeIn {
0% {
opacity: 0;
-webkit-transform: translatey(-5%)
}
100% {
opacity: 1;
-webkit-transform: translatey(0)
}
}
@-moz-keyframes gridFadeIn {
0% {
opacity: 0;
-moz-transform: translatey(-5%)
}
100% {
opacity: 1;
-moz-transform: translatey(0)
}
}
@-o-keyframes gridFadeIn {
0% {
opacity: 0;
-o-transform: translatey(-5%)
}
100% {
opacity: 1;
-o-transform: translatey(0)
}
}
@keyframes gridFadeIn {
0% {
opacity: 0;
transform: translatey(-5%)
}
100% {
opacity: 1;
transform: translatey(0)
}
}
/*!* Animate.css - http://daneden.me/animate* Licensed under the MIT license - http://opensource.org/licenses/MIT* Copyright (c) 2015 Daniel Eden*/
@-webkit-keyframes flipInX {
0% {
opacity: 0;
-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
transform: perspective(400px) rotate3d(1,0,0,90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
transform: perspective(400px) rotate3d(1,0,0,-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
opacity: 1;
-webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
transform: perspective(400px) rotate3d(1,0,0,10deg)
}
80% {
-webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
transform: perspective(400px) rotate3d(1,0,0,-5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0% {
opacity: 0;
-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
transform: perspective(400px) rotate3d(1,0,0,90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
transform: perspective(400px) rotate3d(1,0,0,-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
opacity: 1;
-webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
transform: perspective(400px) rotate3d(1,0,0,10deg)
}
80% {
-webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
transform: perspective(400px) rotate3d(1,0,0,-5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@-webkit-keyframes flipInY {
0% {
opacity: 0;
-webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
transform: perspective(400px) rotate3d(0,1,0,90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
transform: perspective(400px) rotate3d(0,1,0,-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
opacity: 1;
-webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
transform: perspective(400px) rotate3d(0,1,0,10deg)
}
80% {
-webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
transform: perspective(400px) rotate3d(0,1,0,-5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInY {
0% {
opacity: 0;
-webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
transform: perspective(400px) rotate3d(0,1,0,90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
transform: perspective(400px) rotate3d(0,1,0,-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
opacity: 1;
-webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
transform: perspective(400px) rotate3d(0,1,0,10deg)
}
80% {
-webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
transform: perspective(400px) rotate3d(0,1,0,-5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
You’ll notice that Divi is providing the relevant browser prefixing to ensure that the animations work fluidly across all major browsers. You should be doing this too. You can learn more about checking when browser prefixes are needed by checking out the section on Caniuse.com in the resources section. Here is another list of properties related to CSS animations.
@keyframes sample {
0% {
/* start something */
}
0% {
/* end something */
}
}
.et_pb_section {
/* Should be the match the animation you're referencing like @keyframes sample */
animation-name: sample;
/* How long should it take to cycle through the animation? */
animation-duration: 5s;
/* delay the start of the animation */
animation-delay: 2s;
/* How many times should an animation run? */
animation-iteration-count: 5;
/* Which direction should animation run, if more than one iteration you can alternate directions */
animation-direction: normal | reverse | alternate | alternate-reverse;
/* how fast or slow the animation runs at various points. Play around with these */
animation-timing-function: linear | ease | ease-in| ease-out |ease-in-out;
/* When the animation finishes, should it display as its start point, end point or both? */
animation-fill-mode: none| forwards | backwards | both;
}