- I don’t know easy methods to write HTML or CSS codes.
I’ve arrange my very own weblog with WordPress, however I didn’t write any strains of codes like another net builders do.
So how did I do it?
did it with the Divi theme from Elegant Themes.
I found Elegant Themes a couple of years again after I first arrange my weblog. As soon as I discovered how the Divi Web page Builder labored, I immediately determined that it was the proper theme for me, the non-coding blogger.
When you’re simply beginning out with running a blog and also you need a theme with boundless design choices, take a look at Divi. Divi will make net design lots simpler for you. This theme is nice for designing your website nevertheless you need with out making superior tweaks to the theme’s code.
- The Divi WordPress Theme Choices Panel
- Customizing Pages with Divi Web page Builder
- Conclusion
The Divi WordPress Theme Choices Panel
Identical to any trendy theme, Divi comes with a “Theme Choices” panel to deal with the fundamental settings.
To open this panel, go to Divi > Theme Choices.
The very first thing you need to do after putting in the theme is to change the positioning brand and favicon. The location brand is your web site’s brand that ought to go within the header. The favicon is the small icon that seems beside your website’s title in browser tabs.
Different settings you possibly can change within the “Normal” tab are the next:
- Allow/Disable Divi Gallery
- Allow/Disable Weblog Model Mode
- MailChimp API Key
- Google API Key
- Present/Cover social media icons
- Allow/Disable responsive shortcodes
- Date Format
- Customized CSS
Along with that, you could have tabs to vary extra settings for:
- Navigation
- Structure
- Adverts
- search engine marketing
- Integration
- Updates
If you wish to know extra a few particular setting, click on on the query mark (i.e. assist) to the correct of that setting.
Customizing Pages with Divi Web page Builder
Divi’s Web page Builder function is the primary perform that permits you to customise every web page of your website. “Sections” are created from the Web page Builder. This may be full width or any customized width you need.
Inside Sections, you possibly can create rows with totally different column layouts. They could be a single column, two columns, three columns, and so forth.
In every column, you possibly can create “Modules”.
Modules are pre-built layouts that serve a selected objective. Some examples of Modulesare:
- Weblog
- Store
- Sidebar
- Different web site components you need to add to a web page.
See the video beneath:
https://youtu.be/dXXhpvvWOiE
Every Module has a settings web page the place you possibly can customise the design, add background photographs, change textual content kinds, and so forth.
The settings interface is simple to make use of. Merely fill within the wanted values, regulate the sliders, or click on to toggle. There are typically three tabs in every settings web page:
- Normal Settings
- Superior Design Settings
- CSS
If you wish to preview how the module will look with out leaving the editor, click on on the “Eye icon” on the underside of the settings field. When you’re performed with configuring the settings, you possibly can click on “Save & Exit” or “Save & Add to Library” (if you wish to use that very same module in different components of your website).
From this level, you possibly can click on the “Preview” button on the correct panel to view the complete web page on a brand new tab. When you’re proud of the way it seems, you possibly can hit “Publish” so as to add the web page to your website.
The Divi Visible Builder
The most recent replace to the Divi theme added a brand new type of builder: The Divi Visible Builder.
It’s a manner of modifying your website from the front-end. You may open any web page or put up from WordPress, then choose “Use Visible Builder”.
When the web page opens, it’s going to seem like the common web page you’ve created. Nevertheless, whenever you put your mouse over the corners of some areas, it’s going to present toolbars. These are the controls for sections, rows, and modules. From right here, you possibly can transfer, edit, duplicate, and/or delete modules by clicking the suitable icons in these toolbars.
You can even edit textual content in weblog posts and textual content modules:
When you’ve made a couple of modifications however want to undo them, simply put your mouse over the middle of the web page and a purple circle button ought to seem.
Clicking on this brings up the worldwide settings for the web page. The clock icon opens the “Enhancing Historical past” field the place you possibly can see an inventory of all edits performed. Now you can choose gadgets from this field or revert to a earlier web page setting.
Something that you are able to do with the non-visual web page builder, you possibly can just about do with the Visible Builder. The identical module, row, and part settings will nonetheless be obtainable both manner.
Adjusting Areas Between Sections and Rows
The primary time I used Divi, I wasn’t proud of how large the areas had been between sections. I didn’t know easy methods to change that initially. Lastly, I found easy methods to regulate the spacing utilizing the part and row settings.
To open the settings for a bit or row, click on on the three horizontal strains discovered on the highest left nook of the stated part or row.
Within the “Settings” window, below “Normal Settings”, you’ll see an possibility for “Customized Padding”.
When you’re attempting to make the areas between two sections/rows smaller, then you’ll want to set a worth to the “Backside Padding” of the primary part/row and the “Prime Padding” of the second part/row.
Strive a worth of 1px or 2px to see the way it seems and regulate accordingly.
Conclusion
There are various different cool issues you are able to do with the Divi theme, however these are just some fundamentals that you’ll want to know to get began. Utilizing Divi for the primary time isn’t actually that arduous since there are many guides and tutorials for this theme.
Elegant Themes supplies nice how-to’s and movies for first-time Divi customers. The Elegant Themes weblog additionally options suggestions and tips that aren’t normally seen within the Theme Documentation. As well as, there are various different websites that publish detailed tutorials for Divi.
Obtain Divi WordPress Theme
Most significantly, Divi makes it simple for non-coders such as you & me to design a web site with confidence, flexibility, and tons of customization choices. When you’re not expert with coding however need to create your individual web site from scratch, Divi is a superb alternative.
Have you ever used Divi earlier than? Are you utilizing it now? Let me know your expertise with Divi within the feedback beneath!
