The Flip Tile component allows web authors to insert interactive image tiles onto
their pages. When a website visitor hovers their mouse over or clicks on the image,
the tile will flip over to show additional information and a link to another page
or document. There are two styles of flip tiles to choose from: Rows of 2 or Rows
of 3. The name just indicates how many tiles will fit per row—both styles will allow
you to add as many flip tiles as you want and will automatically generate new rows
as needed—but you do need to stick with one style per container (i.e. don't use both
styles in the same container).
Examples
Flip Tiles (Rows of 2)
Rows of 2 will take up 50 percent of the screen on large monitors and 100 percent
of the screen on small mobile devices. If you insert more than two flip tiles in the
same container, new rows will automatically be created. You can resize your browser
window to see how they appear at different screen sizes.
Caption
Title
Main Text: a short paragraph letting users know what the link is for.
Rows of 3 will take up 30 percent of the screen on large monitors, 50 percent on medium
monitors, and 100 percent of the screen on small mobile devices. If you insert more
than three flip tiles in the same container, new rows will automatically be created.
You can resize your browser window to see how they appear at different screen sizes.
Caption
Title
Main Text: Can be used to explain what the link is for.
Place your cursor in the area that you would like to insert the flip tiles, and click
on the puzzle piece icon in the 2nd row of the toolbar.
Click on Flip Tile Container and then Insert.
Put your cursor inside the container box that appears on the page (TIP: Leave the "Insert Flip Tile Components Here" text for now — it's easy to accidentally
delete the container when it's empty) and then click on the component icon in the
2nd row of the toolbar.
Choose the Flip Tiles style that you want to use—Rows of 2 or Rows of 3— and then
click Insert. Remember that both styles will let you add as many flip tiles as you
want to the container and will automatically generate new rows as needed.
Fill out the required elements in the Edit Component box and then click Save.
Caption: Text that appears on the front of the flip tile. Limited to 30 characters.
Image: Click on the button at the end of the input field to select an image from your uploadedImages
folder. Square images that are at least 400px wide work best.
Image Alternative Description: A short description of the photo to add context for accessibility. This will not
be visible on the page.
Title: Bolded text that appears at the top on the back of the flip tile. Limited to 30
characters
Main Text: Text that appears on the back of the flip tile. Limited to 100 characters.
Link: You can type or paste an external URL into the input field, or click the button
at the end to select an internal webpage from one of your folders or a PDF from your
uploadedFiles folder.
Short Link Text: This is the text that will show up on the back of the flip tile. This can be something
short like "Learn More" or "Register Here." When users click on it, they will be taken
to the page or file you linked above. Limited to 30 characters.
Link Title: A description of where the link goes for accessibility purposes. This will not be
visible on the page, and needs to be more descriptive than "Learn More" or "Click
Here" (TIP: A good option is to use the name of the file or page that you are linking to).
A blue placeholder will appear on the page. Your flip tiles will appear normally after
you save the page.
Repeat Steps 3-5 until you have as many flip tiles as you want. Remember that you are not limited to two or three per container, but all flip tiles in a container
must be the same style—all "Flip Tiles (Rows of 2)" or all "Flip Tiles (Rows of 3)."
If a flip tile accidentally inserts outside of the container, you can click and drag
it back inside.
Once you have all of your flip tiles inserted, go ahead and backspace the "Insert
Flip Tile Components Here" text. Be careful—it's easy to accidentally delete the whole
container! If you do delete the whole container, just click Undo in the 1st row of the toolbar
to get it back.
To edit a flip tile, click on the blue placeholder, and then click the pencil icon.
To delete a flip tile, click on the blue placeholder and then click the X.
Remember to either "Save and Exit" if you want to make more edits later (the page
will not be live) OR, simply click the green "Publish" button to make your changes
live on the site.
Fill out the required elements in the Edit Component box and then click Save.
