I am happy to introduce the first in what we hope to be a broad series we call Design Stories. In this series, we give you designers the chance to showcase your Elementor powered websites and to explain how you had created them.
This week, our story focuses on webdesigner Joel Eade, who created a really fetching product page for the seed gift card brand Sow n’ Sow. He explains in detail how he went about creating each and every section of the homepage.
So, without further ado, here is the Design Story of Joel Eade.
Building Sow n' Sow in Elementor
// Design Story by Joel Eade
Sow ’n Sow has been a long time client of mine.
Michelle had built the original website herself and did a great job of customizing a ThemeForest theme to suit her needs, but she came to me for help with a few technical changes.
The first thing I noticed about Michelle’s old site was performance. We changed the website hosting from GoDaddy to an Australian based host. This improved things a lot, but performance was still sluggish and the website was bloated.
Michelle and I liked the style of the old site, but wanted to breathe new life into the design.
My usual process before Elementor was to sketch a rough design on paper, create high quality mockups in Photoshop, then once approved by the client start building the site using Advanced Custom Fields and a starter theme.
Since using Elementor that process has been flipped on its head, and I can now be creative in the browser, saving time and getting to the final product faster. That was the case with the Sow ’n Sow website.
I’ll break down the design of the Sow ’n Sow home page design into the Elementor sections.
Section 1 – Hero
The hero section is full-width with a fixed background image and a gradient overlay over the background image fading from transparent at the top to white at the bottom. The content aligned to the bottom. There’s a Heading element and a scroll-down arrow that anchors to the content.
Section 2 – Products
All the section dividers are courtesy of the text Separator element from the Elementor Addon Elements plugin, but with a custom icon added after the text using some CSS and an SVG image.
Next, comes the products care of the Elementor Pro Woo – Products element. The old theme featured a flip-box effect for the product images which for the products being sold by Sow ‘n Sow was a good solution as it allowed visitors to view the front and back of the seed packets.
To achieve the flip-box effect I used a modified version of the WooCommerce Product Image Flipper.
The plugin gave me the functionality I needed but the transitions weren’t quite right so I rewrote some of the CSS based on David Walsh’s blog post, CSS Flip.
Section 3 – About Sow ’n Sow
I’ve embedded a Vimeo video using the Video element. Below that is a Column element containing two columns.
The left column contains a Spacer element and the column has a background image as opposed to using an Image element within the column.
I did this so the image can stretch proportionally to the height of the column and is always roughly the same height as the text in the right column so it looks balanced.
The column has a CSS transform to rotate it slightly to give it some character. There’s also a border on the column to make it look like a Polaroid.
The section has a negative bottom margin to pull the next section up underneath the image of Michelle.
Section 4 – Custom Designs
A two column section with text and a button in the left column and an Elementor Pro Flip Box element with the 3D effect switched on. So cool!
Section 5 – Find a Stockist
A full-width section with a blurred typographical-map background image. There’s an Icon element then a Column element containing text and a button. Simple but effective.
Section 6 – Instagram Feed
I used a gray cardboard background image to keep with the earthy vibe. An Elementor Shortcode element containing an Instagram WD Widget shortcode was used to bring in Sow ‘n Sow’s Instagram images. I applied some CSS to the images and loading icon.
Section 7 – Newsletter Sign Up
This section features an Elementor Shortcode element containing a MailChimp for WordPress shortcode. I’ve added a dollop of CSS to make the form look the part.
Section 8 – The Footer
I’ve used Elementor for the site footer, as I wanted to have as much creative control over the footer in Elementor rather than having to code it. It consists of a Column element with three columns, each containing an Image element with an SVG.
Below that is another Column element, this time with five columns each containing an Icon element. Lastly is the copyright info and links to pages.
If you are curious about the finished result, here is a screenshot of the full homepage of Sow n’ Sow.
Hand on my heart, Elementor has revolutionized my development process and is the best plugin I have ever used. My favorite thing is that I can invite clients to my office and we can collaboratively create beautiful websites together. No more back-and-forth with wireframes or mockups. It makes me look so awesome.
Joel Eade is a freelance website designer from Melbourne, Australia, where he lives with his amazing wife and three gorgeous kids. Joel started building websites in 2001 and has been using WordPress for the last seven years. You can find more of his work at joeleadedesign.com.au