Latest trends and generations become tricky, and competition in the market to attract customers with attractive UI Design is grow tough and challenge for the Magento designer and developer. As we all know nowadays, customers are asking for the different types of designs for each page within the same site. And in Magento you can’t do that because of numerous CSS parameters and classes which are interrelated and dependent, so if you directly change those classes to meet a page design then I’m dame sure you are doing mess-up with other pages as you are customizing the default classes, even you can’t do that using new CSS classes also because Magento Structure is general for all the pages of it.

This is one of the challenges for Magento Developers which can make them to things how do I do that, nothing to worry about that; you can achieve different design for individual page within Magento. Here you have to add an extra column for each page where you think the page contains the different design.

By default, Magento carry 5 layouts with different columns design
1. Empty Column Layout
2. 1 Column Layout
3. 2 Column Left
4. 2 Colum Right
5. 3 Column Layout

To add Extra column, you will have to follow below process, utilizing the below method you can define as many columns as you want with Magento eCommerce.

Let’s take an example. I’ve got a new Page which is different from the current design of my Magento store, and I’ve to implement it.

I’m adding a new column in list called – “Custom Home Page Design.”
Following Magento 1.7

Step 1 – Add Module File
In Magento 1.7 and above there is no local file available in code pool, so first we need to create a code pool to reference source files.
To create code pool just add a module file in
app/etc/modules – add Mage_Local.xml and copy below code

<?xml version=”1.0″?>
<config>
    <modules> 
      <Mage_Page>
         <active>true</active>
           <codePool>local</codePool>
         <depends>
           <Mage_Core/>
       </depends>
     </Mage_Page>
  </modules>
</config>

Step 2 – Replicate Config.xml file
2.1 Now go to /app/code/core/Mage/Page and copy config.xml file
2.2 Create /app/code/local/Mage/Page/etc/ and copy config.xml file from step 2.1 to 2.2

Step 3 – Create Template File with Your Theme Package
Now you to create template files within your custom theme package, it should be like this-
Go to /app/design/frontend/custompackagename/customthemename/template/page and create a file with .phtml extension. Example – “custom-home-page-design.phtml” you can give any name you want, you can apply your custom heading, your css classes and structure whatever you want here in this phtml file and it will be displayed to your custom page.

Step 4 – Insert Custom Colum Reference in Config.xml
In this step you will have to add custom layout reference to your core config.xml file over here
Edit /app/code/local/Mage/Page/etc/config.xml

Go to line no 73 and add below
<custom-home-page-design module=”page” translate=”label”>
     <label>Custom Home</label>
     <template>page/custom-home-page-design.phtml</template>
     <layout_handle>custom-home-page-design</layout_handle>
</custom-home-page-design>

Now you are all done, Now go to admin panel to see new column:
Admin – CMS – Manage Pages – Add Edit any Pages and see the things as per the below screenshot.

I’m also attaching a zip file here with code, everything is created and copied to this file you just have to copy it to your Magento root and you will see the same as above screenshot and then you can add and edit your custom design into custom-home-page-design.phtml

The zip file template path is of Magento Default Base Path
/app/design/frontend/base/default/templates/page/ custom-home-page-design.phtml.phtml
Just replace base path with your custom theme if you are using any and you are all set with Magento Website Design Structure.

Download Magento Custom Layout Source Code

If you fill any issues with the above code and zip file, just comment it within this blog post and we will help you out with this process as we believe in support more!

Happy Coding! Feel free to contact our Magento Website Designer for any designing services!