Applying the Masonry Plugin

Important steps to get started

 

Get the Plugin Link

Add the plugin link

Add the Info Container 

 

  

Get the Plugin Link

1. Sign in to your QooQee account and download the Masonry Plugin Package file.
2. After unzipping the Package file, in the unzipped folder, open the instruction.pdf file.
3. From the instruction file, copy (Cmd + C) the Plugin Link.

 

Add the plugin link

1. Go to your Masonry Webflow project, in Webflow.
2. Paste the Plugin Link in the Custom Code panel under the Before </body> tag.
   
   • a. Click on the Pages button on the left side.
   • b. Select the page where you want to have the Masonry installed, or click on the gear icon next to the page name.
   • c. Open the Custome Code tab.
   • d.  Paste the Plugin Link under the Before </body> tag.
   •  
   • Add the Plugin Link in the Before <body/> tag 
3. Make sure to paste the Plugin Link only on the pages where you want to have the Masonry, otherwise, if you add the Plugin Link into other pages without a CMS collection that is ready for the Masonry plugin, it may cause issues.

 

Do not paste the Plugin link in pages where there is no CMS list and not ready for the Masonry plugin.

 

 

Add the info container

1. Open the project that was added to your Webflow account after purchasing the Masonry Plugin, or the template in which the masonry is included.
2. Open the page  Masonry Info (it is the main page of the Masonry project).
   
   • 
3. If you have another project in which you do not have the Masonry Element already:
   • a. create a new page in your project.
   • b. Name the page anything you want, it does not have to be Masonry info.
   • c. Copy/Paste everything from the Masonry Info page into this page.
   •  
   • This way you have this page in your project as well. You can set the page as a Draft, so it does not be considered in your sitemap.
4. Activate the plugin ( If you have not activated the plugin, Click Here to see how ).
5. Select and copy (Cmd + C) the Masonry Info panel.
   • 
6. Go to the page/pages where you have want to apply the Masonry plugin to a CMS collection and create a Div Block.
   
   • 
7. Paste (Cmd + V) the Masonry Info panel inside this Div Block and set the Display of the Div Block to "none.
   The idea is to have the activation  in all pages, but not set its own display to none, so we can still edit its content from the Masonry Info page.
   •  
   • 
8. Repeat this process on all the pages where you have the Masonry.

 

 

You need to have the Masonry Info panel on "all" the pages where there is a CMS collection list that you want to apply the masonry to.