Tutorial

Creating a new collection

To create a new collection, select the collection tab (1) on the left-hand navigation bar. This will pull up your existing collection types. Towards the top right is the “Create New Collection” button (2).

‍*Illustration 1: Opening Collection tab*

A new section to the right will pop up. This is where you will add a title for your new content type and give it a permalink. This permalink will be within all of your URLs, so keep this in mind as you select one. If it is too long, all the items in your collection will have longer URLs. Ideally, keep it at one word, like “portfolio”. Then select “Create Collection” (3).

‍*Illustration 2: Give your collection a name and permalink*

Customizing your collection

After the collect is created, you can customize it will various types of fields. These fields will create a form for you to fill out with each new piece of content. How these fields appear on the front end is up to you, this is for the dashboard view for either you or others to add pieces to this collection.

As you pick fields to add to your content type, they will begin populating into the far right column. If you chose to have that field required, the Editor Preview will show that field with an asterisk.

‍*Illustration 3: Adding to your content form*

Give the collection list a page

If you want a new page where people can find your new collection list, create a new page by going to the page icon (1) on the left and clicking “Create New Page” (2) in the upper right. Add in your page’s title, slug, and metadata. Then select “Create”. This will create it without publishing to live. You may also save it as a draft if you want to push something else to live without sending this page as well.

‍*Illustration 4: Add a new page for your collection list to live on*

Style the page

Begin by adding the “elements” and “symbols” that you have on your other pages, making sure to give things the same class you have on the other pages. This way this page will mimic all the others as you make changes.

‍*Illustration 5: Style your new page to match the others to the extent you want it to*

After you lay the groundwork, you can begin adding the pieces to the collection. Start by adding the “Collection List” element (1), then assigning a collection to it (2).

‍*Illustration 6: Insert the collection list onto your new page*

Now you can add elements within the collection list items. Whatever you add to one will reflect in all the items. For example, if you add a header element to one of the collection item boxes, you will see a header for all the collection pieces. However, the item will not automatically sync to your new content type’s fields. Once you get the elements where you want them, you can have it fill in your collection fields for you. Click on the gear icon (1) in the top right of your element and then select “Get text from collection name” (2). Make sure that you add a link block, button, or link text to these blocks so that they are able to link to each collection item. You will add the link in a similar way. Start by clicking the gear icon on the link. Then select page and “Current collection name”.

‍*Illustration 7: Connecting collection field to elements*

Style each collection item’s page

Each item you add to this collection list will get its own page. The template page will be created for you and whatever you do to that one item, you will do to all the items. Add elements to the page and connect them to your collection field.

‍*Illustration 8: Editing template pages for collection*

Linking to other items in the same collection

To make it easy to switch between collection list items, you can add a list similar to the first new page. Keeping it simple with something like the title, makes it short and easy to click through. To add more clarity, you can add a different style to the current page.

‍*Illustration 9: Adding a sidebar to the collection item template*