A Wickedly Divine Makeover

Amy Valentine

Amy Valentine, Web Designer, NZ

As a long time user of Divi by Elegant Themes I already knew how versatile this amazing WordPress theme is. With so many fantastic new features added to the theme I had been looking for an excuse to put these features through their paces and see what I could create.

While there are many free Divi layouts available that are great starting points, I was determined to create a redesigned site that was unique and reflected who I am instead of a standard ‘web designer’ layout. Now in it’s third incarnation using Divi, I’m pretty happy with the final result.

I found myself using several Divi tutorials from the Divi community and in this post I go through all the main ones I used to give my site a little bit of the ‘wow’ factor. I hope you find these useful and give you confidence to try a few yourself.

The Tutorials

When I built Elegant Divi Layouts earlier this year I fell in love with the new gradient options and the hardest part of Wicked Website Designers redesign was limiting myself as to where and where not to use gradients. Less is more as they say, but I think I have achieved a nice balance. 

First I implemented an Elegant Themes tutorial to create the full screen menu. To achieve the gradient over the image I sourced an amazing mountain view of New Zealand, where I am based, from my favourite stock photography site Deposit Photos, and added the gradient in PhotoShop first.

Full screen menu

For the homepage hero I really wanted to use a slider but not have the text ‘pop-up’ with every image load, so I purchased Josh Hall’s layout for a fixed text/button over sliderThis is ideal for a strong title or call-to-action that you want to have stay fixed over rotating Divi slider images.

Fixed elements over slider

The amazing Michelle Nunan from DiviSoup has published a vast amount of excellent tutorials on her blog, as well as some great layouts and tutorials in her Academy Club Membership. I used several of these tutorials and found her code to be very clean, easy to customise and every layout I used worked perfectly. I highly recommend joining or taking one of her academy courses to learn how to use CSS.

In the club membership she released a layout for showcasing testimonials with an Overlapping Testimonial Slider. I used this on desktop only. This layout is not mobile responsive so instead I used the plugin Strong Testimonials and hid the overlapping testimonial slider from portable devices. 

Overlapping Testimonial Slider

Below my homepage hero slider, I customised the Fullwidth CTA from her Ventura Divi child theme. This is a great way to add a slim call to action directly below the hero section and I love the gradient swap on hover opposing the slider gradient above.

Full width hover call to action

Another great club member’s tutorial is how to display a CTA on image hover. I spent quite a bit of time customising this as I wanted the hover to have a gradient too but without too much effort I think it turned out well.

CTA on image hover

One of my favourite layouts in Michelle’s Club is her multi hover effect blog layout. I wanted a blog landing page that was very different from the ones I had seen on various marketplaces or freebies and this one was perfect for what I wanted to achieve. 

Multi hover effect blog

On the about page I used another club layout for hiding the person description until the image is hovered and then revealing that description in a different way.

Person Module Perspective Hover Effect

Michelle also runs the Divi Soup Facebook group and has posted several CSS snippets that I saved for future use. Michelle is an absolute goldmine for valuable CSS and information, and always provides excellent support.

You may notice the scrollbar is purple and not the default browser scrollbar, this was a snippet in the member’s club. The scroll back to top icon is also customised using a tutorial and the heart icon in the footer credits was an HTML snippet she kindly shared in her FB group.

CSS Snippets

I added a few animations to some pages but kept this to a minimum for portable devices, and created a custom Blog post layout instead of the default view. Once I had the layout completed I saved it to the Divi library so I could easily update all previous posts to the new layout, this is a massive time-saver!

The very first tutorial I used was an oldie but a goodie from Geno Quiroz, how to float an image between sections. I used this for the author image and title on the blog posts.

Float An Image In Between Sections

Divi Plugins

Editing the footer is a common query in the Facebook groups I frequent but for me the easiest solution is to use the plugin Page Builder Everywhere by Divi.space. SJ James released this plugin a couple of years ago and it’s one of the most valuable resources in my Divi toolbox. 

“With Page Builder Everywhere, you can craft each section, page or element, with the Divi modules and then add your custom layout via the Widgets area. You will be afforded the same drag and drop modular functionality of the Divi Builder in headers, footers, and sidebars, as well as on 404 error, category, search, archive and WooCommerce pages.”

After playing with the portfolio module and a fair bit of frustration at the limited options available, I chose to purchase the Divi plugins DTS Filterable Portfolio Grid Pro. Super simple to configure and it does exactly what I want without having to spend much time adding CSS.

DTS Filterable Portfolio Pro

WordPress Plugins

I’ve always previously used Elegant Themes Monarch plugin for social sharing but I recently discovered Easy Social Share Buttons for WordPress which offers some lovely style options, and great analytics tracking. I opted for an unobtrusive style below all posts.

For the comments I prefer nesting those in a closed toggle, but placing a shortcode inside a toggle module is a known bug, so I opted to use the accordion module instead, and placed the Resources info in there too. To achieve this I used the AC Shortcodes plugin.

One of my most used plugins for posts is Related Posts (formerly Yuzo Related Posts). With a little CSS this plugin makes displaying related content easy and can be adapted for portable devices. 

Related Posts & Comments

Images & Mockups

For every project that I feature in my portfolio I create mockups to showcase the design. Elegant Themes wrote a great blog post on where to source some fantastic mockups for your own web designs but my preferred provide is mocup.com. With some amazing stock photography as well as PSD files with smart layers, you can easily replace the image with a screenshot of your own. Checkout their freebies page for some awesome free device mockups.

Conclusion

So how long did this take? 7 days…yes just 7 days of a few hours here and there and the entire site was redesigned. This was only possible because of the incredible Divi theme and the ease of using the features and new options. I even found myself using the front-end Visual Builder for most pages and projects.

If you are not already in love with Divi or not yet an Elegant Themes user I cannot recommend their products, services, posts and tutorials highly enough, you’ll be so glad you joined the Divi community. 

Please feel free to share this post with others who may find the information useful and I’d love to hear your feedback in the comments. Thanks!

Amy Valentine,
Wicked Website Designer

More Resources

Divi Tutorials – by the team at Elegant Themes – this should be your first go-to resource for learning how to use Divi.

Divi Video Tutorials – by Elegant Themes. Perfect for a quick overview of each module, plus lots more video tutorials.

Divi Theme Examples – site showcasing websites built using the Divi theme.

Quiroz.co – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom CSS snippets and Divi tutorials.

BeSuperfly.com – By Nathan Duvall, Divi child themes, plugins & layouts

DiviSoup.com – By Michelle Nunan, creator of the Divi Academy, Divi Club Membership and Divi Tutorials.

Divi.space – by SJ James, creator of the free Divi child theme maker.

Comments

0 Comments

You may also like

Take your WordPress website to the next level

Get a free no-obligation quote today!