Builder Repsonsive 300x187 How to Create a Custom & Responsive WordPress Theme in BuilderIt’s true, if you don’t have a responsive layout on your website then you’re just not up with the rest of the world anymore!

It’s not only about trends, it’s about giving your audience more flexibility to access your website on any size screen or on any device whilst everything still is very easy to read.

The only problem is – what if you can’t find a pre-designed theme that fits your requirements?

There’s a lot of responsive themes available out there many prefer to customize their own!

Thanks to iThemes Builder, a it’s pretty easy for you or anyone to do.

I was curious about this iThemes Builder for quite some time, so I decided to get a copy.  The options you have to customize your website are very flexible and it works pretty easily.

What I liked best? No code – but you do have the option!

You simply install the theme, any add on plugins you want (Style Editor, SEO, etc) and you simply go to the customization page and change a few simple settings.  The result is a website made to suit exactly what you’re after – I was pretty impressed.

So naturally I took some time to show you how to quickly customize your website with it. Check out the videos I made below!


Build & Customize Your Layout

The video above will show you exactly how the Builder layout editor works.

It’s as simple as installing the plugin and heading to your options  – My Theme -> Layouts & Views.

From there you can customize your layout by adding your header, sidebars, content and other areas to your layout either by starting a new layout or editing and existing layout – all in whatever order or arrangement you want. Once you’re done, set that to default at the top of page and you’re layout is ready to go. What’s also cool about iThemes Builder is the ability to assign different layouts to different pages and posts.

You can easily add your logo or image into your header, move the navigation around, setup any combination of widget side bars or widget areas in just about any position on the page by clicking a few buttons.

Everything is stacked one on top of the other and takes all of 2 seconds to understand, it mimic the layout of your page.

build your layout in builder How to Create a Custom & Responsive WordPress Theme in Builder

As you see above, at any time you can go back in and customize the layouts created.  I always recommend building the layout first since you want to make sure the color and style is going to be suitable for your ‘framework’.

Everything starts off being responsive – even certain options like the navigation are set to responsive by default.

Once your layout is complete, it’s a simple step into the style editor to set up colors, fonts, background images and anything to do with the style of your page…


Using Style Editor

Getting into the styling of iThemes Builder is pretty easy, you just need to download and install the ‘Style Editor’ plugin from iThemes (it comes free with the Builder Theme).

You’re then given another section called ‘Style Manager‘ under the ‘My Theme‘ tab of your WordPress dashboard menu. Click on it and you’re ready to customize!

You can change fonts, pick colours and assign bitmap backgrounds and change every small aspect if the page that would normally be controlled by CSS coding.  I think every reading agrees, the options are easier and more convenient than trying type up code!

styleeditor How to Create a Custom & Responsive WordPress Theme in Builder

You’ve got a preview window on the right and a lot of handy options on the left.  You can simply scroll down and customize each and every aspect of your websites styles through these menus. What’s really cool is that you can save various style settings and apply them to different pages and sections of your website – just like the layout editor.

As you’ll see in the video above the layout being automatically responsive – no work is required by you as it begins that way out of the box!

Generally speaking you can get the exact look you’re after just by following the information in these 2 videos, but there’s even more to look at below!


Foundation Themes

iThemes also have a series of ‘foundation themes’ available when you purchase Builder.

A foundation Theme is like an existing mould or template that you simply upload and customize – with a few slightly different options and effects for further customization. Just upload the theme you want to customize and activate it!

All of the styling options are the same, but it’s the different function within the objects you can style – functions that may be unavailable using the stock standard Builder theme.   It all just adds that extra layer of flexibility.


 There’s many more features available also…

I haven’t gone into many other aspects of the theme such as the SEO plugin which boosts the Theme’s search engine optimization as well as a few other extras like the events block or the very cool ‘infinite scroll’ plugin - a way to really fancy up your blog feed.

Over all this WordPress theme is incredibly powerful and the easiest customizable theme I’ve ever seen.  It’s perfect for a beginner but also has the flexibility for most people to achieve any look they want.

If you haven’t yet had the chance, check out Builder because it’s a pretty awesome tool if you want to start designing your own sites or sites for clients (if you’re a website designer). I highly recommend it!

If you appreciate this post, please share using one of the videos below! That’d make my day! Thanks for reading.

42
SHARES
fb share How to Create a Custom & Responsive WordPress Theme in Builder
tweet How to Create a Custom & Responsive WordPress Theme in Builder
g plus How to Create a Custom & Responsive WordPress Theme in Builder
l in How to Create a Custom & Responsive WordPress Theme in Builder

Interesting? Get more sent to your inbox!

I won’t bombard you with spammy messages, just free tips and updates!


Got Something to say?

A question, a statement? Hell, tell me I’m stupid, leave a comment and let’s start this conversation!

Comments close after 90 days. Keep the Conversation going on Facebook!

Connect with Design Web Identity

© Everything on this website is protected by copyright. So please don’t copy anything without written permission first!
Affiliate Disclaimer: A lot of the links on this website are affiliate links I earn commission from –
they are still the products I recommend the most as I have used them personally.

This website is powered by The Thesis Theme