Creating a portfolio gallery in WordPress is one of the must-do’s for every artist and photographer with their own art website. In this WordPress portfolio tutorial, I show you different way to add a gallery in WordPress. You can use the basic WordPress editor to display your portfolio. But if you want a more professional-looking photo gallery, you’ll learn how to create a portfolio page using a WordPress portfolio plugin!
Have you already looked at some WordPress portfolio examples and thought, “Aaaww, I also want to have something like that on my own artist website”? Well, if that’s the case you’re in the right place. 😃
This tutorial will show you the basics of adding a portfolio gallery to your WordPress site. If you’re ok with just a basic image gallery to get started, you’ll need nothing more than the WordPress installation itself.
For those among you who wish to have a bit more design options to display their portfolio of artworks, I’ll show you different ways how to create a gallery in WordPress using a free plugin and its premium version.
Before getting the creative WordPress juices flowing, let’s shortly answer some of the questions that frequently come up with regards to creating a portfolio gallery in WordPress.
Should I use WordPress for my Portfolio?
Developing an online portfolio gallery is important for any visual artist. A lot of traditional and digital artists, photographers and designers already use WordPress to display their portfolio. WordPress is not only a blogging platform, but a whole free content management system that is super-easy to use and customizable. You can build just about any kind of website, a portfolio website included, even if you don’t have any coding and web designing experience whatsoever.
There are lots of ready-made WordPress portfolio themes that you can use to showcase your art. You can also use a WordPress portfolio plugin to create a portfolio gallery. Either way, WordPress is always a great starting point for setting up any type of online portfolio.
How do I create a Portfolio Page?
Similar to the way you add new blog posts or pages, you can create a new portfolio page by adding a New Portfolio Item in your WordPress dashboard.
For example, I’m using OceanWP for my website, which comes with a portfolio option. If you go and look at any of my art collections, you’ll see in the URL that they categorized into portfolio items, e.g. GinAngieLa.com/portfolio/surreal-stories.
How do I add a Portfolio to WordPress?
Many WordPress themes come with a built-in portfolio option. But even if you’re not using a specific WordPress portfolio theme, you can still add a portfolio gallery to your WordPress site. In any case, there are several ways to create a portfolio gallery in WordPress, which we’re going to explore right now… 😊
Create a Portfolio Gallery in WordPress Using the Gutenberg Block Editor
The Gutenberg block editor comes with the regular WordPress installation. It’s a basic content editor designed to make content editing as easy as possible.
Ok, so let’s get started to create a portfolio gallery in WordPress with this editor.
Before anything else, you need to create a new content item where you want to display your WordPress portfolio.
This can either be a new Post, a new Page, or a new Portfolio Item. Simply go to your WordPress dashboard and hover the mouse over the + New button in the top bar. Then select the content item you want to create from the drop-down menu.
Type in a title for your gallery and then click on the little + icon that you see on the right below the title bar. This will open up the Gutenberg block menu. You’ll find the Gallery option right at the top under Most used.
Adding images to your WordPress portfolio
After clicking on Gallery, two buttons will appear: choose Upload if you want to import images from your computer, or Media Library to insert images that you’ve already uploaded to your media library.
After having uploaded or chosen the images from the media library, click on Create a new gallery at the right bottom of the media library window. This will insert the image gallery into your WordPress post.
From here, you can re-order the images by hovering the mouse over a picture and clicking on the left or right arrow to either move your image left or right. You can also add a caption to each image by typing it into the Write caption… field at the bottom of the image.
To remove an image from your portfolio gallery, click on the X in the upper right corner. You can add new pictures to the gallery by clicking on either the Upload or Media Library buttons at the very bottom of your gallery block.
View all these images in my Surreal Stories Collection.
Customizing your Gutenberg Portfolio Gallery
The Gutenberg editor allows you to customize the appearance of your photo gallery.
With the gallery block selected, go to the right sidebar of your content window and click on the Block tab (next to Document at the very top). There you’ll see the customization settings for your gallery.
You can choose the number of columns and the way you want to display the images in your portfolio. Selecting Crop images usually looks best because it’ll show all thumbnails in one row at the same width and height. Experiment a bit to see what you like best.
The Images size option lets you set the size of the preview images in your portfolio gallery.
Under Link to, you should select Media File because this will open up the full size image when somebody clicks on the thumbnail.
And that’s about it. Your Gutenberg portfolio gallery is ready to publish!
Create a Portfolio Gallery in WordPress Using Elementor
Elementor is a free WordPress plugin that comes with a built-in gallery widget. With more than 5 million active installations, Elementor is the most widely used page builder for WordPress. Apart from the gallery widget, the plugin offers you a whole array of functions to build your art website.
In following sections, I’m going to show you how to create a portfolio gallery in WordPress using Elementor’s Basic Gallery widget.
Let’s get started!
Starting out with Elementor
The first step is to add a new content item to display your portfolio gallery just the way we did it previously. This new content item can be a Page, Post, or Portfolio Item. Once the item is created, type in a title for your portfolio page.
If you want to display your portfolio page in full width without the default sidebar, you’ll need to do two things here. First, set the Content Layout to Full Width just as we did above (see Pro tip in the above section). Second, when working with Elementor, you’ll also need to select Elementor Full Width from the Template drop-down menu under Page Attributes.
Once you’ve installed Elementor, you’ll find the Edit with Elementor button at the top of each page. A mouse click on that button will bring you to the Elementor editing interface.
From there, select Basic Gallery from the General menu section in the Elementor sidebar. Alternatively, you can also type ‘gallery’ into the search field to find the widget.
Using the Basic Gallery Widget to create a portfolio gallery in WordPress
Now simply grab the Basic Gallery widget and drag and drop it in the widget area. Once you’ve dropped the widget, its editing options will appear in the Elementor sidebar on the left.
First off, you’ll need to insert images into the gallery by clicking on the little + icon. This will take you to the Media Library where you can either select previously uploaded images or upload new files from your computer. Click on Create a new gallery to add the selected pictures to your portfolio.
From there, a new window will open that allows you to edit your gallery. You can drag and drop the images to re-order or delete them by clicking on the X.
You can also type in a caption for each picture. Once you’re done editing, click on Insert gallery.
Customizing Elementor’s Basic Gallery
The default Basic Gallery settings display the images in 4 columns as square 150 x 150 pixel thumbnails. To provide a better viewing experience, you can change these settings in the editing menu. Little adjustments like decreasing the number of columns and enlarging thumbnail sizes will have a huge effect on the overall look of your portfolio gallery.
By default, each picture is linked to its Media File and Lightbox settings are enabled. This means that the full image will show up when somebody clicks on the thumbnail. People can then slide through your entire gallery by clicking on the left and right arrows next to the full view image.
Clicking on the Style tab in the Elementor sidebar will bring up more editing options. You can choose to adjust the spacing between the gallery images or add a border around each image. It’s totally up to your taste!
If you decide to add a border, you can select Border Type from the drop-down menu and set Border Width and Color. By increasing the Border Radius, you can round off the corners of your preview images. Play around with the settings to see what suits you best for your personal portfolio gallery.
Once you’re happy with the result, click on the Publish button at the bottom of the Elementor sidebar.
Social sharing and gallery viewing options
Despite being a free WordPress portfolio gallery plugin, Elementor’s Basic Gallery comes with a whole bunch of viewing and sharing options!
I highly recommend adding the title of your images in the Media Library. The title will automatically show below the image in full view. This will make it easier for interested clients to simply order one of your works by its title.
Additionally, you can fill in Alt attributes and write a caption for each image. These will also show up in full view mode. You can include information on subjects, dates and locations of your photos. Or, you can let people know how and at what price they can purchase the particular piece.
What other viewing options does the Basic Gallery offer? There’s full screen mode that shows your photos in the largest size possible. The black background makes colors pop and lets your artworks look rich and vibrant. A click on the magnifier icon zooms in on your image so people can get a look at the details.
Social sharing options to Facebook, Twitter and Pinterest or the possibility to download the image are available at a click on the little arrow icon at the top right.
Quick tip: Are you worried about people downloading and stealing your art? Learn about the best ways to protect your art online here.
With all that said and done, we’ve reached the end of the second option to create a portfolio gallery in WordPress using Elementor.
As a free WordPress portfolio plugin, Elementor’s Basic Gallery widget is a pretty powerful thingy for building an image art gallery. Don’t you think so?
Feel free to click in and have a look around the live Basic Gallery we've just created!
Nature & Macro
Create a Portfolio Gallery in WordPress Using Elementor Pro
The third option to create a portfolio gallery in WordPress is by making use of Elementor Pro. Elementor’s Basic Gallery already did a pretty nice job at displaying your art portfolio, right?
But the Gallery widget that comes with Elementor Pro is really powerful – I mean like…
I was blown away when I found out what this Gallery widget is capable of – and you’ll be too! 😉
So, what features does the Elementor Pro Image Gallery widget provide you with?
- Grid galleries (based on an aspect ratio of your choosing);
- Justified galleries (to set the height for each row, and varying width per image);
- Masonry galleries (to maintain the same image width and varying heights);
- Multiple filterable galleries;
- Lazy load option to gradually load images as viewers scoll down;
- Lots of image hover and overlay animations, blend modes and CSS filtering.
Plus, there are heaps of options to customize the look of image titles, alternative texts, captions, and descriptions and the filter bar.
This is to just name a few!
Can’t wait to get started? Ok, let’s do it!
First of all, you’ll need to create a new content item (Page, Post, Portfolio Item) just the way we did above. If you don’t want the default sidebar to show on your portfolio, set the Content Layout to Full Width and also select Elementor Full Width under Page Attributes (see Option #2).
Then click again on the Edit with Elementor button to get to the Elementor editing interface. From there, scroll down to the Pro section and drag and drop the Gallery widget on the widget area.
Creating Single and Multiple Filterable Galleries
Under Settings in the widget editing menu, you can choose whether you want to create a Single gallery or Multiple galleries. In both cases, you’ll see a box with a little + icon that you can click to import pictures into your gallery.
If you chose to create multiple galleries, you can type in the name of each gallery into the Title bar. Click the + ADD ITEM button to add more galleries to your portfolio.
As soon as you have uploaded your images to the gallery, you’ll see that the default settings display your portfolio as a Grid gallery with 4 columns and the images cropped at a 3:2 Aspect Ratio. You can adjust all these settings to your personal liking!
You can leave the gallery photos in their default order (the way you arranged them in the Media Library) or order them by Random. Random is a fantastic option if you wish to add more variety to your portfolio display. Every time people visit your portfolio gallery, they’ll see the images arranged differently. With every new arrangement, their attention may get drawn to different images.
Creating tiled and masonry photo galleries
Another option is to create a tiled portfolio gallery by selecting Justified from the Layout drop-down menu. In order to make the images larger or smaller, you can move the Row Height slider up or down.
If you prefer a Masonry gallery just like me, simply select Masonry from the Layout drop-down menu and tweak the number of rows, spacing between the images, and image size.
Right below the Settings toggle, you’ll find the Filter Bar options (in case you chose to create multiple galleries). Here, you can adapt the look of your filter bar. Do you want the “All” tab to show or not? You can also change the title to something like “Complete Portfolio.” Pointer and Animation let you configure the appearance of the filter items when active and when somebody hovers the mouse over them.
Customizing Display options Of image Title and other attributes
In the Overlay toggle, you can customize how the images look on hover. You may set a Background Overlay and display options for Title, Caption, Alt, and Description. Depending on your selection, the information you filled in for those image attributes in the Media Library will then show on hover.
Customizing Display options of gallery images
Ok, let’s go to the next editing tab, the Style menu. In the Image toggle, you can define a border for your images, including border color, width and radius. You can make those look different on hover.
Hover Animation allows you to determine how the image behaves when somebody hovers over it. You can make the image zoom in or out or move in different directions. Just play around with those settings to see what you like best.
Next, we come to the Overlay toggle under the Style tab (please note there’s also an Overlay toggle under the Content tab!). Here, you can change the look of the overlay that by default darkens down the image when someone hovers over it. You can modify Color, Gradient, and Blend Mode, too.
What is more, you can select a Hover Animation for both hover in and hover out. There’s a whole drop-down menu with 14 different options for both normal and hover. It’s quite fun playing around with all those options! Have a look at all of them and then choose what suits you best.
In the Content toggle under the Style tab, you can modify the appearance of the title and other information that show up on hover. This text information is what we defined above for Title, Caption, Alt, and Description in the Overlay toggle under the Content tab. Apart from changing vertical and horizontal alignment, padding, color and typography, you can also assign a hover animation to this text!
Customizing the filter bar for multiple galleries
The last editing option is the Filter Bar toggle (under the Style tab). Here, you can adjust the look of the filter bar that is on top of multiple galleries. There are different alignment, color and spacing options for both the text and the pointer.
For the example, I’ve set the hover text color to turquoise and the hover pointer color to pink. Have a look at the live Elementor demo gallery below to see what I mean.
As a matter of fact, you have lightbox and full screen viewing options. There’s the magnifying tool, social sharing and image download options just like in Elementor’s Basic Gallery widget.
And here we are! This is how you create a portfolio gallery in WordPress using Elementor Pro. Looks absolutely amazing and professional.
Have a look at the live version of a filterable masonry gallery by clicking through the Elementor demo below. Enjoy!
I hope you found this tutorial on how to create a portfolio gallery in WordPress helpful. If so, please share it with other artists who wish to add a portfolio to their WordPress site. Be well and see you on the next post, Angie 💞
Generally I don’t read post on blogs, but I would like to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Thanks, very nice post.
Thanks for stopping by and leaving a comment, Holway. I’m curious to see your WordPress art portfolio. Feel free to drop a link to it in the comments, if you want!