Note: This blog post is a continuation of our website design blog series for spray foam and petroleum contractors and assumes you have followed along with the previous posts in the series.
If you haven’t read our other posts on this topic, we recommend starting with the first post and working your way back here. Cheers!
You’ve done all the hard work setting up your website for content (awesome job!) – now for the fun part!
It’s time to get artsy-fartsy!
To make your website look amazing to visitors without learning to write code, we recommend using a WordPress website builder plugin – like Elementor or Stackable – to create your site pages.
These website-building tools are plug-and-play – and both Elementor and Stackable can be used for free!
Don’t let paid options scare you when you see them – you won’t need to upgrade to the paid versions of these plugins to design a beautiful, functional website for your spray foam or petroleum contracting business. (Unless you want to, of course!)
Fantastic, right?!
If you haven’t followed our Website Design blog series, we recommend checking out the first post and working your way back to this installment.
We will combine everything we’ve discussed thus far in this post to create a stunning website front end for your customers!
All caught up? Great!
Let’s jump in!
Installing the Elementor or Stackable Plugin For Designing Your Website Pages
Nothing beats a stunning website to help build up trust with your customer base.
With a website builder, you don’t need to learn computer code to create the website you’ve been dreaming about!
Earlier in the design process, we suggested WordPress themes that are as customizable as possible – Kadence and Astra. Both of these themes work well with the website builders we will discuss today.
If you didn’t love Kadence or Astra, that’s all right! There are countless website themes, and you can choose whichever you like best.
However, if you plan to follow this post, you will need a theme that integrates well with your chosen website builder (Elementor or Stackable, for instance), so keep that in mind when picking a theme!
Why install a website builder plugin?
Because website builders give you much more control over the design and customization of your website pages than is possible without them (unless you are proficient with computer code, of course).
That said, WordPress has a built-in Gutenberg block editor that is not bad for creating simple page or post designs. However, customization options in this editor are very limited and can lead to frustration if you’re trying to do more than the editor is designed for.
Thus, we prefer using a website builder for more complex and professional web page designs.
Every website builder is unique, but most follow a similar customization format. Thus, the first one you learn to use will help you with any others you explore in the future!
You can design beautiful websites using either of the plugins described below (Elementor and Stackable), and while there will be a learning curve with any website builder, most customization features are (somewhat) intuitive.
Our favorite website builder is also the one we suggest you learn to use before any others: Elementor.
Elementor
We love the customization options available using the free version of Elementor. This plugin has millions of users, and many resources are available online to help you learn the software!
Overall, we find the user experience to be intuitive and versatile.
When creating a page or post using WordPress’s block editor, you make your designs on the back end of your site and need to click “Preview” to view your website as a visitor would see it (from the front end).
Elementor, however, is designed to display what a visitor would see from the front end of your website while you are editing a page.
As you might expect, this cuts down on time when designing a page – you can see the end product as you are creating it!
Elementor even offers free templates for use on your site if you don’t want to start from scratch. (View instructions for adding templates in this blog post.)
Click here for a video introducing how to use Elementor and here for a more in-depth approach from Elementor’s website.
We love the designs possible using Elementor, specifically when using the Kadence theme.
However, since Elementor operates using its own editing platform, you cannot use any other editors – including WordPress block editor – on a page edited with Elementor.
We don’t mind that – but if you want to mix and match your design features or plugins, maybe Stackable is the website builder for you.
Stackable
Similar in many ways to the WordPress block editor, Stackable offers customizable blocks for designing beautiful website pages and posts.
Like WordPress’s Gutenberg block editor, Stackable uses the back end of your website for the design process. Because the same editing format is used, WordPress editor blocks and Stackable blocks can be used simultaneously.
You have more design options and control over customization using Stackable than just using WordPress block editor – and nothing is keeping you from using both! Their blocks are largely different and complement each other well.
Depending on the WordPress theme you choose, Stackable might be a better option than Elementor for designing your site.
For the basics of using Stackable, check out this introductory video! If you want to learn more, visit the Stackable website, where a guided video course is available for beginners.
Design Tips for Creating a Professional Website
One of the greatest parts about designing your own website is the freedom you have to create whatever you want on your site!
Every business – even within petroleum or spray foam contracting – has different needs from their website.
We all have different tastes and inspirations, too – isn’t it grand!?
Although we can’t tell you exactly what to do with your website design – you like what you like, and we like what we like! – we can offer some pointers for making your spray foam contractor website or petroleum business site look professional.
Here they are:
- Change your website fonts and colors to complement your logo! Doing so will create a professional, detailed environment on your site. You can change global fonts and colors using Elementor or your WordPress theme.
- Feel free to emulate (without straight-up copying) websites that you like the looks of on your site – but don’t be afraid to make changes that are all your own! Check out a few competitor websites or industry-leading company sites for inspiration.
- Start your website design with a wireframe! A wireframe is, essentially, a design outline for your website, and it will save you time and effort later. Both Elementor and Stackable offer easily-customizable wireframes for free (click the links for specific instructions).
- Make sure to design a responsive website! You will need a site optimized for use on any device to compete in today’s tech-based market. Luckily, Astra and Kadence are responsive themes, and both Stackable and Elementor have options for customizing how your website appears on desktop, mobile, and tablet (click the links for specific instructions).
- Use your website theme to customize your static blog page. Customizing a blog page when using a static page for your posts can be frustrating – but you can do it! (We find that the Kadence theme offers control over static blog pages that is a step above most free theme options.)
Above all, remember this: where there’s a will, there’s a way – and with a little patience and some proverbial elbow grease, you can probably figure out the way without using any code!
Also, the internet is a wonderful place for learning new skills.
If you get stuck during this design process, you can likely find articles or videos online to help you figure out the details! Just google your WordPress theme or website builder issue, and voila! The answer is at your fingertips.
Whatever you do, don’t give up. You’ve got this!
Conclusion
You can do anything you want on your website using the correct plugins, tools, and themes in conjunction – you just have to take the time to learn the programs!
Elementor and Stackable are fantastic tools for bringing the website of your dreams into reality.
When paired with a responsive and highly customizable theme – such as Kadence or Astra – you can use these website builders to create a beautiful, functional website for your petroleum or spray foam contracting business. And you don’t need to shell out a dime!
If you have any questions, feel free to reach out to us!
Freedom Consulting is always here to help.
Next time, we will wrap up our Website Design series, and launch your website!
Until then, have fun with this process, and take your time. Enjoy being artsy-fartsy!
