In this extensive review, I will be taking a deep dive into the functionality, features, and speed of this plugin. Let\u2019s jump into it.<\/p>\n
![\"modula](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/02\/Main-Image.jpg\")
<\/a><\/div>\n\ud83c\udfa9\u00a0Modula by MachoThemes<\/h2>\n
Modula<\/a> is a clean and lightweight WordPress grid gallery plugin<\/strong> developed by the incredible team behind\u00a0MachoThemes<\/a>. Folks at MachoThemes curate high-quality f<\/em>ree<\/em> and premium\u00a0<\/em>WordPress themes.<\/p>\n Launched in 2015, Modula currently rocks more than\u00a088,000+\u00a0<\/strong>downloads<\/strong> and\u00a010,000+ active installs<\/strong>. So, Modula is here to stay. Modula is in fact, their first WordPress plugin.<\/p>\n<\/div><\/div>\n \ud83d\udc49\u00a0The reason Modula is called grid\u00a0<\/em>gallery plugin is that the way it displays the images in the gallery. Images are expanded in two dimensions, covering multiple rows and columns<\/strong> just like grids in CSS grid<\/strong> style. That’s kind of analogy between the way Modula displays images and grids in the CSS grid mode.<\/p>\n \ud83d\udc49 Modula allows you to create stunning image galleries <\/b>with just a couple of clicks. Its flexible<\/b>, multipurpose<\/b>, and packed with some impressive features<\/b>. Also, it\u2019s responsive <\/b>out of the box and allows you to write custom scripts & CSS<\/b> as well.\u00a0\ud83d\udcaf<\/p>\n Images directly affect the page speed of a website. So, you’ve to be very careful while choosing a gallery plugin for your WordPress site. If a gallery plugin is not properly coded<\/b>, it can make images load slower and result in\u00a0low page speed<\/strong>. I decided to take Modula for a spin and see where it stands out.<\/p>\n In order to check this out, I used 10-15 images <\/b>and inserted them into a post with a built-in WordPress gallery<\/b> on a production site. After that, I inserted the same pictures using Modula<\/b>.<\/p>\n<\/div><\/div>\n I performed speed test in both cases and compared the results. Just check out the screenshot below of before and after using Modula.<\/p>\n With Modula, it resulted in\u00a0bigger page size <\/strong>and\u00a0increased load time<\/strong>. However overall performance <\/strong>was not affected much as it still loaded faster than 76% sites<\/strong> as compared to\u00a080%\u00a0<\/strong>before.<\/p>\n \ud83d\udd0d\u00a0To check out the reason for differences in the results, I went ahead and analyzed the page resources in each case.\u00a0The increase of\u00a0~1 MB\u00a0<\/strong>page size in case of Module was because of the fact that it was loading images at\u00a0500 px\u00a0<\/strong>width. While the default WordPress gallery was loading the images on the average<\/em> at 180 px\u00a0<\/strong>width.<\/p>\n This difference in the image sizes<\/strong> resulted in high size images<\/strong> and big page size<\/strong>. It ultimately contributed to increased page load<\/strong>\u00a0time<\/strong>. So, apparently, there was nothing wrong with the Modula.\u00a0<\/strong><\/p>\n To verify that everything was fine at the end of Modula plugin, I changed the size of the images. I changed the image width to 170 px <\/b>which is roughly the size that default gallery uses. I was not only able to beat the page size of default WP Gallery\u00a0<\/strong>but also\u00a0reduced the page speed<\/strong>.<\/p>\n Long story short, I was able to put my images into some pretty sleek and clean galleries without compromising the performance<\/strong>. In fact, this time page size was reduced to\u00a0478 KB<\/strong>\u00a0as compared to the original page size of\u00a0480.6 KB<\/strong>. Also,\u00a0load time was reduced by 0.4 secs<\/strong>.<\/p>\n<\/div><\/div>\n One important thing is, I performed these checks multiple times to make sure results were consistent and correct. Results presented here are average conclusions. And limiting the image size\u00a0<\/strong>did result in better performance than the default WP Gallery. Truly Impressed! \ud83c\udfaf<\/p>\n Moving on, let’s quickly go through the features that Modula has to offer. The team behind Modula has done an amazing job by making demos of all features <\/b>available on\u00a0their site<\/a>. It makes purchase decision easy.<\/p>\n Modula comes with 6 lightboxes<\/b> out of the box. You can choose different lightboxes for different galleries according to your needs. They\u2019re pretty clean<\/b>,\u00a0fast <\/b>and there is no fancy stuff. Check out all the demos\u00a0here<\/a>.<\/p>\n Another interesting feature of Modula is that it allows you to filter images<\/b>. Now, these filters are not like those of Instagram image filters but kind of category filters. Which means that you can create certain tags or labels<\/b> and then manually label your images.<\/b><\/p>\n Now, when you display your gallery, it shows those filter on top of it. Click on the label which you have created to display those particular images. Check out the GIF below.<\/p>\n Modula lets you shuffle images in your gallery. With this feature enabled, every time you load the page images in your gallery will be shuffled. This way it gives a fresh look<\/b> to your gallery on each visit.<\/p>\n Now, apart from shuffling the images in your gallery, you can also add some beautiful image loading effects. There are a variety of built-in loading effects for your images. Slide horizontally<\/b>\/vertically<\/b>, rotate<\/b> or scale <\/b>images as they load.<\/p>\n One thing to be noticed here is, adding image loading effects\u00a0doesn’t significantly affect page speed<\/strong>. Images still load quickly and smoothly. However, it adds another layer to the better user experience.<\/p>\n With Modula, not only you can add loading effects and light boxes but also modify the look and feel of the images. You can modify the margins between the images<\/b> in your gallery. Play around with the different values of the margin to adjust it according to your needs.<\/p>\n Using Modula is as easy as it can get. Things are quite simple <\/b>and straightforward<\/b>. Still, there is a nice visual documentation<\/a> on getting started with Modula. It explains the quick\u00a0four steps<\/strong> to create your gallery.<\/p>\n Apart from the user guide, its code <\/b>is also\u00a0well-structured<\/strong>\u00a0<\/b>and properly documented<\/b>. You can easily get hang fo the coding style after a while. Which means less effort while customizing or extending the plugin.<\/p>\n It’s hard to cover every detail of the plugin. However, I have tried to cover all the major features in detail. Apart from them, there are also some other features in Modula worth mentioning:<\/p>\n \ud83e\udd1e\u00a0Responsive<\/b>: Modula gallery is responsive <\/b>out of the box. So, design your gallery without worrying about the end user devices. Your gallery is going to perform same on all the devices.<\/p>\n \ud83d\udef8\u00a0Hover Effects<\/b>: Modula also comes with a couple of built-in hover effects. You can customize the on hover content<\/strong> as well as select from a couple of hover effects.<\/p>\n \ud83d\udccc Social Sharing<\/b>: With social sharing feature, you can display social media icons<\/b> on your images. While hovering on the images, users can see the social sharing icons and quickly share the images.<\/p>\n Now, let us move on to setting up Modula in WordPress. Getting started with Modula is quite straightforward and simple. Follow the quick steps below to get started with Modula.<\/p>\n The very first step is to download and install Modula. After downloading, go to WordPress dashboard and navigate to Plugins > Add New<\/b>. Click Upload Plugin<\/b>, select the .zip file, install<\/b>, and activate <\/b>it.<\/p>\n After installation, it adds a menu named Modula<\/b> in the sidebar of your WordPress dashboard.\u00a0 Now, next step is to create a new gallery. Navigate to Modula > Add Gallery<\/b> to set up a new gallery. Name <\/b>your gallery, add a description<\/b>, set height\/width<\/b>, and click Next<\/strong>.<\/p>\n Now you’ll select fields for titles and captions. Also, set the hover effect <\/b>for your gallery images and press Next<\/strong>. Don’t worry, you can always change these settings later on.<\/p>\n Here,\u00a0 you have to add images to your gallery<\/strong> and select\u00a0image width<\/strong> for your gallery images. Now, that’s the same image size that I discussed earlier in the review. Keep it small for better results.<\/p>\n Select the images for your gallery<\/b>,\u00a0image size<\/b> and hit Save<\/strong>. Your gallery will be created and you get a shortcode for your gallery. Insert this shortcode where you want to display the gallery.<\/p>\n So, creating a gallery with Modula<\/a> is just 4 clicks away<\/b>! Also, since it generates shortcodes, you can use them to display the gallery in the widgets <\/b>section of your site too.<\/p>\n Next is the interesting part where you’ll display your newly created gallery. To do so, create a new post, click on the little green Modula icon <\/b>in your editor toolbar, select the desired gallery and its shortcode will be inserted. Hit publish <\/b>and it’s live<\/b>.<\/p>\n It is as simple as that!<\/p>\n Modula is available in both\u00a0free<\/a> and\u00a0premium<\/b><\/a>\u00a0version. Its premium license ranges from $19 for a single site <\/b>to $49 for unlimited sites<\/b>.<\/p>\n The best part here is, licenses only differ in the number of supported sites. Apart from that, you get all the features irrespective of the license type. However, in the free version, there are some limited features.<\/p>\n The team behind the Modula plugin offered an exclusive 25% discount<\/b> for WPCouple readers<\/b>. Simply use the coupon code WPCOUPLE <\/b>at checkout to grab the discount.<\/p>\n Modula grid gallery plugin delivers what it promises. It’s pretty clean<\/b>, fast<\/b>, and easy to use<\/b>. If you\u2019re looking for an image gallery plugin for your site, then Modula definitely<\/b> deserves a shot<\/b>!<\/p>\n On the top, Modula provides its functionality without affecting the performance of your site. In short, you can create modern grid gallery<\/strong> and enhance the user experience<\/strong> without hurting your site speed.<\/p>\n However, there are a few things that I would like to mention here:<\/p>\n \ud83d\udc49\u00a0Like many other plugins, Module adds a colored icon <\/b>in the dashboard. Now, the thing here is, it’s generally not considered a good practice and leads to poor UX. Check out Ahmad\u2019s blog post about\u00a0Never Build Colored Icons\/Menus in WordPress<\/a>.<\/p>\n\ud83c\udf96<\/h2>\n
\u26a1\u00a0Speed<\/h2>\n
\ud83d\udca1<\/h2>\n
![\"Performance-Measure\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/02\/Performance-Measure.jpg\")
<\/a><\/div>\n\u2192 Analysis<\/h3>\n
![\"image](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/modula-Image-sizes-differences-in-page-load.jpg\")
<\/div>\n\u2192 Optimization<\/h3>\n
\ud83d\udcaf<\/h2>\n
![\"modula-speed-after-optimization\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/modula-speed-after-optimizations.jpg\")
<\/a><\/div>\n\ud83c\udf40\u00a0Features of Modula<\/h2>\n
\u2192 Light Boxes<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/DlhBpsY.gif\")
<\/a><\/div><\/div>\n\u2192 Image Filters<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/reXBE4Z.gif\")
<\/a><\/div><\/div>\n\u2192 Shuffle<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/AjWm333.gif\")
<\/a><\/div><\/div>\n\u2192 Image Loaded Effects<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/PylhOXt.gif\")
<\/a><\/div><\/div>\n\u2192 Margins<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/K18AgfS.gif\")
<\/a><\/div><\/div>\n\u2192 Documentation<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/3ky2gC2.gif\")
<\/a><\/div><\/div>\n![\"Modula-Coding-Documentation\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/02\/Coding-Documentation.jpg\")
<\/a><\/div>\n\u2192 Other Features<\/h3>\n
\ud83c\udfaf\u00a0Getting Started With Modula<\/h2>\n
\u2192 Step #1<\/h3>\n
![\"Installing-Modula-plugin\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/Installing-Modula-plugin-.jpg\")
<\/a><\/div>\n\u2192 Step #2<\/h3>\n
![\"Creating](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/Creating-new-gallery-modula.jpg\")
<\/a><\/div>\n\u2192 Step #3<\/h3>\n
![\"Modula](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/Gallery-settings-1.jpg\")
<\/a><\/div>\n\u2192 Step #4<\/h3>\n
![\"Modula-add-images-to-the-gallery\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/Modula-add-images-to-the-gallery-1.jpg\")
<\/a><\/div>\n\u2192 Displaying The Gallery<\/h3>\n
![\"inserting](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/displaying-gallery-1.jpg\")
<\/a><\/div>\n\ud83d\udcb8\u00a0Pricing<\/h2>\n
![\"wordpress](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/02\/Pricing-Table.jpg\")
<\/a><\/div>\n\ud83c\udf81\u00a0Discount Coupon<\/h2>\n
\ud83d\ude4c\u00a0Final Thoughts & Recommendations<\/h2>\n
![\"Modular](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/03\/Modular-Plugin-Icon-1.jpg\"){kind=icon}
<\/a><\/div>\n