{"id":6497,"date":"2019-11-14T09:32:39","date_gmt":"2019-11-14T09:32:39","guid":{"rendered":"http:\/\/www.datapost.co.za\/help\/?page_id=6497"},"modified":"2025-05-02T09:42:12","modified_gmt":"2025-05-02T07:42:12","slug":"nfinityxid","status":"publish","type":"page","link":"https:\/\/datapost.co.za\/help\/nfinityxid\/","title":{"rendered":"nfinityXID"},"content":{"rendered":"[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.20.0″ global_colors_info=”{}”][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID.png” title_text=”XID” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_button button_text=”Home” _builder_version=”4.20.0″ _module_preset=”default” custom_button=”on” button_text_color=”#FFFFFF” button_bg_color=”#2c4166″ button_border_color=”#2c4166″ hover_enabled=”0″ global_colors_info=”{}” button_url=”https:\/\/datapost.co.za\/help\/” button_icon=”4||divi||400″ sticky_enabled=”0″][\/et_pb_button][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

This application allows users to create templates and presentations, which can be used within playlists or interactive presentations published to an nfinityX media device.\u00a0Create single page dynamic presentations that allow you to connect to live data feeds. This is very useful for menus, business information and airport flight information screens. The XID user interface presents the user with a set of controls allowing him\/her to create engaging visual presentations.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

The XID interface has three sections<\/strong><\/span><\/h4>\n[\/et_pb_text][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” width=”80%” min_height=”80px” border_radii=”on|7px|7px|7px|7px” border_width_all=”1px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
1. Horizontal Menu Bar<\/span><\/strong><\/h5>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
1.1 Project Name<\/strong><\/span><\/h5>\n

Once you have saved your XID project, the project name will display in the top left corner of the screen.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.2 Save As & Save<\/strong><\/span><\/h5>\n

When you create your project, you will save it as the title you want to give it. The next time you open it, the Save button will appear for you to simply save your changes.<\/span><\/p>\n

<\/strong><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.3 Edit<\/strong><\/span><\/h5>\n

The edit menu offers the user the convenience of the following actions Undo, Redo, Cut, Copy, Paste, Stretch, Crop, Duplicate and Delete.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.4 Project Settings<\/strong><\/span><\/h5>\n

Select the aspect ratio, you require your XID project to be, from the drop-down menu. Your options are 16:9, 9:16 and 4:4. The aspect ratio can also be customized. Projects can be renamed or deleted from this window as well.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.5 Preview<\/strong><\/span><\/h5>\n

Clicking on preview allows you to view your design. You are also able to test your interactive projects by navigating through your customer journey.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.6 Snapshot<\/strong><\/span><\/h5>\n

This allows you to capture a snapshot of your page design.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.7 Api Manager<\/strong><\/span><\/h5>\n

The Api Manager enables the user to attach live data to the project. This can be done via Google Sheets, json files or REST API’s.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.8 Script Editor<\/strong><\/span><\/h5>\n

This is where you would go to add and edit custom Javascript scripts.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.9 Location-based<\/strong><\/span><\/h5>\n

When you click on Location-based, a window will open. This is where you will set up locations that are used for dynamic text.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.10 Share<\/strong><\/span><\/h5>\n

Share the project that you are working on with other users by making them project owners.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

1.11 Create Template<\/strong><\/h5>\n

Create a template and publish it to the XID Store.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2. Toolbars (Left panel)<\/strong><\/span><\/h5>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_5,1_5,1_5,1_5,1_5″ _builder_version=”4.16″ _module_preset=”default” custom_margin=”||13px||false|false” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Add-Page-icon.png” title_text=”Add Page icon” align=”center” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” global_colors_info=”{}”]\n

Add Page<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Click on the Add Page button to create a new page.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Remove-Page-icon.png” title_text=”Remove Page icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

Remove page<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the Remove Page button to delete a page.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Duplicate-Page-icon.png” title_text=”Duplicate Page icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

duplicate page<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the Duplicate Page button to create a copy of a page.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Text-icon.png” title_text=”Text icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” custom_padding=”||0px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

ADD TEXT<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the Add Text button to add text to a page.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Add-Shapes-icon.png” title_text=”Add Shapes icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

ADD SHAPES<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the pyramid icon to add shapes to your presentation.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.1 How to add a page<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the Add Page icon at the top of the toolbar on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Added-page-on-right-16-Apr-2025.png” title_text=”XID Added page on right 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. The added page will appear under Pages.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.2 How to remove a page<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-remove-page-16-Apr-2025.png” title_text=”XID remove page 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Remove a page by clicking on the it in the panel on the right. Followed by either the red Remove button in the panel or the Remove Page icon in the toolbar on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.3 How to duplicate a page<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-remove-page-16-Apr-2025.png” title_text=”XID remove page 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Highlight the page that you want to duplicate by clicking on it in the panel on the right.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Duplicate-page-16-Apr-2025.png” title_text=”XID Duplicate page 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. The duplicate of your page will appear below the original page.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.4 How to add text<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Add-Text-16-Apr-2025.png” title_text=”XID Add Text 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the Text icon in the menu bar on the left. A default text block will be inserted on the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Highlight-text-block-16-Apr-2025.png” title_text=”XID Highlight text block 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the text box to ensure that it is highlighted.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Text-panel-2-16-Apr-2025.png” title_text=”XID Text panel 2 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. Edit the text by typing in the block.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Text-on-canvas-16-Apr-2025.png” title_text=”XID Text on canvas 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. The text will update on the canvas. You will have to expand the binding box to make the text fit.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.5 How to add shapes<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the pyramid icon in the menu bar on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-shapes-16-Apr-2025.png” title_text=”XID shapes 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. A list of shapes will appear. Click on the relevant one.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Shape-on-canvas-16-Apr-2025.png” title_text=”XID Shape on canvas 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The shape will be inserted on the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_5,1_5,1_5,1_5,1_5″ _builder_version=”4.16″ _module_preset=”default” custom_margin=”||13px||false|false” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Flame-icon.png” title_text=”Flame icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” global_colors_info=”{}”]\n

HOTSPOTS<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Add a Hotspot (transparent overlay) to your project by clicking on the flame icon.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Webpage-icon.png” title_text=”Webpage icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

ADD A WEBPAGE<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on Add a Webpage to add a web component using a URL. It is important to note that the site needs to allow CORS.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Ticker-3.png” title_text=”Ticker 3″ force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

TICKER<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Add animated text or an image feed to your project.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Link-icon.png” title_text=”Link icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

INTERACTIVE MODE<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Create interactive presentations allowing users to navigate to different pages in the presentation by using Interactive Mode.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”][\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Image-Modal-icon.png” title_text=”Image Modal icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

ADD IMAGE MODAL<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on Add Image Modal to add further information to screens.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.6 How to add a hotspot<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Six-doughnuts-on-canvas-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Hotspots are used to add navigation to interactive projects.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-6-Doughnuts-with-Hotspot-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the flame icon in the menu panel on the left. A hotspot will be inserted on the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Blue-doughnut-with-hotspot-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. Drag the hotspot across to the relevant spot on the canvas and resize by dragging the corners.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Interactive-mode-on-doughnut-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. Click on the Interactive Mode icon in the menu panel on the left.\u00a0 Select the page, you want to link the hotspot to, from the drop-down.\u00a0<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.7 How to add a webpage<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

1. Click on Add webpage icon in the menu panel on the left.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Add-web-page-16-Apr-2025.png” title_text=”XID Add web page 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. The Datapost website will appear on the canvas.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Click-on-web-page-3-16-Apr-2025.png” title_text=”XID Click on web page 3 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. Click on the black bar of the web page. The Web View panel will open. This is where you will change the web address to the required one.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-Fill-Web-Page-16-Apr-2025.png” title_text=”XID Stretch to Fill Web Page 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. Open the Elements panel and click on the Stretch to Fill tool under Transform & Position to fill the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Web-page-filling-canvas-16-Apr-2025.png” title_text=”XID Web page filling canvas 16 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

5. The web page will expand.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.8 How to add a ticker<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the Ticker icon in the menu panel on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Ticker-on-canvas-17-Apr-2025.png” title_text=”XID Ticker on canvas 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. A ticker item will be inserted on the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Ticker-Settings-Tools-2-17-Apr-2025.png” title_text=”XID Ticker Settings Tools 2 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The Ticker Settings panel will open.<\/p>\n

There are 3 ticker types: fade, vertical-up & vertical-down.<\/p>\n

The maximum number of characters can be set by inputting the required number.<\/p>\n

The speed of the ticker animation can be set by inputting the required speed.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Update-ticker-text-17-Apr-2025.png” title_text=”XID Update ticker text 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. Type the required text in the Ticker Item box & click on the Update button.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Updated-ticker-text-on-canvas-17-Apr-2025.png” title_text=”XID Updated ticker text on canvas 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a05. The text will update on the canvas. This can be done for all three ticker items.<\/p>\n

Additional ticker items can be added by clicking on the Add Text button.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.9 How to add navigation to an interactive project<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Basket-Shape-on-canvas-17-Apr-2025.png” title_text=”XID Basket Shape on canvas 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the Interactive Mode icon in the menu panel on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Basket-shape-with-interactive-mode-17-Apr-2025.png” title_text=”XID Basket shape with interactive mode 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Interactive mode will activate. Select the page that you want the user to navigate to, when clicking on the shape, from the drop-down.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Navigation-selected-17-Apr-2025.png” title_text=”XID Navigation selected 17 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The selected page will update. Your navigation can be tested & confirmed by clicking through the project while the interactive mode is active. I.e. the icon is blue.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.10 How to add an image modal<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Media-Panel-open-22-Apr-2025.png” title_text=”XID Media Panel open 22 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Insert a background image on the canvas by opening the Media panel and either double-clicking on the image or dragging and dropping it on the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Background-image-on-canvas-22-Apr-2025.png” title_text=”XID Background image on canvas 22 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Highlight the image by clicking on it. Go to the Element panel under Design and click on the Stretch to Fill tool under Transform & Position.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Background-image-stretched-to-fill-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The background image will stretch to fill the canvas. Click on the Add Image Modal icon. A blue pop-up will ask you to add an image form the Media Library.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Add-image-modal-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. Click on the image that you want to use. The image modal panel will open.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Image-Modal-panel-22-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

5. Make the modal full screen by toggling to the right. Give your modal a title, subtitle & description as required.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_6,1_6,1_6,1_6,1_6,1_6″ _builder_version=”4.20.0″ _module_preset=”default” custom_margin=”||13px||false|false” global_colors_info=”{}”][et_pb_column type=”1_6″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Duplicate-Element-icon.png” title_text=”Duplicate Element icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

DUPLICATE ELEMENT<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the Duplicate Element icon <\/em> to duplicate elements.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Delete-icon.png” title_text=”Delete icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” custom_padding=”||0px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

DELETE ELEMENT<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Click on the Delete Element icon to delete elements.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Smart-Object-Icon-17-March-2025.png” title_text=”XID Smart Object Icon 17 March 2025″ url=”https:\/\/datapost.co.za\/help\/dynamic-smart-objects\/” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

DYNAMIC SMART OBJECTS<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Choose from a variety of dynamic smart objects.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Template-Store-icon-17-March-2025.png” title_text=”XID Template Store icon 17 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

XID TEMPLATE STORE<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Visit the XID store to view and purchase a variety of available templates.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_text][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Pexel.png” title_text=”Pexel” url=”https:\/\/datapost.co.za\/help\/pexel-library\/” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

PEXEL LIBRARY<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Import Pexel images directly into your XID project.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Freepik-icon-17-March-2025.jpg” title_text=”XID Freepik icon 17 March 2025″ url=”https:\/\/datapost.co.za\/help\/freepik\/” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

FREEPIK<\/span><\/p>\n[\/et_pb_text][et_pb_blurb _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Freepik logos, icons & images.<\/span><\/p>\n[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.11 How to duplicate an element<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Highlighted-Arrow-Shape-23-Apr-2025.png” title_text=”XID Highlighted Arrow Shape 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the element that you want to duplicate, folowed by the Duplicate Element icon in the menu on the left.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Arrow-duplicated-23-Apr-2025.png” title_text=”XID Arrow duplicated 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. The element will duplicate.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Duplicated-Arrow-moved-23-Apr-2025.png” title_text=”XID Duplicated Arrow moved 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The element can now be moved to the required position on the canvas by dragging it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

2.12 How to delete an element<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Highlight-Arrow-Shape-in-corner-23-Apr-2025.png” title_text=”XID Highlight Arrow Shape in corner 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Highlight the element that you want to delete by clicking on it and then on the Delete Element icon.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-canvas-2025-03-17.png” title_text=”XID canvas 2025-03-17″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. The element will be removed from the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_6,1_6,1_6,1_6,1_6,1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Sitedish-icon-17-March-2025.png” title_text=”XID Sitedish icon 17 March 2025″ align=”center” _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

SITEDISH<\/span><\/p>\n[\/et_pb_text][et_pb_blurb _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

The ultimate all-in-one bundle for food menus.<\/span><\/p>\n[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_6″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3. XID image and control panels<\/strong><\/h5>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
3.1 Design tab<\/strong><\/span><\/h5>\n

The Design tab contains all functions related to the designing of your project. I.e. pages, fonts, elements & animations.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Design-Tab-Apr-2024.png” title_text=”Design Tab Apr 2024″ align=”center” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” border_width_all=”1px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.1.1 Page Control – Pages<\/strong><\/span><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Pages-18-March-2025.png” title_text=”XID Pages 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” custom_margin=”-58px||||false|false” custom_padding=”69px||||false|false” border_radii=”on|5px|5px|5px|5px” border_width_all=”1px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Page Name\u00a0<\/strong><\/span><\/h5>\n

Displays the name of the page that you are on.<\/span><\/p>\n

<\/strong>Background<\/b><\/strong><\/span><\/h5>\n

Change the background colour of the page that you are on by clicking on the block & selecting the colour you want your page to be from the colour picker.<\/strong><\/span><\/p>\n

<\/strong><\/span><\/h5>\n
Go To Page<\/strong> <\/span><\/span><\/h5>\n

This is where you select to which page your project must transition.\u00a0<\/span><\/strong><\/span><\/p>\n

Timeout<\/strong><\/span><\/span><\/h5>\n

This refers to the duration of the page you are on before it transitions to the next specified page.<\/span><\/p>\n

<\/strong><\/span><\/h5>\n
Add Page & Remove<\/b><\/span><\/h5>\n

Add new pages & remove existing ones from this panel.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.1.2 Text Control – Text<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/XID-Text-3.png” title_text=”XID Text 3″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

<\/strong><\/h4>\n

Text Tools<\/strong><\/h4>\n
Font<\/strong><\/h5>\n
Font Size<\/strong><\/h5>\n
Text Aligment<\/strong><\/h5>\n
Text Style<\/strong><\/h5>\n
Bold & Underline<\/strong><\/h5>\n
Remove Font Style<\/strong><\/h5>\n
Background- & Foreground Colour<\/strong><\/h5>\n
Unordered List<\/strong><\/h5>\n
Ordered List<\/strong><\/h5>\n
Table<\/strong><\/h5>\n
Link<\/strong><\/h5>\n
Full Screen<\/strong><\/h5>\n

<\/strong><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.1.3 Element Control – Element<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Element-18-March-2025.png” title_text=”XID Element 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n
<\/strong><\/h5>\n
<\/strong><\/h5>\n
<\/strong><\/h5>\n
<\/strong><\/h5>\n
<\/h5>\n
<\/h5>\n
<\/h5>\n
Name <\/strong><\/h5>\n

Displays the name of the element.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Element Control – Color<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Colour-18-March-2025.png” title_text=”XID Colour 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” custom_padding=”48px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n
<\/strong><\/h5>\n
Color<\/strong><\/h5>\n

Change the colour of your element.<\/p>\n

Background<\/strong><\/h5>\n

Change the colour of your element’s background.<\/p>\n

Border<\/strong><\/h5>\n

Give your element a coloured border.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Element Control – Transform & Position<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Transform-Position-18-March-2025.png” title_text=”XID Transform & Position 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” width=”57%” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_5,1_5,1_5,1_5,1_5″ _builder_version=”4.16″ _module_preset=”default” custom_margin=”||13px||false|false” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Stretch-to-Fill-icon.png” title_text=”Stretch to Fill icon” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” global_colors_info=”{}”]\n

STRETCH TO FILL<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

When inserting a background image into your presentation, you will use Stretch To Fill to make the background full screen.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/Shrink-Element.png” title_text=”Shrink Element” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

SHRINK ELEMENT<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Shrink Element\u00a0will do the opposite to\u00a0<\/span>Stretch to Fill. It will take a full screen image and shrink it down to its original size.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2019\/11\/Stretch-To-Fill-Height.jpg” title_text=”Stretch-To-Fill-Height” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

STRETCH TO FILL HEIGHT<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Using Stretch To Fill Height will stretch the element to fill the height of your presentation canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2019\/11\/Stretch-To-Fill-Width.jpg” title_text=”Stretch-To-Fill-Width” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” custom_padding=”||0px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

STRETCH TO FILL WIDTH<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Using Stretch To Fill Width will stretch the element to fill the width of your presentation canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/XID-Flip-Vertically.png” title_text=”XID Flip Vertically” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||10px||false|false” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

FLIP VERTICALLY<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Flip the element vertically by clicking on this icon.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

How to stretch to fill an image<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-Fill-image-highlighted-23-Apr-2025.png” title_text=”XID Stretch to Fill image highlighted 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Highlight the image or video by clicking on it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Click-on-Stretch-to-Fill-icon-23-Apr-2025.png” title_text=”XID Click on Stretch to Fill icon 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the Stretch to Fill icon under Transform & Position under the Element tab.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Image-stretched-to-fill-23-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The image will stretch and fill the canvas.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

How to shrink an element<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Image-stretched-to-fill-23-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Click on the image to highlight it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Shrink-element-23-Apr-2025-Large.jpeg” title_text=”Screenshot” _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the Shrink Element icon under Transform & Position under the Element tab.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-Fill-image-highlighted-23-Apr-2025.png” title_text=”XID Stretch to Fill image highlighted 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The image will shrink back to its original size.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

How to stretch to fill height<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-fill-height-2-23-Apr-2025.png” title_text=”XID Stretch to fill height 2 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Highlight the element by clicking on it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-Fill-Height-icon-23-Apr-2025.png” title_text=”XID Stretch to Fill Height icon 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the Stretch to Fill Height icon under Transform & Position under the Element tab.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-images-stretched-to-fill-height-23-Apr-2025.png” title_text=”XID images stretched to fill height 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The element will stretch to fill the height of the canvas. It can be positioned as required by dragging and dropping it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

How to stretch to fill the width<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-fill-height-2-23-Apr-2025.png” title_text=”XID Stretch to fill height 2 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. Highlight the element by clicking on it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Stretch-to-Fill-Height-icon-23-Apr-2025.png” title_text=”XID Stretch to Fill Height icon 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. Click on the Stretch to Fill Width icon under Transform & Position under the Element tab.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-image-stretched-to-fill-width-23-Apr-2025.png” title_text=”XID image stretched to fill width 23 Apr 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. The element will stretch to fill the width of the canvas. It can be positioned as required by dragging and dropping it.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_5,1_5,1_5,1_5,1_5″ _builder_version=”4.16″ _module_preset=”default” custom_margin=”||13px||false|false” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/XID-Flip-Horizontally.png” title_text=”XID Flip Horizontally” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” global_colors_info=”{}”]\n

FLIP HORIZONTALLY<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Flip the element horizontally by clicking on this icon.<\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2024\/04\/XID-Crop.png” title_text=”XID Crop” force_fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” min_height=”165px” custom_margin=”||13px|||” border_radii=”on|5px|5px|5px|5px” locked=”off” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”|||on|||||” text_font_size=”19px” header_text_align=”center” text_orientation=”center” custom_margin=”||10px||false|false” locked=”off” global_colors_info=”{}”]\n

CROP<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”]\n

Crop the image by clicking on this icon.<\/p>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.1.4 Attributes<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Attributes-18-March-2025.png” title_text=”XID Attributes 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” custom_padding=”30px||||false|false” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Rotate Shape –\u00a0<\/strong>Rotate Shape is literally used to rotate elements.<\/p>\n

Opacity –\u00a0<\/strong>Control how transparent your elements are with the\u00a0Opacity\u00a0scrollbar.<\/p>\n

Horizontal Shadow –\u00a0<\/strong>Move the element’s shadow left or right using the Horizontal Shadow scrollbar.<\/p>\n

Vertical Shadow –\u00a0<\/strong>Move the element’s shadow up or down using the Vertical Shadow scrollbar.<\/p>\n

Blur Shadow –\u00a0<\/strong>Blur the element’s shadow using the Blur Shadow scrollbar.<\/p>\n

Shadow Opacity <\/strong>–\u00a0Increase or decrease the opacity of your element’s shadow by dragging the scrollbar left or right.<\/p>\n

Edge Roundness –\u00a0<\/strong>Set the roundness of the edges of your element’s background using the Edge Roundness scrollbar.<\/p>\n

Padding <\/strong>–\u00a0Add padding to your element’s background using the Padding scrollbar.<\/p>\n

Border Width <\/strong>–\u00a0Increase and decrease the width of the border around your element.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Advanced<\/strong><\/h4>\n[\/et_pb_text][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Element-Advanced-18-March-2025.png” title_text=”XID Element Advanced 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

<\/strong><\/p>\n

<\/strong><\/p>\n

<\/strong><\/p>\n

<\/strong><\/p>\n

<\/strong><\/p>\n

<\/strong><\/p>\n

<\/strong><\/p>\n

Hide Overflow<\/strong> –<\/p>\n

<\/strong><\/p>\n

Image Fill<\/strong> –<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.1.5 Animation Control – Animations<\/strong><\/h4>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Animation-18-March-2025.png” title_text=”XID Animation 18 March 2025″ _builder_version=”4.20.0″ _module_preset=”default” width=”57%” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Animation In<\/strong><\/h4>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n
Pulse<\/strong><\/h5>\n

The element will pulse in and out.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Floating<\/strong><\/h5>\n

The element will float up and down.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Tossing<\/strong><\/h5>\n

The element will sway from side to side in its position.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Spin<\/strong><\/h5>\n

The element will turn in circles.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Slide Down or Slide Up<\/strong><\/h5>\n

The element will either slide into its position from the top down or the bottom up.<\/span><\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Slide Left or Slide Right<\/strong><\/h5>\n

The element will slide into its position either from the right to the left or left to the right.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Pull Up or Pull Down<\/strong><\/h5>\n

The element will reveal in its position by either pulling up or down.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Stretch Left or Stretch Right<\/strong><\/h5>\n

The element will reveal in its position by either stretching to the left or the right. It is similar to pulling up or down, but just horizontally.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Slide Expand Up or Expand Up<\/strong><\/h5>\n

The element will slide into position from the bottom and expand horizontally or vertically.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Fade In<\/strong><\/h5>\n

The element will fade in after a set duration.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Expand Open<\/strong><\/h5>\n

The element will expand outwards and contract to its original state after a set duration.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Big Entrance<\/strong><\/h5>\n

The element expands outwards as it reveals.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Hatch<\/strong><\/h5>\n

The element expands upwards in its position and wiggles from side to side.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Bounce<\/strong><\/h5>\n

The element will bounce up and land in its position.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Animation Out<\/strong><\/h4>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n
None<\/strong><\/h5>\n

There is no animation out.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

Fade Out<\/strong><\/h5>\n

The element will fade out.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

Pulse<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Floating<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Tossing<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Spin<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Fade Out Up<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Fade Out Down<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Fade Out Left<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Fade Out Right<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Slide Out Up<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Slide Out Down<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Slide Out Left\u00a0<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Slide Out Right<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Zoom Out<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Pull Up<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Pull Down<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Stretch Left<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Stretch Right<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Slide Expand Up<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Expand Up<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Expand Open<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Big Entrance<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Hatch<\/strong><\/h5>\n[\/et_pb_text][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
Bounce<\/strong><\/h5>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n
3.2 Layers tab<\/strong><\/span><\/h5>\n

The Layers tab expands the different layers that make up the page that you are on.<\/span><\/p>\n

Position elements in the foreground or background by dragging the layers up\/down.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Layers-18-March-2025.png” title_text=”XID Layers 18 March 2025″ align=”center” _builder_version=”4.20.0″ _module_preset=”default” width=”57%” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.3 Media tab<\/strong><\/h5>\n

The Media tab is where you would upload videos and images to be used in your XID projects.<\/span><\/p>\n

It is also where you would go to search content that has already been uploaded.<\/span><\/p>\n

<\/strong><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/04\/XID-Media-tab-23-Apr-2025.png” title_text=”XID Media tab 23 Apr 2025″ align=”center” _builder_version=”4.20.0″ _module_preset=”default” width=”57%” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

3.4 Advanced tab<\/strong><\/span><\/h5>\n

The Advanced tab contains toggles where you can switch the Hot Spots and Template Timeout on & off.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/datapost.co.za\/help\/wp-content\/uploads\/2025\/03\/XID-Advanced-2-18-March-2025.png” title_text=”XID Advanced 2 18 March 2025″ align=”center” _builder_version=”4.20.0″ _module_preset=”default” width=”57%” max_width=”65%” border_radii=”on|5px|5px|5px|5px” border_width_all=”1px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_header title=”Learn how to create a new XID project” button_one_text=”To Top” button_one_url=”https:\/\/datapost.co.za\/help\/nfinityxid\/” button_two_text=”Learn How” button_two_url=”https:\/\/datapost.co.za\/help\/nfinityxid\/create-a-new-xid-project\/” _builder_version=”4.20.0″ _module_preset=”default” background_color=”#2c4166″ custom_button_one=”on” button_one_icon=”2||divi||400″ custom_button_two=”on” button_two_icon=”5||divi||400″ global_colors_info=”{}”][\/et_pb_fullwidth_header][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"

This application allows users to create templates and presentations, which can be used within playlists or interactive presentations published to an nfinityX media device.\u00a0Create single page dynamic presentations that allow you to connect to live data feeds. This is very useful for menus, business information and airport flight information screens. The XID user interface presents […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n

Welcome to nfinityXID. This application allows users to create templates and presentations, which can be used within playlists or interactive presentations published to an nfinityX media device.<\/p>\n\n\n\n

Create single page dynamic presentations that allow you to connect to live data feeds. This is very useful for menus, business information and airport flight information screens. The XID user interface presents the user with a set of controls allowing him\/her to create engaging visual presentations. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The XID interface has three sections <\/h3>\n\n\n\n

Application Tools (Top Bar from left to right)<\/h4>\n\n\n\n

Project Name<\/h4>\n\n\n\n

Once you have saved your presentation, the project name will display in the top left corner of the screen.<\/p>\n\n\n\n

Save As & Save<\/h4>\n\n\n\n

When you create your project, you will save it as the title you want to give it. The next time you open it, the Save<\/em> button will appear for you to simply save your changes.<\/p>\n\n\n\n

Aspect Ratio<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Select the aspect ratio, you require your template\/presentation to be, from the menu. Your options are 16:9, 9:16, 4:4 & Custom.<\/p>\n\n\n\n

Preview<\/h4>\n\n\n\n

Clicking on preview allows you to view the design in full screen. You are also able to test your interactive presentation.<\/p>\n\n\n\n

Snapshot<\/h4>\n\n\n\n

This allows you to capture a snapshot of your page design. <\/p>\n\n\n\n

API Manager<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The API Manager enables the user to attach live data to the presentation. This can be done via Google Sheets or a json file.<\/p>\n\n\n\n

Script Editor<\/h4>\n\n\n\n

This is where you would go to add custom scripts and to edit them.<\/p>\n\n\n\n

Check For Updates<\/h4>\n\n\n\n

When you click on Check For Updates<\/em>, XID goes and looks for updates related to its tools like the API Manager. <\/p>\n\n\n\n

About<\/h4>\n\n\n\n

Click on About<\/em> to view the XID information, including the version number.<\/p>\n\n\n\n

Toolbars (Left panel from top to bottom)<\/h3>\n\n\n\n
\"\"<\/figure>
\n

Click on the Add Page<\/em> button to create a new page.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the Remove Page<\/em> button to delete a page.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the Duplicate Page<\/em> button to create a copy of a page.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the Add Text<\/em> button to add text to a page.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the pyramid icon to add shapes to your presentation.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the nfinityX Media Library<\/em> button to access all the available media on nfinityX.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Add a Hotspot<\/em> (transparent overlay) to your presentation by clicking on the flame icon.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Create menus using Smart Cards<\/em>.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on Add a Webpage<\/em> to add a web component using a URL. It is important to note that the site needs to allow ceros origin. <\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Add a QR Code by clicking on the icon.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on Add a Code Block<\/em> to add code blocks or pre-made snippets like Time and Date.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Create interactive presentations allowing users to navigate to different pages in the presentation by using Interactive Mode<\/em>.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on Add Image Modal<\/em> to add further information to screens.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the Duplicate Element <\/em>icon <\/em> to duplicate elements.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Click on the Delete Element<\/em> icon to delete elements.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

XID image and control panels<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The Design<\/em> tab contains all functions related to the designing of your presentation. I.e. pages, fonts, elements & animations.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The Layers <\/em>tab expands the different layers that make up the page that you are on.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The Advanced<\/em> tab contains toggles where you can switch off the Hot Spots and Template Timeout.<\/p>\n\n\n\n

Page Control - Pages<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

General<\/h4>\n\n\n\n

Page Name<\/em> displays the name of the page that you are on.<\/p>\n\n\n\n

Appearance<\/h4>\n\n\n\n

Change the background colour of the page that you are on by clicking on the block and selecting the colour you want your page to be.<\/p>\n\n\n\n

Page Timeout<\/h4>\n\n\n\n

Go To Page<\/em> is where you select to which page your presentation must transition. Time<\/em> refers to the duration of the page you are on before it transitions to the next specified page.<\/p>\n\n\n\n

Page Navigation<\/h4>\n\n\n\n

Navigate from page to page by clicking on the relevant pages. You can also add new pages and remove existing ones from this panel.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Font Control - Font<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Element Control - Element<\/h3>\n\n\n\n

General<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Appearance<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Change the colour of your element and its background in the appearance panel. You can also give your element a coloured border.<\/p>\n\n\n\n

Transform & Position<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>
\n

When inserting a background image into your presentation, you will use Stretch To Fill <\/em>to make the background full screen.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Shrink Element<\/em> will do the opposite to Stretch to Fill<\/em>. It will take a full screen image and shrink it down to its original size.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Using Stretch To Fill Height<\/em> will stretch the element to fill the height of your presentation canvas.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Using Stretch To Fill <\/em>Width will stretch the element to fill the width of your presentation canvas. <\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Flip the element vertically by clicking on this icon.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Flip the element horizontally by clicking on this icon.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Crop the image by clicking on this icon.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

Attributes<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>
\n

Snap To Grid<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Snap To Element<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

Lock Element In Place literally locks an element in place on the canvas.<\/p>\n<\/div><\/div>\n\n\n\n

Rotate Shape<\/h4>\n\n\n\n

Rotate Shape<\/em> is literally used to rotate elements.<\/p>\n\n\n\n

Opacity<\/h4>\n\n\n\n

Control how transparent your elements are with the Opacity<\/em> scrollbar.<\/p>\n\n\n\n

Horizontal Shadow<\/h4>\n\n\n\n

Move the element's shadow left or right using the Horizontal Shadow<\/em> scrollbar.<\/p>\n\n\n\n

Vertical Shadow<\/h4>\n\n\n\n

Move the element's shadow up or down using the Vertical Shadow<\/em> scrollbar. <\/p>\n\n\n\n

Blur Shadow<\/h4>\n\n\n\n

Blur the element's shadow using the Blur Shadow<\/em> scrollbar.<\/p>\n\n\n\n

Shadow Opacity<\/h4>\n\n\n\n

Increase or decrease the opacity of your element's shadow by dragging the scrollbar left or right.<\/p>\n\n\n\n

Edge Roundness<\/h4>\n\n\n\n

Set the roundness of the edges of your element's background using the Edge Roundness <\/em>scrollbar. <\/p>\n\n\n\n

Padding<\/h4>\n\n\n\n

Add padding to your element's background using the Padding<\/em> scrollbar.<\/p>\n\n\n\n

Border Width<\/h4>\n\n\n\n

Increase and decrease the width of the border around your element.<\/p>\n\n\n\n

Animation Control - Animations<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Animation In<\/h3>\n\n\n\n

Pulse<\/h4>\n\n\n\n

The element will pulse in and out.<\/p>\n\n\n\n

Floating<\/h4>\n\n\n\n

The element will float up and down.<\/p>\n\n\n\n

Tossing<\/h4>\n\n\n\n

The element will sway from side to side in its position.<\/p>\n\n\n\n

Spinning<\/h4>\n\n\n\n

The element will turn in circles.<\/p>\n\n\n\n

Slide Down & Slide Up<\/h4>\n\n\n\n

The element will either slide into its position from the top down or the bottom up.<\/p>\n\n\n\n

Slide Left & Slide Right<\/h4>\n\n\n\n

The element will slide into its position either from the right to the left or left to the right.<\/p>\n\n\n\n

Pull Up or Pull Down<\/h4>\n\n\n\n

The element will reveal in its position by either pulling up or down.<\/p>\n\n\n\n

Stretch Left or Stretch Right<\/h4>\n\n\n\n

The element will reveal in its position by either stretching to the left or the right. It is similar to pulling up or down, but just horizontally.<\/p>\n\n\n\n

Slide Expand Up & Expand Up<\/h4>\n\n\n\n

The element will slide into position from the bottom and expand horizontally or vertically.<\/p>\n\n\n\n

Fade In<\/h4>\n\n\n\n

The element will fade in after a set duration.<\/p>\n\n\n\n

Expand Open<\/h4>\n\n\n\n

The element will expand outwards and contract to its original state after a set duration.<\/p>\n\n\n\n

Big Entrance<\/h4>\n\n\n\n

The element expands outwards as it reveals.<\/p>\n\n\n\n

Hatch<\/h4>\n\n\n\n

The element expands upwards in its position and wiggles from side to side.<\/p>\n\n\n\n

Bounce<\/h4>\n\n\n\n

The element will bounce up and land in its position.<\/p>\n\n\n\n

Animation Out<\/h3>\n\n\n\n

Fade Out<\/h4>\n\n\n\n

The element will fade out.<\/p>\n","_et_gb_content_width":"","footnotes":""},"class_list":["post-6497","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/6497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/comments?post=6497"}],"version-history":[{"count":398,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/6497\/revisions"}],"predecessor-version":[{"id":18837,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/6497\/revisions\/18837"}],"wp:attachment":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/media?parent=6497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}