UltimateWB
Online Consultant
How to Create & Embed a Mosaic Grid in your Website

You can create, stylize, customize, and embed a dynamically generated mosaic grid in your website using the Mosaic Grid App, available under the Elements section of the Admin Panel.  A mosaic grid can consist of a mix of photos and text boxes.

First, go to Elements > Add Mosaic Grid.

Add Mosaic Grid, Menu

 

Here you can configure how you want your mosiac grid to look and work.

 

Add Mosaic Grid, Options

 

Options include sizing, elements animations, flex (resize) option, fill gap option, draggable elements option, fix size options to adjust and/or resize elements according to window size/resizing, captions, colors, photo enlarged-popups and links.  Configure and stylize it how you want, and then click the "Add Grid" button at the bottom of the page.

 

Go to Elements > List Mosaic Grids to list the grids you have created, and choose to edit them, or add media to them.

 

List Mosaic Grids

 

Here, there is a tab "List Grid Media" at the top, to list grid media elements.  You can go direct to the list of elements for a specific grid by clicking on the "Media" button on the grid's row.  And, you can click on the right tab, "Add Grid Media" to add a grid media element, whether it is a photo, or an HTML Editor box, i.e. text box (software does the HTML coding for you!).

 

On the Add Grid Media page, you choose to which Grid to add it.  You can change this later if you want from the List Grid Media page, by 1) clicking on the edit button to edit the individual media element, or 2) checkmarking the boxes to the media elements you want to move to another Grid, choosing the Grid from the move menu, and then clicking on the "Move" link there. 

On the Add Grid Media page you also choose the media type: Photo or HTML Editor Box.  Based on this choice, it either displays the upload file options, or the HTML Editor Box for you to enter the text/content you want.

Add Grid Media Element

 

There are also caption, sizing, and styling options there.  Customize how you want and click the "Add Media" button at the bottom of the page to add!  You can also choose to batch upload photos - fill in all the other configuration options and then click on the "Batch Upload" button at the bottom of the page.  This will take you to the batch upload form to select multiple image files to upload with your set media configuration options.

 

Now, to embed the Grid Media.  Back to the Elements > List Mosaic Grids page:

List Mosaic Grids

 

Here, there is the corresponding Placeholder Text for each Grid.  Copy/paste this Placeholder Text to the page where you want it.  Just go to Pages > List pages and click on the Edit button for the page you want to insert into, or create a new page by going to Pages > Add Page.


Examples:

Mosaic Grid Generator App


Mosaic Grid Generator App

Report article by:
Report a concern
Comments:
0.00 Rating0.00 Rating0.00 Rating0.00 Rating0.00 Rating0 Ratings
Please use the form below to post your comment/rating!
Name:
Email (not posted):
Website:
Rating:
1 star out of 52 stars out of 53 stars out of 54 stars out of 55 stars out of 5
Subject:
Comment:
Captcha Question
Anna is Bob's sister. Who is Anna's brother?
Switch Question
Answer
Subscribe to new comments
Comments/Ratings (0)
Sort By
No Comments, be the first to comment!
Report comment by:
Report a concern
Comments: