• Header element as Text (Label)
• Logo element as Image
• Body element as Text Area(Where we will put HTML code
• Footer element as again Text (Label)

<style>
.center-align {
 align: center;
}
</style>
<table class="center-align">
 <tr>
  <td class="center-align"><img src="$Logo.data"></td>
  <td class="center-align"><h1>$Header.data</h1></td>
 </tr>
 <tr>
  <td class="center-align" colspan="1">$Body.data</td>
 </tr>
 <tr>
     <td class="center-align" colspan="1">
                <h3>$Footer.data</h3>
            </td>
 </tr>

</table>

• We are simply created one table with row and column. 
• In first row, we are displaying logo image. we are getting the its value by $Logo.data expression. In this expression, Logo is the name of the component that we defined in Structure. 
• Since this is Velocity template, all the component's value will be available by its name. Component value we will give while creating Web Content.
• Similar way we are accessing other component's value (with $<<COMPONENT_NAME>>.data expression)

Now our Template has been created. Next we will create Actual web content.
Click on Web Content from Content Section from control panel and then choose Web Content and click on Add Web Content as per below screenshot.

Give the name as 'Web Content1' and click on  Select button in Template section (right side just below the Structure section) as per below screenshot.

Note:- If you are not able to see the Template (or Structure section), then you have to click on Advanced link just below the <<Back link. When these sections (Structure and Template) are opened, then the Advanced link will be converted to Basic link.

Since we already attached the Structure with Template, if we select Template, then automatically the attached Structure will be applied.

On clicking on Select button, it will show the pop up saying 'Selecting a template will change the structure,available input fields, and available templates ? Do you want to proceed ?'. Click OK button and next new browser window will be open which will list down all template available as per below screenshot.

Click on Test Template1 which we had created. You will observe that, now instead of single WYSIWYG editor, the Web Content is divided in four sections.

• Header:- (We have given type as Text in structure. So whatever value we will give in text box, it will be shown as label while displaying this  Web Content .)
• Body:- (As WYSIWYG editor, because we have given type as Text Area (HTML) in Structure. So we can type HTML code and it will render when actual Web Content get displayed).
• Logo:- (We had given type as Image in Structure, so that it will ask to upload Image which will be render while actual Web Content display)
• Footer:- (We have given type as Text in Structure. So whatever value we will give in text box, it will be shown as label while displaying this  Web Content .)

Now its time to give actual value in these components. You are free to give any value you want. For explanation, I am giving the following values.

• Header :- "My Own Company"
• Body:- anything you want.
• Logo:- Upload any logo size image.
• Footer:- "Copyrighted by me :)"

You can give more options while creating Web Content. For this, just click on Edit button in Structure section as shown in below screenshot.

You will observe following options for each component we defined in Structure.

• Value
• Edit Option button from where you will find more options like tool tip and etc.
• Variable Name (defined in Structure)
• Close button (To remove it from Structure).

Once you done with editing, you can click on Save button from Structure section. If you cancel all your changes then simply click on Stop Editing button just besides Save button as per following screenshot.

Note:-  If you want, you can choose different Structure from Choose link.

Click on Publish button. Now its time to see our hard work done so far. To display this web content, we will create new page called Web Content 1 in Nilang community.

Now place the Web Content Display portlet and configure it to show the Web Content 1 that we just now created. To know how to configure the Web Content to Web Content Display portlet please refer my previous blog Create Web Content in Liferay

After successfully configuration, it will looks like as per below screenshot.

And all this done.  Try some more complex components in Structure and do some hands on for creating Web Content with the help of Structure and Template.

I would recommend looking at index page 'A Complete Liferay Guide' to browse all topics about liferay.

• Click on Communities from portal section in control panel.
• You will find all created communities over here.
• To add new, click on Add button from right part of the page.
• Give community name as Nilang (Or whatever you want). 
• Give appropriate description (like Community for Web content testing). 
• Keep the type as Open (Which is by by default selected) and click on Save button without touching any other options.

• All public page's friendly URL will start with /web.
• All private page's friendly URL will start with /group. 
• In above URL,Next to /web is /nilang. This is friendly URL of community(Nilang) and next to /nialng is /web-content which is friendly URL of this page.
• Liferay will automatically create friendly URL of page from its name (putting all alphabets in lower case and remove space with '-' (dash) character). 
• Liferay also create friendly URL for community with same logic. (From communitie's name, making all alphabets in lower case and replacing all space with  '-' (dash) character).

<portlet-name>custom-liferaymvc</portlet-name>
<display-name>Custom Liferaymvc</display-name>
<portlet-class>com.companyname.portlet.CustomMVCPortlet</portlet-class>
  <init-param>
    <name>view-jsp</name>
    <value>/view.jsp</value>
  </init-param>

<portlet-name>custom-liferaymvc</portlet-name>
<display-name>Custom Liferaymvc</display-name>
<portlet-class>com.companyname.portlet.CustomMVCPortlet</portlet-class>
<init-param>
  <name>view-jsp</name>
  <value>/jsp/view.jsp</value>
</init-param>

@ProcessAction(name="addName")
 public void addName(ActionRequest actionRequest,
   ActionResponse actionResponse) throws IOException, PortletException, PortalException, SystemException{
  actionRequest.setAttribute("userName", "Nilang");
 }

• @ProcessAction annotation is used to map Action method with key. Key is defined by name attribute (Ex. name="addName" ). This key is used to create actionURL in JSP.
• Action method can be called by creating actionURL in JSP. We can have more than one Action methods in portlet. 
• To call particular Action method, actionURL needs to be created in JSP with same key that we gave to Action method (in name attribute of @ProcessAction annotation). 
• The name of Action method can be anything. 
• Its not necessary the name of Action method and Key of @ProcessAction are same. But just for simplicity I have used the same name. (For name of Action method and Key).
• In the body of this Action method, we just set userName attribute in request scope.
• Also notice that, except setting attribute, there are not code exist in this Action method. Portal will call Render method after finishing Action method.
• So when this action method is called by actionURL from view.jsp , the flow will be like Action method --> Default Render method -->View.jsp again.

User Name is : <b> ${userName}</b>

<portlet:defineObjects/>

<portlet:actionURL name="addName" var="addNameUrl"></portlet:actionURL>

< br>

<a href="${addNameUrl}">Add Name</a>

• Portlet tld (<portlet:actionURL>) is used to create actionURL.
• name attribute of actionURL should be match with the name attribute of @ProcessAction annotation (Key of the Action method).
• var attribute will be used to refer this actionURL. It is added as pageScope variable in JSP. Notice that we have used this variable in href with EL.
• You can create more than one Action url with different <portlet:actionURL> tag. The name attribute should be unique. Each actionURL defined in JSP will be tagged to unique Action method in our customMVC class by matching name attribute. (name attribute in <portlet:actionURL> and name attribute in @ProcessAction annotation in customMVC class).
• We have written the first line, which shows the userName that we are storing in request scope in Action method.

User Name is : <b> ${userName}</b>

<portlet:defineobjects>

<portlet:actionurl name="addName" var="addNameUrl"></portlet:actionurl>

< br>

<form action="${addNameUrl}" method="post">
<input name="userName" type="text" />< br>
<input type="submit" />
</form>