Page Modal – Dynamic Size

Business Background

You can set the dynamic size for a page modal using Titan Web.

Titan Solution

  • Use Titan Web to set the dynamic size of a page modal to display well on a laptop, tablet, as well as large and smaller mobile devices.
  • Smaller screens will require different configurations to give the correct responsiveness.

How to Video

Video Coming Soon!

How to Guide

  1. Select the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
  2. Add an element to the canvas, for instance, Text.
  3. Select the Text element Gear icon and select the Interactivity option.
  4. Select the Configure On Click Actions icon. The Actions Flow screen opens.
  5. Select the + icon:
Configure On Click Actions icon
Configure On Click Actions icon
  1. On the Add Node screen, select Redirect/ Go to Page.
Add Node screen
Add Node screen
  1. Choose the project page you want to open, and the way in which you want to open it.
Graphical user interface, application

Description automatically generated
  1. Select the Internal and select the Redirect URL from the drop-down list.
  2. Select Modal from the Open in drop-down list.
  3. Select the Dynamic checkbox. The screen expands to show the width and height fields for the following devices:
    • Laptop
    • Tablet
    • Mobile (large)
    • Mobile (small)
  4. Type the width and height of the devices in the corresponding fields. Set the different modal sizes for each of the above devices.
  5. If necessary, add a tag in the Tag field, and select the Insert button.
Dynamic Size screen
Dynamic Size screen

The Redirect/Go to Page node is added.

Redirect/Go to Page node
Redirect/Go to Page node

The display will resize appropriately when you preview the redirected screen on different-sized devices. 

Hidden Title

Need more help?