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 than if you did not have any visual content. 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. There are many free and paid gallery plugins that are available for you to add to your website to display your content. However, many of the free and paid WordPress plugins lack the customizability needed to display visual content on your website. Often times these plugins lack the customizability to allow you to blend in the gallery with your website’s theme and are missing important features that are needed for the gallery to work the way you would like it too.
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 looking gallery that can display image, video and audio galleries. You can not only create these galleries from your site's posts and pages, but you can create them from your social media feeds and create 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 that we will build 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 functions in a way that encourages users to keep 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 give create a custom shortcode for us to use to add the grid to our website.
Now it is time to add in 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 sources available to you allow you to create the grid from your site's pages and posts as well as 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 Setting 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 three.
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 in 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 cycle icon button with two arrows 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 in padding on the right and left-hand side 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 in "20" on the Right and Left fields. Again, click the cycle icon button 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 grid. To add in spacing in the margin to make it seem less crowded, type in "10" in the Margin Bottom 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 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 Essn. Grid page on your WP Dashboard and copy the shortcode next to the Nature Photography grid. Then simply create a new page or post and add paste the shortcode to 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 can be utilized to improve the functionality and look of your essential grid.
Grid Filters
In the Nav-Filter-Sort settings, you can add in 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 in 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 to into one of the four dropzones to display these filters and the filters will be displayed.
Animation
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.
Skin Editor
In the 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, the cover, spacing, shadows, animation and even add in links or groups of links to each grid you create. Also, each element that you add onto 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.
Conclusion
When displaying visual content to your audience, you need to ensure that the gallery plugin you use allows you to customize your gallery to 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 here, check out some of the other great WordPress plugins available from CodeCanyon.
WordPress17 Best WordPress Gallery Plugins.jpg)
WordPress10 Best WordPress Slider & Carousel Plugins of 2019
No comments:
Post a Comment