Website Template Editor

​

Introduction

​

Enabling the Template Editor

1. Create the Light Data Room (if not already created).
2. Access the data room for which you would like to enable the Template Editor.
3. Click on the button Template Editor above the list of folders and files in the main folder.
4. Choose between one or more starting templates as well as an empty template.
5. Click on Activate.

​

Overview

• Save: Saves your progress in the Template Editor and automatically publishes the saved version
• Undo: Undoes the previous edit operation
• Redo: Redoes the previously undone edit operation
• Preview: Shows how the website will look to users. Click the eye icon in the top left corner to return from the preview to the Template Editor

The tools used to build the website are found to the right:

​

Selecting, moving, copying and deleting elements

• Up arrow: Selects the parent element of the current element. Helpful to use if it is hard to select an element
• Cross: The cross allows you to move the element around the website. Click and hold, then drag the element to where you want to move it, and release
• Two squares: Duplicates the element. The duplicated element may then be dragged to another portion of the website (as desired)
• Trash bin: Deletes the selected element

​

Adding layout elements

• Columns: Columns allow you to structure content of the website. You may add 1, 2 or 3 columns on a row
• Page Header and Page Footer: Pre-made header and footer with 3 columns. They should only be added to the top or the bottom of the website respectively
• Block: An element with a shaded background that may be used to separate sections of the website. Can be added directly to the website or inside a column. Columns may also be added inside the block
• Area: Similar to the block but makes use of the full width of the page. Content should not be added directly to the area but rather to columns that have been added inside the area
• Spacer: Adds vertical spacing between sections of the website

​

Adding text and headings

1. Drag and drop the Text or the Page Heading element to the website from the Add > Content menu.
2. Enter the text box by double clicking on the text in the box.
3. Type in the text that you would like to display.
4. A menu will appear that allows you to change the font, text size, add bullet points, lists, etc.

​

Changing the text alignment

1. Click on the text box to select it.
2. In the menu, under Style > Typography (as displayed below), update the Text alignment.

​

Changing the text color and transparency of the whole text box

1. Click on the text box to select it.
2. In the menu, under Style > Typography, click on the color box on the right-hand side under the subsection Color.
3. A color diagram appears as shown below, where you can select the color on the vertical menu on the right, and the transparency on the horizontal menu at the bottom. Select the desired color and transparency.
4. Click on Ok.

​

Changing the color of a portion of the text

1. Enter the text box by double clicking on the text in the box.
2. Highlight the portion of the text for which the color should be changed.
3. Click on the text color icon in the menu that appears.
4. Select the color you would like or enter a custom color by clicking on More colors and entering the hex code of the desired color.

​

Adding links

​

Links to external websites

1. Enter the text box where you would like to create the link.
2. Highlight the text that you wish to link to an external website.
3. Click on the link button in the menu that appears.
4. Enter the URL you would like to link to in the URL box as shown in the image below.
5. Click on Ok. The link has now been created and the highlighted text has been transformed into a link.

​

Links to files

1. Upload the file that you want to link to in the light data room.
2. Go into the light data room, right click on the file and then click on Copy Link (or similar).
3. Change tab to the template editor and mark the text that you would like to link to the file. Click on the link-button in the menu.
4. Paste the copied link in the field URL.
5. On the tab Target, choose New window as target if you would like the file to open in a new tab or a new browser window.
6. Click on Ok to confirm.

​

Adding interactive maps

1. Go to Add > Content and drag the Map icon into the desired position in the website.
2. Click on the Map in the template editor. Go to the Style menu and scroll down to the bottom where the field Address can be found. Type in the street address together with the city and country.
3. You can select the Map type as a normal Roadmap or as a Satellite map.
4. To adjust the zoom level of the map, adjust the Zoom to an appropriate level.

​

Adding images

1. Go to Add > Content and drag the Image icon into the desired position in the website.
2. A dialog will appear where you can choose from the list of files you have previously uploaded to the Assets folder. You can also upload a new file from your computer by dragging it into the corresponding area. If a new file is added, it will appear in the list on the right side (and will be located in the Assets folder in the light data room).
3. Click on the image on the right side to select it.
4. Click on the X at the top right corner to close the dialog.

​

Adding an image with caption

1. Go to Add > Content and drag the Image with Caption icon into the desired position in the website.
2. Double-click on the image icon that you just added to the template editor.
3. A dialog will appear where you can choose from the list of files you have previously uploaded to the Assets folder. You can also upload a new file from your computer by dragging it into the corresponding area. If a new file is added, it will appear in the list on the right side (and will be located in the Assets folder in the light data room).
4. Click on the image on the right side to select it.
5. Click on the X at the top right corner to close the dialog.
6. Double click in the text field Insert Caption Here to replace the placeholder text with your own caption.

​

Adding videos

​

Adding your own video to the website

1. Go to Add > Content and drag the Video icon into the desired position in the website.
2. A dialog will appear where you can choose from the list of files you have previously uploaded to the Assets folder. You can also upload a new file from your computer by dragging it into the corresponding area. If a new file is added, it will appear in the list on the right side (and will be located in the Assets folder in the light data room).
   The file you select must support playback in web browsers (e.g. mp4). Most web browsers cannot play common formats such as avi and mov. Files in such formats will need to be transcoded before being uploaded.
   Keep the size of your video file small in order to ensure smooth playback for your users. This corresponds to an approx. maximum file size of 500 kB per second of video.
3. Click on the video on the right side to select it.
4. Click on the X at the top right corner to close the dialog.

​

Adding a Youtube or Vimeo video to the website

1. Go to Add > Content and drag the Video icon into the desired position in the website.
2. Click on the X at the top right corner of the dialog that appears.
3. Select the video element in the website, as shown below.
4. Go to the Style menu and scroll down to the bottom.
5. Click on the dropdown menu next to the field Provider and select Youtube or Vimeo.
6. Youtube: Enter the ID of the video in the Video ID field. The ID of the video is the last part of the link. For example, if the link is https://www.youtube.com/watch?v=NpEaa2P7qZI, then the video ID is NpEaa2P7qZI.
7. Vimeo: Enter the ID of the video in the Video ID field. The ID of the video is the last part of the link. For example, if the link is https://vimeo.com/113716040, then the video ID is 113716040.

​

Adjusting video playback settings

1. Select the video in the website template and click on the Style menu.
2. Check the Autoplay checkbox if the video should start playing automatically when a visitor enters the website (not supported by all browsers).
3. Check the Loop checkbox if the video should loop continuously.
4. The video element may be resized by dragging the resize handles, as shown below.

​

Adding file lists

1. Add the files you would like to display on the website in a new folder in the light data room (e.g. called supplements).
2. Go to Add > Content and drag the File list icon to the desired position in the website.
3. Click on the file list element and open the Style menu. Scroll to the bottom, to the field Folder path. Type in the name of the folder (path) in the light data room for which you would like to list the files (e.g. supplements).
4. You can change the text color by clicking on the colored box next to the field Text color.
5. You can adjust the size of the text through the Font size field.
6. You may resize the file list element to fit the number of files in the folder.
7. The files in this folder in the data room will now be listed and can be viewed by visitors to the website.

​

Adding iframes

1. Go to Add > Content and drag the Iframe icon into the desired position in the website.
2. Click on the Iframe element.
3. Enter the Style menu and scroll down to the bottom. Enter the URL for the website to be embedded in the Iframe in the Path to Website field.

​

Adding tables

1. Go to Add > Tables and drag the Table icon into the desired position in the website. This adds a basic table with two columns and two rows.
2. To edit the text, double click on the placeholder text.

​

Adding columns to the table

1. To add columns to the table, click on one of the cells in the top row. Make sure the cell itself is selected and not the text area. If the text area is selected, you can click on the up arrow icon to select one area higher in the hierarchy (which is the cell).
2. Hold down the Shift button and select the other cell in the same column, as shown below.
3. Click on the double square (duplicate) icon to add another column. This operation can be repeated multiple times until the desired number of columns have been created.

​

Adding rows to the table through drag & drop

1. Go to Add > Tables and drag the Table row icon into the table. It is also possible to add new cells through dragging & dropping the Table cell icon in a similar way.

​

Adding rows to the table through duplication

1. Table rows may also be added through duplication which may be faster, especially if you would like to add many rows.
2. Click on one of the cells in the row you would like to duplicate. Make sure the cell itself is selected and not the text area. If the text area is selected, you can click on the up arrow icon to select one area higher in the hierarchy.
3. Click the up arrow icon in order to select the row.
4. Click on the double square (duplicate) icon to duplicate the row. This operation can be repeated multiple times until the desired number of rows have been created.

​

Styling the website

​

Publishing the website

​

Viewing statistics on website visitors

​

Creating a custom starting template

1. Create the template by creating a new light data room, activating the Template Editor and adding content placeholders and styling the website so that it can serve as a template.
2. Email Aversure Support at support@aversure.com to have us activate the template for your organization.