/
Adding Content Elements

Adding Content Elements

Jul 01, 2024

Content elements allow you to add a wide variety of content to a content item. Unlike rich text, which is added directly on a content item in the Editor, content elements are independent items in and of themselves. The available content elements that you can add are available in the Insert menu in the Editor toolbar along the top portion of the Workspace. Click Insert to expand the menu:





In the Content Elements menu, the "Image" and "Link" content elements are always on top because they are generally the most used. The five content elements that appear below the separator are the ones that you have most recently added. When you click "More...", the full collection of content elements available to you is shown:

 

 

You can search for a content element by name by typing a full or partial string in the "Search" field.

 

The content elements described in this topic are those that are available by default in XperienCentral. It is likely that, custom elements have been added to your project. For complete information on using project-specific content elements, contact your application manager and/or main editor(s).

In This Topic

 

Anchor

 

An anchor displays a list of clickable links to other locations on the current content item. An anchor is commonly used to show a table of contents for content items that contain multiple sections. To add an Anchor element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Anchor" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. From the "Add Anchor" drop-down list, select the element that you want to add and then click [Apply].

  5. Repeat the previous step for each element that you want to add.

  6. To add all elements from the content item to the Anchor, click [Add All Elements] and then click [Apply].

  7. In the list of elements that you have added, you can modify the title that appears in the Anchor. By default, the title that appears in the list is the title assigned to the element.

  8. To change the order of the links in the Anchor, select a different number from the drop-down to the left of an element.

  9. To display a link that links back to the Anchor at the bottom of each element, select "Display 'Back to top' Link".

  10. Click [Apply].

  11. Save the content item.



Back to top

 

Application

An Application content element links to an external application. When clicked on by a website visitor, a pop-up window appears in which the external application appears. The available external applications are usually added by a main editor. To add an Application element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Application" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the external application from the "Application" drop-down list.

  5. Select the Design Template to use for the External Application from the "Design Template" drop-down list.

  6. Click [Apply] and then [OK].

 

 


Back to top

 

Content Overview

A Content Overview content element shows a list of items from the Content Repository. You can add any content item available on your entire website to the Content Overview. Unlike a Dynamic Content Overview, a Content Overview is static: The content items you add to it at the time you create it remain the same from then on unless you modify them at a later time.

 

If your website contains multiple language versions, the results shown in the overview are dependent on content items being available in the language for which it is configured. See Working with Language Versions in XperienCentral for general information about maintaining multiple language versions of a channel.

 

To add a Content Overview element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Overview" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:



  5. Click [Apply] and then [OK].



Back to top

 

 

Discussion

 

A Discussion content element displays a discussion between you and your website visitors. Discussions can be moderated either before or after a post has been made. One or more "discussion models" are available to use for the discussion. The model defines who may post entries to the discussion, how it is moderated, and so forth. To add a Discussion element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Discussion" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the model to use for the Discussion from the "Discussion Model" drop-down list.

  5. Select the Discussion from the "Discussion Name" drop-down list.

  6. Click [Apply] and then [OK].

The discussion is now open but empty on the website because there have not yet been any posts.

When the visitor clicks [New topic] to the right of a new discussion, a new thread is started. A new message form displays in which the visitor can create their new message. This will be a new topic within the scope of the current discussion. When the visitor clicks [Send message], the message is added to the discussion, however, since this is a pre-moderated discussion, the message will not appear for others to see until the moderator has approved the message. If this had been a 'Post-moderated' discussion, the message would have been shown immediately. Moderators have the option of adjusting post-moderated messages at a later time or deleting them altogether.

Moderating Discussions

To moderate discussions, select the [Moderate] tab from the Configuration > Discussions menu option. From here you can adjust, close or delete threads and messages in order to keep discussions up-to-date and manageable.

Discussion messages are either pre- or post-moderated. The advantage of pre-moderated discussions is that you can control the text that is published and weed out postings containing inappropriate language/content. Pre-moderated messages are only published after the moderator has approved them. The disadvantage of pre-moderated messages is that there can be delays between when a message is posted and when it appears on the website and this can tend to make discussions less spontaneous. Post-moderated messages are typically more appropriate for discussions that allow only registered users to participate.

Moderate a thread as explained below on the [Moderate] tab in Configuration > Discussions.

  1. Select the discussion you want to moderate from the list (in this example we select the 'Sports' discussion). After you select the discussion, an overview of the discussion and message threads appears.

  2. Click the link for the discussion in the Discussion overview. A dialog box containing the message that need to be moderated appears. Its initial state is 'New and non-public). You have the option at this point of selecting 'Public' or 'Rejected' as a new state for this message.

  3. Select 'Public' to approve this message and to allow it to be seen by all website visitors or 'Rejected' to disallow it. In this example we select 'Public'.

  4. Click 'Back to discussions overview'. Now when you select the discussion from the list, in this case 'Sports', the approved message now appears in the 'Threads' list. The thread is now visible on the website.

On the [Moderate] you can select [Close] or [Delete] to close or delete the thread. A closed thread remains visible on the website, but comments can no longer be posted. Deleting a thread erases the entire thread from XperienCentral permanently, including all responses.

Moderating a Message

To moderate a message, follow these steps:

  1. Navigate to the [Moderate] tab.

  2. Select the discussion from the discussion list.

  3. Select the relevant thread.

  4. Click a message to view it and to change its state from 'New and non-public' to 'Public' or 'Rejected'. In this example, 'You're all stupid' has all the hallmarks of a message that is most likely inappropriate and needs to be rejected.

  5. Click a message to view it. An overview of the message will appear that lists the reactions that have been sent.

  6. Click the link for the message next to Thread to view the message. Since this message is not suitable for the forum, it is rejected. This message is now no longer visible in the thread. However, it still exists in XperienCentral and its state could be changed to 'Public' in the future.

 

 


Back to top

 

Download

A Download content element makes a file available for download by website visitors. To add a Download element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Download" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the Design Template to use for the Download from the "Design Template" drop-down list.

  5. Click [Browse] to search for the file on a local disk or network drive or click [Select from Content Repository] if the file to be made available for download is stored in the Content Repository.

  6. In the "Name" field, enter the text that will appear as a hyperlink for downloading the file.

  7. (Optional) To display a version for the Download, enter it in the "Version" field.

  8. (Optional) To display the name of the author, enter it in the "Author" field.

  9. (Optional) To display a date for the download, click the date picker and select a date.

  10. Click [Apply] and then [OK].

 

Text in the "Name", "Author", and "Version" fields can be made into hyperlinks. See Content Element Actions Menu.

 

XperienCentral enforces a maximum file size for downloads, which is configurable. If you receive an error message when trying to add a file to a Download element, contact your application manager. Application Managers: See the setting file_distribution.max_file_size_mb in the General tab of the Setup Tool.

 



Back to top

 

Dynamic Content Overview

 

A Dynamic Content Overview element displays a list of items from the Content Repository. You can specify which items to show based on type, one or more tags, as well according to publication date or items that are a specified number of days old. The overview is dynamic, which means that over time what it shows changes as new items are added to the Content Repository that match the criteria or items disappear as a result of their publication date falling outside the specified range. A Dynamic Overview is an ideal way to display relevant content like articles.

 

If your website contains multiple language versions, the results shown in the dynamic overview are dependent on content items being available in the language for which it is configured. See Working with Language Versions in XperienCentral for general information about maintaining multiple language versions of a channel.

 

To add a Dynamic Content Overview element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Dynamic Content Overview" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:



  5. Click [Apply] and then [OK].



Back to top

 

 

 

Flash

 

The Flash content element and supporting code were removed from XperienCentral in versions R24.2 and R26 but is still available in XperienCentral veresions R25 and lower. Although normal Flash movies can be added to a website with XperienCentral versions R25 and lower (excluding R24.2), GX Software strongly recommends that you do not do so due to the lack of Flash support on mobile and tablet devices.

 

A Flash content element displays an Adobe Flash animation. To add a Flash element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Flash" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:

  5. Click [Apply] and then [OK].

 



Back to top

 

Heading Overview

 

The following applies to XperienCentral versions 10.20.0 and higher.

 

A Heading Overview content element displays a clickable list of anchors present on the current content item. Any string formatted as Heading 1 through Heading 6 is an anchor. You define which anchors appear in the list by specifying the heading level(s) to be included in the list (up to and including Heading 1, Heading 2, Heading 3 and so forth).

To add a Heading Overview element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select Heading Overview if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the heading levels you want to include in the overview (from 1 up to and including 6). You can only enter one value - comma separated lists and ranges are not accepted.

  5. Click [Apply].

In the content item, the Heading Overview displays a hierarchical list of the defined headings. When a visitor clicks a heading, they will automatically scroll to it.

See also Headings as Anchors.

 

Back to top

 

Image

An Image element displays a graphic. The supported formats are .GIF, BMP, JPG, PNG, SVG and WEBP (versions R36 and higher). You can select an image from a local disk or from the Content Repository. To add an Image element, follow these steps:

  1. Enter Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Image" from the top of the Context menu.

  4. You have two options for adding the image: you can either drag and drop an image from File Explorer directly onto the canvas of the Image element or you can click [Select from Repository] to select the image from the Content Repository.

  5. When the image has been placed on the canvas, define the following properties:



  6. Click [Apply] and then [OK].

 

Image Preview and Metadata

 

The following applies to XperienCentral versions R33.1 and higher.

Once you add an image, you will see a thumbnail preview as well as the following metadata for it:

 

Metadata

Description

Metadata

Description

File Name

The (operating system) name of the file containing the image.

File Type

The image type.

Source

Identifies the source of the image.

Dimensions

The height/width dimensions of the image in pixels.

File Size

The size of the image file in kilobytes (KB).

Focus Point

Specifies whether a focus point has been defined for the lead image. To define a focus point, click [Select Focus Point] (see below).

 

To upload a different image from a file on a local disk, click [Browse]. To upload a different image from the Content Repository, click [Select from Content Repository]. To delete the image from the content element, select "Delete" and then click [Apply].

Defining the Focus Point for an Image

When an image on your website is displayed in a web browser, its dimensions are determined by the size model that is defined for it. This is generally a one-to-one correspondence with the dimensions of the image or a scaled percentage of it that preserves the height/width ratio. However, because an image can be displayed on a variety of devices, it could be resized and/or its dimensions changed according to the available room on that specific device. When this happens, the image could be stretched out, shrunk or cropped in such a way that parts of the image are not shown in order to make it fit in the intended space on the device.

In order to have control over how an image is resized on various devices, XperienCentral makes it possible to define the focus point of an image. The focus point of an image is the area of the image that will never be cropped out. The focus point is not necessarily the center of the resized image because it all depends on the dimensions into which it is being fit. You can define a focus point for all image types except SVG.

Notes:

  • The focus point for an image in the Content Repository is universal (used wherever the image appears).

  • The focus point for an image in an Image element is used for that instance of the image only.

  • The focus point for a lead image is used for that specific content item only.

To define the focus point for an image, follow these steps:

  1. Click [Select focus point]. If the image already has a define focus point, click [Edit Focus Point].

  2. Position the cross-hairs on the part of the image you want to be the focus point. For example:





  3. Click the left mouse button. The focus point is set and shown as a blue circle. For example:




 

Centering the Focus Point

To center the focus point in the exact center of the image, click [Center focus point].

Removing a Focus Point

To remove a focus point from an image, click [Remove focus point].

 


Back to top

 

 

Interactive Form

An Interactive Form element adds a form to a content item which a website visitor can fill in and submit. The available interactive forms are usually created by a main editor. To add an Interactive Form element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Interactive Form" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the form from the "Form" drop-down list.

  5. Click [Apply] and then [OK].

Editing an Interactive Form

You can load a form directly into the Interactive Forms module in order to edit it. To do so, click [Edit] under the name of the form:

 

 


Back to top

 

Layouts

Layouts are custom templates that make it possible for you to render content in a wide variety of ways. Layouts can be added to content items via the Insert menu in the Editor. Contact your main editor or application manager for information about the layouts that are available.

Adding a Layout

To add a Layout, follow these steps:

  1. Move the cursor to the part of the canvas where you want to add the Layout.

  2. Expand the Insert drop-down.

  3. Click "More..." to open the dialog showing all the available content elements and Layouts.

  4. Click the Layout that you want to add. The Layout is added.

  5. Define the properties and content of the Layout.

Switching between Layouts

See Using Layouts for complete information on switching between layouts.

 

Back to top

 

List

A List element adds a bulleted list to a content item. To add a List element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "List" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the Design Template to use for the List Element from the "Design Template" drop-down list.

  5. Enter a title for the List element in the "Title" field.

  6. To make the bulleted list a hyperlink, select a link code from the "Link Code" drop-down list.

  7. Enter the text for the first item in the bulleted list in the "Items" field and then click [Add Item]. The item is added.

  8. Repeat the previous step for each item that you want to add.

  9. To change the order of the items in the list, select a different number from the drop-down list that determines the order in which the items are displayed.

  10. Click [Apply] and then [OK].

 

Text in the "Title" field can be made into a hyperlink. See Content Element Actions Menu.



Back to top

 

Modular Content Element

 

The Modular Content Element adds a Modular Content Template directly on the content item. To add a Modular Content Element to a content item, follow these steps:

  1. Enter Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Modular Content Element" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the presentation to use for the element from the "Design Template" drop-down list.

  5. Select the template from the "Modular Template" drop-down list.

  6. Click [Apply]. The properties of the template will appear in the panel. For example:





  7. If you want to prefill a field or set a default value, modify the properties of the template.

  8. Click [Apply] and then [OK].

 

Setting the Focus Point for Images

See Defining the Focus Point for an Image for complete information.

 

 

Back to top

 

Page Overview

 

A Page Overview element displays a list of web pages and their sub pages. The title of the pages in the overview is a hyperlink that redirect the website visitor to that page when they click it. To add a Page Overview element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Page Overview" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:





  5. Click [Apply] and then [OK].



Back to top

 

Paragraph

 

A Paragraph element displays text on a content item. The text in the Paragraph element cannot be formatted the way that rich text can: the format is determined by the Design Template used by your project. A title can be added to the Paragraph in order to set it off from the other content elements and rich text on the content item and the title of the paragraph can be made into a hyperlink. To add a Paragraph element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Paragraph" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Enter a title for the Paragraph in the "Title" field.

  5. If you want the title of the Paragraph to be a hyperlink, select the link code for the hyperlink from the "Link Code" drop-down list. The available link codes are links that have already been created elsewhere in other content items in the channel.

  6. In the main text field, enter the text for the Paragraph. You can separate lines using hard returns.

  7. Click [Apply] and then [OK].

 

Text in the "Title" field and in the paragraph body can be made into hyperlinks. See Content Element Actions Menu.

 

 


Back to top

 

RSS Feed

 

An RSS Feed element displays a Rich Site Summary (RSS). RSS feeds are used to publish frequently updated information such as news headlines, press releases, and blogs. To add an RSS Feed element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "RSS Feed" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:



  5. Click [Apply] and then [OK].



Back to top

 

Search

A Search element makes it possible for website visitors to search the website for content. A search can include all the content of the website or it can be restricted to a set of pages/sub pages. On the website frontend, the Search element gives the website visitor several search options.

To add a Search element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Search" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Select the  Design Template to use for the Search element from the "Design Template" drop-down list.

  5. Enter the size of the search box, in pixels in the "Search Box Size" field.

  6. Select the restriction(s), if any, that you want to impose on the visitor's search.

  7. Select where the search results will be displayed.

  8. Click [Apply] and then [OK].



Back to top

 

Table

 

A Table content element displays content in table format. To add a Table element, follow these steps:

  1. Enter the Edit mode for the content item.

  2. Click [Insert] at the top of the Editor.

  3. Select "Table" if it is visible in the short list or click "More..." at the bottom of the Context menu to show all the content elements.

  4. Define the following properties:


     

  5. Click [Apply] and then [OK].



Back to top

 

WYSIWYG

A WYSIWYG content element displays content exactly as you format it. Entering text in a WYSIWYG element is performed using an editor within the Editor. You have all the same formatting options in the WYSIWYG editor as you do for entering rich text in the Editor. Hyperlinks can also be added using the WYSIWYG toolbar.

Back to top

 

Resizing a Content Element Dialog Box

Some content elements contain more property fields than can be shown all at once in the default content element dialog box size. In this case, you can scroll up and down in the dialog box using the scrollbar on the right side of the dialog box or you can resize the element dialog box in order to see more or all of the properties at the same time.

To resize a content element dialog box, follow these steps:

  1. Hover the mouse over the lower right-hand corner of the dialog box until the expand handle appears. For example: