Recently, I’ve been busy redesigning the website for Socialexis, my wife’s fantastic content marketing firm. I used the Corsa theme from UpSolution. It’s a modern, single-page parallax theme, which is perfect for the Socialexis brand.
Here’s a screenshot of the new website:
The screenshot below shows the old website. Whilst there was nothing wrong with it per se, it wasn’t particularly exciting and didn’t represent the creativity and passion at the core of Lexi’s business. Since this original website was built, the business has also focused more on blog management and content creation, so the message needed tweaking. Hence, it was a good opportunity to also redesign the website.
Here’s a screenshot of the old website:
Hopefully you’ll agree it’s an improvement. Check it out here.
Handy hints from the process:
I designed the site locally on my computer first, before pushing it out into the wild on the server for everyone to see. This allowed me to experiment, make mistakes, break things, and not worry about any adverse affects. I did this by setting up a virtual server on my own computer using MAMP (Macintosh, Apache, Mysql and PHP). This tutorial explains how to do it.
Putting a red border around every element in your website is a really helpful trick when positioning all of the elements in your page. The box method and floats can sometimes cause headaches, when you just can’t work out why things are looking the way they are. Putting those red borders in can give you that insight. Kinda like visual debugging…
border: solid red 1px !important;
Lastly, a hint for the Corsa theme itself: how to make the leading image half-height, rather than taking up the entire screen. I didn’t realise there was an option baked into the theme (a simple button to click!), and spent a frustrating hour trying to achieve this with CSS in the child theme. So, save yourself the time, and turn off the FullScreen Home Section in the Theme Options, as shown here.
A list of a few useful websites that helped with the redesign:
- This brilliant tutorial website and accompanying book, from designer Shay Howe, helped me get back up to speed on the latest HTML/CSS techniques. Best HTML/CSS resource I’ve come across.
- Helpful color scheme picker called Paletton – check it out.