If you’re not using the Stack & Menu approach when creating your website, you’ll be creating a website made up of separate pages.  In many cases, content that is found on one page might also be found on another – think Footers, Logos, FaceBook and Twitter Icons, Legal Disclaimers, etc.  Now, if you have a lot of pages in your website, and you need to change the content often, it might be a good idea to use the Includes Widget.

Please note that this article was written for Cubender V3

The Includes widget allows you to create ‘templates’ for sections of your page so that when you need to edit the specific content of that section, you only need to edit it once, on the master template page that you create.

Suppose, for example, you’re a Photographer, and you have an animated image gallery on your page to display a rotation of your work and where you might want to change the images often.  Or you’re a clothing designer who needs to update your latest collection – every season.  Creating templates gives you an easy way to do all this.

Let’s take an example for a Health Spa who needs to be able to easily and quickly change the daily promotions found on their website.


 

The first thing we need to do is create the template page.  If you have already created your page, simply duplicate the page and delete everything else on the page that you don’t want to  include on the template.  In our example, we now have only the text box left in the upper left corner of the page (20% off!).  If you have not yet created your page, you will need to open a blank page and create the content you want in the template.  Do not add any background to the page.

 

Now’s also a good time to remove any locked elements you might have in the design.  This could cause issues with placement on your pages later.  You’ll know if an element is locked if when clicked it shows little green locks on the sides (top, bottom, left, right) or a green horizontal or vertical line running through the middle of it.  If there is, select the object so that you see it’s Action Icon > Position & Size > Fluid Positioning OFF.

 

 

Next, we need to remove any background we might have on the page.  By default, even if you started from a blank page, there’s a white background that you need to remove.  Go to Webpage (found just to the right of the Cubender logo) > Background and turn OFF (uncheck) the Apply Background Color and the Apply Background Image (if applicable).  Doing so will allow you to later place this image onto any other page without worrying about affecting the background on the other page.

 

The following step involves changing the size of the template page (Page Layout) so that it only fits around the border of the things you want on the template.  In our example, we have only one line of text to include on the template, so our page layout is going to be quite narrow and short.  Go to Webpage > Layout and adjust the Height and Width (in pixels) so that it fits around your design.

 

 

Once you’re done and you have saved your new page, we’re going to give it a title.  Go to the Site Map view (shortcut: click the Cubender Name in the top left corner to toggle back and forth between views) and find the page.  Click the title, and give it a relevant name so that you’re able to find it during the next few steps.  Here we’ve changed the title to: Template – Daily Promotion.

 

 

So now that we’ve created our template, we can use the Includes Widget.  Go back to the SiteMap view and select another page where we want to add the template content, and double click to open the page in the Editor.  On the page, add the Includes Widget from the gallery (found between the Stack Widget and the Box Widget) and you should see a black box appear on the screen.


Next, click the Action Icon on the Includes Widget > Select Webpage and you’ll see all the pages in your website.  Find the Template page that you created, and select it by clicking on it.  You will then be asked if you want to Resize the Object to Fit the Content.  Say YES.

You should now see the content from the other page appear on this one.  Any changes that you make to the Template page will be reflected on this page.  Any editing of that area on this page must be done via the Template Page.

 

Positioning

Chances are, the Widget isn’t appearing where you want it to be on your screen.  Positioning is important because you will want to make sure that you use the exact same positioning on your other pages that include this as well, so that there is a seamless transition during navigation.  Otherwise, it could look like the element/logo/etc.  is jumping around on the page as the user navigates.

You can drag and drop it to place it anywhere you wish on your page, or, as in my case, I want this to always appear in the exact same spot in the top left corner of the screen.  To do so, I’m going to lock the Includes Widget in place.  Select the widget’s Action Icon > Position & Size > Fluid Positioning and click ON the Top and the Left.  But because I want there to be a little bit of space between the top and left size, I then increase the pixels to 10 for Top and 10 for Left.

 

 

You’ll notice that there’s a black background behind the widget and the font looks a little bit funny, but that’s just so that you can distinguish at a glance what is using the Includes widget on your page.  When you Preview or Publish your page, you won’t be seeing any of this assuming you removed all background on the Template page as instructed above.

If looking at all the little pixel numbers starts driving you mad, you can opt for a few other choices that will allow you to position things on your page with ease.  I always like to keep “Show Borders” and “Show Grid” clicked on, but you can also slide placement rulers right onto your page so that you can align things nicely.  Right underneath the Widget Gallery you’ll see a grey-colored Ruler blending into the screen.  There’s also one on the left hand size.  If you click there, you can drag a horizontal or vertical pink ruler onto your page.  It also tells you were you are along the axis (in pixels) when you click on it.

 

These pink lines will stay in place as you move from one page to another in the Editor View, so that if you align them around the object you’re trying to position once you get it right, you’ll know exactly where to place the object on another page when you go to edit it.

That’s it for the Includes widget!  If you need more information about any of the other widgets or terms I described in this post, please refer to this informative tutorial on our Widget Gallery, Site Map View, and Editor View.   Happy designing!