A couple of years ago after my last website redesign, I wrote a blog post called Creating my dream website with WordPress. With this most recent redesign, I thought it would be nice to do an updated version including parts of the rebranding side of the process.
There seems to be a pattern for each redesign I go through, it happens around every 2 or so years. This would be my 5th redesign since my first The Darling Tree site in 2008. Each website has felt like an expression of where I am creatively and personally, as well as the shifting and evolving vision for my business.
I hope you enjoy this peek into the process, and find some useful resources along the way.
Rebranding my Business
As I began thinking about how I wanted the new branding to look, there were a few important things I knew I wanted to do. Firstly, to expand the colour palette from primarily purples and blues. While I do still use them quite a lot (most people can still recognise my work from a mile away), the new branding was an opportunity to see what other colours I could integrate.
^ The inspiration and colour moodboard I created for the rebrand.
The last design I felt was very mystical and ethereal. This time around I wanted to go a little more refined but still keeping with a magical energy. And I also wanted to bring in an Aussie flavour, in particular, some Australia flora. I was interested in building up a few design elements that could work in various ways, something that didn’t work quite as well with taking elements from my last website and trying to expand on it elsewhere.
^ Sketching logo ideas, and more finalised illustrations on the right.
After creating the moodboard, I used Procreate to sketch some logo ideas. These are mostly combinations including the moon and stars, a snake, a waratah flower, gumtree flowers, peacock feathers and a female figure. There are a few variations and these can all be used on different items and still be recognisable. I did feel that this type of illustration style does show up in a lot of my work, as well as my oracle deck, so it would be something that would be relevant for the foreseeable future.
^ Coloured versions of some of the logo combinations.
The simple textured backgrounds are used quite a lot through the website and other graphics that I create. They also became the backgrounds for these floral drawings I created for the websites. These are all created within the new colour palette. Both the backgrounds and drawings were also created in Procreate. Something I do love with Procreate is that it uses layers in the same way Photoshop does, so you can easily change and manipulate things to suit any other purposes you need the illustration for. They were a lot of fun to create.
^ New illustrations for some prominent background areas of the new website.
In all, I was really happy with how the design came together. It allowed me to reflect on where I am right now in life and business, what feels good to me and what I wanted to express to others who happen to come across my path.
Redesigning my Website
I’ve changed a few of the features I’m using to see if they work better for me and might be useful if you are managing or looking at updating your WordPress website.
A quick word about WordPress and Squarespace. I did use Squarespace for a couple of years, at that time I found it very limited in what I could do with it. I understand why so many people use it and I know that the features have improved in the last few years. WordPress is my first love, is super flexible, and I think recent developments have made it have the same level of easy development options for the less technical user like implementing drag and drop builders.
Elementor Page Builder
The main change that I’ve made is trying out a different page builder plugin. I previously shared that I was using Divi page builder which was and I still think is a great product. Out of curiosity and enjoying trying different things, I wanted to give another highly recommended plugin a go, which is Elementor.
After taking a bit of time to familiarise myself with Elementor’s features and functions, I’m impressed and love the way it works. These page builder plugins have eliminated almost any limitations to beautifully customising your website, which used to be quite a big issue in the past with WordPress for non-developers. While I used to custom-built WordPress things, I did take a step back from coding when responsiveness became more and more necessary and it was harder to keep up with the latest developments. So even for myself, I greatly appreciate a plugin that requires the least amount of coding as possible. I just want to make the point of how much easier things are these days for anyone to be able to create what they need with their websites. Elementor does a brilliant job with offering so many settings and options that make it work brilliantly for desktop, tablet and mobile, and there are so many customisation options to cover almost anything you want to do.
One reason that I did want to try Elementor is to see if it was more light-weight and faster than Divi-built pages, and I think it is. Divi seems to have a heavier load of coding in templates, as well as inputting code that doesn’t seamlessly switch back over when you change to a different theme or plugin. Elementor works within the WordPress editing framework in a way that when you ever decide to change the theme or stop using the plugin.
^ A screenshot of how the Elementor page editor appears when editing my homepage.
When editing a page with Elementor, you have most of the editing tools show up in a left panel. The sections, rows, columns, and modules all have drag and drop capability. You get a live preview of the changes you make, as well as a pretty close live preview of how the website will look on tablet and mobile, although not 100%, you still need to check on those devices. It does allow you to target and adjust your settings for tablet and mobile which is fantastic! You can make your site look exactly how you want across all devices.
There are many modules you can add to your page quickly and easily (the below is just an example of some, not all). The ability to customise pretty much every little detail has to be my favourite thing with Elementor. It will take some practice but it won’t take long for you to realise how powerful it is, especially when you love finessing your design and the little details.
^ Some of the module you can easily add to any web page and customise.
When I was using Divi I was using both Divi theme and page builder together. This plugin works with most up to date WordPress themes. It’s not crucial to have any theme in particular because you can use this plugin to customise everything on a web page. I do use the GeneratePress theme now because it’s simple, fast and lightweight, but the peeps at Elementor actually just released their own theme called Hello. So if you do need a theme if you use this plugin, it’s a great match being from the same creator.
The instances where I did custom code things were only with adding the top notification bar. In this case, it was simply because I couldn’t find a notification bar plugin that worked how I would have liked it to, but this isn’t an issue related to Elementor.
There is a free version of this plugin, but Elementor Pro includes more modules and templates amongst other things.
Random Content Plugin
A feature I added to my site in the last redesign and still have is the magic guidance page where you can draw a card from the deck online for a quick and free reading. This is the most visited page on my website, and I’ve been asked many times about how I create it. The answer is the Random Content plugin. I use this plugin so that the URL is always the same, but when you visit the page different content loads into the page. In this case, it’s the image of the oracle card and its meaning.
Using the plugin, you create a group of content pretty much in the same way you create WordPress posts. It’s the content you want to show up within a section of the page, not the whole page itself. Below, you’ll see the content within the thin blue-lined section is the content that changes with each page load. So when you have created your group of content, you copy and paste a shortcode for the group into a text module within the page you want it to show up on.
^ The area in the thin blue-lined rectangle is pulled from a group of content.
When I was initially planning to create this page on my site I thought it was going to be a lot more complicated. But luckily, this plugin made the process easy. It will just take some time if you are creating lots of different pieces of content to load on the page, in my case I had to create 55 pieces of content for the whole oracle deck. But the setup was pretty straight forward.
I mention this plugin as it’s the best option I have come across to easily clone your website, particularly if you are making some significant updates to it. It’s basically a one-button click, and everything is duplicated nicely to a second cloned website. This includes all the themes, plugins, content and database from the site you clone. So once you have made the changes to your cloned site, the next thing is the plugin allows you to then push it live to your main website.
You can create as many staging sites as you like with the free version of the plugin, but you will need the Pro version to be able to transfer a staging site to the live site. The one thing to keep in mind is that any new content or orders created on your live site while you are working on your cloned site, they will not update on the cloned site. Meaning that if you just push your whole cloned site to the live site, anything new from the live site will not stay. So you need to make sure you choose the right settings when pushing your changes. And always back up everything before you do anything drastic! It sounds a bit scary I know and this is more for people who know a little more about WordPress, I just wanted to share because this plugin can make an even more complicated process a bit simpler and quicker.
I’m still using a few of the previous plugins I mentioned in my older post. I use Woocommerce for my online store. I have switched from Australia Post to Sendle (a 100% carbon neutral service based in Australia) for domestic and international shipping which integrates with Woocommerce and suits my needs pretty well.
Woochimp and Mailchimp for WordPress continue to be my go-to for email marketing integration. And Instashow, which is now named Instagram Feed, is still my preferred Instagram plugin. Two of these are available on the Envato platform. I’ve just discovered that Envato has released their new Elements subscription, so if you do use a lot of cool plugins from there as well as needing graphics, templates, photos or videos, this could be a great option.
While this isn’t currently setup, I thought it might be useful to know how I plan to set up my next course on my website. This is purely based on how much I loved the simplicity and ease of how Paul Jarvis delivered one of his courses. It uses Restrict Content Pro to create a logged-in student area where the lessons are presented, and his own plugin WPComplete to help students track their progress through the content. Simple but effective!
I hope all this info has been helpful. Do let me know if you end up using some of these, I’d love to hear how it goes.
Some of these links are affiliate links. I don’t use them often and only if I genuinely love a product and have used and tested it.