Custom Text - HTML Editor

If you are not already using this functionality, you will need to enable it first. To do this you should click the link on the existing custom text screen (highlighted below).

NOTE: Once you have upgraded to the new editor, you will not be able to revert to the old one. You existing custom text is not affected.

Custom Text Screens

Above the menu you will see> Custom Text. You will be presented with a list of screens where custom text can be added.

Select the screen you want to edit. The new editor is a WYSIWYG (What You See Is What You Get) HTML editor.

A full user guide for the editor can be accessed by clicking the help icon (highlighted below) in the toolbar and following the link displayed.

You can preview your custom text at any point by clicking the Preview button. The current custom text will be displayed at the bottom of the screen.

Including Images In Your Custom Text

To add an image to your custom text you will first need to upload it by clicking the Upload Images button. This is available from the list screen and from within the edit screen.

NOTE: We recommend uploading all the images needed before editing your custom text. When you upload the image you have to click 'Save New Image' to upload further images and repeat this process until all images have been uploaded. 

Once you have uploaded your images, they will be displayed below the editor, with the appropriate URL needed when adding an image.

Click the Insert Image button on the editor toolbar to insert an image, then enter the url of the image you wish to insert and click OK.

Carousel

It is possible to add a carousel (also known as an image slider) to your custom text screens. To achieve this you will need to be comfortable editing html source code. You will also need to have some images uploaded to use within the carousel.From the editor toolbar click the Source button and paste in the relevant html source. Example carousel source code is shown below:

<div data-carousel-delay="3000" data-carousel-height="200" data-carousel-width="1200" id="carousel">

    <div class="cover" style="font-family:gotham; font-size:15px;">

        <div class="carouselpanel">

            <table>

                <tbody>

                    <tr>

                        <td>

                            <img border="0" height="200px" src="/uploadedImage/view/image1.png" width="900px" /></td>

                        <td style="padding:20px;">

                            <p style="font-size:20px; padding-bottom:20px;">

                                1 Lorem Dolor Ipsum...</p>

                            <p>

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

                                        </td>

                    </tr>

                </tbody>

            </table>

        </div>                

        <div class="carouselpanel">

            <table>

                <tbody>

                    <tr>

                        <td style="padding:20px;">

                            <p style="font-size:20px; padding-bottom:20px;">

                                2 Lorem Dolor Ipsum...</p>

                            <p>

                                Etiam tempor condimentum tristique.</p>

                        </td>

                        <td>

                            <img border="0" height="200px" src="/uploadedImage/view/image2.png" width="900px" /></td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>