Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Contact Box components es are used to help visitors find contact information in a quick and concise format.

The following instructions will provide information on how to create and insert the Contact Box components into your page via Tridion.

Table of Contents

Table of Contents
excludeTable of Contents

Creating a Contact Box

...

The first step in adding Contact Boxes is to create a Contact Box component:

...

Click New Component (blue) to begin creating a Contact Box component.

In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.

You will be taken to a new page for creating the component (shown below):

...

the item of content either in the content folder or by creating content from your page:

...

The Content item has fields for:

Title, Additional information and Links, in addition to email, phone and fax numbers:

Image Added

Creating a Contact Box component.

...

There are a few important steps to creating a Contact Box component:

  1. Name the component.

...

Choose Contact Box from the Schema drop down menu (highlighted above in yellow).

  1. Enter the appropriate text for Title.

  2. Choose what type of contact information you want to list in the contact box with the Contact type drop down menu

...

  1. .

  2. Enter the Contact Email, Telephone or Fax number.

  3. You can also add additional info with the Additional info text field.

  4. You can add or delete contacts and links

...

  1. by clicking on the

...

  1. listing and then clicking on Delete.

  2. You have an option to add a link to appropriate content already published on your website, if desired.

    • To do so, click the magnifying glass icon to the right of the Links field (highlighted in green above).

Info
  1. Tip: Do not enter any ( ) or - in phone or fax numbers. Just use the 9 digits so that the autoformatting will add the telephone hyperlink.

If you choose to add a link by clicking the magnifying glass icon, the Building Blocks Content folder will pop up in a new window (shown below):

...

Select the Content you want to link to, and click Insert (highlighted in yellow below).

Back in the window for creating the component, you can review the information in the Contact Box.

...

When you are satisfied with your Contact Box component, click Save and Close (highlighted in yellow above).

Inserting a Contact Box Into a Page

To put a Contact Box onto a web page, you must navigate to the desired page in the root folder and open it.

  • Click Insert in the Component Presentations tab, which will open up the pop up with the Building Blocks folder in it (shown below):

...

Inserting the Contact Box component into your page.

Select the Contact Box component you created, then choose either Contact Box or Contact Box #side from the Component Template drop down menu (highlighted in yellow above).

  • If you choose Contact Box, the Contact Box will appear in the main part of the page.

  • If you choose Contact Box #side, the Contact Box will appear in the side navigation of the page (an example can be seen later in these instructions.

Once you’ve chosen the type of component you want, click Insert to add it to your page.

Back in the window for your page, click Save and Close and you are ready to PublishAdd:

...

If you created this in the Content folder, then navigate to your Page and click Browse for Content to insert it.

Contact Box Examples

Below is an example of a Contact Box (both normal and side) component, as it lives on a web page:

...