Layout Basics
A useful way to think about the layout of your page is by looking at the front page of a newspaper.
You can see how the page is divided into a number of blocks which house the content.
The numbers show how the individual elements are housed within larger content blocks.
- Is the outline of the entire page
- Shows the smaller, sub-elements of the page, divided into page title, headline, and main content
- These are the columns which house the main content on the page
- These are the individual blocks of text or images
While the lines of a grid themselves are not visible, the structure helps you to manage the proportions between the elements to be aligned on the page. This grid would serve as the framework for the page’s layout.
In this tutorial we will build a website similar in structure to the website example.
In the Website Builder, go to Add Page to create a new page. Let’s look at the page in terms of the elements that we identified on the newspaper page
- The page contains different elements such as the page title, the heading, columns and individual image and text blocks
- The sub-areas can be divided into the page title, the heading and the main body
- The main body of the page has three columns, containing headings, paragraphs and images
- The final elements are the blocks that will house individual content within your columns, such as article headings, article body, images, slideshows or videos
Editing the Title and Heading
Enter your text into the Page Title or Heading block. Then, use the small editing menu that appears on the top of the block to edit your text, or use the settings menu on the left for more options.
Adjusting the Page Layout
Page layout will define how the content on your page will be displayed and can be selected in the Blocks menu. Choose from different variations, depending on the type of content you would like to display and what you need to stand out. SlickPic uses a grid with intersections to showcase photo albums and the gallery, but for the page design you can only use columns.
Adding Text or Images
Add text or images to the layout that you have already selected. You can add multiple elements inside each column.
To add a new element, just click the ‘+’ and select the element you want from the Blocks pop-up.
To add text, select the text block, then just start typing into the block. Use the editor to format it to your requirements. For titles, just increase the size of the text.
For images, select the image block then choose an image from the image picker.
Adjusting the Width
The width of the individual elements, for example the columns block, can be made wider or narrower.
Select one of the elements at the top and you will see a menu appear. Click on the up arrow on the element menu until the parent block is highlighted.
Once the whole grid is selected, you will see the ‘++’ width icon will appear on the element menu. Use this to adjust the size of the block.
Click Preview to see how the layout of your site will look on the web.
Changing the Width of the Page
If you want to change the width of the whole page, on the left-hand Page Options menu, go to the Content Width dropdown and select from Narrow or Wide.