80. Landing page customisation¶

This guide contains details on how to add landing page sections, section contents and information on how to add videos or images.

Navigate to BIMS Theme in Admin

80.1 Adding a Landing Page Section¶

This guide will help you in adding a new section to your landing page.

• Ensure that there is at least one custom theme enabled. To check this, proceed to 'Custom Theme' and see if a record is present and enabled. If not, you can create a new one.

• Let's create a new landing page section. Navigate to 'Landing page sections', and click 'Add new section'.

• (1) Name the new section (note that this name will not appear on the landing page).

  (2) Optionally, add a title that will be displayed on the landing page.

  (3) Set the background color for the section.

• Click 'Save and continue editing'. This will allow you to add content to the section afterwards.

• If you have previously created landing page section content, you can select it in the content field. If not, you can add a new one by clicking the plus button.

• Once you have finished editing the new content, click 'Save'. Remember, you can always update this later.

• Be sure to select at least one content here.

• Click 'Save'. The next step is to add this section to your theme. Navigate to 'Custom Themes' (see Custom Themes for more details) and select the enabled theme.

• Scroll to 'Landing page sections' and select your new section. If you want to select more than one section, hold down the Control key (or Command on a Mac).

• Finally, click 'Save'. Your new landing page section should now be visible.

80.2 Embedding Youtube Video on the Landing Page¶

• First, select the YouTube video you wish to show on the landing page
• Click the 'Share' button under the video

• In the popup, click the 'Embed' button

Click the 'Copy' button on the bottom right. This action copies the video's embed code to your clipboard

• Now, navigate to the admin page and open the landing page section editor

• Click on 'Source'

• Paste the copied embed code into the 'Source' editor using Ctrl+V (or Cmd+V for Mac)

• Click 'Source' again. You should now see an iframe containing the video player

• Once the landing page content is added to the current theme, your video will appear on your landing page like this

• To adjust the video size, double-click the iframe. A popup will appear where you can edit the width and height of the video player. Click 'OK' when done, and then 'Save'

80.3 Adding Inline Images on the Landing Page¶

This section will help you display images inline, just like the one below:

• Start by navigating to the section editor on the landing page. Once there, create a new section.

• To facilitate the upcoming steps, switch the editor to full-screen mode. Click on 'maximize' to do this.

• Next, click on the 'Table' button.

• For this example, we want to showcase three inline images, each with its title underneath. To do this, create a table with 3 columns and 2 rows. Ensure the border width is set to 0.

• Start with the titles so you can easily add images later. Click on the 2nd row and input the corresponding text.

To switch to the next column, simply press the 'Tab' key on your keyboard.

• To centralize the text and images in the table, select all contents by pressing Ctrl+A (Cmd+A for Mac). Then, click the 'center alignment' option.

• Now, let's add the images. Click on the first row and select the 'Image' icon.

• Navigate to the 'Upload' tab, choose the desired image file, then click on 'Send it to the Server'.

• Once the image is uploaded, the 'Image Info' tab will open. Set the image width to 300 (to avoid the image taking up the whole screen) and the HSpace (horizontal padding) to 10.

• Follow the same steps for the other two columns. Your table should look something like this:

• Click on 'Maximize' once more to exit the full-screen mode. Click 'Save' to preserve your changes.

• Verify that the newly created landing page section has been added to the current theme. This will ensure your changes are visible on the landing page.