The Global Elements are optional containers that can be displayed above the footer of the website. This content will be the same for all pages and will be visible on all of them (unless deactivated for specific pages).

There are two types of elements that can be added, plus the Pop-ups, an additional global feature that can be activated for all, or just specific pages.

Watch the tutorials

• Introduction to Global Elements
• Tabbed Feature
• Promotion Tab
• Pop-Ups

Step by Step

TABBED FEATURE

The Tabbed Feature consists of a set of two or more tabs that can be selected. When a tab has been selected, it shows up to six images as can be seen below in the screenshot.

This feature can be used to highlight specific content with links on the footer of all the pages of the website. On panda.org it’s currently being used to show Priority Species and Priority Regions.

1. Go to Pages -> Global Elements and select the Tabbed Feature
2. On the new screen, select the site where you want to add the feature, and then click on “add new feature”.
3. Now select the language (if it’s not selected automatically) and choose a name for the first tab (example: Priority Species). Also select if you want to activate the tab right away. If activated, the tab will show immediately on the website. If you don’t want this, choose to have it inactive first and reactivate later. Click Add.
4. When the first tab has been added, you will see it in the list below. You can now go and edit this tab and add images. Click on the edit button next to the name of the first tab.
5. Give the first element a name (for example: Marine Turtles). You can now add images by selecting from the database, or uploading a new image from your computer. If you want the element to be linked, choose the page that you wish to link it to. Click Add.
6. Now you will see the list of all the tabs added so far. You can create additional tabs by following the steps listed above.
7. If you activated your tabs, they will appear on your homepage.

PROMOTION TAB

The Promotion tab is a feature that shows up on the webpage between the page content and the footer. It can contain a Newsletter sign-up, a banner for advertising or campaigns, and a small teaser/gallery.

You can either use all three sub-elements, or one element twice. NOTE: You need to have three elements in total for this tab to appear at all.

Elements in the Feature:

• Newsletter sign-up (currently only available on panda.org – for your website, please use one of the other two sub-elements mentioned below twice).
• Center Image (Banner): You can put an image that will link to an internal page
• Gallery: Small teaser with image, previous/forward arrows, and links.

1. First element: Click on Promotion Tab on the left menu. Then click on the top right to add a new feature.
2. Select the type of Promotion that you want to add.
   PLEASE NOTE: The newsletter sign-up is currently only available on panda.org – for your website, please use one of the other sub-elements twice – for example, two galleries and one single featured image.
3. Select the site where this feature should show. Select a title, image and link for it. Click Save. (Make sure the site doesn’t switch back after adding the image.)
4. Go to edit the feature you just added and make it active (by default it will be deactivated).
5. Add a Gallery: Add a new element (there have to be total of 3 items in order to make the whole Promotion Tab appear on the website).
6. To add a gallery, select the Gallery option and then give a name, link, image, and link description.
7. Choose the Activate option if you want to activate this gallery right away. If not, you can first add all the images and then activate it. To add more images, go to the ‘Gallery Images’ tab.
8. For each image, give a name, description, image, link, and button text; then click save.
9. The added images will be appearing in the lower screen. You can edit, remove or re-arrange each item. If you need to add more images, click on the Image tab on the top.
10. Add a 3rd Element: Remember we need to have 3 elements in the row to make the feature work.
11. Please add one more element, following steps 2 or 3.
12. After adding all 3 elements, they will appear on your homepage (if they had been activated earlier).

You can create what are known as “shortcut” or “alias” links.

You typically use these short links for marketing reasons or ease of communication, so that your customers don’t have to use the long URL where the page actually sits.

So for example http://wwf.panda.org/species is a shortcut for this page
http://wwf.panda.org/what_we_do/endangered_species/.

Watch the tutorial

• Create a shortcut / alias

Step by Step

1. Go to the links section inside your CMS and look for the “alias” or “shortcut” label.
   https://pad.panda.org/content/alias.cfm
2. When you get there you’ll see on top right (very right end) a link that says “add new alias”. If you do not see the link, you will have to probably scroll to the right until it shows up.
3. Click on “add new alias”.
4. In the settings, add the name for your new shortcut. You can then enter the name you want, for example:
   species
5. Then specify which url should this shortcut point to. You can insert a full, normal URL from the site, or use the linkpicker.
6. Once you press the save button, the shortcut will be live immediately (no need to publish anything).

• Fix 404 pages

The “Form Builder” container is a tool that is used to create a Form, to send data from the user to a database or e-mail address through a page on your website. It is mostly used as a newsletter sign up form or a contact form, so that users can send a message to the owner or responsible person of the website.

With this tool you can add such a contact form, or any other type of information that you want to receive, and choose if you want to send the submitted data to a specific email address or a database saved in the CMS. If you are using Mailchimp and you want to have a form that connects to your account, you can use the Mailchimp container instead.

Watch the screencast:

• Using the Formbuilder Container

Or go through these steps:

1. Add your form

a) On your page, click on ‘add new container’ and select this type:

b) Select the options

• Store in Database or
• Send to an email Address

c) Select language

d) Apply Captcha image: this function requires the user to write a word or number into a field to check that it’s not spam.

e) Clone or copy the form builder from another form.

f) Define Post-Submission Settings: Choose the action you want to be done when a user submits the form.

• Refresh the page
• Show thank you message
• Redirect to internal page (Nav ID)
• Redirect to external page (URL)
• Post to external server

g) Click the ‘Save’ button.

2. Configure your form

a) For your first field (ex: Name), put the name on the first field.

b) Select position: above or left

c) If you want the user to read instructions, write them in the Field Instructions text field.

d) Select the type of field: Normal text field is standard.

e) Select the aditional options and click the ‘Add’ button.

f) Repeat these steps for each field you want to add. You can add Text fields, drop down menus, radio buttons, file uploads.

g) Your Form will be added to your page once you refresh it.

If you are using Mailchimp and you want to have a form that connects to your account, you can use the Mailchimp container instead.

Redirecting pages to any URL

Here is what you need to do:

1. Create the page normally
2. Create a new container
3. Select the “Special” container
4. Upload a HTML file that contains the following code (replace the blue part with the actual URL where the link should go to)

<cfif not isdefined("bAdminMode") or bAdminMode neq true>
 <cflocation url="http://www.URL_of_website.com" addtoken="False">
 </cfif>

5. Save the container
6. Publish the page (you might get redirected instantly, so in that case please contact as, or if you are an administrator use the “batch edit” mode to publish the page.

Done! From now on people that land on this page will go directly to the external page.

As a second option using Javascript, you can place the following code into the HTML / Source part of a Text container (put in the actual URL):

<script type="text/javascript">window.location.href="https://new-url.com/";</script>

Using this code will show the original page for about 1 second and then redirect to the new target.