Okay. You have your domain, WordPress is installed. Woo hoo….now what?
Now you need to make that website your own – that means designing the look and feel of it to suit your brand. You’re going to need logo image, a color scheme, pictures related to the site’s purpose, page content, blog posts (optional but highly recommended) and some basic SEO information about how to optimize your site.
Tips of the Trade
Here are a few explanations to help you along. Don’t let the acronyms scare you – this isn’t brain surgery. Once you know the terms, if you get stuck or confused – just Google it or use the free resources in this article to figure stuff out.
Cascading Style Sheets aka CSS
Style sheets are included in every WordPress theme. They are text files, named with dot CSS at the end. They tell your browser how you want your website displayed, setting standards for fonts, colors, spaces around blocks or columns. Here’s an example of basic CSS:
What this means in English is that any content referenced as <h1>heading 1 </h1>will be the color black, be 32 pixels big and be aligned to the left. You can make it bigger or smaller by changing the pixels, swap out the color, center the text or align it to the right.
You can go play around with some CSS examples here. Click a link, see what it looks like and then change values to see what happens.
You can also create a class that will apply to a specific element. An example might be:
You might apply this class to a paragraph <p class=”blue”> text here </p>. Whatever you put between the <p> tags will be set in a blue box, the text will be white, and it will add 20 pixels of space (padding) around the box.
The big takeaway on CSS is any theme you pick should give you the option to add custom CSS without having to edit the stylesheet files. (FYI – any changes you make standard stylesheets will be overwritten when the theme is updated.)
Hex Colors and RGB
The colors used on websites are called Hex Colors. (I know, I know.) They are typically displayed as numbers: black, white or red for #000000, #FFFFFF or #FF0000.
The most important thing about colors on a website is that they may look different on different screens. That nice periwinkle blue on your laptop screen might be a purplish gray on someone else’s desktop.
Web-safe colors do exist, but they’re limited and tend to look a little dated. Better to use current colors and live with the variations.
RGB colors specific the amount of red, blue and green in a color, so black would be (255, 255, 255). RGB values are great for creating tints, hues or transparencies by adding a value at the end. (255, 255, 255 0.4) will create a light semi-transparent gray background.
For the most part, the images you use will be jpg files. These files are compressed to reduce the size of the image. Not the dimensions of the image, but the size of the file itself. File size, particularly images, can slow down your site’s performance if they aren’t adjusted.
Sometimes you may need to use png files. These files typically have transparent backgrounds and they aren’t compressed. The file size on an image saved as a png might be 3 or 4 times bigger than a jpg file. Use them sparingly and only if specifically needed, i.e. a logo image that needs to be high quality and sits on a colored background.
Right Click to Inspect
If you use the Chrome or Firefox browser, you can look at what’s behind the display by right clicking on a website. Choose Inspect Element to see the specifics for a section of a site – yours or someone else’s.
This will show you the styles associated with the section you chose and can be very helpful in modifying your own theme’s CSS. Every theme has their own schema to label elements, so seeing those identified in the code is really helpful.
You can also choose Page Source which will display the code for the entire site in a separate tab. That’s probably more information than you need and copying someone’s site code is definitely not okay.
Free Website Resources
There are some excellent resources for self-paced learning and ongoing answers to “why the heck is it doing that!@###@!” questions that will come up on a regular basis. Just so you, that happens to everyone, including experienced web designers and developers.
Don’t get frustrated, laptop throwing is not advised. You are now officially part of the “Sh..bleep Happens” club. Welcome to our world.
Self-Paced Tech Tutorials
The W3 Schools are great for beginners who may not want to become a programmer but what to have a better understanding of how their site works – or even how the web works in general. You might be surprised that with the right tutorial how much easier it is than trying to figure it out on your own.
W3 Schools keeps up with browsers, servers, and versions of applications and languages. It’s a resource you’ll go back to time and time again. The search function will save you tons of time when you just can’t remember how to add an iframe for a video.
Every topic has a list of references and better yet, samples of code you can change to see what happens. Just that alone is worth its weight in gold. There are paid classes on sites like Udemy or Coursera, but why pay for courses when you can learn for free?
There are certain sites that act as discussion forums on technical topics. Stack Overflow is a large community of experienced web developers who really know their stuff. You can post questions there and members will respond to them.
Just to be clear, this is definitely a technical group, so the hardest part may be knowing what questions to ask to get the answers you need. You have to register for an account to post anything, but it doesn’t hurt to lurk for a while to see if you’re comfortable participating.
If you’re a Facebook user, there are several WordPress Groups you can join. There are groups for beginners, intermediate and advanced users – even groups just about plugins or performance. You might enjoy the camaraderie of groups and they are good places for beginners to build their skills.
Pretty soon you’ll be helping the newbies that come behind you.
Choosing Your Colors
If you already have colors in your logo or print materials, upload it to your media library. Then you can use a color picker to get the hex number. (You can add a color picker extension to the Chrome browser, so you can snag the hex codes from any color you see online.)
At Color Hex, you can look at color schemes, palettes, what are the most popular colors right now. It’s a great site. There are sites to convert hex to RGB too – in case you need a transparency. A really cool site Color Hexa lets you blend colors and build gradients to really customize your color scheme.
Divi Shout Out
We’re big fans of the Divi theme for lots of reasons, but when it comes to managing colors – Divi makes it so easy. Instead of keeping a list of hex colors in a text file – you can set the color scheme, and have it applied all across the site.
When you install Divi, go to right to Theme Options – you’ll see the standard colors right away. Keep the black and white, but just click on the others to change their hex codes to the colors you want. You can even use a slider to find RGB values and save them too. It’s awesome.
And if you want cool design ideas (along with some great freebies,) you can’t beat the Divi Blog – there’s a new article every single day!
Let’s start with what you shouldn’t do – use images that aren’t in the public domain. When you search images on Google, it just pulls up every relevant image, without regard to copyright. Saving images off someone else’s website is a no-go, too. But not to worry, have we got some pictures for you.
Our first favorite is Unsplash.com. The images are breathtaking, and they are high resolution, so you can use them as part of a marketing campaign that includes print. That said, you need to compress the files for the web or your website will load at the speed of roadkill. Use a free online image editor to reduce the file dimensions and size. Whenever possible, get your file size down to under 300 kb.
The next option is pixabay.com. This site has photographs, vector graphics, illustrations, and even a few videos. We highly recommend you sign up for an account, otherwise, you face a captcha almost every download. Pixabay doesn’t bomb your inbox – so there’s no downside. Though there are some high-resolution images, the majority of the files sizes are web ready.
One of the coolest new sites for videos that play full screen without pixelating or jamming up your site’s speed is Coverr.co. The videos are gorgeous, but they have no sound or voice over. You can look at the videos in standard size or as a “cover”. Download the video as a zip file and upload the file to your site.
If you have video editing software, there are MP4 and WebM files, you can mess with.
Quick tip about using videos you’ve taken on your own: set up a YouTube account. Upload the video to your channel and watch it before you do anything else. If you’re happy with it, click on Share and choose Embed. A menu will pop up with code for an iframe – that’s what you’ll copy and paste into your own site. Unclick “Show Suggested Videos” – you have no idea that stuff that YouTube considers suggestions.
Also, be aware you can’t just add your favorite song to the video– even if you own a digital copy of the music. YouTube can flag it as a copyright violation and it can keep the file from playing on your site. YouTube does have an audio library of free music, it’s a little “muzak-ey” but it’s free and legal.
Look Around the Web
The best free thing you can do is pay attention to the website’s that you like, that work well, that look good, that load fast…okay, you get the idea.
Look at sites in your industry to get ideas. If you have a life coaching business, don’t just look at local competitors – pick a different location and search there. That way you won’t end up building a site that looks too much like another local life coach.
The last thing you ever want to do is duplicate someone else’s work. It’s great to find sites that you like and features that are cool – but never copy the source code of someone else’s site.
The last awesome freebie we can offer is a site called Built With. Copy and paste a URL into the search box and the site will tell you everything from the theme being used to the plugins and the widgets.
Though Built With has a ton of freebies to play with and great knowledge base, their pricing plans are bit hefty. But using the free tools from a top provider of lead generation and sales analysis is pretty sweet deal.
Web people online are unbelievably generous in sharing what they know, helping to solve problems, answer questions, share films and audio and imagery. You’re a part of that now. Take what you need, learn, grow, learn some more.
Have some free resources we missed? Let us know your favorites!