A case about creating a website template from layout for the WordPress platform. Our customers – marketing, advertising, design and SEO agencies – offer their clients marketing support, advertising services and SEO promotion. Their specialists create an individual website design, and we make a programming part for it.
When creating websites, it is important to exactly match the designed layout. To do this, we use the Pixel Perfect approach.
Let’s discuss your project
Let’s discuss your project to find out how we can help you. Schedule a free 15-min meeting
Share this article
Agencies offering a range of services to promote a company on the Internet often turn to third-party developers to create a website. For their clients, they create design layouts, which in the future need to be converted as a valid template for CMS WordPress.
We are provided with image files in Figma / Photoshop / Adobe Illustrator / Adobe XD programs and others for our work.
As a result, we create a template according to WordPress coding standards, as well as an operational WordPress site using this template. We use a testing WordPress website to demonstrate the developed template.
The WordPress platform offers many paid and free website design templates, but they are not suitable for custom development. Especially, when you need to create an original, personalized website using the custom design layout.
The Pixel Perfect is important here. According to this approach, all elements of the website, including margins, font sizes, line heights, image sizes and object placement, shall match the layout to within a few pixels.
We offered the customers the following:
- To make up the visual part of the website with the Pixel Perfect approach
- To develop a programming part based on the WordPress coding standards. And build the installable template for WordPress platform.
Note: It is technically impossible to create a website with a pixel-to-pixel match, since even fonts and line spacing in different browsers can be displayed differently. Sometimes the designer can also make a mistake in the indentation or alignment. Therefore, we always try to keep a balance between the accuracy of the layout and the coded version.
Here are some examples of how the website layout was created. The compliance and coincidence of the HTML template and layout also was checked.
First, we developed the basic structure of the pages. We thought over and created the home page, pages, posts. Next, we installed the necessary fonts, images, prepared all the texts and made the layout.
In accordance with Pixel Perfect, we acted on the following principle:
- The original layout was saved in
- We opened the created website in the browser
- With a special plugin, a copy of the layout was put on the page
- We corrected the location of the elements for an exact match
Headers and margins check:
Text page check:
Checking input fields:
Important! The matching of elements, blocks, fonts and margins is checked relatively to the dimensions the designer created the layout in. If its width is 1920 pixels, the screen is adjusted to the same size.
Designers often provide us with a layout for PC monitors (about 1280 pixels) and for the mobile version. This is enough for us to work, and we are already adapting versions for screens with other resolutions during the development process.
Creating a website on the WordPress platform typically requires additional functionality: online calculators, special animations, specific forms, etc. We create WordPress plugins for this.
Here are a few examples of how we did the WordPress template development.
Website in Finland
During the work, the customer's designer edited the layout, so the result differs from the prototype.
In this and other sections, we followed the Pixel Perfect concept and exactly repeated the design layouts.
On this page, all blocks, fonts and margins correspond to the designer's prototype, and only the content – images and text – differs.
Solution and platform
Blog texts page
In these projects, it was important to fully match the layout of the created websites. This allowed not only to get the expected result, but also to simplify the cooperation between the designer and developers.
The Pixel Perfect approach is used to ensure that the finished solution fully corresponds to the layouts created by the designer.
In addition to that, we released / developed all the requested functionality. The websites work correctly on the WordPress platform and can be modified if necessary.
Each of the projects took about 2 weeks. Both were accepted by both the designers and the end customers.