How To Make A WordPress Website 2017 -NEW DIVI THEME TUTORIAL!

How To Make A WordPress Website 2017 -NEW DIVI THEME TUTORIAL!

Create A WordPress Website With The Divi Theme

Darrel Wilson, WordPress Designer

14 January 2017

The Divi Theme has come a long way. I know many people here are new to wordpress and want to create an amazing wordpress website with divi. Ill Show You How

1. Lets Start With The Basics.

The First thing you need to do is get hosting. I recommend either TMDhosting Or Hostgator

Get Hosting with TMDhosting: https://www.darrelwilson.com/tmdhosting

Get Hosting With HostGator https://www.darrelwilson.com/hostgator

2. After This, you will need to purchase the Divi Theme. You can get 10% off right now here at https://www.darrelwilson.com/divi

The Divi Theme Is The Best WordPress Theme I Have Seen

You can download the images for the tutorial here:

https://www.dropbox.com/sh/r7u2ton2009ihoh/AADfWXI6qyNQHsg1QeFXULqDa?dl=0

Below is a link to the video. Here you can just follow along. However, I have also introduced Custom CSS in this tutorial and you can get that below

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px” custom_width_percent=”80%” use_custom_gutter=”off” gutter_width=”3″ custom_padding=”50px|||” padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” column_padding_mobile=”on” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”on” parallax_3=”off” parallax_method_3=”on” parallax_4=”off” parallax_method_4=”on” admin_label=”Row” disabled=”off”][et_pb_column type=”4_4″ disabled=”off” parallax=”off” parallax_method=”off” column_padding_mobile=”on”][et_pb_divider color=”#aeaeac” show_divider=”on” divider_style=”solid” divider_position=”top” divider_weight=”1px” hide_on_mobile=”off” admin_label=”Divider” disabled=”off”] [/et_pb_divider][et_pb_text background_layout=”light” text_orientation=”left” max_width=”900px” admin_label=”Text” text_font=”PT Serif||||” text_font_size=”32″ text_font_size_last_edited=”on|tablet” text_text_color=”#363636″ text_line_height=”1.3em” use_border_color=”off” border_style=”solid” custom_margin=”16px||30px|” disabled=”off”]

Below is the Custom CSS you will need for this tutorial. Please follow as in the tutorial and your wordpress website will look 100% in no time!

To Add The Bar Under The Text Of The Header, Use This Custom CSS

1. Add This in the THEME CUSTOMIZER First

.separator.small {

    position: relative;

    display: block;

    margin: 10px auto 20px auto;

2. After This, Add This into the text module of the call to action as in the tutorial!

<div class=”separator small center ” style=”margin-top: 18px; margin-bottom: 24px; background-color: #d21151; height: 1px; width: 50px;”></div>After These Instructions, your bar should appear like the picture below

Next I will show you the CSS To Make Your Slider FULLSCREEN. You can also visit this tutorial and i show you how

First, Enter This in your theme customizer

.et_pb_slide {

height: 100vh;

}

After this, you will need to go to the divi slider module and paste this in the Main Element:
main element
height: 100vh;

You should have a sullscreen slider like the image below

I Am Just A Silly Horse

The Tutorial is designed to help you get creative with the divi theme. The modules that i used werent really for the purpose they were created but its all about imagination. The divi theme is more like the legos for wordpress. I hope this wordpress tutorial helped.

Good luck with creating your wordpress website with the divi theme. I know it can be long, but remember, your website is on the internet 24 hours a day, use the best!

DW Staff

DarrelWilson.com provides free and helpful WordPress tutorials for users of all experiences and backrounds. Darrel provides free tutorials on his youtube channel. You can view the youtube channel here: https://www.youtube.com/c/darrelwilsonbug

This Post Has 41 Comments

  1. Hi! Thanks for a great tutorial. I’m having problems adding the bar under the header of the call to action. With the custom css I cannot get the bar to show at all. I’ve added the css to the content box with the “text” option enabled but it just doesn’t show. Any tips?

    1. hey sam, try not to add any spaces. Use the text from this blog and try it again

      1. Hello Darrel, i cant get the underline to work either. Isn’t there supposed to be closing bracket after:
        margin: 10px auto 20px auto;}

      2. Hi Darrel, thanks for at great tutorial. I´m having the same problems as Sam. I have tried it several time. Both with the text from the Youtube toturial (description) and from the post above. Still no bar under the call to action… Any tips?

        1. I too have the same problem. I see space being added where the divider should appear, but no divider line. Changing colors also didnt work out. Please help us make zour beautiful dividers work 🙂

          Great tutorial, much appreciated!

    2. Hi Sam, did you get it to work? I´m having the same problem…

    3. It´s the ” that´s making trouble. Try typing/replacing them manually. Worked for me 🙂

      1. Manually retyping the ” worked for me too… thanks!

      2. yes it worked when i changed the : ”
        thank you

  2. My Friend ….. Thanks to you, I now have a better understanding of whats going on with Divi. Thanks again.

  3. Hi Darrel,
    Thanks for your awesome tutorial! Got me ecstatic about Divi 3.0. 😀

    Just some feedback from me:
    I find the Custom CSS part the hardest to follow. Stuck for a long time. (still stuck as I am typing this 🙂 )

    1. I pasted the CSS Text into the Theme Customizer and I got an error message:
    “Your curly brackets {} are imbalanced. Make sure there is a closing } for every opening {.”

    2. I am confused about step 2
    ” 2. After This, Add This into the text module of the call to action as in the tutorial!
    After These Instructions, your bar should appear like the picture below”

    Not sure about text module of the call to action.

    Because of time, I gave up and move on to other parts of the tutorial.

    Suggestion:
    In your video, it will be helpful if you can extend the Custom CSS Text Field to show the entire CSS text that was pasted instead of scrolling it. I had to repeat that section several times to see if I got it right.

    1. It´s the ” that´s making trouble. Try typing/replacing them manually. Worked for me 🙂

  4. Follow up on my previous comment. Ignore point #2. Got it after I continue watching the tutorial. *embarrassed! 🙂

  5. Hi Darrel! Very great tutorial. For the next month, maybe i write to you to buy some layout. I think is very posible for us, use your layouts for our web sites. We must to try at less one time. All the best!!

  6. Hi Darrel. Great tutorial – learned at least 3 new golden nuggets. Question: Do you have a tutorial on how to create the graphics you’ve given us? I’m assuming you use Photoshop? I’ve never used it but would love to learn how….thanks.Zaid

  7. Hi Darrel, great tutorial, I love Divi Theme!
    I’m having problems with the custom CSS for the separator bar.
    I’ve inserted
    .separator.small {
    position: relative;
    display: block;
    margin: 10px auto 20px auto;
    in the Theme Options in the backend.

    And then copied this part from this blog

    and inserted it into text part of a call to action module.
    Unfortunately, nothing happens!
    Any tipps?
    Much appreciated, thanks!

  8. Hi Darrel,

    To get the little bar under te title in the call to action box, are there any options you have to activate?

    In the custom CSS fiels of the Theme options I’ve added the following code.

    .separator.small {
    position: relative;
    display: block;
    margin: 10px auto 20px auto;

    Than in the text field of the call to action box I’ve added this code under the text option

    But I don’t get a little bar under my title

  9. Hi Darell,

    Somehow its not showing on my page. I added the closing CSS curly bracket that’s missing in your top theme customizer CSS. I copy pasted the code from top. Any idea?
    I love your tutorials. I’m learning Divi watching your videos. Thanks again for teaching!

    1. Hi Seema, did you get it to work? I´m having the same problem…

  10. Hi Darrel

    Great tutorial, really. But hell, I’m stuck too with the dividers!
    They won’t show… What am I doing wrong?

    1. Hi Olivier, did you get it to work? I´m having the same problem…

  11. Hi Darrel,

    I have been using Divi for a while now. Your video does give an excellent overview of the possibilities with Divi.

    However, I do have some questions. First of all, when I try to create the red line in the CTA, nothing happens. At least, no line is shown. I suppose there should be a closing bracket in the CSS. But even when I add that closing bracket, no line is shown. To my surprise, when I enter the line to the text area of the CTA, save it, and reopen it, it is changed to I really don’t understand why. When I change to visual mode and then back to text mode, only is left.

    My second question deals with the line as well. Inline CSS should be prevented as much as possible according to Google. Is the another way to show the line under the CTA headers?

    Cheers!

    Ruud.

  12. Hmmm, all the code I entered in the message is lost. I will send you an email.

  13. Hi Darrel! I loved this tutorial! Thank you!! I’m trying to create my graphics to fit correctly as full width sliders. I am using the CSS however I feel like my graphics aren’t designed in the correct size dimensions. What would be he right size proportions when designing graphics for a full width slider?

  14. FOR ALL OF YOU THAT ARE STRUGGLING WITH THE RED DIVIDER, USE THIS CODE BELOW!

    This has worked for me, and I know how frustrating it is to have come so far and not get the same look that our Guru has shown us.

    1. Martin, could you please send me the code. It does not appear in the comments.

    2. I am having the same issue where is the code you mention above?

  15. This is the best guide but I’m also having issues with the CSS.
    I just can’t get it to work when I follow the guide and video.
    On the video it say’s paste the code in the “theme options” and on the guide here it say’s paste it in the “theme customizer”.

  16. So thankful for your tutorial. Here is my question: I have found a video I woul like to use for my home static page. but its from Shutterstock. I checked suit out the free ones you mentioned but couldnt find a mpeg 4 to suit.
    Here are my options:

    HD $79 1920 X 1080 @ 24 fps AVC1 69.5 MB
    SD $59 852 X 480 @ 24 fps MOV 26 MB
    Web $39 426 X 240 @ 24 fps MOV 7.8 MBtions

    Which format do I need?

  17. Same problem with the CSS and the red line. Nothing shows up.

    When I went to put in the Can anyone please provide the solution. I love this tutorial. For the time being I’ll skip ahead and not waste any more time trying to figure out the red line.

  18. Same problem with the CSS and the red line. Nothing shows up.

    Can anyone please provide the solution. I love this tutorial. For the time being I’ll skip ahead and not waste any more time trying to figure out the red line.

  19. Figured it out!

    In the CSS — <div class=”separator small center ” style=”
    there's an extra space between center and the ".

    Simply kill the extra space and it will work.

    Here's the corrected code. If my explanation is not clear just copy and paste the code below and it will work.

  20. Another red line issue.

    Using the code in the tutorial I’m able to get the red line to appear in the first Call to Action but it doesn’t appear in all of the others.

    Here’s the code I’m using:
    Divi Theme Options, Custom CSS:

    .et_pb_slide {
    height: 100vh;
    }
    .separator.small {
    position: relative;
    display: block;
    margin: 10px auto 20px auto;}
    —————————————————————–
    First Call to Action, Settings, Text tab:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eg

    ————————————————————-
    I tried inserting the “separator small center” div class in all of the Call to Action text tabs to no avail.

    So neither the div in the first Call to Action text tab or in all of the Call to Action text tabs only gives me the red line in the first Call to Action.

    Help?

  21. Hopefully my last entry. I got all of the red lines to work by copying/pasting the from the Call to Action that was working to all of the other Call to Actions.

    What was weird though, the code I replaced was exactly the same as the code I replaced it with. But for some reason it worked.

    The Code that worked:

    The Code that didn’t work:

    A mystery!

  22. In the “About Us” tutorial the slider padding set to zero does not move the slider up at all below “Our Customers”.

    I can get it to move up by setting “Our Customers” margin bottom to -450 but that screws everything else in that section up.

    Any help would be appreciated.

  23. Stunning! But then, I truly suppose your posts would likely operate a lot better with a small number of premium quality stock image. Feel totally free to go and visit https://straffa.com and thus see if you discover something that you prefer. Really do not discontinue posting, assure me that, important friend!

  24. Taylor Swift is a racist white supremacist she sucked the KOKKK of Richard Spencer, Benoit Hamon and ANDREW ANGLIN and she voted for Adolf Trump TWICE. Taylor Swift the gbd RACIST also listens to the pedo music SEWER 2154 from the fascist site the DAILYSTORMER!!! Google “Taylor Swift SEWER 2154” and SEE FOR YOURSELF! The songs talk about spitting in the asswhole of 14 year old GIRLS!!! BOYCOTT TAYLOR SWIFT to fight FASCISM and XENOPHOBIA!

  25. I have downloaded the dropbox images for the “How To Make A WordPress Website 2017 | NEW Divi Theme 3.0 WordPress Tutorial!” but some of the images are missing that are used in the tutorial. Can you update the images and send me new link?

  26. I’m still learning from you, but I’m trying to reach my goals. I definitely love reading everything that is posted on your site.Keep the information coming. I liked it!

Leave a Reply

Close Menu
Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!

×

Cart