Maintaining Online Collections p.3

Welcome back! I’ll assume you’ve already completed Part 1 & Part 2 or you’re at a point that you can get started with laying out your Single Object Page.

So, for this tutorial we’re going to work with Elementor, but I’ll probably create a hand coded tutorial in the future in case you want to build your own theme.  To get started, you’ll need to install the plugin Advanced Custom Fields. This plugin is free, very simple to use and allows you to assign additional information to your objects. 

Once it’s installed, create a new Field Group and call it whatever you want. I’ve set mine up like so:

You can add any fields you need; I’ve popped in a few basic ones that most art objects will use. All of them are the Text Type except the last one which is WYSIWIG- this will allow us to add additional info in a block of text. 

The most important part is under Location– make sure you choose Post Type is equal to Object– this will ensure that the fields show up on the Single Object page. Publish it and let’s move on.

In order to use Elementor in your custom post type Objects, you’ll need to go to Elementor > Settings and click the box next to Objects. This enables Elementor in this post type.

Now let’s figure out what this page is going to look like. There are a lot of examples out there and maybe you’ve found one that you like or you’ve created a design that suits your institution. I really like the latest update to the Hirshhorn Museum’s site so I’m going to use that as my inspiration for this tutorial.

While the overall look is great, there are a few tweaks I want to make it flow slightly better. Let’s get started.

In order to really see how the design looks, it would be a good idea to set up an object for testing purposes. Go to Object > Add New and create a dummy object. You can see what I’ve done here and you’ll notice the new fields that we added in ACF.

I would suggest making use of the Featured Image section on the left side. You can also add categories under the Taxonomies tab. This will allow you to categorize the objects for easier classification.

Great- now let’s start working on the design. Head over to Templates > Theme Builder and choose Add New. A dialog will come up, select Single Post as the type of template you’re creating and name it. You can close out the library prompt that comes up next. 

You’ll probably see a page with header and footer. I’ve hidden mine for this tutorial so that there is less visual confusion. Once I’m happy with the layout, I’ll add them back in.

I’m not going to do a primer on design in Elementor- if you need to review how to do a page layout- you can find a great one here.

I will be using several of the post elements to make maintaining the data on the page easier like Featured Image and Post Content. The rest of the data will come from the custom fields.

I’ve kept this layout very simple with just a few text areas and have made use of the ACF shortcode in order to display the custom field contents on the front end.

				
					
				
			

Obviously you’ll need to change field_name to the name of the fields you have created, but keep the quotation marks. 

I’ve also added some basic contact information to the page so that if someone comes to the site through this page, they will know where this artwork is located and how to get in touch. Once you’re happy with the layout, you can publish the template. You will be prompted to choose the circumstances in which this template is used. If your custom post type is called Objects, then choose that in the dropdown and include it in all. 

That’s it! Obviously this would be difficult if you have thousands of objects, so in the next tutorial, I’ll go over how to set up and manage your entire online inventory via spreadsheet.

If you have any comments or questions, tell us below.

If you liked it, share it

Facebook
Twitter
LinkedIn

What do you think?