Let's start developing our custom home page. The following screenshot shows the final result that we are going to reach:
This is an example of what the screen in this program looks like.
The home page structure contains two main blocks that we will call slider block and main content block. As you can see from the design, the slider bar is a full screen bar with a carousel and three text banners on the right.
Under the main slider bar, we have the left sidebar with a vertical navigation, and on the right a simple products list.
We are going to create a home page from the admin panel using the CMS home page, some CMS blocks, and some layout XML updates by using the following steps:
Creating the slider row
Creating the CMS block for the carousel
Creating the CMS block for the text banners
Creating the CMS home page
Customizing the look and feel of the home page with CSS