Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering Magento Theme Design

You're reading from   Mastering Magento Theme Design Magento is the super-capable open source e-commerce platform that's number one for a reason. By using this book to optimize your know-how, you'll be acquiring the ultimate in e-tail expertise for yourself and your clients.

Arrow left icon
Product type Paperback
Published in Apr 2014
Publisher
ISBN-13 9781783288236
Length 310 pages
Edition Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Andrea Sacca Andrea Sacca
Author Profile Icon Andrea Sacca
Andrea Sacca
Arrow right icon
View More author details
Toc

Table of Contents (18) Chapters Close

Mastering Magento Theme Design
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
1. Introducing Magento Theme Design FREE CHAPTER 2. Creating a Responsive Magento Theme with Bootstrap 3 3. Customizing Our Custom Theme 4. Adding Incredible Effects to Our Theme 5. Making the Theme Fully Responsive 6. Making the Theme Socially Ready 7. Creating a Magento Widget 8. Creating a Theme Admin Panel 9. Customizing the Backend of Magento 10. Packaging and Selling the Theme Conclusions and Credits Index

Developing the home page


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.

Configuring the structure of the home page

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

Creating the slider row

First of all, we create all the CMS blocks...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime