Sigmund Big Pop Person update: Now it can auto slide!

Big Pop Person module

From now, you can make this module slide automatically, and you can do it easily! This is optionally, so if you want to keep this module slide on user click only, this tutorial is not for you, and you can leave the module settings as they are.

How to do it

Click the module settings:

Select Advanced tab.

For the CSS class, make sure to add the class: autoSlide.

Inside the ID field, you can set the transition speed. Default is 5000ms (5sec).

That’s all!

How to Style the Divi Theme Call To Action Module

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Call To Action Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck, you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create a good looking Divi Theme CTA module. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating section structure and adding CTA module
• Customising Section, Row and CTA module

Creating section structure

Add a new section and click Insert Column(s). Choose the first (blank) option.
Then click Insert Module(s) and choose Call To Action. Leave Module options as it is for now, as we are going to get back to that later.
Click Save & Exit.

Your section should now look like this:

Section Structure

Section settings

Let’s first edit some section settings. Click section settings icon:

section settings

Design Tab

Scroll down to Spacing section and add the padding values as follows:
Top: 18.5vh, Bottom: 30vh. Leave Right and Left fields blank.

Advanced Tab

Assign this CSS class: day6-cta day6-cta2

Click Save & Exit.

Row settings

Now let’s edit Row settings. Click the settings icon:

row settings

Content Tab

Add a background image to this row. This is the image I am going to use in this example: Background Image

Set Background Image Repeat option to: Repeat.

Design Tab

• Set Row Alignment option to Center.
• Make This Row Fullwidth – Set to YES
• Use Custom Gutter Width – Set to YES and set Gutter Width to 1
• In Spacing section, make Right and Left Custom Padding: 0px. Leave Top and Bottom blank

Click Save & Exit.

Add CSS

Copy the CSS code below and see the instructions where and how to paste it.

/*** === Free Divi Call to Action Module - Day Six of Divi Den’s Twelve Days of Freebies Xmas Cheer === ***/
/*** https://seku.re/xmas-day6 - Download The Latest Freebie Version Here ***/
/*** https://seku.re/divi-den  - Designed, Built & Created By Divi Den ***/
/*** https://seku.re/get-divi - Get The Divi Theme - Buy, Renew Or Upgrade ***/
/*** https://seku.re/showcase - Submit Your Site and WIN! - Free Entry ***/
/*** https://seku.re/kb - Go To Divi Den Knowlege Base ***/
/*** https://seku.re/support - Get Support Here ***/

/*** = Try Our Most Used Services, Risk Free - You Will LOVE It! = ***/ 
/*** https://seku.re/unlimited-backup - Get Unlimited Automatic Computer Backups (incl. connected drives) for just $5 per month - 14day trial ***/
/*** https://seku.re/css-primer - Master CSS with Eddie Irvin or Learn anything with 1000s of video courses. 2 Months Free then just $10p/m. Video on demand Desktop, Mobile & Tablet. No commitments. Cancel anytime. ***/
/*** https://seku.re/logojoy - Artificial Intelligence (AI) Logo Designer - Free to make - Pay only when you want it.  ***/


#page-container .day6-cta3 .et_pb_column_1_4:last-child {
    margin-right: 0 !important;
}

#page-container .day6-cta3 .et_pb_column_1_4 {
    width: 18% !important;
    margin-right: 2.4% !important;
}

#page-container .day6-cta3 .et_pb_column_1_2 {
    width: 60% !important;
    margin-right: 1.6% !important;
}

@media only screen and (min-width: 1930px) {
    .day6-cta3 .et_pb_row {
        padding: 120px 25vw !important;
    }

    .day6-cta1 .et_pb_row {
        padding: 80px 0 !important;
    }

    .day6-cta2 .et_pb_promo_description h2,
    .day6-cta2 .et_pb_promo_description {
        padding-bottom: 50px !important;
    }

    .day6-cta{
        background-size: cover !important;
        background-position: top center !important;
    }
}

@media only screen and (max-width: 1600px) {
    .day6-cta3 .et_pb_row {
        padding: 80px 10vw !important;
    }
}

@media only screen and (max-width: 1390px) {
    .day6-cta3 .et_pb_row {
        padding: 80px 2vw !important;
    }
}

@media only screen and (max-width: 980px) {
    .day6-cta3 .et_pb_row {
        display: block;
        text-align: center;
        padding: 60px 20px !important;
    }

    #page-container .day6-cta3 .et_pb_column_1_2 .et_pb_text {
        text-align: center !important;
        margin-bottom: 30px;
    }

    #page-container .day6-cta3 .et_pb_column_1_2 {
        width: 100% !important;
        margin-right: 0 !important;
    }

    #page-container .day6-cta3 .et_pb_column_1_4 {
        display: inline-block;
        float: none;
        width: 48% !important;
        margin-right: 2.4% !important;
        max-width: 190px;
    }

}

@media only screen and (max-width: 480px) {
    .day6-cta3 .et_pb_row {
        padding: 40px 20px !important;
    }

    #page-container .day6-cta .et_pb_promo .et_pb_button.et_pb_promo_button {
        padding: 10px 15px !important;
    }

    #page-container .day6-cta3 .et_pb_column_1_4 {
        width: 100% !important;
        margin-right: 0 !important;

    }

    #page-container .day6-cta3 .et_pb_column_1_4:last-child {
        margin-top: 15px;
    }

    #page-container .day6-cta2 .et_pb_row,
    #page-container .day6-cta3 .et_pb_row {
        width: 100% !important;
    }

}

Go to Page settings:

Paste the CSS inside Custom CSS box:

Click Save & Exit.

CTA settings

CTA settings

Content Tab

• Add a Title
• Add Button text
• Add some content in Content section
• Make sure to Include the Button URL
• Use Background Color – Set to NO

Design Tab

• Title Text  should be: h2, Poppins, Medium, text alignment – centered. Font size should be 42px for the  Desktop, 36px for the Tablet, and 28px for the Smarthpone. Make Title text colour white.
• Body Text: Poppins, Medium, center aligned, 18px, white
• Use Custom Styles for Button – Set to YES.
• Set button text size to 16px. Button text colour should be white. Button background colour: #06d048. Border width: 0px, border colour: white, border radius: 2px, Button font should be: Poppins, Medium. Button hover text colour: #06d048, Button hover background colour: #fff, Button hover border colour: #000. Button alignment: center.
  Show Button Icon – Set to NO
• In Spacing section, make Right and Left Custom Padding: 20px, leave Top and Bottom padding blank

Advanced Tab

– Scroll to Promo Description box and paste this CSS

padding-bottom: 3.5vw;

– In Promo Button box, paste this:

padding: 0.8vw 4.5vw !important;

– In Promo Title:

padding-bottom: 1.9vw;

Click Save & Exit.

Having problems with the Divi Theme Builder? Check this article for help

T&C for Beta Testers

Divi Den Beta Testing Programme Terms and Conditions

The terms and conditions below are of application to all those who sign up as beta testers of our Plug-ins. If you are going to participate in our beta testing programme, please read the terms below carefully. If the meaning or intention of a clause in the contract is unclear, please get in touch with us for clarification. By participating in our programme you are accepting the terms below.

These terms are not applicable to any final, non-beta versions of any mobile application or plug-in product released by Divi Den.

BETA TESTING PROGRAMME TERMS AND CONDITIONS

THIS AGREEMENT is made by and between Yeah Can Design Studio who owns the online store at Divi Den (“we”, “Divi Den” or the “Company”), and You (“you”, “Licensee” or the “User”).

GENERAL TERMS AND CONDITIONS

Divi Den has developed a plug-in, including modifications, enhancements, improvements, updates, additions, derivative works, documentation and related material (“plug-in”).

Divi Den desires that the Plug-in be tested prior to general release.

Licensee wishes to serve as a Beta tester for such Plug-in;

The parties hereto agree as follows:

Divi Den reserves the right to modify or terminate the Plug-in or your access to the Plug-in or the participation in our beta testers programme for any reason, without notice, at any time, and without liability to you.

Divi Den grants to the Licensee a non-exclusive, non-transferable license to use the Plug-in on a single computer at Licensee’s business location solely for Beta testing and Beta use from effective date of agreement to 45 days after official release date of the products(s) or other date as advised by Divi Den from time to time, subject to the terms and conditions below.

In consideration for receiving a copy of the Plug-in for testing, Licensee agrees to serve as a “Beta Tester” for the Plug-in and will notify Divi Den of all problems and ideas for enhancements which come to Licensee’s attention during the period of this Agreement, and hereby assigns to Divi Den all right, title and interest to such enhancements and all property rights therein including without limitation all patent, copyright, trade secret, mask work, trademark, moral right or other intellectual property rights.

Licensee agrees that the Plug-in is the sole property of Divi Den and includes valuable trade secrets of Divi Den. Licensee agrees to treat the Plug-in as confidential and will not without the express written authorization of Divi Den:

Demonstrate, copy, sell or market the Plug-in to any third party; or

Publish or otherwise disclose information relating to performance or quality of the Plug-in to any third party; or

Modify, reuse, disassemble, decompile, reverse engineer or otherwise translate the Plug-in or any portion thereof.

The Plug-in is prerelease code and is not at the level of performance or compatibility of a final, generally available product offering. The Plug-in may not operate correctly and may be substantially modified prior to first commercial shipment, or withdrawn. The Plug-in is provided “AS IS” without warranty of any kind. The entire risk arising out of the use or performance of the Plug-in remains with Licensee. In no event shall Divi Den be liable for any damage whatsoever arising out of the use of or inability to use the Plug-in, even if Divi Den has been advised of the possibility of such damages.

The Licensee upon completion of the Beta test agrees to provide material, statistics, or information that is not deemed confidential to Licensee for use in press releases, customer testimonials, and as a reference in marketing and sales initiatives by Divi Den. Licensee will provide a quote to Divi Den that may be used in a press release.

This License Agreement shall be governed, construed and enforced in accordance with the laws of Germany. Any notice required by this Agreement shall be given by prepaid, first class, certified mail, return receipt requested to above address or such other address as may be given from time to time under the terms of this notice provision.

This Agreement constitutes the entire and only agreement between the parties for the Plug-in and all other prior negotiations, representations, agreements, and understandings are superseded hereby. No agreements altering or supplementing the terms hereof may be made except by means of a written document signed by the duly authorized representatives of the parties.

Licensee shall comply with all applicable federal, state and local laws, regulations, and ordinances in connection with its activities pursuant to this Agreement.

Failure of Divi Den to enforce a right under this Agreement shall not act as a waiver of that right or the ability to later assert that right relative to the particular situation involved.

If any provision of this Agreement shall be found by a court to be void, invalid or unenforceable, the same shall be reformed to comply with applicable law or stricken if not so conformable, so as not to affect the validity or enforceability of this Agreement

The information you send us will be deemed confidential, except as specified in clause 5. Divi Den will make reasonable efforts to keep such information private, and will not sell it or disclose it to third parties, except with service providers as described in the privacy policy of our website, or when required to do so by law.

Divi Den reserves the right to update these terms and conditions without prior notice. You agree that we may notify you of the Updated Terms by posting them on our website, and that your use of the Plug-in after the effective date of the Updated Terms constitutes your agreement to the Updated Terms. Therefore, you should review these Terms of Use and any Updated Terms before using the Plug-in. The Updated Terms will be effective as of the time of posting, or such later date as may be specified in the Updated Terms, and will apply to your use of the Plug-in from that point forward. These Terms of Use will govern any disputes arising before the effective date of the Updated Terms.

Divi theme Contact form bug: Why it happens and how to fix

Contact form

For Divi Theme and Divi Builder users. This free tutorial on How to Fix Divi Theme Contact Form Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

If you have been using Divi theme Contact Form Module frequently, most probably there was a moment when you encountered the issue where the form style gets crazy and you don’t know why. Solution is simple, and keep reading this short tutorial to understand why does that happens and how to fix it.

Before we begin

This is a Divi theme bug and not the bug on our side, otherwise we would fix it for good and wouldn’t create this tutorial. So we have to wait for the Divi dev team to fix it in some of the next theme updates. Until that happen, use this tutorial to learn about this bug and see how you can get it fixed.

Why does this happen

You can notice this bug after editing the form fields. Usually, you would like to change the fields labels and just when you save the module, contact form style messes up completely.
Reason for this is that when you edit a form field, Divi theme automatically makes the field fullwidth. That spreads the field across the form and pushes down the other fields.

How to fix it

What you can do is, when you go to field settings, click Design tab:

Design tab

First option says “Make Fullwidth”. This is where the bug happens. By default, this is supposed to be set to NO, but whenever you edit the field, it automatically sets to YES.
To fix it, simply set this to NO and save the module.

That’s all!

Next view this free Divi Layout for a marketplace here.

How to Style the Divi Theme Number Counter Module

Number counter

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Number Counter Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create good looking Divi Theme Number Counter module. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating section structure and adding Number Counter module
• Customising Section, Row and Number Counter Module

Section structure

– Create a new section and add a 1/4 + 1/4 + 1/4 + 1/4 row.
– In each column add a Number Counter module. Leave modules settings as it is for now, as we will cover that later.

Your section should now look like this:

Number Counter modules section

Section settings

Let’s first edit some section settings. Click the section settings icon:

section settings

– Add a background to the section. You can add the background image used in our demo page: LINK. However, you can add your own image if you prefer, or you can use a gradient or a solid colour. You can even keep it as it is and your section will not have a background (it will use website background instead).
– If you are using image from the demo, also set the Background Image size to Fit, Bottom Center.

Select Design tab.
– In Spacing section, add 20vh to Top, and 10vh to Bottom Custom Padding. Leave margins blank.

Select Advanced tab.
– Assign this section a CSS class name: day4-nc day4-nc3

– Save & Exit

Row settings

Now, let’s open Row settings:

row settings

In Content tab:
– Make background colour of each column #9ccfef

In Desgin tab:
– Use Custom width – Set to Yes. Make the custom width 1170px
– Use Custom Guter width – Set to Yes. Set Gutter width to 2
– In Spacing section, add 30vh to Bottom Custom Padding

In Advanced tab:
– Scroll to Column1 Main Element and add this CSS there:

border-radius: 50% !important;
box-shadow: 0px 4px 47px 0px rgba(160,190,212,0.22);

Add same CSS code for “Column2 Main Element”, “Column3 Main Element” and “Column4 Main Element:”

– Click Save & Exit

Add CSS

Before moving to modules settings, let’s add CSS to this page.

Click page settings icon:

Inside Custom CSS box, paste the following CSS code:

/*Numers 3*/

#page-container .day4-nc3 .et_pb_column:after {
    content: "" !important;
    display: block !important;
    width: 100%;
    padding-top: 100%;
}

@media only screen and (min-width: 1930px) {
    .day4-nc{
        background-size: cover !important;
        background-position: top center !important;
    }
    .day4-nc1 .et_pb_column .et_pb_number_counter {
        padding: 30px !important;
    }

    .day4-nc2 .et_pb_column {
        padding: 60px 20px !important;
    }
}

@media only screen and (max-width: 1390px) {
    .day4-nc .et_pb_row {
        width: 90% !important;
    }

    .day4-nc1 .et_pb_number_counter h3 {
        padding-top: 6px !important;
        padding-left: 3% !important;
        text-transform: capitalize !important;
        min-width: 90px;
    }

    .day4-nc .et_pb_number_counter .percent p {
        font-size: 52px !important;
    }
}

@media only screen and (max-width: 980px) {

    .day4-nc .et_pb_column_1_4:after {
        display: none !important;
    }

    .day4-nc1 .et_pb_number_counter {
        padding: 30px !important;
    }

    .day4-nc .et_pb_number_counter {
        display: block !important;
    }

    .day4-nc .et_pb_number_counter h3 {
        text-align: center !important;
        padding-left: 0 !important;
        display: block !important;
    }

    .day4-nc .et_pb_number_counter .percent {
        height: auto;
        display: block !important;
        text-align: center !important;
    }

    .day4-nc .et_pb_number_counter .percent p {
        text-align: center !important;
    }

    #page-container .day4-nc2 .et_pb_column:last-child {
        margin-bottom: 0 !important;
    }

    #page-container .day4-nc2 .et_pb_column {
        max-width: 500px;
        margin: 0 auto 30px !important;
        float: none;

    }

}

@media only screen and (max-width: 767px) {
    .day4-nc1 .et_pb_number_counter {
        padding: 30px 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    #page-container #main-content .day4-nc3 .et_pb_column_1_4 {
        max-width: 300px;
        margin: 0 auto 30px !important;
    }

}

Number Counter modules settings

Content tab:

– Add the Title
– Add the Number
– Optionally enable or disable Percent Sign. For this example, I’ll keep it off.

Design tab:
– Set Title text to Poppins, Medium, 19px, center aligned, white
– Set Number Text to Poppins, Semi Bold, 72px, center aligned, white

Advanced tab:
– Scroll to Main Element and paste this CSS:
position: absolute;
width: 100%;
top: 50%;
transform: translate(0,-50%);
– In Number Counter Title box, paste this CSS:
margin-top: -10px;
– Click Save & Exit

Cloning modules

Now that you have edited module settings, so you don’t have to do the same for other three, you can just duplicate the one you are done with, by clicking “Clone module” option:

Clone module

Use drag&drop to move duplicated modules in the right place.

That’s all!

How to Style the Divi Theme Blog Module

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Blog Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create good looking Divi Theme Blog module. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating section structure and adding Blog module
• Customising Blog Module

Before we begin

Make sure to have at least two articles created with titles, content and featured images added.

Creating section structure

Add a new section and click Insert Column(s). Choose the first (blank) option.
Then click Insert Module(s) and choose Blog.
For now leave the Blog module settings as it is, we are going to come back to that in a moment.

You section should now look like this:

Blog section

Section settings

Let’s first edit some section settings. Click section settings icon:

section settings

– First thing you can do is to update the section background. Use any image, gradient or solid colour you would like. Or, keep the background as it is (none/transparent).

If you decide to use this background image from example, also make the background image size Fit and position Top Center.

– Now select Design tab.
In spacing section, add 10vh value to Bottom Custom Padding.

– Select Advanced tab.
Assign this section a CSS class: day3-blog day3-blog1

– Click Save & Exit.

Row settings

Let’s also change a few Row settings. In your Divi page builder, click Row settings icon:

row settings

Select Design tab.

– Set Use Custom Width to Yes. Unit should be PX and Custom Width 1170px
– Set Equalize Column Height to Yes
– In Spacing section, add 3.2% Custom padding to Top, and 0px to Bottom padding.
– Click Save & Exit

Add CSS

Copy the CSS code below and see the instructions where and how to paste it.

.day3-blog article {
    border: none !important;
    padding: 40px 34px 45px !important;
    position: relative !important;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0px 4px 47px 0px rgba(160, 190, 212, 0.22);
}

.day3-blog .et_pb_image_container a {
    height: 100% !important;
    margin-bottom: 0 !important;
}

.day3-blog .et_pb_image_container a img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1000;
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
}

#page-container .day3-blog img.avatar {
   display: none !important;
}

.day3-blog .column.size-1of3 {
    border: 1px solid transparent;
}

/*Hovers*/

.day3-blog article:after,
.day3-blog article .et_pb_image_container a img,
.day3-blog article {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.day3-blog article:hover:after {
    opacity: 1;
    transform: translateY(30px);
    -webkit-animation: shrink2 0.4s infinite; /* Safari 4.0 - 8.0 */
    animation: shrink2 0.4s infinite;
    animation-iteration-count: 1;
}

.day3-blog article:after {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    transition-duration: 0.4s;
    transition-property: transform opacity;
    visibility: visible;
    margin: auto;
}

.day3-blog article:hover {
    transform: translateY(-20px);

}

.day3-blog2 article .author.vcard a{
    color: #06d048 !important;
}
.day3-blog article:hover .author.vcard a,
.day3-blog article:hover .post-content,
.day3-blog article:hover .post-meta .categories,
.day3-blog article:hover .post-meta .published,
.day3-blog article:hover h2.entry-title {
    -webkit-animation: fadeIn .3s infinite; /* Safari 4.0 - 8.0 */
    animation: fadeIn .3s infinite;
    animation-iteration-count: 1;
}

@keyframes shrink2 {

    from, 20%, to {
        width: 15%;
    }

    30% {
        width: 25%;
    }

    40% {
        width: 35%;
    }

    50% {
        width: 45%;
    }

    60% {
        width: 55%;
    }

    70% {
        width: 65%;
    }

    80% {
        width: 75%;
    }

    90% {
        width: 85%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

#page-container .day3-blog article .post-content{
    padding-left: 0.6vw;
    padding-right: 0.6vw;
}
/*Blog 1*/



#page-container .day3-blog1 .et_pb_posts a.more-link {
    color: #ff0f53!important;
}

#page-container .day3-blog .et_pb_posts a.more-link:hover{
    opacity: 0.6;
}


.day3-blog article:hover .post-meta a:hover{
    opacity: 0.6;
}

/*Columns Size*/

#page-container .day3-blog1 article:last-child {
    margin-right: 0 !important;
}

#page-container .day3-blog1 article {
    width: 48.5% !important;
    margin-right: 3% !important;
    float: left;
    border-radius: 10px !important;
}


/*Blog 2*/

#page-container .day3-blog2 article:last-child {
    margin-right: 0 !important;
}

#page-container .day3-blog2 article {
    width: 31.5% !important;
    margin-right: 2.7% !important;
    float: left;
    border-radius: 10px !important;
    padding: 30px 28px 34px !important;
}


#page-container .day3-blog2 .et_pb_posts a.more-link {
    color: #06d048!important;
}


/*Blog 2*/

#page-container .day3-blog3 article:last-child {
    margin-right: 0 !important;
}

#page-container .day3-blog3 article {
    width: 23.2% !important;
    margin-right: 2.4% !important;
    float: left;
    border-radius: 10px !important;
    padding: 28px 24px 30px !important;
}

/*Blog 3*/

#page-container .day3-blog3 article .entry-featured-image-url{
    margin-bottom: 25px !important;
}


/*Responsive*/

@media only screen and (min-width: 1930px) {

    .day3-blog{
        background-size: cover !important;
        background-position: top center !important;
    }
}
@media only screen and (min-width: 1391px) {
    #page-container .day3-blog .et_pb_ajax_pagination_container{
        display: flex !important;
    }
}
@media only screen and (max-width: 1390px) {
    #page-container .day3-blog3 article:nth-child(2n + 2){
        margin-right: 0 !important;
    }

    #page-container .day3-blog3 article {
        width: 48% !important;
        margin-right: 4% !important;
    }
}

@media only screen and (max-width: 980px) {
    #page-container .day3-blog .column {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        float: none !important;
    }

    .day3-blog .et_pb_row{
        width: 90% !important;
    }
}

@media only screen and (max-width: 767px) {
    #page-container .day3-blog article{
        width: 100% !important;
        margin-right: 0 !important;
    }
}

Once copied, go to edit page screen and click settings icon:

Then paste the CSS inside the Custom CSS box:

Click Save and update the page.

Blog module settings

Now let’s do some fun! Let’s tweak module settings and we are done. In your Divi page builder, click Blog module settings icon:

Module settings

– Set Posts Number to 2
– Optionally, thick the blog categories you want to display here
– Set Meta Date Format to: m/d/Y
– Enable Read More Button
– Hide categories, hide comment count, hide pagination

Select Design tab

– In Title Text section, set Title font to Poppins and make it black
– Body Text should be Poppins too with the colour of: ##b3b3b3. Make body font size 16px
– Meta text should be Poppins, text alignment should be left. Size 14px and colour #b3b3b3
– In Spacing section, set all Custom Padding values to 0px

Select Advanced tab.

– Scroll down to Main Element and paste this CSS inside the box:
border: none !important;

– Scroll to Title: and paste this CSS inside the box:
font-weight: 500 !important;
margin-top: 35px;
line-height: 124%;
padding-bottom: 12px;
font-size: 18px;
padding-left: 0.6vw;

– In Post Meta, paste this:
margin-bottom: 19px;
padding-left: 0.6vw;
font-size: 14px !important;
text-transform: capitalize;

– Featured Image:
height: 234px;
overflow: hidden;

– Finally, for the Read More Button, paste this CSS:
font-family: Poppins;
font-size: 16px;
font-weight: bold;
color: #ff0f53 !important;
text-transform: capitalize;
margin-top: 23px;
display: block;

How to Style the Divi Theme Person Module

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Person Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create good looking Divi Theme Person module. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating structure and adding modules
• Customising Person Module

Creating section structure

Create a section with a 1/3 + 1/3  + 1/3 row. In each column add a Person module.

Section structure

For the start, leave all fields inside the modules empty. We are going to deal with it in the moment, but first just create the structure as shown on the screenshot.

Section settings

Let’s first add a background to this section to make it look nice.
For this example, I am going to use this image: Background Image

In options below, set Background Image Size to Fit.

Switch to Design tab.

In Spacing section, add 10vh value to Top and Bottom Custom Padding.

In Advanced tab:

Assign this class name: day2-pm day2-pm2

Click Save & Exit.

Row Settings

Open Row settings and select Design tab.

Set Use Custom width option to Yes and set the custom width to 1170px.

Also, use Custom gutter width and set the value to 2.

Add CSS

Before moving to modules settings, also add this CSS:

.day2-pm .et_pb_team_member:hover {
cursor: pointer;

}

.day2-pm .et_pb_team_member .et_pb_team_member_description {
text-align: center !important;
}

.day2-pm .et_pb_team_member .person_link {
display: none !important;
}

.day2-pm .et_pb_team_member .et_pb_team_member_description h4:after {
content: "";
display: block;
width: 0;
height: 1px;
background-color: #ccc;
margin: 7px auto -7px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/*team 1_3*/

.day2-pm .et_pb_column_1_3:last-child{
margin-right: 0 !important;
}
.day2-pm .et_pb_column_1_3 {
width: 31.6% !important;
margin-right: 2.6% !important;
}
.day2-pm .et_pb_column .et_pb_team_member .et_pb_team_member_image{
max-width: 100% !important;
}
.day2-pm .et_pb_column_1_3 .et_pb_team_member .et_pb_team_member_image {
margin-bottom: 34px;
}

.day2-pm .et_pb_column_1_3 .et_pb_team_member {
padding: 2.6vw 1.9vw 1.7vw !important;
}

/*team 1_4*/

.day2-pm .et_pb_column_1_4:last-child {
margin-right: 0 !important;
}

.day2-pm .et_pb_column_1_4 {
width: 23.2% !important;
margin-right: 2.4% !important;
}

.day2-pm .et_pb_column_1_4 .et_pb_team_member .et_pb_team_member_image {
margin-bottom: 32px;
}

.day2-pm .et_pb_column_1_4 .et_pb_team_member {
padding: 2.3vw 1.7vw 2vw !important;
}

/*team 1_5*/

.day2-pm .et_pb_column_4_4 .et_pb_team_member .et_pb_team_member_image {
margin-bottom: 35px;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member {
padding: 2.3vw 1.7vw 2vw !important;
}

.day2-pm .et_pb_column .et_pb_team_member .et_pb_team_member_image img,
.day2-pm .et_pb_column_4_4 .et_pb_team_member .et_pb_team_member_image {
width: 100% !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member {
width: 18.4% !important;
margin-right: 2% !important;
float: left;
position: relative;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member:last-child {
margin-right: 0 !important;
}

/*Animation Css*/

.day2-pm .et_pb_team_member .et_pb_team_member_description,
.day2-pm .et_pb_team_member,
.day2-pm .et_pb_team_member .et_pb_team_member_image,
.day2-pm .et_pb_team_member .et_pb_team_member_image img {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

}

.day2-pm .et_pb_team_member:hover .et_pb_team_member_description h4:after {
width: 60%;
}

.day2-pm .et_pb_team_member:hover .et_pb_team_member_description {
transform: translate(0, -10px);
}

.day2-pm .et_pb_team_member:hover .et_pb_team_member_image {
transform: scale(0.9);
}

.day2-pm .et_pb_team_member:hover {
box-shadow: 0 3px 30px -5px rgba(0, 0, 0, 0.35);
}


.day2-pm .et_pb_member_social_links li:last-child{
margin-right: 0 !important;
}
.day2-pm .et_pb_member_social_links a{
font-size: 16px !important;
}

/*Responsive*/

@media only screen and (min-width: 1930px) {
.day2-pm{
background-size: cover !important;
background-position: top center !important;
}
}
@media only screen and (max-width: 980px) {
/*team 1_2*/
.day2-pm .et_pb_column_1_2:last-child {
margin-right: 0 !important;
}

.day2-pm .et_pb_column_1_2 {
width: 48% !important;
margin-right: 4% !important;
}

.day2-pm .et_pb_column .et_pb_team_member_image {
width: 100% !important;
}

.day2-pm .et_pb_column .et_pb_team_member_image {
margin-bottom: 20px !important;
}

/*team 1_3*/
.day2-pm .et_pb_column_1_3:last-child {
margin-right: 0 !important;
}

.day2-pm .et_pb_column_1_3 {
width: 31% !important;
margin-right: 3.5% !important;
}

/*team 1_4*/
#page-container .day2-pm .et_pb_column_1_4:nth-child(2n+2) {
margin-right: 0 !important;
}

#page-container .day2-pm .et_pb_column_1_4 {
width: 48% !important;
margin-right: 4% !important;
}

/*team 1_5*/
.day2-pm .et_pb_column_4_4 .et_pb_team_member .et_pb_team_member_image {
margin-bottom: 0 !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member {
padding: 2.3vw 1.7vw 2vw !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member .et_pb_team_member_image {
width: 40% !important;
margin-right: 5% !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member {
width: 48% !important;
margin-right: 3% !important;
margin-bottom: 2% !important;
float: none !important;
display: inline-block !important;

}

.day2-pm .et_pb_column_4_4 {
text-align: center !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member:nth-child(2n+2),
.day2-pm .et_pb_column_4_4 .et_pb_team_member:last-child {
margin-right: 0 !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_member_social_links {
text-align: left !important;
}

.day2-pm .et_pb_column_4_4 .et_pb_team_member_description {
display: block;
float: left;
text-align: left !important;
padding-top: 8px;
}
}

@media only screen and (max-width: 980px) and (min-width: 767px) {
.et_pb_column_4_4 .day2-pm .et_pb_team_member:hover .et_pb_team_member_description {
transform: translate(0, 0);
}

.et_pb_column_4_4 .day2-pm .et_pb_team_member .et_pb_team_member_description h4:after {
margin: 10px 0 -10px;
}
}

@media only screen and (max-width: 767px) and (min-width: 481px) {
.day2-pm .et_pb_team_member:hover .et_pb_team_member_description {
transform: translate(0, 0);
}

.day2-pm .et_pb_team_member .et_pb_team_member_description h4:after {
margin: 10px 0 -10px;
}

.day2-pm .et_pb_member_position{
text-align: left !important;
}
}

@media only screen and (max-width: 767px) {
#page-container .day2-pm .et_pb_column .et_pb_team_member .et_pb_team_member_image {
width: 40% !important;
margin-right: 5% !important;
margin-bottom: 0 !important;
float: left;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member {
margin-bottom: 0 !important;
}

#page-container .day2-pm .et_pb_column,
#page-container .day2-pm .et_pb_column_4_4 .et_pb_team_member {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 40px !important;
float: none !important;
display: block !important;
}

#page-container .day2-pm .et_pb_column {
text-align: center !important;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member:nth-child(2n+2),
#page-container .day2-pm .et_pb_column .et_pb_team_member:last-child {
margin-right: 0 !important;
}

#page-container .day2-pm .et_pb_column .et_pb_member_social_links {
text-align: left !important;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member_description {
display: block;
float: left;
text-align: left !important;
padding-top: 8px;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member {
padding: 2.5vw !important;
}
}

@media only screen and (max-width: 480px) {
#page-container .day2-pm .et_pb_column .et_pb_team_member .et_pb_team_member_image {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 30px !important;
float: none;
}

#page-container .day2-pm .et_pb_column .et_pb_member_social_links {
text-align: center !important;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member_description {
display: block;
float: none;
text-align: center !important;
padding-top: 0;
}

#page-container .day2-pm .et_pb_column .et_pb_team_member {
padding: 5.5vw !important;
}
}

To add the CSS, click page settings button:

Then paste the CSS inside Custom CSS box:

Click Save and update the page.

Modules settings

Do the same for each module.

• Click module settings button. Enter Name, Position and Social Networks URL’s where you want.
• Also, scroll down to Image section and add an image for each person
• In Background section, make the background solid white colour

Select Design tab.

• Set Icon colour to: #2adc65 and Icon Hover colour to: #c9c9c9.
  You can also put your own colours, doesn’t have to be these ones, as same as you might have already chose another background image than what’s in the example.
• In Title Text section, for H4 tag, chose Poppins font with the colour #2adc65
• Body text should be Poppins too, font weight Regular and size 18px. Colour: #b3b3b3. Align text to the center.
• In Custom Padding, add 2.5vw to the top, 2.2vw to the Right, 3vw to the Bottom and 2.2vw to the Left
• Add 10px rounder corners each
• For Box Shadow, choose these options:

box shadow

Colour of the shadow should be: rgba(160,190,212,0.22)

Finally, select Advanced tab.

Scroll down ot Member Image. Here, add this CSS: 
margin-bottom: 41px;

In Member Description, add:

 display: block;

In Title box, add:

padding-bottom: 12px;

In Member Position:

padding-bottom: 23px;

And for Member Social Links:

margin: 0;
text-align: center;

How to Style the Divi Theme Pricing Table Modules

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Pricing Table Modules has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create good looking Divi Theme Pricing Table Modules. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating a Section
• Customising a CTA Module
• Customising a Pricing Table Module

Creating the Section Structure

Create a section 1/3 + 2/3. In the first column add two CTA modules. In the latter one, add the Pricing Tables module, as shown in the image below:

Section structure

Add the class

Click the section settings icon and add the class: day1-pt2 day1-pt. Now it should look like this:

Section class

Add the CSS

Now that we have added the class let’s also add some CSS. While you are on the edit page screen, in your Divi Builder, click the settings icon:

Page settings

Then, paste this CSS:

.day1-pt .et_pb_pricing_content .et_pb_pricing li span:before {
 display: none !important;
}

#page-container .day1-pt .et_pb_button_wrapper a.et_pb_pricing_table_button {
 padding: 11px 5px !important;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign {
 color: #fff !important;
}

.day1-pt .et_pb_row {
 width: 95% !important;
}

.day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 margin-top: 40px !important;
}

.day1-pt2 .et_pb_button_wrapper {
 margin: 0 0 0;
 padding: 0 !important;
}

.day1-pt2 .et_pb_column_2_3 {
 width: 57.1% !important;
}

.day1-pt2 .et_pb_column_1_3 {
 width: 33.666% !important;
 margin-right: 9.2% !important;
}

.day1-pt2 .et_pb_pricing_table {
 padding: 2.4vw 3vw 2.6vw !important;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 3.5vw 2.9vw 3.9vw !important;
}

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 1.1vw !important;
}

.day1-pt2 ul.et_pb_pricing li {
 margin-bottom: 13px;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign,
.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_sum {
 font-size: 82px !important;
}

#page-container .day1-pt2 .et_pb_pricing_table.et_pb_featured_table a.et_pb_pricing_table_button:hover {
 color: #bc1544 !important;
 background-color: #fff !important;
}

#page-container .day1-pt2 .et_pb_pricing_table.et_pb_featured_table a.et_pb_pricing_table_button {
 color: #fff !important;
 background-color: #bc1544 !important;
 border: none !important;
}


/*Responsive*/

@media only screen and (min-width: 1930px) {
 .day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 64px 40px !important;
 }
 .day1-pt2 .et_pb_pricing_table {
 padding: 40px !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 22px !important;
 }
}

@media only screen and (max-width: 1390px) {
 .day1-pt2 .et_pb_column_1_3 {
 width: 33% !important;
 margin-right: 3% !important;
 }

.day1-pt2 .et_pb_column_2_3 {
 width: 64% !important;
 }
}

@media only screen and (max-width: 980px) {
 .day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 margin-top: 0px !important;
 }

.day1-pt2 .et_pb_column_1_3 {
 width: 100% !important;
 margin-right: 0% !important;
 }

.day1-pt2 .et_pb_column_2_3 {
 width: 100% !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 4.9vw 2.9vw 4.9vw !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 2vw !important;
 }

.day1-pt2 .et_pb_column:first-child {
 margin-bottom: 40px !important;
 }

.day1-pt2 .et_pb_promo .et_pb_promo_description h2 {
 padding-bottom: 15px !important;
 }

.day1-pt2 .et_pb_promo:first-child .et_pb_promo_description h2 {
 padding-bottom: 9px !important;
 }
}

@media only screen and (max-width: 767px) {
 .day1-pt2 .et_pb_promo .et_pb_promo_description p,
 .day1-pt2 .et_pb_promo .et_pb_promo_description h2 {
 text-align: center !important;
 }

.day1-pt2 .et_pb_pricing_table {
 width: 100% !important;
 max-width: 400px;
 margin: 0 auto !important;
 float: none;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign,
 .day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_sum {
 font-size: 52px !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table,
 .day1-pt2 .et_pb_pricing_table{
 padding: 40px !important;
 }

.day1-pt2 ul.et_pb_pricing li {
 margin-bottom: 0px;
 }

#page-container .day1-pt2 .et_pb_pricing_content {
 padding: 0 0 30px !important;
 }

.day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 text-align: center !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 30px !important;
 }


 #page-container .day1-pt2 .et_pb_pricing_heading {
 margin-bottom: 20px !important;
 }

#page-container .day1-pt2 .et_pb_pricing_content_top {
 padding-bottom: 12px;
 }

}

@media only screen and (max-width: 480px) {
 .day1-pt .et_pb_row {
 width: 90% !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table,
 .day1-pt2 .et_pb_pricing_table{
 padding: 25px !important;
 }
}

Into Custom CSS box:

Custom CSS box

Click Save.

Click the  Row Settings icon:

Row settings

Select the Design Tab in the Divi Builder and set these options:

1. Use custom width – Yes, then set width to 1170px
2. For Column1 Padding, add 7.1vw value to Top option

Designing the first CTA

In your Divi Builder, click your first CTA module settings button.

CTA settings

In the Content Tab:

1. Add Title
2. Set Background to – No

In the Design Tab:

1. Set Text Orientation to left
2. Change Title color to #a7a7a7
3. Change font to Lato
4. Change font size to 16px

In the Advanced Tab:

You need to add a bit of CSS code here.

In the Promo Description field, paste this CSS:

padding-bottom: 0;

In the Promo Title field, paste:

padding-bottom: 27px;

Designing the second CTA

This CTA is going to be more detailed than the first one. Fill in all the fields. Title, Button text and URL and Content.

CTA content

Also, set Background to No.

That was for the Content tab.

For the Design tab, set this option:

1. Text orientation should be left
2. Title font to be Poppins and font weight bold
3. Title size 36px, colour should be black
4. Add letter spacing of 1px too
5. Set Title line height to 120%
6. For body text, choose Lato, Regular, 16px with colour: #a7a7a7

Also, enable Button Custom Styles option. Then, set this option for the button:

1. Button text size to be 18px
2. White text colour
3. Background colour to: #ff0f53
4. Border width to 1px and colour #ff0f53 with radius 27px
5. Disable option to show button icon
6. Font to Poppins and font weight to be Medium
7. Hover colour should be #bc1544, both background and border colour
8. Hover text colour remains white
9. Hover border radius should be as same as 27px
10. Button alignment to left

Now select the Advanced Tab.

Here you need to add bits of CSS code.

Add this to the Promo button:

  padding: 12px 46px !important;

And also this for the Promo title:

  font-weight: 400;
  padding-bottom: 38px;

Designing the Divi Theme Pricing Table Modules

First, add two tables by clicking “Add New Pricing Table” button. I created two tables and named them “Starter” and “Pro”.

Adding new Pricing Tables

Once  you have added tables, click the settings button to edit them. Add subtitle, currency, price, button text and of course content. Do this for both tables.

Also, add Button URL to hyperlink the buttons.

Now that we have content ready, select the Design Tab to make it look better.

Use these here options:

1. Set Center items to – Yes
2. Featured colour to #ff0f53
3. Show Featured Table Drop Shadow – No
4. For text, set Text Orientation to Center
5. Table Header Background Colour: rgba(0,0,0,0)
6. Make Title: Poppins, centered, black, 24px, regular
7. Body text should be Poppins, regular, 16px, #8d8d8d with body line height of 24px
8. Featured Table Header Text Colour: #fffff
9. Featured Table Header Background Color: rgba(0,0,0,0)
10. Featured Table Body Text Colour: #ffffff
11. Subheader text: Poppins, Regular, 16px, black, line height 1em
12. Currency and price text: Poppins, Regular, white, 52px
13. Button: background #ff0f53. font white 16px, centered. You can use the same hover options as before
14. Button border-width should be 1 and border colour #f8fafb, border-radus to 0.
15. Set width to 100%
16. Border width to 1px #bebebe

In Advanced Tab:

To the Pricing Heading add:

padding: 0 !important;
margin-bottom: 27px;

To the Pricing Title add:

padding-bottom: 13px;
font-weight: 500;

To the Pricing Subtitle add:

font-size: 16px;

To the Pricing Top:

border-bottom: 0 !important;
padding-bottom: 35px;

Currency:

margin-left: 0 !important;
position: static !important;

Pricing Content:

padding: 0 0 1.3vw;

Pricing Item:

padding: 0 !important;
list-style: none !important;
line-height: 230%;

And lastly, for the Pricing Button:

width: 100% !important;
padding: 11px 0 !important;

I just added some general design elements but let’s now stylize the two tables I created.

Select the first one you created and switch to Design tab.

1. Make this table featured.
2. Subheader: Lato, Regular, 16px, colour: rgba(255,255,255,0.5)
3. Currency & Price: Poppins, Medium, 82px
4. Set border width to be 0px
5. Border radius should be 7px
6. Center the button position
7. Also, enable box shadow:
   

   box-shadow

    

Switch to the Advanced Tab now.

In the Pricing Heading field, add:

 margin-bottom: 36px !important;

In the Pricing Content:

padding: 0 0 1.7vw!important;

Let’s edit the second table as well:

Open module settings, then second table settings and select Design Tab.

1. Title: Poppins, Regular, 24px
2. Body text: Poppins, Regular, 16px, body line-height: 24px
3. Subheader text: Poppins, Regular, uppercase, centered, 16px
4. Currency and Price: Poppins, Medium, 52px
5. Use Custom Styles for the button
6. Make button white with text colour: #ff0f53
7. On hover, make the button text black and the background to white, use no borders
8. Rounded corners 7px each
9. Border width: 0px
10. Enable Box shadow and use same values as for the first table

Advanced Tab settings:

Main Element CSS:

margin-left: -10px !important;
z-index: 10 !important;

That’s it, all done! Hope you enjoyed this ‘How to Style Divi Theme Pricing Table Modules’ tutorial. Feed-back is welcome. Use our Support page to send through suggestions or queries.

For more tutorials click here