Interactivity and animation are an essential topping in any digital content worth its salt. The perfect pairing. The life of the party. In this tutorial, we’ll explain how to customize the content of your interactive windows and tooltips and make your content more attractive.
In this tutorial, we’ll look at:
Give your content a personal touch with the text editing options. Select the text you want to customize and change its color, font, size, orientation, etc. You’ll find all these options in the top toolbar.
You can also add emojis and lines to divide text sections, as well as hyperlinks. Check it out!
Visual content is ideal for supporting your texts. You can add images to accompany your written content. To add images to your interactive windows and tooltips, you have three options:
- Use the Insert image button in the top toolbar
- Use the keyboard shortcut CTRL + P
- Drag the image from your computer to the editing area of the window or tooltip
NOTE: The accepted image formats are JPG, JPEG, SVG, and GIF.
Once you’ve inserted the image, you can click on it to access the image settings menu. Here your options are:
- Replace: if you want to change the image for another one but want to maintain its position, you can use this option.
- Align: display your images in the center, on the left, or on the right; wherever you like!
- Caption: add a description of the image just below it.
- Insert link: you can make your image work as a button to visit a new page by inserting a link to a web page.
- Display: this option allows you to choose whether you want the image to be displayed in line with the text or in a separate block.
- Style: there are three styles to choose from.
- Rounded: makes the corners of the image appear rounded.
- Bordered: adds a gray border to the image.
- Shadow: adds a shadow around the image.
Insert videos in your interactive tooltips and windows to enrich your content. They are very informative and they allow us to convey information in a concise way and without using a lot of space. You’ve got two options for adding a video:
- Using a link: you can insert links to videos on Youtube, Vimeo, and Dailymotion.
- With an embed code: this alternative is just what you need if your video is stored on an unsupported platform. You just need to check that your videos have an embed code (iframe or script) for external platforms.
Presenting information in a clear and digestible way is very important to give your audience a smooth and satisfying reading experience. Tables are a great way to achieve this.
To add a table, follow these steps:
- Click on the table icon in the top toolbar.
- Drag the mouse over the area of cells that appears to indicate the size of your table.
- Drag the mouse horizontally to add or delete columns.
- Drag the mouse vertically to add or delete rows.
- You’ll see the number of columns and rows at the top. The maximum size of a table is 10 columns and 10 rows.
- Click on the last cell you want to include to insert the table. The table will then appear in the editing area.
- All set! Now you can add the information you want to present in this format.
You can also edit the layout of any table you have inserted by clicking on any cell. You’ll see the following editing options:
- Table header: adds a row at the top of the table.
- Table footer: adds a row at the bottom of the table.
- Remove the table: deletes the inserted table.
- Row: add or delete rows.
- Column: add or delete columns.
- Table style: customize the style of the table.
- Cell: combine several cells or divide a cell into subcells.
- Cell background: choose the background color of the cell.
- Vertical align: place and align the text vertically.
- Horizontal align: place and align the text horizontally
- Cell style: customize the style of the cell.
Interactive windows and tooltips not only allow you to organize your content in layers, but also to add a wide variety of external content.
Using the Code View option, you can add any type of online content that can be inserted using embed codes. You can even insert a genially with iframe or script codes!