doTemplate customized website template

Customize doTemplate web template with Online Template Builder

doTemplate provides a gallery of beautiful and professional website templates. Unlike most of the website templates available on the web, they are customizable and you can do it online. This makes our template unique and it will save you loads of time. In this tutorial, we will show you step-by-step how you can customize our web template with Online Template Builder to create a unique template that suits your needs.

Step 1: Choose your template

There are 2 ways to access our Online Template Builder.

The first way, from our home page, click Templates Menu or Browse all templates button to access a catalog of our website templates, choose one of our template that you like best. When you move the mouse over a template, you will have 3 options: Customize in Template Editor, More info and Free download. Click “Customize in Template Editor” to edit the chosen template. In this tutorial, we will choose LuxHom Read Estate web template.

The second way, if you have already purchased a template, you can modify your template by clicking the link that we have sent to you via email. This link will bring you directly to the edition of the purchased template. It will also tell you the number of downloads available.

doTemplate templates catalog

a gallery of beautiful and professional website templates on doTemplate

Step 2: Customize your template

After having chosen the template and choose “customize in template editor”, a new window will be opened. This is “Online Template Editor” window that you will use to customize your template.

doTemplate Online Template Editor

doTemplate Online Template Editor

doTemplate Online Template Editor Window

Company name and logo edition

Basically, you can edit virtually every part of the template. Just move the mouse over the part that you wish to edit and click that part, Online Template Editor will activate the selected section for edition. In this example, let’s edit the company name, logo and the background.

We would like to start with the company name edition, therefore, you can click on the company name, the following window should be open for edition. Modify the company name in “Your text” text box in the Logo text layer. Click “Apply” button on the top to view the change. You can also change the text font, size and styles in Layer Settings area.

To add a logo, click “Add Image” icon on the top menu, then you can upload your logo or choose from our logo library. Once the logo is uploaded, you can adjust the size and the position of the logo. You can also apply the effects on the logo if you like. Click “Apply” when you’re done editing the logo.

Online Template Editor - company name and logo edition

Online Template Editor – company name and logo edition

Now you should see your own customized company name and logo on the chosen template.

Modified Company name and logo

Online Template Editor – Customized company name and logo

Banner edition

You can customize the banner by clicking on the banner area. In this example, we will replace this beautiful lady by a couple instead. This photo is provided in our image gallery. Of course, you can upload your photo, just choose “Upload from your computer” option.

Online Template Editor - Banner Modified

Online Template Editor – customized banner

Other parts of template edition

As mentioned earlier in the tutorial that you can customize any part of the template, just click on the part that you wish to personalize, the Online Template Editor will open the related section window. You can try to customize the following parts: Background, Navigation, Page, Footer, Text, Page elements, and Sidebars.

Step 3: Save your customized template

Once you finish customizing the template, don’t forget to “Save template”. This function is only valid for premium template. If you wish to save your template, you can click ‘Buy Template’ Button on the floating menu bar on the left. The template will be saved while you’re making the payment. Once the payment is done, we will send you a link where you can continue editing your template.

If you have already purchased the template, you can directly save your template by clicking “Save template” button. You can save your template as many times as you like, however, only the latest template modification will be saved. You can access the saved template by clicking the link that we sent to you by email.

Step 4: Download your template

Once you finish customizing the template, don’t forget to “Save template”. You can then download the personalized template in HTML format or WordPress theme. Each download will be deducted from the credit that you have, 5 downloads initially.

HTML Template

For HTML template, it will be downloaded in a zip file format. If you open the zip file, you will see a number of files and folders. Click on ‘index.html’ to view your template. In this example, this is what you will see in the navigator.

doTemplate customized website template

doTemplate customized website template ready to be deployed on your site

WordPress Template

If you have chosen to download ‘WordPress Template’, the template will also be downloaded in a zip file format. However, you cannot view the template as you can do with the HTML version.

Now you’re done customizing the template. You can follow the following tutorials in order to apply the downloaded theme on your website.

Recommended Further readings

You might also like to check out the following tutorials.

WordPress related tutorials

Apply doTemplate WordPress theme in 6 steps
Remove a comment box from a WordPress page or post
Create a new post
Create a new page
Create responsive columns in a Page or a Post