Move CMS page title outside of normal layout

Question

I have a CMS page with the 1-column layout. I'd like to move the page title outside the main container of the page. The current setup is as follows:

<div class="main-container col1-layout">
       <div class="main">
         <div class="page-title">
           <h1>Page Title</h1>
         </div>
           <p>Some content here..</p>               
        </div>
       </div>
 </div>

I would like the page title element to sit outside the main container. Can this be done through an XML update?

Answer 1

You can't do this with a simple layout update xml. The easiest way to achieve this is create a new root template specific to your cms page. Steps for this is given below.

1. Layout Update XML File

Go to CMS > Pages > [Select your CMS Page] > Design > Layout Update XML section. Put this layout update code there.

<!-- removing default page heading block -->
<reference name="content">
    <remove name="page_content_heading" />
</reference>

<!-- defines new root template;add new page head block -->
<reference name="root">
    <action method="setTemplate">
        <template>custom/page/cms_1column.phtml</template>
    </action>
     <block type="core/template" name="cms_page_heading" as="cms_page_heading" template="cms/content_heading.phtml"/>
</reference>

This code basically performs 3 actions.

1. It removes the default CMS Page heading block from layouts; So it will eventually removes the default title section that you are viewing in your cms page.

2. It defines a new root template, custom/page/cms_1column.phtml for your CMS Page; I will explain why we need this.

3. We are again redefining CMS Page heading block, but this time it comes inside root block and not inside content block.

2. Define Custom Root Template

Now create a new file app\design\frontend\[package]\[theme]\template\custom/page/cms_1column.phtml and copy paste all content of app\design\frontend\[package]\[theme]\template\page/1column.phtml to that file. Then call our heading block inside that file as like this.

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <?php echo $this->getChildHtml('cms_page_heading') ?>
        <div class="main-container col1-layout">
            <div class="main">
                ...

As you can see <?php echo $this->getChildHtml('cms_page_heading') ?> this part renders the CMS Page heading block and it comes above layout-div block. You can adjust the position of your CMS page heading block according to your need as per your need.

We are using a new root template only for adding this custom CMS Page heading block. This will avoid touching of core files and hence would be the best solution in this case.

Answer 2

This can't be done my XML. As per below xml

<cms_page translate="label">
        <label>CMS Pages (All)</label>
        <reference name="content">
            <block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
            <block type="page/html_wrapper" name="cms.wrapper" translate="label">
                <label>CMS Content Wrapper</label>
                <action method="setElementClass"><value>std</value></action>
                <block type="cms/page" name="cms_page"/>
            </block>
        </reference>
    </cms_page>

Page title of CMS page is coming from content_heading.phtml which is called inside content area.

So if you want it out side the main-container you can put the condition in 1column.phtml like

<?php if(Mage::app()->getRequest()->getRouteName() === 'cms' && $this->getContentHeading()):?>
    <div class="page-title">
        <h1><?php echo $this->getContentHeading(); ?></h1>
    </div>
<?php endif; ?>

Or good way is you can set your own root file for CMS page and change in that file for your requirement.

You can follow steps for new layout of cms page here