Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address


  Basics Templates & Tuning How to create an attractive website design for a pizza shop

How to create an attractive website design for a pizza shop

Beginning with the 20 th century, pizzas have become the most favorite dish for many people. Due to the great variety of this food and diverse choice of ingredients in accordance with local tastes, pizzas became perfect to the most exquisite taste. And now pizza shops and restaurants are the most visited places. But the matter concerns another thing. This tutorial will be interested above all for those who own pizza shops and want to make an attractive and effective website for it in order to present it online and increase the number of customers.

This tutorial will teach you how to make a website for a pizza shop. Step by step you will learn how to do the necessary customization changes to meet your project requirements. So, let's go!

Choosing a template design

As always I recommend you to review our website templates. Here you will find a wide range of premium quality cafe and restaurant web templates designed for different kinds of activity. All of them meet the high quality standards and concentrate on your core requirements. This time my choice is template # 20881. It is a well-crafted web design, both in terms of usability and attractiveness.

image 1

After purchase you will find HTML-version and source PSD file of the main page, fonts which are used in the template and some screenshots in the archive. In case of a low-budget project, you may take advantage of free web templates that will help you solve both problems: time and money. offers quality free web page designs that can be easily customized and used as a basis for your website.

Template customization

Now, it's time for the template customization. If you have no knowledge of HTML and don't want to spend time and efforts to learn it - you can easily contact where you can order the template customization at an affordable price. And along with the rest of the way we will go full customization of your template.

For the full-fledged website we need only design of the home page, we will make other pages on its basis. To get started you need to install necessary fonts (usually they are placed in "sources/fonts" folder- in this tutorial you'll find more detailed description). After that open .psd file in Photoshop and let's learn step by step how to customize the web template to meet your project requirements and needs.

Don't have time and desire to perform the customization by yourself? You may any time take advantage of TemplateTuning customization services. Their web developers will easily and skillfully do all the necessary changes for you. But if you are not afraid of difficulties, then let's go on!

The first thing we should do is to change the site title, tag line and the phone number at the top right corner. Enter your pizza shop name instead of the default one.

image 2

By default all our web templates are saved without texts. That's why after making all these changes we need to save all customized elements separately and then replace existing images.

I should admit that the main peculiarity of the selected web template is that it mostly consists of images (even a text area is saved as a picture). That means you should modify all these images using Photoshop and then re-save them.

The next step is to change the text. With the help of the Type Tool write the text describing your services in the most precise and brief words.

image 3

Then replace the existing images with your best photos. Pay attention to the size of the photos - they need to fit the dedicated section accurately to prevent harming your layout. That's all for the first page.

image 4

And now here is the most important part of the customization process!

Before cutting the images out, you need to flatten the whole image that is your design. For this you go to "Layers" and choose "Flatten Image".

Then cut the customized images, copy and paste them to the new document. After that go to File and choose Save for Web & Devices command. Leave the settings as they are because everything has already been done by a coder. Press the Save button to save files to the Image directory replacing the existing ones.

Let's look at what we have:

image 5

Let's customize the other pages. But before going further, you should define first what parts of the website design you need for your project.


Write a few paragraphs about your pizza shop or restaurant letting your customers know more about the services you provide. Note: all modifications should be performed using Photoshop.

image 6

Then save the modified design elements and replace the existing images by them as we did for the Home page.

Our Menu

Customize the menu page for your pizza shop. Add the menu items, prices and descriptions for them.

image 7

Here is what we got:

image 8

Order Online

Let your customers order the food online. Make it convenient by adding a contact form. For its implementation you need to have some PHP programming skills and while I don't have them I recommend to order it from TemplateTuning website. They said that it will cost you about $60 - for any type you choose.

image 9

The same should be done the Locations page:

How to create an attractive website design for a pizza shop

That's it! Your website design is ready to use.

Choosing a hosting provider

When choosing the hosting services you should be guided first of all by other people reviews, prices and quality. On this basis I recommend you

If you experience any troubles with registering a domain name or hosting you can always contact professionals.

Website Promotion

You may find a lot of website promotion services all over the Internet. But probably, one of the most reliable among them is website promotion services from Web Design Library. It offers:

- Search Engines Inclusion

- Website Analysis Report

- Keyword Research Report

- Link Building Campaign

- Link Analysis Report

- Search Engine Optimization Report

- Search Engine Rankings Report.

* * *

You can visit sample website to see the final result or compare your code.

Congratulations! Now you know how to create an attractive web design for a pizza shop or restaurant. Feel free to ask me any questions. Your comments are always welcome.

Good luck in your future achievements!

subscribe to newsletter