![](/build/image/3106.png?or=360&crop=%2C%2C%2C&s=b2563441b33d938359e3c1aad1b70dec)
You can easily create a membership directory custom collection, in three easy (sort of easy) steps:
- Create a custom collection form
- Add some data into your collection
- Create a custom collection page, and paste in the page code
Create a custom collection form
Go to Settings -> Custom Collection, and add a custom collection.
Note: it is important that you use these exact field types and names so that everything will function properly.
Name the directory "Articles".
Add the following fields:
Type: | Name: |
Image | Image |
Short Answer | Name of Article |
Date | Date |
URL | URL |
Before you save the form, you'll need to enter some data into the "Settings" tab:
- HTML Identifier: articles
- Icon: Choose an icon that makes sense to you.
- Singular name: article
- Title field: None
- Featured image field: None
- API Access: None
Now, you can save the custom collection.
Add some article data into your collection
You will now see this new custom collection in your dark gray Admin sidebar on the left side of the screen. Find the new "Articles" option with the icon you selected in the dark gray Admin bar on the left side of the screen and click it to go to your new collection.
As you saw with the examples of the fields above, you will need a photo and some data about each article to be in the new collection. Using the blue "Add Article" button at the top right to add to your collection. This will be important before proceeding so that we will have something to view when we are done with the next section.
You can use sample (fake) information for now if you wish. Once you've added two or three articles you are ready to move to the next section.
Create a custom collection page, and paste in the page code
Now decide where you want the Articles Collection page to be accessible to your visitors. You can navigate to the parent page, and then click "Create" in the upper right corner of the bright blue top bar of your website to make a new child page at that location.
- "Create" or Add a new page.
- Choose the "Collection" for the page type.
- Select the layout you want to use for the page. I like to use "Open" for most collection pages.
- Add a descriptive title like "Pastor Smiths Articles".
- Select the "Articles" custom collection.
The new page will load into edit mode:
- Move your mouse over the editable areas and locate the "Edit Layout" and "Edit Collection Items" buttons. Select the "Edit Layout" button.
- Paste the code bellow into the edit area provided.
- Click the blue "Save" button.
- Finally, click the Publish button to view your new collection.
<style> /* Start CSS: Collection Articles */ .clear { clear: both; } .collection__articles { /*margin: 60px 0 30px;*/ background: #fafafa; padding: 0 0 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .collection__articles .collection__container { width: 100%; max-width: 1200px; margin: auto; padding: 30px 0; } collection__container h2 { text-align: center; margin: 0 0 60px; color: #003a79; } .collection__resources__item { float: left; width: calc(33.33% - 30px); box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); margin: 15px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); background: #fff; } .collection__resources__item__img { height: 200px; width: calc(100% - 60px); position: relative; left: 30px; top: -30px; background-size: cover !important; background-position: center !important; } .collection__resources__item h3 { padding: 0 30px; color: #003a79; } .collection__resources__item p { padding: 0 30px; line-height: 1.45; } a.c-article-Button { padding: 15px 78px 15px 30px; margin: 15px 30px -25px 0px; border-radius: 30px; text-align: center; vertical-align: middle; text-transform: uppercase; font-size: 20px; font-style: italic; color: #ffffff; transition: all 0.3s linear; text-decoration: none !important; width: auto; background-color: #003a79; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); float: right; } .button-text { text-align: center; vertical-align: middle; } .c-article-Button:after { background: url(https://www.lakeunion.org/file/358/right-arrow.svg); -webkit-mask: url(https://www.lakeunion.org/file/358/right-arrow.svg) no-repeat 50% 50%; mask: url(https://www.lakeunion.org/file/358/right-arrow.svg) no-repeat 50% 50%; background-repeat: no-repeat; content: ""; background-color: white; height: 18px; margin-left: 15px; margin-top: 5px; padding-right: 38px; position: absolute; transition: all 0.3s linear; } .collection__resources__item:hover { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); } .collection__resources__item a:hover::after { transform: scaleX(1); transform-origin: bottom left; } .c-article__bottom { position: absolute; bottom: 10px; } <style> /* Start CSS: Collection Articles */ .clear { clear: both; } .collection__articles { /*margin: 60px 0 30px;*/ background: #fafafa; padding: 0 0 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .collection__articles .collection__container { width: 100%; max-width: 1200px; margin: auto; padding: 30px 0; } collection__container h2 { text-align: center; margin: 0 0 60px; color: #003a79; } .collection__resources__item { float: left; width: calc(33.33% - 30px); box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); margin: 15px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); background: #fff; } .collection__resources__item__img { height: 200px; width: calc(100% - 60px); position: relative; left: 30px; top: -30px; background-size: cover !important; background-position: center !important; } .collection__resources__item h3 { padding: 0 30px; color: #003a79; } .collection__resources__item p { padding: 0 30px; line-height: 1.45; } a.c-article-Button { padding: 15px 78px 15px 30px; margin: 15px 30px -25px 0px; border-radius: 30px; text-align: center; vertical-align: middle; text-transform: uppercase; font-size: 20px; font-style: italic; color: #ffffff; transition: all 0.3s linear; text-decoration: none !important; width: auto; background-color: #003a79; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); float: right; } .button-text { text-align: center; vertical-align: middle; } .c-article-Button:after { background: url(https://www.lakeunion.org/file/358/right-arrow.svg); -webkit-mask: url(https://www.lakeunion.org/file/358/right-arrow.svg) no-repeat 50% 50%; mask: url(https://www.lakeunion.org/file/358/right-arrow.svg) no-repeat 50% 50%; background-repeat: no-repeat; content: ""; background-color: white; height: 18px; margin-left: 15px; margin-top: 5px; padding-right: 38px; position: absolute; transition: all 0.3s linear; } .collection__resources__item:hover { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); } .collection__resources__item a:hover::after { transform: scaleX(1); transform-origin: bottom left; } .c-article__bottom { position: absolute; bottom: 10px; } .c-article__bottom p { margin: 0; } @media screen and (max-width: 695px) { .collection__resources__item { width: 100%; margin: 30px 0 60px; display: block; } } /* END CSS */ a:hover svg { color: #ffffff; } </style> <!---- START HTML ----> <div class="collection__articles"> <div class="collection__container"> {% for articles in su.collection( "articles" ) %} <div class="collection__resources__item"> <div style="background: url('{{ articles.image }}') no-repeat center left;" class="collection__resources__item__img"></div> <h3>{{ articles.nameOfArticle }}</h3> <p>Published on {{ articles.date }}</p> <a href="{{ articles.url }}" target="_blank" class="c-article-Button white"><span class="button-text">Full Article</span></a> </div> {% endfor %} </div> <div class="clear"></div> </div> <!---- EMD HTML ---->