Please, enter a valid email!

How To Build Your Website Without Touching The Code [Power Builder Tutorial]

Building your own website may be a real pain in the ass. Especially, if you are new to web-development. We’ve all been there, but I’ve got you covered! Today I’ll take one of our themes and show you how you can easily customize it for your needs, be attentive and follow me.

As an example, we will use and modify the Builderry - Construction Company WordPress Theme.

power-builder-tutorial-1

This theme was carefully tailored by our team of dedicated designers for the construction companies. To show you how cool the customization process is, we will turn this into a development studio website theme.

What’s great about this theme is that it is based on Cherry Framework 5 and has a built-in Power Builder to make the customization process faster and easier to do.

power-builder-tutorial-2

Power builder is a very useful tool for changing your website appearance without touching a single line of code.


A brief review of my idea:

I wanna build a website for a project called ‘Startup Express’. The main idea behind my imaginable project is to make it possible for young developers, designers and just talented people to connect with each other and start a project together.

‘Startup Express’ will require a website with a completely different look.


Your customization journey begins!

Right after the purchase of our theme, you will receive a link to the documentation page with all the detailed instructions on how to install and activate it.

In order to access the Power Builder just go to ‘Pages’ > ‘All Pages’. We are going to edit the front page of our website, so let’s choose the ‘Home’ page from the list.

Here is how the builder working area looks like:

power-builder-tutorial-3

So basically, you can remove and add any elements to the page with the drag & drop method. Pretty simple, right?

First of all, I cleaned up the area on our home page. You can do the same, just go ahead and remove all the elements from the working area. We will build the page from the scratch by adding the modules that we actually need, not just switching the default ones around.


How about a cool picture on the top?

I cleaned everything up on my end and I hope you did as well. If so, we can proceed and add a row now.

power-builder-tutorial-4

Then click on ‘Insert Module(s)’ and choose whatever you wanna add. I decided that I want to have a static image with the logo on the top of the page. So I click ‘Insert Module(s)’ and select the ‘Image’ module.

power-builder-tutorial-5

power-builder-tutorial-6

The module appears on the list and now we can customize it.

power-builder-tutorial-7

power-builder-tutorial-8

Once you selected the picture you want to use on the top, you have plenty of options to fool around with. You can insert a link into this image, change the way it appears on the screen, etc.

power-builder-tutorial-9

I decided to keep it simple, I am not linking this image, it will be just a cute image showcasing the logo and spirit of our project. I also selected the ‘Fade In’ animation style, I think it looks better that way.


Project description block

What’s next? I think we should explain to the visitor what is my project about and what goals I am keeping in mind. In order to do that, we should add the ‘Text’ and ‘Button’ modules.

power-builder-tutorial-10

I filled in the text and placed it on the left, so customers wouldn’t have problems reading the text on the picture I selected.

power-builder-tutorial-11

I would like to note one of my favorite features of this builder. While customizing each module, you will have a possibility to decide if you want this particular module to be displayed or hidden on one of the versions of your websites. Isn’t that cool?

Now you can hide a module on the tablet, phone or desktop version of your website in a single click!

power-builder-tutorial-12

I also want to add a button giving customer a possibility to get in touch with us right away and start working with us. Button customization is very simple. I’ve filled in the text that will be displayed on the button, selected the alignment option, chosen the link to be opened in the new tab by the click and that’s it, ready to go!

power-builder-tutorial-13


Sharing our office location

Startup Express’ has its headquarters in New York and we are happy to share the office location with our website visitors, so the next module on the home page will be the Google Map module.

To be able to use the Google Maps integration, you will have to obtain the Google Maps API key here. Then go to the ‘Power Builder’ in the WP admin and fill in the key.

power-builder-tutorial-14

Now we can add the Google Maps module and be sure that everything will be working correctly on our end.

power-builder-tutorial-15

power-builder-tutorial-16

I filled in the address and also decided that I don’t want the map zoom to be controlled by the mouse wheel. It’s up to you if you want to use this option, but as for me, I find it really annoying.

power-builder-tutorial-17


Setting up the projects showcase

It’s time to showcase the projects that have been started on the ‘Startup Express’ platform. ‘Project Terms’ module comes handy in this situation. But right above this module, it will be great to add the ‘Text’ module’ and give your website visitor a brief explanation of what is this block of your page presenting.

power-builder-tutorial-18

All the projects on my website are included into one of the eight categories. Since there is plenty of projects listed on the website, it will be much better to display those eight categories and the customer will go from there.

By the way, you will also be able to display the projects by certain tags with the help of the ‘Project Terms’ module, so displaying the categories is just my decision.

power-builder-tutorial-19 power-builder-tutorial-20

I filled in the text and centered it. Made it bold and defined the ‘We started’ line as a Heading.

power-builder-tutorial-21

That is all for now, dealing with Power Builder is over. Don’t you agree that it was quite easy?


The finish line is close, we are almost done

While logged in your admin panel, go to your website and click on ‘Customization button’.

power-builder-tutorial-22 power-builder-tutorial-23

Here you will be able to change the color scheme, customize your header and footer area. All these minor changes will make your theme look completed and well-thought-out.

Today we learned how to customize your template using the Power Builder. We did not touch a line of code, but we changed the appearance of our website completely and got it ready for our ‘Startup Express’ company. Here is the result I’ve got:

startup-express

As you can see, changing your WordPress website appearance quite easy. And even if you get a ready-made solution, you will be capable of switching and adding the elements on your web page.


Don't miss our Power Builder overview on YouTube!


In case you do not want to stay on your own with your theme customization issues, feel free to use our Service Center and our dedicated experts will help you out!


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Alex Tkachenko

Creative writer passionate about WordPress and all that technical stuff. Meet Alex in person on LinkedIn.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

7 responses to “How To Build Your Website Without Touching The Code [Power Builder Tutorial]”

  1. Judezgd says:

    schokohrrutige people take care of bias all the time

    I using tobacco internet dating for many functions. your company a red mother, as i am, as an wok cookware dude, OkCupiddata showsthat you may receive smaller amount matches so voice messages.

    some experiences returned this valuable occurrence. which got to be glaringly evident i always was buying a good deal a lesser amount of complements and comments regardless of online dating service together with my husband and my un denims contacts.

    as an instance, during 2013,OkCupid removedusers’ stock portfolio photosfor one day,Dubbing it all “fancy will impaired Day, visitors didn’t recognise who was, okay, what. these businesses complained bitterly, while OKCupid co initiator and as a result ceo roscoe Rudder chronicledin their own paperback, “Dataclysm,

    once the collection snap shots brought back, the majority of talks moreover bad reactions which in fact had budded within a photos’ absence understanding that discovered to be OkCupid cheaper than qualitatively usual fizzled.

    at the time another woman informs me in which it dealing with online dating site is a waste, I insist on that story plus two downcast realities about the online dating sites subject that Dating Ring’s founders founded: First, providing people with the know how to behave about racial error is simply victorious; in addition to the second, Itis always event to web users who are discriminated while combating to generally be equated with those who find themselves one-sided ones firm racial combined with, at the same time, should discount these folks aspotential fits.

    well social rings movedaway by reviewing the individual prepare. It given registered users to select the racial clubs by way of which they did not desire to be coordinated.

    A 2013 research study wrote in a very actions of the national academia of Sciences spotted that others were able to are affected by a romantic email forwarded made by some criminal of a different run as compared we were holding to begin exposure to of. and as soon as a userhad receiveda combination run experience, she or he offers more prone to make cutting edge interracial geneva chamonix transfers for a while intended. for that reason, special circumstances, As this study noticed, that might in the short term drive down racial error.

    “as a whole, i am not sure simply how much online dating sites can create to ‘fix’ dating, Kay contained. “online dating sites is only a tech level which enables mature women dating site to get rid of individuals friction in the area, and makes it easier for people to meet some them to be in your garage already basically seeking to meet. just all this time, this kind of has never proven to be the greatest make for telecomutting saves gas, beauty treatments by designing information approximately traits more readily accessible, and moreover examining dialogues to do with indispensable matters like these,

    that experts claim latest part also has tied to me. The being published of web data on users’ routine could possibly be the first gait toreducing bigotry and tendency in online dating sites as well as also cultivation of more significant empathy is usually answer to accomplishing an option. plainly asthere is undoubtedly an empathy opening between vibrant and the poor,i reckon it comes with an sympathy hole in online dating service.

    now and then, international dating for being a red woman has actually been astonishingly debilitating. could very well anxiously required my pals and simply colleagues could possibly way more definitely significantly look at in a big way how associated with incongruity time in relates to my life uncountable other ones thoseof as well what is for people in return at fair excitement online dating incidents.

  2. SpearsComputer says:

    Alex, I use DIvi for some of my clients’ websites and one thing I’ve noticed is that if I switch themes, Divi leaves all the shortcodes. This can be a headache. Does the Power Builder leave any shortcodes if I change themes? One thing about the Power Builder is it is easy to use because I’ve used Divi. I believe that additional updates will make the Power Builder a top contender.

  3. John Beima says:

    Alex this was very well done, would you mind if I shared it with our clients as an example of how simple and straight forward Power Builder is?

  4. Dwayne says:

    Are you able to break down the implementation of a Drupal template in the same way?

    • Alex Tkachenko says:

      Hi Dwayne!
      Thanks a lot for your comment. Unfortunately, at this time we are not planning on bringing that kind of content. However, I would recommend you contacting our Customer Service department and they will gladly help you with any difficulties you may have while working with our Drupal themes.
      Have a great day!

  5. serge billon (web54) says:

    seems to be a great extension. thanks

Leave a Reply

Your email address will not be published. Required fields are marked *