As we saw in the Complete Design video tutorial the best practice when implementing a new design is to start by analyzing the different containers we need to recreate the structure inside the Layout Editor. Below we will review some of the most popular types of design and discuss the best approach to implement them. Each design type is accompanied by an image, which when rolled over shows an outline structure of the layout overlaid over the design.
We reviewed this type of design in the Complete Design video tutorial and we have it again in the image below (remember you can rollover the preview to see the layout configuration). Since the design has a fixed width, with the background independent of content, we can set our background image to the page element (pink outline in the rollover image),set a fixed width and center our main container (yellow) and split it into multiple rows for the different parts of the design. The green outlines denote the additional containers we need to add to style the top rounded corners, middle content pattern and bottom rounded corners.
Horizontal Stripes, Fixed-width Content
For some designs, we may have a background that depends on the content on the page. We saw quickly an example of one such design in the Complete Design video tutorial and we'll review it now in detail. (consult the preview below and again, you can roll it over with your mouse to see the containers configuration). The white portion of the design will extend down with longer content, so we can't apply a page background that would simply have all the stripes (navy, white, blue). Instead what we can do is create the main container (yellow outline) with 100% width and divide it into multiple rows where each row has a container inside it that carries its own background (green) and inside there is an additional nested fixed-width centered container that holds the content (blue).
Another popular layout configuration is to have the main navigation at left. With these designs, instead of dividing our main container into multiple rows, we need to divide it into two columns (again yellow outlines in the rollover image below). The design previewed here is also fixed width and left aligned (as opposed to the center alignment in the top designs). Inside the two columns we have additional containers (green outlines) allowing us to control the 2 columns appearance (widths, vertical alignment, etc) and divide them into rows to add the different types of elements. At left, our container has two rows with the Logo at the top and Main Nav below it. At right, the container has multiple rows, with additional containers (blue) needed to recreate the rounded corners at top, the content vertical pattern and bottom rounded corners.