Actions are the modular building blocks of your app. Each is a different call to action to a range of functions such as link to a URL, sharing, calling, viewing a video, visiting a subpage, and more.
Designing is simple with actions because you just click through your options until you see the look you want. Actions have 6 image-related format options, and variants of each depending on whether you want the image on the top, bottom, left, or right and how you want the text to be aligned.
Let’s look at some examples and take note of the configuration settings for each example.
Hero (full size image)
Hero images are optionally above or below the text. Because this format can expand vertically, the description text allows up to 500 characters.
Additionally, Hero images do not have to be square. Use the free format tool to crop you image to be as tall or as short as you want.
Half (half size image)
Half images are 1/2 the screen width, and may be to the right or left of their associated text. The nature of this format option does require square images.
Side (quarter size image)
Side images are 1/4 the screen width. The also can be on the left or right. Notice that the text in this example is left justified and is center-justified vertically
Ion (eighth size image)
Icon images are 1/8 the screen width. Because a icon image is inside the text container, the container size cna expant and this format option will display all of the available description text.
True Icon (graphic icon chosen from our library)
We also have an expansive library of open source graphical icons that may be selected in place of an image icon. This format option also allows the text to display in full.
No image or icon
Finally, you do not have to have an image at all. Use just a title, just a description, or both. Notice that this option displays a destination URL. This and all of teh above options have a "Hide Endpoint" option. If this option is not selected, then the action will display the endpoing relevaner to the action, which may be a file desigantion, a URL, a telephone number, an email address, etc.
Action Styling set at the app level
Actions also have a selectable color, but these changes are made in the App's Style tab because they apply to all actions in an app to maintain design consistancy. One big reason for this is that an action can be used in multiple apps and needs to autmatically fit different styles.
Notice in the above two example, that one action image matches the action background color and the otehr has a white background. This is because one image has a transparent background. and the other has a white background.
**Remember also that when you set the Page Style, you have the option of setting the page background behind Actions.