Search

How to Create a Stock Photo Website with Elementor

Are you a photography hobbyist and have a plan to monetize your hobby? If so, one of the ideas you can implement is to create a stock photo website. You can monetize your stock photo website by requiring your visitors to subscribe before they can download a photo.

In this tutorial, we will show you how to create a stock photo website in WordPress using Elementor.

Elementor, as you might have known, is a page builder plugin for WordPress that has the most comprehensive features. It comes with a Theme Builder feature which supports custom dynamic content (custom fields and custom post type) to allow you to create a dynamic website with a no-code approach. You can make use of this feature to create a stock photo website like Unsplash or Pexels. Of course, the features of your stock photo website will not be as complex as these two popular stock photo websites. At least, you can use your website to display your own photos.

Picjumbo is a perfect example of a successful stock photo website built with WordPress. To create a stock photo website with WordPress+Elementor (no-code approach), you will need the following plugins:

You can replace Advanced Custom Fields and CPT UI with JetEngine if you want it. Of course, you also need a domain and hosting for your website. Our recommended services to get a domain and hosting are:

If you are new to Elementor, you can read our previous article to learn how to use Elementor.

The stock photo website we will create here will consist of the following parts:

  • Homepage
  • Custom single post template to display photo items
  • Custom archive pages to display photos by categories and tags
  • Header
  • Footer

You can add other parts according to your need.

Let’s get started.


How to Create a Stock Photo Website with Elementor

Step 1: Create Custom Post Type Using CPT UI

You need to create a custom post type (CPT) to accommodate the content of photos you want to add to your website. As mentioned earlier, we will use CPT UI to create a custom post type in this tutorial. Before getting started, make sure you have installed and activated the CPT UI plugin on your WordPress site. Once you are ready, go to CPT UI -> Add/Edit Post Types on your WordPress dashboard to create the custom post type.

On the next screen, fill out all the required fields on the Basic Settings block.

On the Additional labels block, you can set the custom labels to make it easier for you to manage your photos from the WordPress dashboard. All fields on this block are optional.

Next, set the basic settings on the Settings block. On the Support section, select the WordPress components you want to include on your custom post type. In this example, we include the following components:

You don’t need the WordPress editor for the CPT for photos. To add photo description, we will use a custom field instead. Click the Add Post Type button to create the custom post type.


Step 2: Create Custom Taxonomies

To make your photos get more organized, you need to create custom taxonomies. In this tutorial, we will create two custom taxonomies to organize your photos:

  • Photo Category
  • Photo Tag

You can create the custom taxonomies using CPT UI.

— Photo Category

On your WordPress dashboard, go to CPT UI -> Add/Edit Post Taxo. Next, set the taxonomy slug, plural label and singular label nomies on the Basic settings block. On the Attach to Post Type section, select the custom post type you have just created above.

On the Additional labels block, you can set the custom labels. Once done, move to the Settings block to set some additional settings. In our example, we use the following settings.

  • Public: True
  • Public Queryable: True
  • Hierarchical: True
  • Show UI: True
  • Show in menu: True
  • Show in nav menus: True
  • Query Var: True
  • Rewrite: True
  • Rewrite With Front: True
  • Rewrite Hierarchical: False
  • Show Admin Column: False
  • Show in REST API: True
  • Show in tag cloud: False
  • Show in quick/bulk edit panel: False
  • Sort: False

Click the Add Taxonomy button to add the custom category.

— Photo Tag

Same as custom category above, you can go to CPT UI -> Add/Edit Post Taxonomies on your WordPress dashboard to create custom tag. Make sure to attach the custom tag to the custom post type you have created above.

On the Settings block, you can use the following settings.

  • Public: True
  • Public Queryable: True
  • Hierarchical: False
  • Show UI: True
  • Show in menu: True
  • Show in nav menus: True
  • Query Var: True
  • Rewrite: True
  • Rewrite With Front: True
  • Rewrite Hierarchical: False
  • Show Admin Column: False
  • Show in REST API: True
  • Show in tag cloud: False
  • Show in quick/bulk edit panel: False
  • Sort: False

Click the Add Taxonomy button to add the custom tag.

After completing the creation of custom post type and custom taxonomies above, you will see a new menu item and sub-menu items on your WordPress dashboard as follows.


Step 3: Create the Custom Fields

Once done creating the custom post type and custom taxonomies, the next step is to create the custom fields. You need custom fields to store additional information about your photos such as photo description, photo location, and so on. More importantly, you need a custom field to place the download link of each photo item.

There are several plugins to create custom fields. In this tutorial, we will use ACF (Advanced Custom Fields). You can use the free version of ACF to create basic custom fields.

Once the ACF plugin is installed and activated, go to Custom Fields -> Add New on your WordPress dashboard to create a custom field group.

Give your custom field group a name and add your first custom field on the Fields block.

You can add as many custom fields as you want to your custom field group. In this example, we add only two custom fields as follows:

— Download link

Will use this custom field to place the URL of the original photo file (the file that will be downloaded by your visitors). You need to set the field type of this field to Url. Also enable the Required option on the Validation tab to help making sure you won’t miss the download link every time you add a new photo.

— Description

You can use this field to add description to your photo. As we said earlier, we will use a custom field to add photo description instead of WordPress editor (Gutenberg). For this field, you can set the field type to Text Area. You don’t need to enable the Required option as photo description is optional.

Once done adding the custom fields, switch to the Settings block to assign the custom fields to the custom post type you have created above. You can click the Location Rules tab to set the assignment.

Next, switch to the Presentation tab in case you want to make some additional settings to your custom field group. Once done, click the Save Changes button on the upper-right corner to apply the changes.

Until here, you can start adding your photos. To add a new photo, click the custom post type label on your WordPress dashboard and select Add New. In our case, the label is Photos.

Add a title for your photo, description, featured image, and other elements. One crucial thing. Never forget to add the link of the original photo (photo in an original size/dimension). For featured image, you can use a photo with the dimension of around 900px.


Step 4: Create Custom Single Post Template for Photo Items

Once you are done with custom post type and custom fields, the next step is to create the necessary custom templates. For this tutorial, we will create two custom templates for a single post for photo items and archive pages.

Let’s get started with the custom template for photo items.

The custom single post template we will create consists of four sections:

  • Section 1: To place the photo preview/featured image
  • Section 2: To place photographer profile photo and download button
  • Section 3: To place a subscription form and donation button
  • Section 4: To place the related photos

To start creating a custom template, go to Templates -> Theme Builder on your WordPress dashboard (make sure you have installed Elementor Pro). On the Theme Builder screen, hover your cursor over the Single Post tab and click the plus icon to create a new template.

There is no pre-made single post template designed for stock photo, so you need to create one yourself. Simply close the appearing template library window to open the Elementor editor.

— Section 1

Click the plus icon on the canvas area to add a new section. Select the three-column structure. Set the width of each column with the following configuration:

  • First column: 14%
  • Middle column: 72%
  • Third column: 14%

To set the column width, you can click the column handle to edit it. Then, go to the settings panel and enter the width on the Column Width field under the Layout block.

Once done setting the width of the columns, add the Image widget to the middle column. On the settings panel, click the Dynamic Tags icon on the Image block and select Featured Image.

Go to the Style tab to style up the featured image. On this example, we use the following settings:

  • Width: 100%
  • Max Width: 100%
  • Height: 620px
  • Object Fit: Contain

— Section 2

As mentioned earlier, Section 2 is used to place the profile picture of the photographer (you) and the download button. Add the section by clicking the plus icon on the canvas area. This time, you can select the one-column structure.

  • Post Info Widget

The first widget you need to add to this section is the Post Info widget. We will use this widget to display the profile picture of the photographer — we well as the name. You can also use the Image Box if you want it. Once the Post Info widget is added, go to the settings panel to set the types of meta data. In this tutorial, we only need the Author meta data to get the profile photo and name. Make sure to enable the Avatar option to display the profile picture.

Once done with the basic settings under the Content tab, you can switch to the Style tab to further style up the Post Info widget.

  • Button Widget

Button widget — as you can guess — is used to place the download link of the original photo file. You can place this widget right beneath the Post Info widget.

Once the widget is added, go to the settings panel to make some settings. On the Link option under the Content tab, click the Dynamic Tags icon and select ACF URL Field.

Next, click the wrench icon and select the custom field for download link you have created earlier above on the Key dropdown.

Before switching to the Style tab to style up the button, click the gear icon on the link field and type “download” on the Custom Attributes field. This attribute will make your photos automatically downloaded when your visitors click the download button. If you don’t set this attribute, your photos will be opened in a lightbox when your visitors click the download button.

— Section 3

This section is used to place the subscription form and donation button. You can use the Form widget and PayPal Button widget to add these elements. The layout of this section is completely up to you. For this tutorial, we use a horizontal layout as follows:

Click the plus icon on the canvas area to add a new section. You can select the one-column structure. Then, add an inner section to the section you have just added. Set the width of the first column of the inner section to 70%.

Once columns are ready, add the Form widget to the first column. You can connect the form with your favorite email marketing tools. From MailPoet, MailerLite, ActiveCampaign, to GetResponse.

Once done setting up and styling the Form widget on the first column, switch to the second column to add the PayPal Button widget. You can read our previous article to learn more how to use the widget. Once crucial thing. Since you want to use the PayPal button to accept donation, make sure to set the Transaction Type to Donation.

— Section 4

We will use this section to place the related photos. Add a new section by clicking the plus icon on the canvas area. You can select the one-column structure for this section. Add the Post widget to the section you have just added. On the settings panel, open the Layout settings block under the Content tab to make the basic settings. The settings we use on this example are:

  • Skin: Classic
  • Number of Columns: 3
  • Posts Per Page: 9
  • Image Position: Top
  • Masonry: Yes
  • Image Size: Full
  • Image Width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta Data: None
  • Read More: Disabled

Next, open the Query block and set the Source to Related. On the Term field, select the parameter you want to use to filter the related photos. In this example, we filter the photos by photo tags.

Once done with the basic settings, you can go to the Style tab to style up the widget.

Until here, your custom template is ready to publish. Click the PUBLISH button on the bottom side of the settings panel to publish it.

On the appearing window, add a display condition by clicking the ADD CONDITION button.

Select the custom post type you have created earlier above from the dropdown menu. Click the CLICK AND SAVE button to publish the template.


Step 5: Create Custom Template for Archive Pages

On step 2 above, you have created two custom taxonomies using CPT UI, which are used to sort your photos. In this step, we will create a custom template for those custom taxonomies so that when your visitors access the URLs of the custom taxonomies — e.g. https://yourdomain.com/photo_category/animal/ — they will see the list of photos associated with the custom taxonomies. Here are the examples.

In this tutorial, we will demonstrate how to create a simple custom archive template that consists of two sections. For more detailed tutorials of how to create custom archive page using Elementor, you can refer to this post.

To start creating a custom archive template, go to Templates -> Theme Builder on your WordPress dashboard. On the Theme Builder screen, hover your cursor over the Archive label and click the plus icon.

Simply close the appearing template library as we will create the custom archive from scratch.

— Section 1

On the Elementor editor, click the plus icon to add a new section. You can select the one-column structure for this section. Once the section is added, add the Archive Title widget.

Once the Archive Title widget is added, you can go to the Elementor settings panel to style it up.

— Section 2

We will use this section to place the Archive Posts widget. You can actually place the widget to the same section as the Archive Title widget above. But placing the two widgets to different sections offer design flexibility in case you want to change the design of your archive page in the future.

Simply click the plus icon on the canvas area to add a new section. You can select the one-column structure for this section. Once the section is read, add the Archive Posts widget to it.

Go to the settings panel to make the settings and apply the stylings. On the Layout settings block, apply the following settings:

  • Skin: Classic
  • Number of columns: 3
  • Image position: Top
  • Masonry: On
  • Image size: Full
  • Image width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta: None
  • Read More: Disabled

Once done making the settings on the Layout block, switch to the Pagination block to set the pagination. There are five pagination styles you can apply: number, previous/next, number+previous/next, load more, infinity load.

You can read our previous article to learn more about pagination on Elementor.

Once done with section 2, meaning you have done editing the custom archive page, click the PUBLISH button to publish the template. Add a display condition by clicking the ADD CONDITION button on the appearing window. Specify where you want to apply the custom template. Since you want to use it on the custom taxonomies, make sure to select them.

Click the SAVE & CLOSE button to apply the change.

If you want, you can also create custom search results page for your stock photo website. Read our previous article to learn how to create a custom search results page in WordPress using Elementor.


Step 6: Create the Custom Homepage

Homepage is the main page of your website. It is the page where you can display the main things you offer via your website (photos in this case). In this step, we will show you how to create a homepage for your stock photo website. We will create a simple homepage that consists of two sections:

  • Section 1: The hero section to place the headline of your website
  • Section 2: The section to place your photos

Start by creating a new page and edit it with Elementor. You can give a title of the page “home”, “homepage”, or something similar.

— Section 1

On the Elementor editor, click the plus icon on the canvas area to add a new section. You can select the one-column structure for this section. Open the Layout block on the settings panel to set the layout. In this example, we use the following layout settings:

  • Content Width: Boxed
  • Columns Gap: Default
  • Height: Min Height
  • Minimum Height: 600px
  • Column Position: Stretch
  • Vertical Align: Middle
  • Overflow: Default

Next, edit the column of the section by clicking the column handle.

On the settings panel, go to the Style tab and open the Background block. Set the background type to Classic and select an image. You can use a large image as the background of the column (e.g. 1600 x 600px).

Once done settings the section — as well as the column –, add the Heading widget by dragging it to the canvas area.

You can go to the Style tab to style up the heading. If you want to add more widgets this section, simply add ones.

— Section 2

Section 2 is used to display your photos. You can filter the photos by category, tag, or manually. You can use the Posts widget to display the photos by disabling the unnecessary elements.

Add a new section by clicking the plus icon on the canvas area. You can select the one-column structure for this section.

Once the section is ready, add the Posts widget by dragging it from the widget/settings panel. Once the widget is added, go to the Layout block under the Content tab on the settings panel to set the layout. In this example, we use the following layout settings:

  • Skin: Classic
  • Number of columns: 3
  • Post per page: 27
  • Image position: Top
  • Image size: full
  • Image width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta data: none
  • Read more: Disabled

Next, open the Query block to filter the photos. On the Source option, select the custom post type you have created on step 1 above. Set the parameters of photos on the Include By field and Term field.

Once done with the Query block, you can switch to the Pagination block to set the pagination. In this example, we don’t use the pagination on the homepage.

You can add more elements to your homepage if you want it. Once done editing the page, click the PUBLISH button to publish it.

Once the homepage is published, go to Settings -> Reading on your WordPress dashboard. On the Your homepage displays option, set to A static page and select the page you have just created from the dropdown.


Step 7: Create the Header and Footer

You are almost done. Once all pages and the custom templates have been created, the next step is to create the header and the footer. In Elementor, you can create the header and footer from the Theme Builder just like custom templates for archive pages and single post you have created above. You have limitless design options and behaviors for your header and footer. For instance, you can create a transparent header, sticky header, and so on.

For more detailed tutorials on how to create a header and footer in Elementor, you can read our previous articles below:


The Bottom Line (+Bonus)

Elementor is a powerful page builder plugin for WordPress. Thanks to its Theme Builder feature which supports extensive dynamic content types, you can create any type of website with a no-code approach. One of the website types you can create with Elementor is a stock photo website as we have just covered above. Since WordPress supports multi-user, you can accept registration in case you want other people to contribute photos. You can also create a custom registration page with Elementor if you want to.

The website is built with WordPress+Elementor Pro. As a gift, we have also included the custom templates — as well as the pages used on the website — which you can download below.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

6 thoughts on “How to Create a Stock Photo Website with Elementor”

  1. Thanks for the tutorial guys! Been looking something like this. Ever since Unsplash got acquired by Getty Images, I started to think twice to share my photos on the platform. I hope I can implement this tutorial so I can share by photos on my own platform!

    Reply
  2. Thank you for this tutorial, came in super handy! I was wondering if its possible to for users of the site to be able to upload there own photos using this method?

    Many Thanks,
    Row

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?