58. Adding Inline Images on the Landing Page¶

This guide 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.