When You Know Nothing, How to Build a Website
One of the reasons the blog got a makeover truly was the yadda yadda of yesterday – writing, word recovery, all that cerebral stuff. But, there’s another reason. I’m a nerd, I like techy things, and I actually like fiddling around with web design. So, when my brother posted on Facebook that he was looking for an easy, cheap website solution for his wedding/event band, I raised my hand, and he “hired” me – i.e., I owed him money (not much, just my half of mom’s bday present), and it was a good way to wipe the slate clean. He was skeptical, and doubted my English major/lawyering skills would translate into web design, but little did he know . . . I am addicted to DIY tutorials. And, if you can DIY the curtains in your bathroom, you can DIY a website.
Are you the Jon Snow of website creation and design? You know nothing? Well, after a few hours on youtube, you will know enough to get yourself started.
First, you need to find a web hosting service, which should provide you with a domain name registration, domain hosting, and WordPress installation. I use Dreamhost, my brother uses StartLogic. Does it matter? Sure, it does – if you’re a professional working for a client, stuff like memory, and databases and ftp and all of that stuff come into play, and you need to know what makes your website run, not just your WordPress install. But, if you’re just building a personal website with WordPress, the most important thing is customer service. Because you must accept from the outset that things are going to go wrong, either with your WordPress install, or with memory limits when you first start using your site, or any number of things. I’ve only had to call Dreamhost once about my website. Startlogic, well, I was on the phone with them for hours for three days getting the WordPress install to function. I can’t really tell you whose fault that was – my brother, in his attempt to manage his own domains, had so much guck in there (I could explain what all that guck was, but it’s no worries for you really) that I can’t fault Startlogic, and the technicians I spoke to were very helpful, and understood the importance of a small business being online, now. The takeaway from the guck is that starting fresh is the easiest way to go, and once you start overwriting something existing, life gets more difficult, and that customer service is important.
So, step 1. Get web hosting, 2. register your domain name, 3. install WordPress. Do you have to use WordPress – of course not. There’s Wix out there, and Squarespace. There’s building your own code. But, we were on a budget, and there really isn’t a cheaper way to go than WordPress. With Startlogic, for instance, web hosting is $2.50 a month (I think), the domain name and registration are free, WordPress is free. Everything else on top of that is decoration – so you have to decide if you want a Home Depot Christmas tree for your website, or a Martha Stewart decorated forest. For instance, StartLogic partners with Mojomarketplace, and for additional fees ($99 and up) you can purchase a custom theme, professional installation and customization. If I had failed, that probably would have been the way my brother would have gone. But, since I figured it out, we stayed in budget – which was the Home Depot Hanukkah bush.
So, this is what WordPress looks like –
WordPress is the house for your site. It’s a container. Your theme is your framework, and works like your basement and the shell of your house, it powers your house, and gives your site it’s organizational structure. It is the backend, what your guests never see. All you will have to do on the backend is set up the organization of your website – things like menu structure. The living area, the thing that makes your home pretty and livable, is the front end – what people see when they hit your site, and customization is based on visualization. I don’t know anything about backend creation – I trust the theme, and follow the instructions. The front end, on the other hand, is easy peasy now that there are drop and drag page editors out there. That’s what I mean by visualization – you want a photo – you drop it on the page. You want some space between a text block and an image, you drag a spacer on the page. You want to change your font, you click on the font, and you can change it. There are many drop and drag page builders out there, but I went with Elementor – it’s free, and it’s easy, and there are so many youtube tutorials for you to watch that can take you through your website creation, step by step. If you want to spend some money, you may want to think about Divi, which is a combination Theme/Page Builder, which requires a subscription fee to Elegant Themes, which if you’re looking to build more than one website, might be the way to go for you.
So, Elementor is your front end editor – the visual design. But, we can’t forget about that basement – and Elementor is not fully compatible with every theme. Based on the tutorials I watched, and the ones I’m going to recommend in a second, I used this theme – OceanWp. From that theme, I made this website – Main Line Affair. Think of OceanWP as your sketch, and Elementor (a plugin, i.e., a tool for your website) as your paint. OceanWP gives you your structure, Elementor gives you your design.
So this is the theme customizer (this is this website’s theme – Essence – not OceanWp – I didn’t feel like heading over to my brother’s site to take a screenshot. It looks very much the same, but more options, which is why OceanWP works so well with Elementor – many many customization choices) – lots of settings for the way your site works, not how it looks (other than to tell wordpress where to put stuff, like your menus,headers, and footers) – it’s your framework.
And, Elementor – on the front end –
See the box that says drag widget here? The two columns on the left are widgets – you drag the widget box onto your page, and voila! That’s it. Or see that little folder? You click on that, and it will bring up a template library – more on that below.
Are you scratching your head, what’s a widget? So, if WordPress is your house, and your theme is your framework, plugins are your lightswitches, and widgets are your furniture. Plugins are tools you install to give your website more functionality. Widgets are areas of information that provide visual content for your blog. Widgets are often, but not always, powered by Plugins. So, the plugin is the lightswitch, the widget is the lamp. So, if you look at the side bar if this blog, you’ll see three fields – About Me, Recent Posts, and Instagram – all three of these content areas (widgets) are configured and powered by plugins. Anyway, you can google all of this terminology and you’ll probably get better definitions than my Good Housekeeping version of website design. This house analogy works for me, and maybe it’ll help you conceptualize how all of these things work together. If not, forget I said, and use whatever methodology works for you.
So, I’m not going to go through the steps to customize OceanWP with Elementor – I’m just going to link to the videos I watched.
First, I watched Tyler Moore‘s How to Make a WordPress Website in 24 Steps. In this video, he talks about all of the things I glossed over – web hosting, WordPress installation, theme installation, and theme customization. I pretty much followed this step by step when I made my brother’s site. I watched a part of the video, paused it, did a step, moved to the next. I was amazed at how easy it is to have a functional website up and running in a matter of hours. One of the best little nuggets from this tutorial is templates – there’s no need to reinvent the wheel anymore. You can just drop an entire Elementor template onto your WordPress page – and voila! A working website. Of course, you don’t want a cookie cutter website, but it’s a good outline – use what you like, delete what you don’t. Mix up your templates. Make it your own. Not only are there templates included with the free Elementor plugin (you can go Pro, pay and get more, as well as more drop and drag features), but there are other template resources out there. Free? Go to Tyler’s website, and he has a bunch of nice free ones. Want more options, and are willing to pay – try the subscription service Crocoblock, which Darrell Wilson talks about in his similar tutorial, How to Make a WordPress Website – 2018 – Easy and Fast! This video is a lot of the same steps/information from the first video, but it’s the repetition that makes the information sink in, and gets you more comfortable with what you’re doing. Darrell Wilson also has a Skillshare class that has a three hour version of this tutorial. I didn’t watch that. I felt like I had the hang of it.
So, here it is in a nutshell –
- Find a webhost
- Register your domain name
- Install WordPress
- Install OceanWP from the WordPress dashboard
- Install Elementor from the WordPress dashboard
- Customize your site, from an organizational stand point with OceanWP’s customize menu, and from a visual design perspective, with Elementor’s drop and drag functionality.
Now, you can add your bells and whistles. Darrell Wilson recommended Logomakr.com to make a logo. I used this free service for this blog (although it was something I easily could have done on my own in Photoshop, but since I wasn’t at home I used it. It’s easy, slick and there are lots of design options – all for free!). The only money I plunked down to finish the site off was $25 for Slider Revolution, which creates animated sliders. I watched this tutorial from NYC Tech Club, How to Use the Revolution Slider Plugin. This is a really long tutorial, but in it, he walks you through the creation of four or five sliders, and in doing so, you get a good overall lesson on how to use the Interface, and the plugin’s capabilities. And, again, the key take away was templates. You don’t need to recreate the wheel, you can just import a slide from a template, switch out the template content for your own, and voila! Your website now has movement.
More decoration? Not a photographer and need photos – in the more info section of Darrell’s video he provides links to a bunch of photo sources. I’ve used Pixabay for digital art journaling, and it’s easy to use. The only danger in using stock photography is that inevitably, someone else has used it on their website as well. With my brother’s website I thought about using wedding photos from Pixabay, since it is a wedding/event band, but since the band is an east coast entity, I went with a Philadelphia theme instead, and used my own photos.
If you don’t want a full blown website, and you just want to blog – just install WordPress on your domain, pick a theme, and write! That’s it. If you want more control about how your blog looks, every theme has some kind of customization available – and you can use it, or not. As I mentioned in my last post, I installed a new theme, and I totally cheated. I splurged with $20ish, and bought this theme, Essence, from Lucid Themes on Etsy. Why did I do this instead of going the OceanWp and Elementor route? Pretty much because to get the blog layout I wanted, I would have had to upgrade to Elementor pro (different drop and drag blog layouts are only available in the pro version), and it was cheaper just to buy a template that did it for me.
So, that’s the bare bones version of creating your website. Once it’s functioning, there are other things to explore – newsletter services, SEO customization, pop ups, testimonials – so many things. And, in this day and age, there’s a youtube tutorial for every single one. And the good thing about these youtube tutorials is they are directed at the know nothings, like me. Professionals don’t need these videos, they’ve got certifications, and real world experiences, etc. These tutorials are designed to for the beginner who needs help, and are designed so that you land on the creators web page, and seek out his/her services in some way. Youtube is just more marketing, but that doesn’t mean it isn’t an educational opportunity as well. Just know that when you watch these videos, you are watching a commercial. And, you can take it that way, go down the link rabbit hole, and buy products, or just use them to learn how to DIY, just like your curtains, or your bookcases, or you sweaters, or whatever.
And there you have it.
Go forth and create my friend. And if it doesn’t work out, no worries! There are a gazillion resources out there for you.