Divi Theme Tutorial: Build a Website From Scratch With No Coding
Вставка
- Опубліковано 23 вер 2024
- www.portableent... - A Step-By-Step Tutorial to Using The Divi Theme from Elegant Themes to build professional WordPress websites with no coding required.
16:26 - See the Divi builder in action
The Divi Theme and Divi builder are a powerful combination that provides drag n' drop capability for building flexible websites without any experience or any coding knowledge required.
In this video tutorial we walk step-by-step through how to build a WordPress website from scratch starting with a blank WordPress install all the way to a final product.
Here you will learn how to use the sections, rows and modules of the Divi builder to create a website the looks and functions anyway you'd like.
Learn how to install a WordPress theme here:
• WordPress Themes: How ...
Learn how to create a new page in WordPress here:
• WordPress: How to Add ...
Get familiar with the WordPress dashboard here:
• WordPress: Quick Tour ...
You speak SO clearly and at a comprehendible speed...thank you!
Thank you for the feedback, Chaz DeSimone. I'm so glad you enjoyed it!
Thanks a lot, just 43 mins video explained everything necessary, Saved my many hours.
My goal in creating this tutorial was to save you a lot of time so I'm glad to hear it helped!
Excellent video. I too am a lifetime member with Elegant Themes and DIVI is the only theme I use. And even though I've read plenty of the Elegant tutorials, and watched their videos I learned quite a bit watching your video. You're better with your presentation than Nick Roach at Elegant and he's pretty good. I'll be checking out the visual builder video next, even though I've watched the Elegant video and read the material on it. Thanks so much.
Quite succinct as a preview. Just what I needed - thanks!
So glad to hear it helped!
This is so much detailed, I had to watch it twice to sink it in. Thanks, this is great!
Once I get beyond the ticks of speech, your tutorial is extremely informative, well thought out and very, very helpful. If you correct a few ticks you will be one of the best presenters I have had the pleasure of learning from; and I did learn very much. Thank you very, very much. (Don't worry about my "Attack, speech." It is actually meant to be helpful. Keep up the great work.)
Amazing video!! Definitely worth your time to watch. I was on the Elegant Themes website and unsure if I wanted to subscribe. You made it a no brainer. I am now so excited to start building my website! Thank you!!!
+vtp So glad it helped! It definitely is easier to make a decision when you can take a sneak peak first :) Good luck with your website.
Absolutely amazing video tutorial. Thank you so much! I'm just getting started with WP and Divi today.
So glad to hear the video helped you. I hope you enjoy Divi!
Fantastic video! So informative and well-explained. Thanks so much for posting!
+Jamminn555 Thanks so much for the feedback. I'm so glad it was helpful!
Check out the new Divi 3.0 frontend visual builder. Brand new tutorial here: ua-cam.com/video/mjdKGv1hoyE/v-deo.html
Great video, thanks! Finally I found helpfull content :) Do you have any recommendations for responsive and fast Themes? In This article wpressmag.com/fast-wordpress-themes I read about Gridbox. Do you have any opinion on this one?
I haven't personally used Gridbox. There is a lot you can do to speed up your site using any theme and once you add your content, images, plugins, etc. you'll need to test your page speed again to make sure it hasn't slowed down.
This is magic! I am hoping to upgrade to a premium theme soon and was nervous about doing so with our blog being developed already but this has reassured me. Very clear video, thank you.
+Two Scots Abroad I'm so glad this helped! Enjoy your amazing adventure!
i heard divi 3.0 will have front end builder like beaver and thrive is that right?
Yes, that is correct. If you are already working with Divi, you'll be able to use the front end builder easily. I'm looking forward to it!
Portable Entrepreneur
can you please make more video tutorial using divi to make modern website please?.
There are lacking recent tutorial in these builder
This tutorial was only created 4 months ago. Elegant Themes does a good good updating their themes so there are even a few extras you'll find.
Thank you so much. How you explained Divi was a tremendous help. Excellent job!
So glad it helped!
wow! so informative. as a newbie, this walked me through step-by-step and was easy to understand....thank you!
So glad it helped, Leslie!
I love this vid, thank you very much.Very helpful as I have just purchased this theme to work on several sites.
So glad it helped! Thank you for your comment. It's a great theme to use for multiple sites. I hope you enjoy it! In case you missed it, you can find the tutorial for the frontend visual builder here: ua-cam.com/video/mjdKGv1hoyE/v-deo.html
Yes I saw that thanks. The only drawback with visual builder is - when you use it, save, then go back to back end builder, the changes don't save, so you have to use one or the other, not both.. or maybe I'm doing it wrong
Thank you for sharing this tutorial.
I have completed one of your udemy videos and now this video. You have a wonderful talent for teaching and sharing your knowledge. I have found your videos extremely useful and interesting... Thank you :)
Thank you so much for the kind words! I'm so glad you have enjoyed everything.
Thanks for the help! Loved the video -- I see you might be in VA too! Northern Virginia entrepreneurs unite! :)
So glad it helped! Yes, I used to be in VA until just over a year ago :)
Thank you heaps for such amazing tutorial -one of the best !!!
So glad you enjoyed it, Jan!
Informative video. Thanks for the tutorial.
Great video.
Very informative
+Hassan Al-Sheeb So glad you enjoyed it!
At 25:30 why does the background image get larger or smaller as you change the button size. That seems like it will make trouble.
This will help me so much, thanks a lot!
would you be able to do new video on latest divi version ? You have soothing voice and easy listening, well done
Very helpful. Thanks! :)
whats your thought on beaver builder? and also please make more tutorial using divi with every feature they had please
Thanks for the tutorial, very helpful
Absolutely! Thanks for your feedback.
Massive help. Thanks
Thanks!
-student
I loved the video. Thanks for taking the time to do it for us. I placed an email module on a page as you demonstrated, but I can't get the field boxes to center on the page. The email opt-in works okay, but it looks funky. And, I don't want all the fields, just the email field. I can't find a way to fix any of those issues.I've looked at many YT vids, but no answers. I hope you have some ideas.
You currently would have to add code to remove the name field. For the centering, it's hard to help without seeing it. You typically need to change layout of the content to center it on the page. If you want the form centered, you could do that via CSS too. Alternatively, if the form is nothing how you'd like it to be, you can use the code module and grab the pre-written code from your email service provider and insert it there. That way you can design the form how you'd like it there.
Very helpful tutorial. Thanks! :)
Glad to help!
Could you make a video clearly showing how to upload the Divi Theme? Assuming that we come to this video with the theme already installed is a massive error. Step-byStep implies from the very beginning...
Sorry for the confusion, Ethan. Installing Divi is the same as all other themes so I didn't want to make this a WordPress theme, although I do see how this would be helpful.
From your WordPress dashboard, go to Appearances > Themes and then click on the Add New button at the top. There you will be able to find the Divi zip folder which you can download from your account with Elegant Themes. Click install now and Divi will be installed. You can then activate the them.
For screenshots of this process see this link: www.elegantthemes.com/gallery/divi/documentation/install/
I hope this helps.
Hi Christine. I am taking a couple of your courses at Udemy, but I must say that I found them thanks to your great UA-cam channel. Just starting, but already finding lots of important tips. : )
Now I have a question about Divi and the business model for a person who wants to use it to create web sites for clients. I own a Lifetime Access and I would like to ask you: When you create a customer's web site using Divi do you ask the client to buy a subscription or you use yours, and if so, how they do to update their site when new versions of Divi come?
I am learning the technical skills but I still need to know so many aspects of the business side...
Thanks in advance
Glad you're learning a lot! I use a copy of my Divi theme when creating a client's website since the license allows for that. I do not ask the client to purchase a subscription. I notify the client when it needs to be updated and I try to use this in an going maintenance plan with the client.
If they decide don't continue to work with you, to update the theme they would need to purchase a subscription. This would be necessary with any good theme as they should update their themes and plugins for security and functionality reasons.
Thanks a lot for your guidance. : )
I think the video is going to be really as I get started with Divi. I am about to purchase it but I have a quick question. I have used page builders before and stopped because I just didn't like them because they never really allowed the flexibility they promise. It was always something small that I couldn't change because I was using the page builder. I was reminded of that in your video. Towards the end of your video when you clean up the Navigation. It's listed the pages as About Us > Home > Uncategorized. That's awkward looking. Can adjust the order of the pages listed in the navigation through Divi? Put Home first and so on? Or, do I have to go into the WordPress menu options to do it?
+AbulletAway69 Glad you found it helpful! This is one of the most flexible page builders I've ever used. No matter what tool you use, I'm sure you can find something you'd like to change that the tool doesn't allow you to. With Divi, I run into that issue a lot less than the others. You can select the menu pages in Divi but for this I simply went into Appearance > Menus and reordered them just like I would with any WP site. Hopefully the video helps give you a good idea of what to expect from Divi before you purchase / use it.
This is a great tutorial! I was wondering if there are separate input field elements in the Builder like the ones seen in the contact form module?
You can now create additional fields for the form and you can always create different forms using the contact form module without calling it a contact form!
How do I eliminate this header and navigation? I have a full slider size logo and want the negation below my header. I can not find any place to eliminate this. Please help.
+Laurie Pedelaborde You can do this by adding a fullwidth menu module to your page whereever you would like it to appear. Here is the link for how to do this: www.elegantthemes.com/gallery/divi/documentation/fullwidth-menu/
Great video! Thank you for posting it. I have a question. How do I put a full width header with a list of my clients logos? I would like it to carousel the logos. I tried doing that with projects but it looked horrible. I'm sure it was me being a rookie. :) I do like the Divi theme a lot. Thanks for any feedback you can give.
+Kw Johnson Is this what you are trying to achieve?www.elegantthemes.com/gallery/divi/documentation/fullwidth-portfolio/
This is a page that shares the specifics on the different settings for this feature so this may help you in getting the look you're after.
how do you create a home page that has the entire viewing page covered with the image instead of having menu bars at the top ...
+Jesse Millares Hi Jesse, you can set the menu to not appear until the user scrolls so when the page first loads the menu will not be there, only the image. You can create a full width section and include an image slider with your image and then go to Divi > Theme Customizer > Header & Navigation > Header Format and click on 'Hide Navigation Until Scroll.' You'll see this around 13:10.
can you add an optin form above the fold? that top menu section is HUGE :)
Yes, you can certainly add it wherever you'd like. I'm not sure where you're seeing the menu but you can also size the menu to any height you'd like.
+Portable Entrepreneur Thanks for the swift reply. I just purchased. Will you be doing an updated version now that there is a visual editor?
I would like to soon as I know that's changed. You will see all the same options there. It just looks much nicer!
It's ok I got the hang of it already. It's almost like Instabuilder but better in the sense that it makes actual wp themes.
I already have something going on my test site :) what do you think?
Www.gopage.pw/test however it does not pull up on mobile devices, I will have to contact support.
It's not showing anything at the moment. I'm sure you're working on it now. There are mobile settings you can set in the options but if anything isn't working for you, definitely get in touch with support. I've found them very helpful.
Awesome video :). Is there a way to stop the logo and navigation section to stop shrinking when you scroll down?
Yes, in the Divi Theme Customizations you can set the primary menu height and the fixed navigation settings menu height to the same number.
it would help if you didn't say, "go ahead and" so much. Like, you know, when someone says, "like, you know" too much, like, you know what I mean? so why don't you go ahead and not say, "go ahead and" so much, and like, you know, I'll stop sayin', "like, you know" so much. So go ahead and listen to your video and count how many times you say, "go ahead and". After a while it, like you know, starts to drive you nuts hearing it, like, so often, you kmow? But you go ahead and keep telling us what to go ahead and do. Other than that, your presentation is, like, you know, really great, and I went ahead and did what you said.
+Dave Dial Like, you know, Dave, I'm glad you at least liked the free information. I think we all have a line we tend to repeat when presenting. I appreciate the constructive feedback despite how it was presented. I'll go ahead and work on that :)
+Portable Entrepreneur I believe you have the potential to be an incredible instructor, and if you will consider and take what I said to heart, and make this one adjustment in your presentation, your videos will attain a new and higher level of professionalism. It was not my intention to offend you, but to make a point by demonstration, in what I thought was a humourous example. So, if you were offended, I apologize, but I hope you take what I said seriously, as I hope it will help you attain even greater success by overcoming this one roadblock to communication.
+Dave Dial I do appreciate the feedback, Dave and certainly no offense taken. I'm not that sensitive :)
When you read a comment written by someone you don't know, it often can be interpreted differently than intended without knowing a person. I recorded a new tutorial early this week which I'll be posting this week. I don't believe I repeated that phrase so I hope you like that one better :)
Is there a way to just click and install Demo content from a chosen theme?
With Divi, no. Some themes do have demo content you can import. I prefer not to use demo content for SEO reasons.
what is that epanel thing you are using? that doesn't look at all like the default divi install.
+J Hess The ePanel is what you'll find when you go to Divi > Theme Options in the menu
+Portable Entrepreneur weird. that's completely different than the one that comes with the current divi install. it's got most of those settings but doesn't look anything like that.
Ah, I see what you're saying. The latest update did just change the look of the ePanel. It's certainly much nicer looking! All of the same options are still there and you will now find the menu options across the top instead of in the vertical menu as shown here.
I couldn't thank you enough for this wonderful tutorial. My website is on Headway Themes, which is also fully customizable, however I've been wanting to change to a more magazine style format which the Divi theme seems to be more user friendly. My question is: is it fairly easy to integrate the already existing and customized website content to Divi? I want to make the switch over but I'm scared things will not go so smoothly. Also, for the home page, if I want the latest post to appear as full width and previous posts to appear in columns (magazine layout with feature pictures) underneath, what sort of Divi module would I need for my already existing posts to show in chronicle order? Or is this possible at all? I hope this all makes sense, it's a bit hard to explain in writing. Thanking you in advance for any assistance you could provide.
So glad you found the tutorial helpful! You can export your current WordPress content and import it into the new website. Then you can install Divi and customize the layout the way you'd like. For the post column display, I assume you are looking for a layout like this: www.portableentrepreneur.com. If so, you'll find the documentation for that here: www.elegantthemes.com/gallery/divi/documentation/blog/
Portable Entrepreneur Thank you so much for your prompt reply and all your help. The links you suggested is exactly what I need. Now I know I can definitely achieve the look I want with Divi. As for integration, I just emailed Elegant Themes. I have so much content, I'm hoping they can walk me through the steps to transition smoothly. Thank you again, so happy to have discovered your channel :)
When you say you've gone ahead and downloaded wordpress, are you referring to wordpress.com or wordpress.org
I'm assuming wordpress.org though right?
Correct, wordpress.org
thanks so much
Do I need to have Wordpress installed on my computer to work with Divi Theme?
Yes, you will need to install WordPress before you can install the Theme. I responded to your comment on another video about how to install WordPress so hopefully that will help.
what size is the header picture? i cant seem to figure it out and its really frustrating
The image will resize based on the device you are on. It's good to use a wider image so that it will work well for larger computer screen sizes as well. If you're not sure, use 1920px for the width.
How much money will you charge for designing a wordPress website using Divi?
You can reach me directly here to tell me more about what you're looking for and I'll be able to better help you.
www.portableentrepreneur.com/contact-us/
I bought Divi some time ago, and I hate it.
Why do people in tutorials feel compelled to say, "Go ahead." Just say, "I'm going to." it is so much less annoying! And please people. LEARN HOW TO PRONOUNCE cr'E'ate. It is not a "crate" for carrying things.
will you design my website ? please reply
yes