7: Add Design

Disclosure: Some of the links on this page are ‘affiliate links.’
This means if you click on the link and purchase the item, I will receive an affiliate commission.

Ready to try out Divi?

This is Day 7 of the 10 day Build Your Website Challenge, design your own website. If you missed Day 6, on Building your Home Page, you can find it here.

The goal is that, by the end of 10 days, you’ll have your DIY website up and running!

Get out all your notes on branding & style from Day 1, because it’s time to design your own website!!

The best way to design your own website is to play around with the design.

On the home page you built yesterday, try swapping out the default colors with the colors you chose for your site. Change out the fonts, as well, and play around with font size. Let’s make a copy of the page first, so we don’t destroy all your hard work from yesterday. Then, we can swap out individual sections or the whole page if you like the new versions better. But, we also won’t risk losing your work as it is currently.

How to make a duplicate page to play around with:

>In your WordPress admin dashboard, go to pages > add new.

>Give your page a title (test home page, ie.) and click ‘use divi builder.’

>Three choices will appear, select the green one: ‘clone an existing page.’

>Your library will appear with all of the pages you’ve already made. Choose the original home page. That page will load, but it will be a copy of the original one. So, making edits on this copy will not affect the original.

Quick tricks for adding design elements to your website:

>images or graphics from Canva

This is probably the one thing that makes the biggest difference in your website- having good graphics. I get just about all of mine from Canva now. I also have Stencil, but Canva has replaced that, in my opinion. If there’s a free trial of Canva pro, I’d recommend using that to get all of the graphics, designs and images you need while building your site. That will save you money, even if you don’t need to have the pro version more permanently.

>create interesting backgrounds

In Divi, you can layer the backgrounds to create more interest. A solid color is great, but can feel a little simple and flat. I like to layer a more transparent version of my brand colors over an image (from Canva!). You can also add movement or gradients to your backgrounds, depending on what kind of style and feel you’re going for.

>gradients

I do love a gradient/ ombre effect! This is a very simple way to add a lot of design interest to your site. Basically, a gradient has one color on one end and then a different color at the other end, and they mix in the middle to create a shading or ombre effect.

I often use these when there’s a long page of content, like a blog post. I use the lighter shade at the top, and then the background color slowly changes to a darker color as you scroll down the page.

Gradients also work great for a background for when an image is too busy and a solid color is too plain. Using a gradient can be the happy medium between too much and too little in the background. I also like to use them on buttons, to create more interest and draw attention to my calls to action.

You can learn more about gradients and how to use them here.

>round corners

Many of my web development clients really like the square look. They often opt for sharp corners and 90 degree angles. And, on the right websites, those square corners can really pop. However, if you’re looking for something softer or more subtle, you can round off the corners and give your site a more gentle look.

Websites use HTML and CSS code, but with the Divi theme, you don’t need to write any code at all in order to make things like rounded corners or borders. In code, the level of roundness goes from 0 (completely square) to 100 (very round, basically a circle). Divi defaults to a roundness of 3. That means most of the corners will still look pretty square, but will just be rounded off a tiny bit to sofen them. You can leave yours at 3 or make them more square or more round, depending on the look you’re going for. You can even edit each corner individually, if you’d like. I one made a leaf shape for a client who was building an eco-friendly business by completely rounding the opposite corners and keeping the other ones square. Play around with it and find a shape that fits your business and your style!

>add borders

Like rounded corners, adding borders can help your images stand out. Just adding a simple 2-3 pixel border in a contrasting color can make your images pop. If you want something even bolder, you can make a thicker border. If you have a few different accent colors for your branding, this is a great opportunity to add those in and create interest and cohesion at the same time.

>add box shadow

The box shadow might be my favorite design trick of all time! This is how you can, with one click of a button, make your images and designs look three dimensional. I almost exclusively use the two on the top right, as those are the most easily recognizable. Sometimes, I do use the second one in the top row to create a glowing effect.

Once you have something you like, you can switch it out with your original home page design.

And don’t worry about if your design is ‘finished’ or not! You can always make little edits on the home page. Or, you can even repeat the whole process and create a duplicate page again to play around with when you have time. That’s the great thing about websites, is that they are always evolving. But if you don’t actually publish something, at least, then you’ll have nothing to show for your efforts!

Okay, that’s it for Day 7 of the DIY Website Challenge. Maybe your page doesn’t look exactly how you want it yet, and that’s okay. You can continue to add content and play around with the design as much as you want. If you’ve tried to look at your website on a phone or tablet or different sized screen, you probably noticed that it doesn’t look that great yet. That’s okay! Tomorrow, we’ll be doing mobile responsiveness on day 8. That’s fancy developer-speak for making sure your site looks just as good on tablets and phones as it does on your desktop.

Need Hosting?
I use & recommend
SiteGround

Related Posts

DIY Website Challenge

9: WordPress Menu and Footer

This is Day 9 of the 10 day Build Your Website Challenge, on how to set up a wordpress menu and footer. If you missed Day 8, on Building a Mobile Responsive Website, you can find it here. The goal is that, by the end of 10 days, you'll have your DIY mobile responsive...

read more