How to Design a Portfolio Website Without Code (Part 2)

Welcome back to Live Learning Editor X where we help you build design businesses and further your career through mentoring and monthly NoCode design challenges with amazing prizes. In the second part of our portfolio series, we'll show you how to create a CMS driven web page in Editor X that dynamically displays your web design portfolio items. Get ready to make your professional portfolio more engaging and interactive than ever before!

If you haven't checked out the first part of our series where we set up our Site Styles Library, built our homepage, and established our masters (header, pre-footer, and footer), we highly recommend giving it a read before diving into this tutorial.

Reviewing the Figma Design File

Before we begin, let's take a quick look at the Figma design file we'll be working with. Our goal is to create a dynamic Portfolio Index page, featuring an alternating layout for our portfolio items. Each item should present an image on its side and a text description on the right, along with a stylish button. Keep in mind that we'll want these elements to dynamically pull in information, rather than manually adding them ourselves. This is where the power of Editor X's Repeaters feature comes in handy.

Implementing Repeaters in Editor X

A repeater is a fantastic feature in Editor X that lets you create a series of elements that follow the same design and layout. By crafting a single design, you'll have a uniform look that can be replicated as many times as needed. To achieve this, we'll utilize Repeaters to autonomously gather data from our CMS (Content Management System) and showcase our portfolio items in a consistent manner.

Here's a step-by-step guide on how to use Repeaters in Editor X for your dynamic Portfolio Index page:

Step 1: Add a Repeater Element

Start by navigating to the "Add Elements" panel in Editor X and locate the Repeater element. Drag and drop it onto your Portfolio Index page, adjusting its size and position as desired.

Step 2: Customize the Repeater Layout

To make your repeater match the alternating layout we discussed earlier, begin customizing each component (image, text, and button) within the repeater's container. This is where you can create a visually appealing design that best represents your web design portfolio. Remember to keep things consistent in terms of sizing, spacing, and typography.

Step 3: Connect the Repeater to your CMS

Once you've personalized your repeater layout, it's time to connect it to your CMS. This step is crucial in displaying your portfolio items dynamically. In your Editor X dashboard, head over to the "Content Manager" and create a new collection for your portfolio work. Be sure to add all relevant information (images, descriptions, links, etc.) for each portfolio item in this collection.

Now go back to the repeater on your Portfolio Index page and click on the "Connect to Data" button. From here, select your newly created portfolio collection and map the corresponding fields to your repeater's elements (image, text, and button).

Step 4: Enable Dynamic Pagination (Optional)

If you have a large number of portfolio items, you might want to implement dynamic pagination to make browsing through your work more user-friendly. To do this, simply select your Repeater element and look for the "Pagination" toggle under the "Layout" panel. Here, you can configure the number of items to show per page and other pagination settings.

Bringing It All Together

By following these steps, you've now learned how to create a CMS driven web page that dynamically displays your web design portfolio items using Editor X's powerful Repeaters feature. This functionality not only makes for a visually stunning Portfolio Index page but also saves you the hassle of having to manually insert individual elements.

Don't forget that Live Learning Editor X is here to help you build design businesses and level up your career through mentorship and monthly NoCode design challenges with awesome prizes. Join our community now, and make sure to stay tuned for more web design tutorials like this one!

Are you ready to take the plunge and create your own dynamic Portfolio Index page? We’d love to hear about your experiences and see the amazing web designs you come up with. Feel free to share your work and thoughts in the comments below!