Software Tutorials

Cate

How to: Create Unusual Home Page Layouts

3 CommentsThursday, 5 March 2015  | 

Create Unusual Home Page Layouts

We all know the standard homepage layout of left hand menu, slideshow banner at the top of the centre column, followed by a block of featured products and a welcome message. This has become the norm for many ecommerce websites but sometimes it’s good break from the mould and try something different.

Creating something that is visually stunning as well as user friendly is always a tricky thing to do but with a little bit of imagination, and a decent amount of planning, all sorts of different layouts can be achieved. These can easily be achieved on your Bluepark site and we're going to show you how to create three different layouts to use on your online shop.

The Country Homes Layout

The Country Homes Layout is a simple homepage layout that features just two blocks, the slideshow block and the selected categories block. At the bottom of the page is a paragraph of text which is the page content.

Lifestyle Homepage Layout
Click on image to zoom

The Blocks

Both of the blocks used on this home page are built-in features of the Bluepark system and you will find both of them in Blocks > Block Manager.

The Slideshow block relies on the size of the images assigned to it, so to produce one as large as this, you will need to create your own images to fit the area you want it to sit into. For more information about how slideshows are created have a read of our blog post, How to Add a Slideshow to Your Bluepark Online Shop.

The Selected Categories block is populated with categories set up in the Category Manager. In these categories you will need to assign a thumbnail image to the Images tab; this will then be displayed in the block. Make sure each category is assign with exactly the same sized image for a uniformed look.

Category thumbnail image

Once all of the images are added to your chosen categories go to the Selected Categories block in the Block Manager. In the Properties tab untick Show Block Title but leave all other settings as they are. In the Settings tab set the number of images you want to show in one row in the Columns field. In the Categories tab assign the categories you added the thumbnail images to earlier.

The Page Layout

To assign these blocks to your home page, firstly go to your website and make sure you are logged in as an admin. You will know if you're logged in as an admin because you will see the blue EasyEdit bar across the top of the page. Go to the homepage and look for the Layout section on the EasyEdit bar as shown below.

Check layout assigned to home page

Make a note of the layout name in white, which in this example is Home Page.  Then, in the admin console, go to Site > Layout Manager and look for the layout name you just made a note of. Click into this layout to edit it.

On the Properties tab untick Display Left Column and Display Right Column and save.

Country Homes Layout Properties

On the Centre Blocks tab look for the two blocks you created above, the Slideshow block and the Selected Categories block. If they have a red flag (inactive) next to them, click on these to turn them green (active).

Home page layout

Use the green up and down arrows to the right of each block to move them in to the order shown above, making sure the Page Content section is below both blocks. You can now add your welcome text to the Home page in Content > Page Manager to have this appear on the website underneath the blocks.

 

The Sportswear Layout

The Sportswear layout is focused much more on promotion banners and making sure the customer has everything accessible straight away. This suits this type of industry where customers generally know what they are looking for, rather than casually browsing to see what takes their fancy.

Sports Homepage Layout
Click on image to zoom

The Blocks

The top section of this layout is one block that sits across the entire page. This block is then made up of the slideshow block, a sale banner and four promotional slots. Underneath this top block the layout is then split into the left hand column, which has the Catalogue block assigned to it, and the centre column, which has the selected products block and home page content added to it.

To create the top section of blocks go to Blocks > Block Manager and click on the green plus sign at the top right to create a new block. Name your block something like 'Homepage Top Block' and on the Properties tab untick the Show Block Title option, leaving all other fields as they are. In the WYSIWYG section you will need to add in two tables.

The add a table icon

Click on the insert table icon as shown above and change the settings to the ones illustrated below and click on OK. This will create a table with two cells side by side.

Table settings for block

Right click into the left hand cell and a menu will appear. Go to Cell > Cell Properties, set the Horizontal Alignment to Left and click on OK. Right click on the right hand cell and, again, go to Cell > Cell Properties. Set the Horizontal Alignment to Right and click OK.

Next, click into the space underneath the table so your cursor appears below the outline. Click on the insert table icon again and change the settings to the ones illustrated below. This will create a table with four cells side by side.

Table properties settings

Now right click on each of the four cells, go to Cell > Cell Properties and set the Horizontal Alignment on each one as follows. In the far left cell set it to left, in the two middle cells set this to centre and in the far right cell set it to right.

Now you will need to make a couple of changes to the code which can be done by clicking on the Source button as illustrated below.

Source button

You will now see the code as shown below. The first thing to do is to delete the line at the bottom circled in red.

Table html code

Then you will need to add the code in as highlighted below and, when you are finished, press save.

Table HTML code

The last thing you need to do is add in the slideshow and banner images.

To assign the slideshow go to Blocks > Slideshow block and on the right hand side make sure you are on the Properties tab. At the bottom of this tab you will see a line similar to {%block_143}: Block content. Highlight and copy everything before the colon, i.e. {%block_143} in this case. Go back to your newly created block and paste this into the first left hand cell. The slideshow won't show in the WYSIWYG, so don't worry that all you see is this piece of code. When you view it on the site it will show it properly.

To assign the banner images click into the cell you want to add the image to, then click on the Insert Image icon as shown below. Click on Browse Server, navigate to the image on your PC, click on the Assign button, add in your alt text to the Alternative Text field and press OK.

Inset Image Icon

The Page Layout

As above, make a note of the layout name assigned to your home page by looking at the blue bar across the top of your home page. Then go to Site > Layout Manager and click into edit this layout.

On the Properties tab make sure Display Left Column is ticked, also tick Span Top Centre Block Left. This second option will allow the top block to sit across the whole page with the two columns underneath it.

Sportswear home page layout

On the Centre Blocks tab look for the block you have created above, click on the red flag next to it to make it active and move it to the very top of the list using the green up and down arrows.

Next, make the selected products block active, or any other product block you may want to show on the home page such as the Latest Products block, and move it to just underneath the top block. At the bottom you should have the Page Content section.

On the Left Blocks tab set the Catalogue block to active and move it to the top. Set all other blocks to inactive.

 

The Lux Boutique Layout

The Lux Boutique layout looks complicated but is actually a fairly simple structure of two tables with either a slideshow block or a banner image assigned to each cell. What gives it the luxurious feel is the images, which should all work together with a similar tone to give a uniformed look.

Luxury Boutique Homepage Layout
Click on image to zoom

The Blocks

There are two blocks within this layout, the Slideshow block, which is added into the largest section of the layout at the top left, and the outer container block which creates the layout. This is done by creating a structure using tables to which you assign static images and the slideshow block. Each table cell is dependent on the size of image or slideshow assigned to it.

It may prove useful to draw out your layout on a piece of paper first to work out the pixel size of each cell/image. In the example above the layout structure fills the width of content area, which is 1000px. The height is also 1000px to make it look uniform but this can be anything you choose. The images must then be sized to fit within this area, allowing for padding between them, which in this example is 20px.

Homepage layout structure

In Blocks > Block Manager click on the green plus sign at the top right to create your new container block. Name your block and on the Properties tab untick the Show Block Title option, leaving all other fields as they are. In the WYSIWYG section you will need to add in a table.

Insert table

Click on the Insert Table icon as shown above and change the settings to the ones illustrated below and click on OK. This will create a table with two cells side by side.

Table properties

Right click into the left hand cell and a menu will appear. Go to Cell > Cell Properties, set the Horizontal Alignment to Left, the Vertical Alignment to Top and click on OK. Then right click into the right hand cell and set the Horizontal Alignment to Right, the Vertical Alignment to Top.

Next, click into the left hand cell and then click on the Insert Table icon again. Change the settings to the ones illustrated below.

Table properties

Then click into the right hand cell and then click on the Insert Table icon again. Change the settings to the ones illustrated below.

Table properties

You will now need to clean up the code to make sure everything sits in line. Click on the Source button at the top left, look for the lines that say <p>&nbsp;</p> and delete all instances of it. You will then need to add the code in as highlighted below and, when you are finished, press save.

Homepage HTML code

Next, go to your Slideshow block and assign the relevant images and links. Then scroll to the bottom of the Properties tab, highlight and copy the block variable, i.e. {%block_142} in this case. In the container block click into the top left cell and paste this variable into it.

Now all you need to do is add your images into their corresponding cell which you do by clicking into the cell you want to add the image to, then clicking on the Insert Image icon as shown below. Click on Browse Server, navigate to the image on your PC, click on the Assign button, add in your alt text to the Alternative Text field and press OK.

Insert image

The Page Layout

As above, make a note of the layout name assigned to your home page by looking at the blue bar across the top of your home page. Then go to Site > Layout Manager and click into edit this layout.

Make sure Display Left Column and Display Right Column are unticked, then go to the Centre Blocks tab. Unassign all blocks and assign the container block, making sure it is moved to the top above the page content section.


Yvonne Mills
Friday, 6 March 2015  |  16:05

Cate, this is absolutely brilliant, thank-you. I've really struggled to get to grips with blocks, but having detailed step by step instructions like this, gives me the confidence to try again.


Robert Hodgson
Friday, 24 April 2015  |  14:34

Thank you Cate. Excellent layout yourself, easy to understand!


Toni Da Costa
Monday, 4 January 2016  |  11:32

Hi Cate,

Thanks so much for the instructions for the Sports Layout. I have followed the instructions to the letter but find that the 1st image on the slideshow is oddly positioned. It's set lower than the others so that there's a blank space in the top half of the block and the bottom half of the block shows the top half of the image. I've changed images and swapped them around but the 1st image is always positioned like this. Any ideas?