A Brief Intro. with Expenses

Building the Rough & Ready Farm website was an incredible learning experience and I’m excited to share a step-by-step breakdown with you, especially if you are a farmer or have a farmer client interested in building a CSA farm website.  I’m not here to convince you of the merits of my methods, so right up front let me confess, I use WordPress.

I know there are a lot of people who love Wix and SquareSpace and other similar services and that is totally fine, no judgment whatsoever.  Everybody should use whatever platform is best suited to them.  Luckily, WordPress is free, so you can follow along with this post at no financial risk.

There is one piece of paid software we use called Elementor Pro, though there is a free version that gives you approximately 80% of the software’s capabilities.  A full Pro license for a single website is $50/year, and they have 2 other pricing options.

There are two other fixed expenses required to get a website up and running – the domain URL and website hosting – $50-100/year together.

Quick Links

Prepare To Build

Step 1 – Sketch Out The Site

There are a couple of options here:
1.  The proverbial napkin – just sketch your ideas with a pen and piece of paper.

2.  Template websites and pages – you can use Elementor (a drag-and-drop page builder for WordPress) to drop in fully built templates, leaving you the work of changing the images and written copy.

3.  Surf the web and take screenshots of websites you like, then build your own version.

Step 2 – Gather Images Needed

Gather up images:
1.  Logo (with transparent background, if applicable)

2.  Pictures

3.  Any other graphics you’re planning to use.

Try to keep file size under 1 MB so page load speed is fast.  You can manually make files smaller by changing their dimensions.  If you have a file that is 4000 pixels by 4000 pixels that is too big.  There are many easy ways to change the image dimensions to under 1000 pixels square, even 500 pixels by 500 pixels works for many use cases.

Additionally there are file compression services available online like https://tinypng.com/

Link to Image Compressor Service

Step 3 – Write The Copy

If you aren’t familiar with the term ‘copy’ it is another way of saying ‘written content’.

Refer to your design from Step 1 and list all of the different pieces of copy that need to be written – then write them.

Domain & Website Hosting Setup

Step 4 – Get Your Domain | yoursite.com

There are many domain registrar options in the marketplace:
1.  Google Domains – this is a good choice if you have several domains and want a place to easily manage them.

2.  GoDaddy – I don’t endorse them, but they are an example of a well-known domain registrar.

3. The website hosting service we use – this website is currently hosted on SiteGround and they offer domain purchasing services like many of their competitors.  This is a good option if you plan to only have one website because then both the domain control and website files are centralized.

Step 5 – Get Your Website Hosting

There are a several options in the marketplace but we recommend just one:

1.  SiteGround is a website hosting service provider we have tested thoroughly for several years and have found the service to be top notch, especially if you are going to use WordPress.

2.  You can support our website by clicking on the banner below and purchasing the hosting plan that works best for you.

Step 6 – Install Website Building Software

WordPress + Elementor
1.  Follow the instructions from your website hosting service provider to install a free instance of WordPress – on SiteGround this is done with just a few clicks.

2.  Once WordPress is installed, login and hover over ‘Plugins’ then click ‘Add New’.  Search for “Elementor” and install/activate it.

– Follow the suggestion banner that Elementor automatically displays and install/activate the Hello theme by Elementor – it is purpose-built by Elementor.

3.  Activate your Elementor Pro license by hovering over Elementor in the WordPress Admin menu and clicking on ‘License’.

Building the Site

Step 7 – Elementor | Page Builder for WordPress

If you are brand new to Elementor then invest some time in researching it and how it works.

Getting proficient with this powerful tool requires investing time not only in research and reading but also in applying what you learn.  That being said, here are the steps to follow – and feel free to contact us with any questions if you get stuck.

Click on the banner below to get a great deal on Elementor Pro and simultaneously generate affiliate sales revenue for us!

First, let’s set up a Coming Soon page that visitors will see while your site is getting built.

1. Hover over Elementor in the WordPress admin menu
2. Click on ‘Tools’
3. Click on the ‘Maintenance Mode’ tab
4. Click on ‘Create One Now’ under Choose Template
5. Name it and click the ‘Publish’ button
6. Click the ‘Edit with Elementor’ button
7. Click on the grey circular button with the folder icon
8. Search for ‘Coming Soon’
9. Find a template design you like and click ‘Insert’
10. Edit the template to your liking and click the green Update button to save your progress
11. Now click the hamburger icon in the upper left of Elementor’s editor and then click ‘Exit to Dashboard’
12. From there click on the ‘W’ icon in the upper left to go back to the main WordPress Admin area
13. Navigate back to the Maintenance Mode tab
14. Select ‘Coming Soon’ from the ‘Choose Mode’ dropdown menu and ‘Save Changes’!

Congratulations, the Coming Soon page is live.  The site can now be built and once it is ready to go live simply disable the Coming Soon page mode by following steps 13 and 14 but selecting ‘Disable’ from the dropdown menu.

Now it’s time to start building the website pages – these are the instructions for creating a page:

1. Navigate to the WordPress admin menu, hover over Pages and click on ‘Add New’.
2. Give the page a meaningful title and click on Publish, go ahead and click Publish again to publish the page.  With the Coming Soon mode engaged no visitors will see it.
3. Now click on the ‘Edit with Elementor’ button to open the Elementor Page Builder.
4. To hide the title of the page click on the gear icon in the lower left and toggle on the Hide Title switch.
5. At this point choose between building a page from scratch (by clicking on the red plus icon in the middle of the page) or dropping in a template page (by clicking on the grey folder icon in the middle of the page).

How to build a page from scratch

1. After pressing the red plus icon in the middle of the page select the column layout for the section being added.
2. Now drag-and-drop the appropriate widgets into place.

How to build a page from a template

1. Pressing the grey icon will pop up the Elementor Library, where templates can be previewed and inserted into a page.
2. Edit the newly inserted template to match your website design.

How to make a Sticky Header

1. Elementor allows for custom header design and control, get started by hovering over Elementor and clicking on Theme Builder.
2. Then click on the Header tab – this is where a list of all headers will be.
3. Click on the Add New button at the top of the page, then name and save the Header.
4. Edit the Header design Elementor – click on the grey folder icon to see Header templates.
5. To make the header sticky and not scroll up with the rest of the page click on the section to make sticky and then click on Advanced > Motion Effects > Sticky > Top
6. When the design is saved there will be display rules that pop up, where pages can be included and excluded from showing the Header.
7. To edit the Display Conditions in the future click on the small green up arrow button next to Update.

How to make a Footer

1. Elementor allows for custom footer design and control, get started by hovering over Elementor and clicking on Theme Builder.
2. Then click on the Footer tab – this is where a list of all footers will be.
3. Click on the Add New button at the top of the page, then name and save the Footer.
4. Edit the Footer design Elementor – click on the grey folder icon to see Footer templates.
5. When the footer design is saved there will be display rules that pop up, where pages can be included and excluded from showing this Footer.
6. To edit the Display Conditions in the future click on the small green up arrow button next to Update.

Step 8 – WooCommerce Products Setup

Install WooCommerce by hovering over Plugins and clicking on ‘Add New’, then search for “WooCommerce”

1. Start by following the setup instructions prompted by the WooCommerce setup wizard.
2. To set up products hover over ‘Products’ in the WordPress admin area and click on ‘Add New’.
3. Follow all of the instructions on the Product setup page to create products as needed.

Step 9 – WooCommerce Store Setup

Store setup involves configuring the WooCommerce Settings, many of which should already be set during the setup wizard

1. Payment gateways, like Stripe, allow for taking credit and debit cards as payment.
2. Shipping methods for different zones.  If, for example, someone lives in New York and wants to order a CSA share box for a friend or family member in your local area then the shipping methods available to them will be according to the friend or family member’s local address.
3. Transactional emails to provide customers with receipts and any other important information.

Build an Email List

Step 10 – MailPoet | Email List Management

MailPoet is a freemium WordPress plugin that makes it easy to manage email list communication.

1. Hover over ‘Plugins’ and click on ‘Add New’.
2. Search for “MailPoet”.
3. Click on Install and then click on Activate.

To configure MailPoet hover over ‘MailPoet’ in the WordPress admin area and click on Settings – then fill out of the boxes with the correct information.

MailPoet and Elementor Pro are integrated and work well together.  Elementor forms can send new signup info to MailPoet, which can then automatically send a particular email after a set amount of time.

In Conclusion

3 Main Takeaways From This Website Build

It is possible to build a highly functional CSA farm website that can take orders, process payments, and build revenue.

1. Preparation is key – have a design and layout chosen.
2. Elementor makes WordPress easy – set global colors and styles – drag-and-drop page builder – forms and popups.
3. WooCommerce makes selling products easy – create products with all of the attributes needed for customers to reference and control payment gateways, shipping options, and more.

There is no substitute for direct experience, which is why I highly recommend checking out the Rough & Ready Farm website as soon as you have a chance.  For many years the site will serve the farmers, CSA members, and visitors.

Visit RoughReadyFarm.com