Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

S5 Masonry

This tutorial will explain how to install and configure the S5 Masonry widget.


This is a powerful widget that pulls your article from a category or categories and can display them in masonry style format. The widget automatically changes on screen resize to fit the screen a user is viewing them on. You can choose to output a "load more" button that will load a set number of articles you define via AJAX. The second method to load articles is "scroll to load" which will load articles once you scroll to the bottom of your screen. You simply assign an intro image under your "Image and Links" parameters area of your article and then if you choose to show it in the widget it will show up. The intro text will show up if you've added text to your article before your read more button.

Note - Many of our club products contain specific styling for our plugins. These styles cannot be transferred from one product to another; they are integrated into the design. The same plugin is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular plugin, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this plugin. There are a lot of tips and further information found in these areas.

1. Installation

The first thing you'll need to do is install the widget. Once you have it downloaded it just follow the below tutorial if you need help installing the widget into WordPress. Refer to your theme's widget layout to determine the best position to publish this widget to, some widgets are designed for specific locations.

http://www.shape5.com/documentation/WordPress/Getting-Started/How-To-Install-A-Widget-Into-WordPress

2. Next you need to setup the articles that will appear in the widget.

  1. In the backend of WordPress navigate to "Posts > Categories". On the Category Manager page create a New category called "Masonry" or whatever you would like to call it. This will be the category that you save your articles to. You can create one category or several, and they can be sub categories. For most of our demo's we create the parent category "Masonry" and then apply subs to it:

  2. After you created your categories next navigate to "Posts > All Posts". Click new posts to create a new article in the newly created category:

  3. Give your article some text, a title and set it to publish to one of your newly created categories. Notice here we are using the Fitness Center demo and we have 3 categories we can publish to under the parent "Fitness Center Demo" category:

  4. Before saving the article proceed to the "Featured Image" option and set an image. This image is what will show in the S5 Masonry widget:

  5. Repeat these steps as many times as needed to create a volume of articles to display in the S5 Masonry widget.
  6. Save the article and proceed to the S5 Masonry configuration via the "Appearance > Widgets" menu link. Next add or location your Masonry widget:

3. Next you will need to setup the options in the admin

Now that you have setup articles to display, you need to configure the widget itself. Below is a complete list of all the settings that show when you open up the widget.

  1. Show the Categories? - This enables or disables the buttons that toggle between categories.
  2. Category - Here you select the categories that you saved the masonry articles to. Using the "All Categories" option will present an "All" button on the widget.
  3. Show Images - If you have specified intro images for your articles, this option will enable or disable them.
  4. Show Article title - Set the title of the articles to be visible or hidden.
  5. Linked Titles - Do you want the titles to be href hyperlinks?
  6. Header Level - Select the type of header tagged to be used here. Keep in mind that some themes may be stylized for a specific setting here.
  7. Show Intro Text? - Do you want to enable or disable the intro text?
  8. Read More Link - Do you want to enable or disable the read more link?
  9. Show Hits? - Do you want to enable or disable the show hits area?
  10. Default Layout or Hover Overlay? - The default layout puts all text below the image and it is always visible. The hover overlay will only show the text on hover and it will show over top of the intro image.
  11. Number of Articles - How many articles should be shown by default.
  12. Load More Articles - How many articles should show when the Load More button is pressed?
  13. Load More Method - The method in which more articles are loaded on the page.
  14. Order Results - The order in which articles are outputted. Keep in mind that the order may differ slightly based on the size of articles and the screen size.

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.