Deconstructing your Design

Before you can build your website you first need to deconstruct your designs into common elements that can then be turned into theme templates. This process involves identifying common areas of the site that will be present across all pages of a website as well as design elements which are unique to specific pages. In identifying these components, you will be able to clearly structure your theme.

Below is a Photoshop Document of the homepage of a site we will use as an example.

Note: The list below assumes we have all assets (CSS, Fonts, JavaScript, Images, etc.) and are simply going to reconstruct this page inside of Solodev.

Step 1 - Create a Base Template (baseTemplate.tpl)

The first step in deconstructing your design is identifying the common elements which will exist across all pages of your website. These elements will collectively form what's known as your "Base Template". Generally, your Base Template will include your site's header, navigation, footer, and common stylesheets/scripts which will need to be included on every page. Below is what these common elements will look like once compiled into a Base Template

Step 2 - Identify and Compile Custom Page Modules

With your Base Template built, you can move on to identify and build the various sections that make up a specific page. In this example, we are deconstructing a homepage and will need to identify the different areas of that page.

Step 2.1 - Create the Slider/Hero Section

Since this is a homepage, the design calls for a hero slider. It is generally good practice to keep your slider code separate from other modules. As such, we can place all of the slider code in it's own file (e.g. homepage-slider.tpl).

Step 2.2 - Create the News Module

The design also calls for a three column news module. Once identified, you can make note of the need for a separate file such as "homepage-news.tpl".

Step 2.3 - Identify and Create the Other Page Modules

As you can see from the design, there are other page modules that will need their own individual files. In this example, there are the "What We Offer", "Project Showcase", "Why Clients Choose", and "Contact Form" sections. Each of these sections will more than likely need to occupy its own file within Solodev.

Once the page is completely deconstructed into its various pieces, it is time to assemble these sections like a puzzle. In order to do that you need to learn about Solodev's Dynamic Div system for inserting content as well as the fluid Bootstrap Grid System. Click here to learn more about assembling pages in Solodev.

All put together, these different sections will be added via Dynamic Divs and will result in the following page:


Please sign in to leave a comment.
Have more questions? Submit a request