Sow n’ Sow’s Story: How to Create a Product Website in Elementor

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.

Design stories - Joul 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.

Enter Elementor

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.

The Process

I’ll break down the design of the Sow ’n Sow home page design into the Elementor sections.

Section 1 – Hero

01_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

02_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

03_About_Sownsow

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

04_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

05_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

06_Instagram

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

07_Newsletter

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

08_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.

Summary

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.

About Joel

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

 

Liked This Article?

We have a lot more where that came from! Join 639,479 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

11 Responses

  1. Hi
    I am Jackie! I love Elementor but I have one major question. What theme are you using with Elementor? I have been using Generate Press and I would love to change the menu (bar) color from black and white. I don’t have any intentions on purchasing the Generate Press Pro. Please help and or give us a tutorial on this. Thanks!

  2. Great read Ben and beautiful site Joel! I love that it is never overwhelming like some websites can become and it’s filled with tailored content throughout. Great job Joel and thanks for sharing with us!

  3. Dear friend, it’s beautiful, very beautiful and juicy, I congratulate you with the new beautiful site.
    So could you please tell how you make one size menu, and when scrolling the menu size is smaller in the GeneratorPress?

  4. Hi,

    Please can you tell me how you created the menu on Sow n’ Sow?

    I’m using the free version of Elementor and I’m not able to figure out how to activate a menu.

    Many thanks,

    Emily

  5. Having developed 6 Websites using Elementor, I now feel, could have made it even more better using these strategies. Wish, I had come across your article before.

    Thanks for Sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 639,479 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.