The DevReach project has the following basic pages:
The DevReach site uses two templates.
The first template is based on the 1 Column, Header, Footer template and is used by the Home page.
The following screenshot displays the template and its placeholders:
Each placeholder contains the 100% layout element and the elements are assigned classes .header, .footer and .row-holder, respectively.
Class .row-holder arranges the content in the center of the screen, using the following CSS:
There are two colored rows, which you achieve by applying the following classes to the 100% layout element:
You use layout element 33% + 34% + 33% to arrange content in three columns.
EXAMPLE: To display Three reasons to attend section arranged in three columns in gray row, perform the following:
The second template is based on the first one. It has added a placeholder for displaying the page title. Inside the placeholder is a Content block widget that is made editable in pages. This way each page can have a different title. For more information, see Template widgets editable in pages.
The following screenshot displays the second template:
Content on the site is displayed by following widgets:
Create responsive rule for smartphones – transform three columns to three rows.
For more information, see Overview: Responsive design.
Back To Top