Ingage pages are extremely customizable. Add something new to the page by clicking the + in the upper right corner. Learn how to customize each component in this guide!
Contents
Adjusting the Size & Location of an Object
Text
Image
Shape & Icon
Video
Scrollmotion
Compare
Gallery
Buttons
Points of Interest
Hotspots
Embed
Adjusting the Size & Location of an Object
When any object is selected, the following size and location attributes are editable at the top of the Style Panel on the right side bar:
X, Y, & °
You'll likely want to move an object by clicking and dragging it from one place to another, but you can also use the X & Y to define the object's location on the canvas
Use ° to rotate an object, 90° will rotate the object clockwise a quarter turn, 180° will flip it upside down, etc.
W, lock/unlock proportions, H
You can use the white handles around an object to adjust the size by clicking and dragging, but you can also use the W(idth) & H(eight) tools in the style panel if you're looking to be really precise
Click the padlock icon between W & H to lock or unlock the object's proportions
Locked proportions will mean making an object less wide will also make it proportionally less tall
Unlocked proportions will allow you to adjust the size of the object at will
The bottom of the Style Panel includes two more important settings for placing an object:
Arrange
Use Back, Front, Backward, and Forward to arrange layered objects
Pinned
When this box is checked an object cannot be moved or resized
Uncheck the box to unpin the object
Text
When adding a text component, you are first prompted to select from Title, Heading, Body, or Caption. Using these components accurately can save time in creating a uniform presentation, and helps keep your content evergreen for easy re-theming should you rebrand down the line.
To learn more about the parameters set for Text components in your theme take a look at this article: Customizing Content Using Themes
Click on Title, Heading, Body, or Caption accordingly to add a text box
To edit the text in a text box either:
- Double click on the text box
- Right click on the text box and click Edit Text in the menu that appears
When a text box is selected, the following attributes are editable in the Style Panel on the right side bar:
Font
The first dropdown menu allows you to select from preset configurations defined by the presentation's theme: Title, Heading, Body, Caption, and Button
Additional font settings continue below:
Font Select from the fonts available in Ingage, use the following article for information about uploading a custom font: Adding a Custom Font to Ingage
Font Style, Font Size
Character Spacing, Line Spacing, Paragraph Spacing
Alignment
Select from Left, Centered, Right, and Justified alignment to set how your text sits from left to right
Select from Top, Centered, and Bottom alignment to set how your text sits from top to bottom
Text Color
Click Solid to select a color from your color pallet, or to add a new color to use for this text
Click Theme to select one of your four Theme Colors to use for this text– using Theme Colors makes your presentation easier to re-theme in the future
Background
Use the drop down menu to select from the following Background options:
None will leave the background of your text box transparent
Theme Color presents you with a drop down menu to select one of your four Theme Colors– if you used Primary Pairing as your Text Color, use Primary Color as your background color to make this text box easy to re-theme again and again
Use Solid Color to select a color from your color pallet, or to add a new color to use for the background
Gradient will prompt you to select from an existing gradient, or create a new one by selecting two colors to gradate between
Blur is a great option to make text stand out when on top of an image or video, without totally blocking out the content behind it, choose between light, medium, or dark
Corner Radius
If your text box has a background, drag the corner radius tool to the right to round the corners, to the left to make them more angular
Border
Add a line Border around your text box by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your text box
Increasing the X value makes the drop shadow more pronounced to the left and right of your text box
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your text box
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Inset
Use Inset to create a buffer between the sides of your text box and the text itself
Opacity
Adjust the opacity using the drag bar or the percentage field to the right of the bar
Image
Adding an image will open your file picker and prompt you to select the image you'd like to add to the page, double click on the image, or select and click Open to add the image
Supported image files include .png, .jpg, .jpeg
When an Image is selected, the following attributes are editable in the Style Panel on the right side bar:
Image
Click Replace Image to select a different image from your file picker
Click Crop to adjust which part of the image is visible within the mask
Crop Image (menu appears when clicking Crop)
Scale the image using the drag bar or percentage field
Out on the canvas you will notice the section of the image visible within the mask is vibrant, and the parts that will not appear are hazy
Click on the vibrant segment of the image and drag it around to choose the section of the image you'd like visible within the mask
Click Done in the Style Panel, or click off of the image to complete
Scale Mode
Selecting Fill will ensure the images fill the entire image mask, even if it means cutting off the sides or top and bottom of the image
Selecting Fit will ensure that you can see the entire image within the image mask, occasionally leaving blank bars to the sides if the proportions of the image are different of that of the mask
Shape
Use the drop down menu to select between Rectangle, Circle, and Ellipse to change the shape of the image mask
Corner Radius
If your image is a rectangle/square, drag the corner radius tool to the right to round the corners, to the left to make them more angular
Opacity
Adjust the opacity using the drag bar or the percentage field to the right of the bar
Border
Add a line Border around your image by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your image
Increasing the X value makes the drop shadow more pronounced to the left and right of your image
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your image
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Shape
When adding a shape you are first prompted to select from Rectangle, Circle, Oval, or Icon.
When a Rectangle, Circle, or Oval is selected, the following attributes are editable in the Style Panel on the right side bar:
Shape
Use the drop down menu to select between Rectangle, Circle, or Oval
Corner Radius
If your shape is a rectangle/square, drag the corner radius tool to the right to round the corners, to the left to make them more angular
Fill
Use the drop down menu to select from the following Fill options:
Theme Color presents you with a drop down menu to select one of your four Theme Colors
Use Solid Color to select a color from your color pallet, or to add a new color to use for the background
Gradient will prompt you to select from an existing gradient, or create a new one by selecting two colors to gradate between
Blur is a great option to make things stand out when on top of an image or video, without totally blocking out the content behind it, choose between light, medium, or dark
Opacity
Adjust the opacity using the drag bar or the percentage field to the right of the bar
Border
Add a line Border around your shape by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your shape
Increasing the X value makes the drop shadow more pronounced to the left and right of your shape
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your shape
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Selecting Icon will open the Icon selector
Select from our library of icons, or add your own by clicking Choose File in the lower left corner of the Icon selector, and selecting a .png with transparent pixels to use as a custom Icon
When an Icon is selected the following attributes are editable in the Style Panel on the right side bar:
Icon
Click Choose Icon to select a different Icon
Icon Color
Click Solid to select a color from your color pallet, or to add a new color to use for the Icon
Click Theme to select one of your four Theme Colors to use– using Theme Colors makes your presentation easier to re-theme in the future
Fill
Fill allows you to add a background to the Icon
Use the drop down menu to select from the following fill options:
None will leave the background of your Icon
Theme Color presents you with a drop down menu to select one of your four Theme Colors
Use Solid Color to select a color from your color pallet, or to add a new color to use for the background
Gradient will prompt you to select from an existing gradient, or create a new one by selecting two colors to gradate between
Blur is a great option to make an Icon stand out when on top of an image or video, without totally blocking out the content behind it, choose between light, medium, or dark
Shape
Use the drop down menu to select between Rectangle, Circle, and Ellipse to change the shape of the Icon's background Fill
Border
Add a line Border around your Icon Fill by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your Icon
Increasing the X value makes the drop shadow more pronounced to the left and right of your Icon
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your Icon
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Scale
Use the drag bar to scale the Icon up or down within the Filled area
Opacity
Adjust the opacity using the drag bar or the percentage field to the right of the bar
Video
Adding a Video will open your file picker and prompt you to select the video you'd like to add to the page, double click on the video, or select and click Open to add the video
Supported video files include .mov, .mp4, m4v
When a Video is selected, the following attributes are editable in the Style Panel on the right side bar:
Video
Click Replace Video to select a different video from your file picker
Click Crop to adjust which part of the video is visible within the mask
Crop Image (menu appears when clicking Crop)
Scale the video using the drag bar or percentage field
Out on the canvas you will notice the section of the video visible within the mask is vibrant, and the parts that will not appear are hazy
Click on the vibrant segment of the video and drag it around to choose the section of the video you'd like visible within the mask
Click Done in the Style Panel, or click off of the video to complete
Autoplay
With this setting on, the video will play as soon as you navigate to the page or pop up it's in
If this box is unchecked, a play button will be present in the center of the screen when presenting, press play to start the video
Loop
With this setting on, the video will play on repeat
Full Screen Button
Toggle on or off the option to take the video full screen during presentation
Mute Button
Toggle on or off the option to mute this video during presentation
Start Muted
With this box checked, the video will start silent
If you've selected Start Muted, and deselected Mute Button, the video will not have sound at all during presentation, and will not have the option to be turned on
With this box unchecked the video will have volume
If you've deselected Start Muted, and deselected Mute Button, the video cannot be muted during presentation
Scrollmotion
Checking this box will transform your video into a Scrollmotion, see below
Corner Radius
Drag the corner radius tool to the right to round the corners, to the left to make them more angular
Border
Add a line Border around your video by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your video
Increasing the X value makes the drop shadow more pronounced to the left and right of your video
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your video
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Scrollmotion
Scrollmotion is a scrubbable audioless video. Once you choose a video, you’ll be able to control its playback simply by swiping across it or by scrubbing the handle. For best results, choose a short video with slow steady motion. Great for 360°s, stop animation, time-lapses and demonstrations.
Adding a Scrollmotion will open your file picker and prompt you to select the video you'd like to use as a Scrollmotion on the page, double click on the video, or select and click Open to add the video
Supported video files include .mov, .mp4
When a Scrollmotion is selected, the following attributes are editable in the Style Panel on the right side bar:
Video
Click Replace Video to select a different video from your file picker
Click Crop to adjust which part of the video is visible within the mask
Crop Image (menu appears when clicking Crop)
Scale the video using the drag bar or percentage field
Out on the canvas you will notice the section of the video visible within the mask is vibrant, and the parts that will not appear are hazy
Click on the vibrant segment of the video and drag it around to choose the section of the video you'd like visible within the mask
Click Done in the Style Panel, or click off of the video to complete
Scrollmotion
Unchecking this box will return your Scrollmotion to a Video, see above
Corner Radius
Drag the corner radius tool to the right to round the corners, to the left to make them more angular
Border
Add a line Border around your Scrollmotion by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your Scrollmotion
Increasing the X value makes the drop shadow more pronounced to the left and right of your Scrollmotion
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your Scrollmotion
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter
Compare
Compare allows you to present two images or videos with a slider so you can pan between them. Great for a before and after, a reveal, or presenting two options
Adding a Compare will open your file picker and prompt you to select two pieces of media: Could be two photos, two videos, one photo and one video
Supported image files include .png, .jpg, .jpeg
Supported video files include .mov, .mp4
When a Compare is selected, the following attributes are editable in the Style Panel on the right side bar:
Edit Compare
When you click Edit Compare, the canvas of your page greys out and you can now edit the Compare component
Slide the double headed arrow to the location you'd like for it to start when presenting
With one side of the Compare selected, you can add Buttons, Points of Interest, and Hotspots to one side of the Compare only, see the Action Guide to learn more about these clickable elements
Note: Compares do not support Pop Ups, select Media for a photo or video, or Read Me for a little text
Selecting one side of the Compare or the other reveals other media options:
Click Replace Image or Replace Video to replace the media on the side you've selected
Click Crop to adjust which portion of the media is visible in the Compare
Scale the media using the drag bar
Out on the canvas you will notice the section of the media visible within the mask is vibrant, and the parts that will not appear are hazy
Click on the vibrant segment of the media and drag it around to choose the section of the media you'd like visible within the mask
Click Done, or click off of the Compare to complete
Swap Media
Click Swap Media to make your media switch sides
Direction
Compares can slide from side to side when Horizontal is selected
Vertical will allow you to slide up and down
Style
Select from Light or Dark to change the appearance of the double headed arrow on the Compare
Gallery
A Gallery component will automatically format up to six images into an evenly spaced collage.
Adding a gallery will open your file picker and prompt you to select up to six images
Hold down the Control (Windows) or Command (Mac) to select more than one image
Click Open to finish your selection
When a Gallery is selected, the following attributes are editable in the Style Panel on the right side bar:
Edit Gallery
When you click Edit Gallery, the canvas of your page greys out and you can now edit the Gallery component
Click and drag the handles between images to resize each image within the Gallery
Selecting one of the images reveals image options
Click Replace Image to replace the image in this window of the Gallery
Click Crop to adjust which portion of the image is visible in the Gallery
Scale the image using the drag bar
Out on the canvas you will notice the section of the image visible within the mask is vibrant, and the parts that will not appear are hazy
Click on the vibrant segment of the image and drag it around to choose the section of the image you'd like visible within the mask
Click Done, or click off of the Gallery to complete
Add Images
If you do not already have six images in the Gallery, click Add Images to add more
If you already have six images in the Gallery, you will not be able to click this button
Buttons
Selecting Buttons will open a submenu of the different Action types. Check out the Action Guide to learn about the different types of actions!
Buttons are rectangle or pill shaped Text boxes you design in your Theme, with an action already attached. Edit the appearance of a Button using the same guidelines as you use for a Text box.
Points of Interest
Selecting Points of Interest will open a submenu of the different Action types. Check out the Action Guide to learn about the different types of actions!
Points of Interest are Icons you design in your Theme, with an action already attached. Edit the appearance of a Point of Interest using the same guidelines as you use for an Icon.
Hotspots
Selecting Hotspots will open a submenu of the different Action types. Check out the Action Guide to learn about the different types of actions!
Hotspots are invisible clickable fields, helpful if you need to add multiple clickable areas to the same object.
Embed
The Embed component allows you present fully interactive web content on a page in Ingage.
Embed content added via URL will only be functional when connected to wifi or wireless data.
To edit embedded content:
- Select Website or File
- If you've selected Website, add the URL for the website you'd like to access on this page
- If you've selected File, upload a .zip with HTML, CSS and JavaScript files for offline support.
When embedded content is selected, the following attributes are editable in the Style Panel on the right side bar:
Corner Radius
Drag the corner radius tool to the right to round the corners of your embedded content, to the left to make the corners more angular
Opacity
Adjust the opacity using the drag bar or the percentage field to the right of the bar
Border
Add a line Border around your embedded content by selecting Line from the drop down menu
Make the Border thicker by dragging the Line tool to the right, or use the field to the right of the drag bar to set the thickness
Select from Solid or Theme to choose the color of the Border
Shadow
Select Drop Shadow from the drop down menu to add a drop shadow to your embedded content
Increasing the X value makes the drop shadow more pronounced to the left and right of your shape
Increasing the Y value makes the drop shadow more pronounced to the top and bottom of your shape
Set the Opacity for the desired intensity of the shadow, higher is darker, lower is lighter