Gold Penguin Logo with Text

How to Create a Professional Photography Portfolio using Breakdance Builder

Building a photography portfolio doesn't have to be difficult. Follow our guide to build your first professional photography portfolio using Breakdance!
Updated October 6, 2023
photography portfolio in Breakdance
photography portfolio in Breakdance

A photography portfolio is a collection of your best work. It establishes your style, your skills, and your entire brand.

It’s not a surprise why potential clients choose to work with photographers with a strong portfolio. 

Here are some of the benefits of having a photography portfolio:

  • Establishing a name for yourself as a professional photographer can be challenging. A solid portfolio can help position yourself as a knowledgeable professional.
  • A top-notch portfolio makes you stand out from the rest.
  • Your portfolio grows with your experience.
  • Your portfolio demonstrates your creativity. Clients often want to see this before hiring you.

Establishing your online portfolio is essential for securing clients. But it doesn’t have to be difficult.

Breakdance is a great starting point for those with zero web development experience. It has almost everything you need and want in a website builder - drag-and-drop editor, intuitive user interface, capabilities to add dynamic data, full site editing, and 100+ premium elements, to name a few. 

If you have little talent for web design, no worries. You can use its pre-designed templates to build a professional-looking website.

In the next section, I’ll show you how easy it is to build a photography portfolio in Breakdance. I’ll provide tips, too, so you can optimize your images and avoid slowing down your site.

Keep reading!

photography portfolio in Breakdance

Steps to Create a Photography Portfolio in Breakdance

1) Select A Template

Breakdance has lots of pre-built templates to help you create beautiful websites quickly. If you're a newbie, I highly recommend using one since it will save hours of development time.

Of course,  if you're after a unique template aligned with your brand, Breakdance allows for that too. But this might require more time and a little bit of technical experience.

If you need more guidance, check out these tutorials we’ve written:

To select a Breakdance template, navigate on your WordPress dashboard to Breakdance > Design Library. Here, you'll find ready-to-use templates for different purposes. For our photography portfolio site, let’s use the o’clock template.

import Breakdance design template

Click the ‘import’ button. 

Keep in mind that importing the template might overwrite your existing designs. Click ‘Confirm Overwrite & Export’ to proceed. This might take a few minutes to finish. 

Once it’s done, you may start creating your Breakdance page.

2) Create Your First Page

a) Breakdance templates come with a pre-designed heading, footer, single post, and page template. Start by editing the header.

Navigate to Breakdance > Headers and click ‘Add Header.’ On the settings window, edit the title of your template, the location where you want to apply it, and the priority number. Save the settings.

add header template in Breakdance

Open your new header template in Breakdance.

edit header in Breakdance

Replace the default image with your company logo and name. Edit the text links in the ‘Menu Builder.’

edit Breakdance header template

Next, click the element you want to style. Head over to the ‘Style’ tab on the left and modify the layout, background, element size, and font style to your liking. 

Note that in this tutorial, I’ve enabled the ‘Overlay’ setting because I want the header to ‘overlay’ on the section background, as you will see later.

add header style

Once you’re satisfied, click the save button. Exit the front-end to preview your header design.

header template in Breakdance

b) Next, we’ll need to modify our footer. You can go back to your WordPress dashboard and click Breakdance > Footers. Or tap the drop-down menu at the top of the page and choose ‘Main Footer.’

edit footer template in Breakdance

Then, personalize the footer by adding your company name and logo.

edit footer template in Breakdance

Modify the menu text links and style. 

add menu links in footer

Note: Later, you’ll need to link your menu texts and logo to the other pages of your site. Let’s skip this for now and focus on the design. 

Once you’re done, save the settings and preview.

Here’s what our final footer looks like.

Breakdance footer

c) Let’s create a portfolio page for our site. On your WordPress dashboard, navigate to Pages > Add New. Then, enter the name of your page. Here, I’ve named the page ‘My Portfolio Page.’

add new page in Breakdance

Click save and edit in Breakdance. You should have an empty canvas like the one below.

edit Breakdance page

First, let’s add a section. Then, add an image background. Remember when you’ve set the header to ‘overlay’? The background image will make it more visually appealing instead of just a plain background color.

add section background image

Next, add another section to showcase your portfolio. Here, I’ve added a heading, a grid, and image hover card elements. 

add grid element in Breakdance

On the style tab, modify the effects and animation for smoother transitions of the images. 

If you don’t like to use a grid, feel free to experiment with other elements like columns and divs to contain your portfolio images. Then, style them as you want.

Later on, we’ll add a link to each card that will open a photo gallery page. 

Breakdance image hover card

Next, let’s add a testimonial slide. Add another section and an ‘Advanced Slider’ element.

Breakdance testimonial slide

Under this slider, edit the images and content. Here, I’ve added divs to contain the user photo, name, position, testimonial texts, and star rating.

add style to testimonial section

For now, let’s just enter some dummy information in the testimonial section. Later, you can add some real testimonials from your clients. Follow this tutorial about how to create dynamic testimonials in Breakdance to learn more.

Finally, add a subscription form. Here, I've added a section and two columns. The first one contains a heading and text, as shown below.

add subscription form in Breakdance

The second column contains the form builder. You can add as many fields as you want. But for simplicity, let’s just add an email field. 

add subscription form in Breakdance

Later, you can add a field for the name if you want. But don’t overdo it - you don’t want to turn off site visitors with so many fields to fill in.

When you’re done, save your work and preview. Here’s the final look of our portfolio page.

Breakdance portfolio page

3) Install ACF Plugin

By default, WordPress only allows you to add posts and pages. This limitation may not efficiently represent some of the details of your work, like your image gallery, project description, and camera settings.

A better way to organize and display details of your photography portfolio is to create custom post types. In this guide, we’ll create a ‘photos’ post type where we can add an image gallery, project title, camera setting, location, and project description.

First, we’ll need to install the Advanced Custom Fields (ACF) plugin to create custom post types. 

On your WordPress, head over to Plugins > Add New. Search for the ACF plugin. Click to install and activate.

install ACF plugin in WordPress

4) Create a Custom Post Type

Once you’ve installed and activated ACF, you should see it on the left side menu of your WordPress page.

Go to ACF > Post Types > Add New. This will open a new page. Enter the values for the plural label, singular label, and post type key fields. 

add custom post type in Breakdance

Here, I’ve used ‘photos’ for the plural label and ‘photo’ for the singular label and post type key.

The taxonomies field is optional and can be skipped.

Click save.

5) Add a Field Group 

A field group allows you to detail your photos. Here, we’re going to add fields for the image gallery, project title, camera setting, location, and project description.

a) First, go to ACF > Field Groups > Add New. Enter the name of your field group. Here, I’ve named it ‘Photo Gallery.’ 

add field group in Breakdance

b) Click the ‘Add Field’ button. Under the ‘General’ tab, choose a field type and enter the field label and name.

add post type fields in Breakdance

For example, let’s add a field for the image gallery. Choose ‘Gallery’ for the field type. (Note that this option is only available for ACF Pro). Then, fill in the Field Label and Field Name with ‘images.’

c) Add the other fields for the project title, camera setting, location, and project description. Follow the steps above, Make sure to select the correct field type for each field you add.

add custom post type fields in Breakdance

d) Set the location rules of your new post type to ‘Photo.’

set post type location rules

e) Click save when you’re done.

Here’s the final list of fields I’ve added under the Photo Gallery field group. 

added fields in ACF

6) Add Your First ‘Photo’ Post Type

On WordPress, go to Photos > Add New. This will open a new page.

add new photo post type in Breakdance

Enter the title of your gallery. Here, I’m going to name this project ‘Nature.’ Scroll down and fill in the other details. 

add photo gallery in Breakdance

Click each photo in the gallery to add more details like the title, caption, and description.

add photo details in Breakdance

Click save and publish.

Repeat the steps above to add more ‘Photo’ post types. Here, I’ve added a total of four projects - Nature, Food, Events, and Lifestyle.

list of photo galleries in Breakdance

7) Create a Gallery Template

a) Let’s create a gallery template for our images. From the WordPress left side menu, click Breakdance > Templates > Add Templates. Enter the title, location, and priority number.

add photo gallery template in Breakdance

Note: Under the location section, make sure to choose ‘Single/ Photos.’ Otherwise, you won’t be able to add your photo gallery dynamically. 

b) Edit the template in Breakdance. 

edit Breakdance template

c) Add a section, heading, and gallery.

add a gallery element in Breakdance

d) Next, replace the default images with your actual photos. Once again, click the dynamic icon on the gallery element, On the pop-up, choose ‘Image.’

e) Let’s display the photo gallery title dynamically. Click the dynamic icon on the heading element. On the pop-up window, choose ‘Title’ under the ACF section.

make gallery title dynamic in Breakdance

f) Let’s try to add a description of our gallery. Add a text element, then click the dynamic icon. On the pop-up, choose ‘Description.’

make photo description dynamic in Breakdance

g) Edit the image animation to your liking. Simply click the Style tab on the left menu, and choose which behavior you want to apply to your elements. 

Here, I’ve enabled the ‘On Hover’ option so that the image caption will only display when I hover over the image. 

add hover animation in Breakdance

Under the ‘Style’ tab, modify the animation effects whenever a thumbnail is clicked.

9) Add Links to Your Portfolio Page

Back to your portfolio page, click one of the cards under the ‘My Portfolio’ section. Go to the settings on the left and click ‘Link.’ Here, you can paste a link to one of your gallery pages.

add page links in Breakdance

To know the link to your page, simply open it on WordPress. On the right side, look for the URL and copy. Note that I'm using a localhost. Your link might look different depending on which hosting service you availed.

copy page link in WordPress

10) Save and Preview

Once you’re satisfied with the design of your portfolio, click save. Check your page on the front-end.

preview Breakdance page

Here’s the final look of our photography portfolio page.

photography portfolio in Breakdance

Tips for Optimizing Portfolio Images

Your site images are an invaluable asset to your photography site. 

However, higher resolutions also mean larger file sizes. This can slow down your website, affect user experience, and hurt your search engine ranking.  

So before you upload your images, consider optimizing them. 

Image optimization helps you decrease the file size of your photos without losing their quality. 

Here are some simple ways to optimize your images:

  • Resize or crop images: My rule of thumb is to not go beyond 1000 x 1000 pixels unless it’s really necessary. Make sure that you’re also using the correct image size for your theme. 

For instance, if you only need to display a 500 x 500 photo, uploading an image with 1024 x 1024 resolution would unnecessarily increase its file size.

That’s a Wrap! 

Creating a photography portfolio isn’t just an option. It’s a must!

But with Breakdance, you don’t have to be tech-savvy to build a portfolio site. 

You don’t even need to spend a lot to hire a developer. I believe this is beneficial for those who are just starting. 

Plus, Breakdance’s templates provide you with a great starting point to build a stunning portfolio.

So, if you’ve made it this far, give yourself a tap on the back! 

Now, time to level up. Check out these tutorials if you’re hungry to learn more about Breakdance:

And, one last thing, please let me know about your Breakdance journey in the comments. If you missed any of the steps above, share them, too. I’ll try my best to help!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross