You can create your WordPress theme using Themes Generator for free. In this post, we will cover the steps you need to follow to make your own WordPress theme from zero. Themes Generator is a visual builder that uses a drag and drop system. You just need to drag the blocks to your canvas and edit them to build your own WordPress theme. You will be able to create your own header and footer, control how the site looks in desktop, tablet or phone and easily export your design into WordPress.
This is a full development tutorial to design your WordPress theme. There is a video tutorial you can follow at the end of the post or you can just carefully follow the instructions in this post:
- Create a free account in Themes Generator and sign into your account.
- First thing is to create the Header. Click on Blocks and in Layout Blocks, drag out a container. This will be a container for all the header elements. Then drag Percent width box (2) and set the percentage to each. Here we will place the logo and the menu. Once set, drag an image blog, add your image and add a WordPress navigation menu.
- Adding classes is important to keep an order when you design in the different views and even save time! So don’t forget to add classes. You can learn more about them in the video tutorial. When you are done in desktop view, move on to tablet and phone.
- If you are done with your header, you need to place a Header separator. This separator will mark the end of the header, which will be visible in all your WordPress pages.
- Add a container for your hero image. Drag out text blocks and style them. In the tutorial we have also placed a call to action button, but whatever you want to place is your choice! When you are done with this section, remember to make the necessary changes in tablet and phone.
- In the body we have included an “About us” section, “Services” and a parallax effect section. You will need to drag out different containers for each section, Percent width boxes, image and text blocks if needed. In the video tutorial you will see how by using classes, you will save lots of time in these sections.
- If you are done with the body, it’s time to create a footer but first, you need a Footer separator. Place it right when the body ends and the footer begins.
- Add a new container that will contain all the footer elements. You can place social media links, copyrights, links to pages or some contact information. You decide!
When you are happy with your design, you can export it into WordPress. You need the header and footer separator so make sure they are in place. Click on the export button and you will get the zip file. That is the file that you will install in WordPress.
Don’t forget to subscribe to our YoutTube channel to get notified whenever a next chapter is published!
Watch the video for more detailed steps!