WARNING: I’m a website copywriter, not a designer, so I’ll probably use incorrect terminology or misrepresent a concept somewhere. You’ll get the overall idea.
I like going from feeling like a dummy to feeling like a smarty when learning new things. I experienced this when I created my previous website and used a WordPress Theme (this controls the layout and look of a WordPress website). I became just smart enough to create a website I was happy with.
For my new website, I wanted something that gave me more control, so I used Divi, a WordPress Theme that comes with the Divi Builder. The builder allows you to create and control themes or pages using an interface that looks like an outline of website elements or by using the visual builder, which has an interface that looks like your website. (If I could have, I would have hired a website designer.)
Understanding webpage structure
Divi helped me think of webpages in terms of their structure. With Divi, you can create sections (areas you want grouped together), rows (with columns) within those sections, and widgets (an image, text, button, etc.) within those rows.
I learned more how these relate to each other from changing design settings, like margin (where an element starts) and padding (the amount of space between a margin and inside the element). Also, from messing up these settings. A lot. I made some fixes that are the equivalent of duct taping things together. But, I found a better fix for some of those issues later.
Adapting for different screen sizes
I spent most of my time tweaking things to fit a desktop, tablet, or mobile view. Headings and body copy sizes often need to shrink as device screens get smaller. As a website gets smaller, it also has to get simpler. As you get closer to a mobile screen size, some images and effects may need to disappear.
Thankfully, I found an easier way to do this by using a plugin (a program that adds website functionality) called the Divi Responsive Helper by Pee-aye Creative. There is a small yearly cost, but it’s worth it.
Big impact of small design changes
Elevating the look of your website, guiding a visitor to taking a certain action, or highlighting the right element is often accomplished with small design changes. This is something I understood but didn’t appreciate as much.
My website looks pretty simple. But an example from it would be the pointed section dividers used to guide your eyes to the next section (and hopefully convey a sense of being “connected” to reflect my business name). Also, the box shadows added to some of the text elements and buttons that help them better stand out individually instead of fading into the flat look I originally had.
Be more of a smarty when learning Divi by checking out tutorials from Elegant Themes (Divi’s creator) or courses from Pee-aye Creative.
If you want help from a copywriter who writes with your website structure in mind, adapts your message for different pages, and makes word choices that can increasing your conversions, then Contact Me.