Today’s internet culture is driven by images and videos. Studies have proven that adding visual content to your website will attract and hold the attention of your audience longer. This makes it necessary for you to prioritize images and videos on your website.
When it comes to displaying visual content on your WordPress website, you have a myriad of choices. Many free and paid gallery plugins are available for you to add to your website to display your content. However, many of the free and paid WordPress plugins are difficult to customize and don't allow you to blend the gallery with your website’s theme. They are often missing important features that are needed for the gallery to work the way you would like it to.
The Essential Grid WordPress Gallery Plugin is an all-in-one solution for your gallery needs. This feature-rich plugin allows you to build a stunning gallery that can display image, video and audio galleries. You can create these galleries not only from your site's posts and pages, but also from your social media feeds, allowing you to build a completely custom gallery.
In this article, I am going to go over how to create a custom gallery for your WordPress website with the Essential Grid plugin.
What We Will Be Building
We will be building an eye-catching gallery for our nature photography website. We want to customize the gallery so that it invites our audience to spend time interacting with the gallery and gets them interested in hiring us for our photography services.
The gallery will feature a customized grid, lightbox, filters, and animation. This customization will allow us to display our gallery in a way that blends in with our website's theme and encourages users to stay engaged with the gallery.
Below is an image of what our final essential grid gallery will look like.
Creating the Gallery
To begin creating the gallery, head on over to Essential Grid > Ess. Grid after you have installed the plugin. You will now be brought to the grid creator menu, where we will click the Create New Ess. Grid button. This will take us to the main essential grid editor for our newly created grid. In the Naming section, type in "Nature Photography" for Title and Alias. This will create the title for our grid and generate a custom shortcode for us to use to add the grid to our website.
Now it's time to add our nature photographs to the grid. Click on the Source tab on the top of the Essential Grid editor. We will now select the source that will provide the images for our grid. In our case, we will be selecting the Custom Grid option as we want to add individual images to the grid. The other available sources allow you to create the grid from your site's pages and posts or through your social media accounts.
After you have selected the Custom Grid option, scroll all the way down to the Editor / Preview. Hover your cursor over the grey square and click the circle that has an image icon in it. Since we would like to add multiple photos at once to our grid, we will click the Bulk button. We will be taken to the WordPress media library, where we will select all of the nature images and then click the Choose Images button at the bottom right-hand corner of the media library. We have now added the images we would like to the gallery, but the look and function of the gallery need to be altered to fit our photography website's needs.
To change the look of the grid, we will go to the Grid Settings tab. Under the Layout section, we will choose the Fullwidth option as we would like to have our eye-catching nature photographs take up as much of the screen as possible. The full-width display will also help make the photos seem more important.
Next, we will change the number of columns that will appear on each webpage for specific screen sizes. Again, we would like to attract the attention of our audience and make the images seem important. The smaller the image is, the less important it will seem. Having a maximum of three columns on the grid will keep the photos at a desirable size. We will adjust the number of Desktop Large, Desktop Medium, and Desktop Small columns to 3.
If we scroll down to the bottom of the page, we can now see a preview of how our gallery looks. The nature photos look great, but there is no space between each photo, making the grid look very crowded. To fix this issue, we will head to the Item Spacing option, which is in the Grid Settings tab, and type in "10”. Click on the blue refresh icon on the middle right-hand side of your screen to see the 10 pixel item spacing that you just added to the grid.
In addition to the item spacing, we would also like to add padding on the right and left-hand sides of the screen. While we do want the images to be full-screen, we would like there to be some padding so they fit better with the design of our website. In the Whole Grid Padding section, type "20" in the Right and Left fields. Again, click the refresh icon and you can view these padding changes in the Editor/Preview. The grid looks much less crowded now.
Next, we need to add a navigation filter to allow the viewers of the gallery to scroll through all of our photos. Click on the Nav-Filter-Sort tab, and you will be brought to the navigation editor. Under the Available Module section, drag and drop the Pagination button in the DROPZONE Bottom 1 section under the Controls Inside Grid section. This will add the pagination control to the bottom of your grid. The pagination control is now displayed on the bottom of the grid, but there is no space between the pagination and the grid. To add spacing in the margin to make it seem less crowded, type "10" in the Margin Bottom field in the Dropzone Bottom 1 section.
Finally, we are going to make some minor adjustments to the construction of each individual grid. When a user hovers over a specific photo, we would like there to only be a magnifying glass icon that opens up a lightbox to the specific image. For our website's theme, this will look much better.
To adjust the contents of each grid, we will click on the Skins setting tab. We will be brought to a screen that displays all the skins available for the grid. We just want to edit the current grid we are using, called Washington. To do this, click on the water drop icon on the upper right-hand corner of the Washington skin. This will bring us to the skin editor.
Again, we would just like to have the magnifying glass icon that links to the lightbox. We want to remove the link icon and title element. To do this, click on each icon in the Item Layout section on the right-hand side of your screen and click the red Remove button. Finally, click the green Save button on the right-hand side of your screen to save the skin.
Finally, to add the plugin to your website, all you have to do is go back to the Ess. Grid page on your WordPress dashboard and copy the shortcode next to the Nature Photography grid. Then simply create a new page or post and paste the shortcode on this page or post. There you have it! You can now view our nature photography gallery. Watch the video below to watch the creation of the grid.
Getting the Most Out of the Plugin
In this article, we only scratched the surface of what this feature-rich plugin can do. Below is a list of a few of the features that you can use to improve the functionality and look of your essential grid.
In the Nav-Filter-Sort settings, you can add filter buttons for your post and page and custom grids. If the grid you are showing has different types of content that need to be categorized, adding filters is a must. This allows your users to easily browse through your visual or audio content for a more enjoyable website experience. Simply drag the filter button down into one of the four dropzones to display these filters.
Another great feature in Essential Grid is the animation that you can set for each grid. Changing around the animation of your specific grid may seem like a feature that will not have a big impact on user experience, but it absolutely does. Users subconsciously pick up on the animation that is used on pages, and this animation can create a more polished and professional presentation of the content on your website.
In the Animations settings tab, you can change the start animation, filter and pagination animation, and the hover animations. Experiment with different combinations of animations and survey your audience to see which animations perform the best.
In this article, we only briefly went over the skin editor. The skin editor is a very complex editor that allows you to change all aspects of the skin. You can edit the layout of the skin, change the cover, spacing, shadows, and animation, and even add links or groups of links to each grid you create. Also, each element that you add to the skin can be styled, animated, and have links added to it. The specific styling and functionality will depend on your specific website's needs.
It would be best to come up with a basic idea of what your website grids will need and what you want them to look like before you dive into all the skin features available. This way, you will have a goal in mind to help you from getting lost in all the available features.
When displaying visual content to your audience, you need to ensure that the gallery plugin you use allows you to customize your gallery for your website. Without this customization, you will not be able to create a gallery that attracts the attention of your audience.
By using the Essential Grid plugin, you can easily customize any grid that you create and give it that professional look and feel. To give this plugin a try, head over to CodeCanyon and check out the Essential Grid live preview. And while you're there, check out some of the other great WordPress plugins available from CodeCanyon.
- WordPress22 Best WordPress Gallery PluginsMonty Shokeen
- WordPress25 Best WordPress Slider & Carousel Plugins of 2021Daniel Strongin
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post