Is this really the version you are looking for? Kentico Xperience 8.1 Tutorial is no longer updated. Use the switcher in the header to choose your product version.
Now we will create gray and blue web part containers for our home page text. You can reuse containers for any other web parts later. If you do not wish to use web part containers, you can alternatively insert the surrounding code directly into the HTML layout of your page template.
Display name: My website gray box
HTML code:
<table style="width: 100%;" cellspacing="0" cellpadding="0" border="0" class="ContainerWithCorners">
<tr class="ContainerWithCornersRow">
<td class="ContainerWithCornersTopLeft"> </td>
<td class="ContainerWithCornersTop"> </td>
<td class="ContainerWithCornersTopRight"> </td>
</tr>
<tr>
<td class="ContainerWithCornersLeft"> </td>
<td class="ContainerWithCornersContent" valign="top">
□
</td>
<td class="ContainerWithCornersRight"> </td>
</tr>
<tr class="ContainerWithCornersRow">
<td class="ContainerWithCornersBottomLeft"> </td>
<td class="ContainerWithCornersBottom"></td>
<td class="ContainerWithCornersBottomRight"> </td>
</tr>
</table>The "□" character in the code above determines the position of the web part's HTML code within the container.
Display name: My website blue box
HTML code:
<table cellpadding="0" cellspacing="0" style="width: 100%;" class="Blue">
<tr>
<td class="BoxTitle">{%ContainerTitle%} </td>
</tr>
<tr>
<td class="BoxArea">
□
</td>
</tr>
</table>Now that the containers are prepared, you can assign them to specific instances of web parts.
If you now view the Home page in Preview mode, you can see the gray box around the welcome text and the blue box around the contact us text.