I want all my visualforce pages to follow a standard format...please find the image. Is there any way to achieve this?enter image description here

  • This is quite vague? What have you tried and where have you got stuck?
    – Matt Lacey
    Commented Sep 24, 2013 at 6:22

2 Answers 2


If i understand the question correctly i think the following visualforce tags will be helpful






You can develop headers separately,footer separately and the side portion separately using different separate templates and then use apex:composition in your main page.

Best examples will be some code that comes in developer org for sample site page .

Assume your template page as below .

Template Page:

<apex:page showHeader="false" id="SiteTemplate">
<apex:stylesheet value="{!URLFOR($Resource.SiteSamples, 'SiteStyles.css')}"/>
 <apex:insert name="header">
  <c:SiteHeader />
<apex:insert name="body"/>
 <apex:insert name="footer">
<c:SiteFooter />
<site:googleAnalyticsTracking />

observe header and footer are components

Header compoenet:

apex:component id="headerComponent">
  <apex:panelGrid cellpadding="0" cellspacing="0" width="98%" border="0" columns="2" style="text-align: left;" id="theHeader">
<apex:image url="{!$Site.Prefix}/img/sites/force_logo.gif" style="align: left;" alt="Salesforce" width="233" height="55" title="Salesforce"/>
<apex:panelGrid cellpadding="0" cellspacing="0" width="100%" border="0" columns="1" style="text-align: right;" id="Links">
  <apex:panelGroup rendered="{!AND(ISPICKVAL($User.UserType,'Guest'), $Site.LoginEnabled)}">
    <apex:outputLink value="/site/SiteLogin.apexp">{!$Label.site.login_button}</apex:outputLink>
    <apex:outputText value=" | "/>
    <apex:outputLink value="/site/ForgotPassword.apexp">{!$Label.site.forgot_your_password_q}</apex:outputLink>
    <apex:outputText value=" | " rendered="{!$Site.RegistrationEnabled}"/>
    <apex:outputLink value="/site/SiteRegister.apexp" rendered="{!$Site.RegistrationEnabled}">{!$Label.site.new_user_q}</apex:outputLink>
  <apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}">{!$Label.site.logout}</apex:outputLink>

Similarly we have footer component

Now here is the main page as how this templates can be used

Main Page:

<apex:page id="loginPage" showHeader="false" title="{!$Label.site.site_login}">
<apex:composition template="{!$Site.Template}">
<apex:define name="body">  
    <apex:panelGrid bgcolor="white" columns="1"> 
      <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white" columns="1" styleClass="topPanelContainer"> 
        <apex:outputPanel layout="block" styleClass="topPanel">
          <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white" columns="2"> 
            <apex:image url="{!URLFOR($Resource.SiteSamples, 'img/clock.png')}"/>
            <apex:panelGroup >
              <apex:outputText styleClass="title" value="{!$Label.site.login}"/>
              <c:SiteLogin id="siteLogin"/>
        <c:SitePoweredBy />

Observe how template page is used as apex composition in main page

  • Yes. This is the way to do it. Combination of apex:composition and apex:component. Good reuse and least error prone. Commented Aug 6, 2015 at 16:15

It's an old question but anyone running into this should consider also reading this.

apex:include vs. Visualforce component, when and why?

It basically says to avoid apex:composition and go for components instead.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .