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!
Christy Cañete
Updated October 1, 2023
photography portfolio in Breakdance
Reading Time: 11 minutes
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!
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:
- How to Create a Header in Breakdance
- How to Create a Footer in Breakdance
- How to Create Blog Post Templates in Breakdance
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.
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.
Open your new header template in Breakdance.
Replace the default image with your company logo and name. Edit the text links in the ‘Menu Builder.’
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.
Once you’re satisfied, click the save button. Exit the front-end to preview your header design.
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.’
Then, personalize the footer by adding your company name and logo.
Modify the menu text links and style.
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.
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.’
Click save and edit in Breakdance. You should have an empty canvas like the one below.
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.
Next, add another section to showcase your portfolio. Here, I’ve added a heading, a grid, and image hover card elements.
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.
Next, let’s add a testimonial slide. Add another section and an ‘Advanced Slider’ element.
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.
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.
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.
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.
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.
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.
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.’
b) Click the ‘Add Field’ button. Under the ‘General’ tab, choose a field type and enter the field label and name.
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.
d) Set the location rules of your new post type to ‘Photo.’
e) Click save when you’re done.
Here’s the final list of fields I’ve added under the Photo Gallery field group.
6) Add Your First ‘Photo’ Post Type
On WordPress, go to Photos > Add New. This will open a new page.
Enter the title of your gallery. Here, I’m going to name this project ‘Nature.’ Scroll down and fill in the other details.
Click each photo in the gallery to add more details like the title, caption, and description.
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.
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.
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.
c) Add a section, heading, and gallery.
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.
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.’
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.
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.
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.
10) Save and Preview
Once you’re satisfied with the design of your portfolio, click save. Check your page on the front-end.
Here’s the final look of our photography portfolio page.
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.
- Compress your images before uploading: There are many image-compressing apps available for Mac and Windows. Some of my favorites are Mass Image Compressor, TinyPNG, ImageOptim, and JPEGmini.
- Use image optimization plugins: The most popular plugins I used in WordPress are ShortPixel and Imagify. If you want to learn more about these plugins, read our post about image optimization.
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:
- Set Up An Easy Digital Downloads Store in Breakdance Builder
- Sell Physical & Digital Photography Prints in Breakdance Builder
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 newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.