Themes Generator is a free WordPress visual builder that allows you to build your own WordPress theme. It uses a drag and drop interface that makes this process easier. There are pre-styled blocks and templates that you can use to save time, but if you want to be creative and design a WordPress theme from scratch, in this post you will learn how to do it.
- First of all, you should create a free account in Themes Generator. It’s really for free and no credit card is required to sign up.
- Once you are logged into the editor, we will start creating our header. Drag out a container from Layout Blocks. This container will contain all the header elements (logo and menu). As our header will have two elements, logo and navigation menu, we will drag out the Percent width box (2) and set a percentage to each column (20% to the left column and 80% to the right column will work ok) and, a maximum width (1200px). Place the logo on the left column and drag the navigation menu to the right column.
- Whenever you drag out an element, you need to add a class first. It’s important to add classes as you will save lots of time. Watch the video below for more detailed information about classes.
- When you are done with Desktop view, move on to tablet and phone view.
- Once you are done with your Header, you need to drag out the Header separator, that will mark the end of the header. Remember that the header is a common element in all pages.
- Below the header, we will add a hero image. Drag out another container, add an image background, text blocks and even a call to action button. Whenever you are done, remember to move to tablet and phone view.
- In this tutorial, we have added more sections like About us and Services and a section with a parallax effect. This is one of the moments when you will realize that adding classes will save lots of time! These sections will probably have comments elements and can share classes.
- Whenever you are done with the body, it’s time to design our footer, but first, we will drag the footer separator. Also, remember that the footer is another common element in all pages.
- You can place social media links, some contact information and links in the footer.
If you are ready to build your own WordPress theme from scratch, watch the full video and follow the steps.