How to build a resource directory with no-code

100DaysofNoCode: Day 6

Max Haining
|
160 steps
|
12 minutes

Bettermode

Sign up for your account with [bettermode.com](http://bettermode.com) and log in to your dashboard.\ \ Click "**Create a new site**"

Select the "**ProdGuide**" template.\ \ The reason you're using a template is because it will speed up the process of getting the core structure for a resource directory, including community features.

Click "**Use template**"

**Close the notification bar** at the bottom of the page, just so that it's not a distraction.

Click your profile image in the top right-hand corner of the page and then click "**Administration**"

The first thing you're going to do is remove all content from this template, so that you have the template structure to work with, but none of the contents. \ \ Click the "**Content**" option from the left-hand menu.

Click "**Actions**"

Click "**Delete**"

A pop-up will appear asking if you are sure you want to delete all posts. \ \ In this example you're deleting 16 of the template's existing contents, so **enter 16** and then click "**Delete**"

The next step is to add some products to your directory. \ \ First, you'll create product categories so that in a moment you can add some new products to the site and map them to these categories.\ \ Click "**CMS Beta**"

Click this icon.

Click "**Settings**"

Click "**Manage model fields**"

Click this icon within the "**Category**" field.

Click "**Settings**"

You'll see a list of pre-populated categories that are included as part of the template. \ \ You're going to replace these with three categories within your podcast directory. You'll add categories for editing, marketing and hosting. \ \ Remove all but three categories from the list by clicking 'x' at the end of each category.

Click this icon to rename the categories.

Enter the category name and click this icon.\ \ Do this for all three categories: - Editing - Marketing - Hosting

Click "**Update**"

Now it's time to add some products and map them to your categories.\ \ Click the "**Content**" icon on the left-hand menu.

Click "**Add post**"

Select "**Product**"

**Enter a product name, tagline and description.** \ \ You can use this information if you'd like: \ \ Name: Audio Finesse\ Tagline: 1 click hiss removal for your recordings\ Description: 1 click hiss removal for your recordings\ \ You wouldn't usually use the same tagline and description when creating your own resource directory, but this is fine for now because you're just learning to build.

Enter a "Product URL".\ \ Note: You must include the https:// protocol. \ \ Use <https://audiofinesse.com> if you're following along with this example.

Select Category: "**Editing**"

Select Pricing: "**Free**"

To add a product to your resource directory, you need to add thumbnail images and gallery images.\ \ **Add a Thumbnail image** first by clicking anywhere in the box and then selecting "**Unsplash**".\ \ Unsplash is a royalty-free image directory that's integrated with Bettermode.

Click the "**Search for an image...**" field. and enter a keyword search.\ \ In this example, we're creating fictional podcast products, so search for words like 'audio', 'podcast' or 'microphone' to find relevant images.

Once you find an image you like, click it to set it as the Thumbnail.

Repeat this process for the Gallery image. Click anywhere in the "**Gallery**" box.

Click "**Unsplash**"

Search for an image and then select it to add it as a Gallery image.

We won't be exploring the SEO or Advanced options for this lesson, so go ahead and click "**Publish**".

You've added your first product! 👏\ \ You'll now be taken to your product post automatically.\ \ Now you're going to repeat this process two more times to add two more products.\ \ Go through this one more time, step-by-step.

Select your profile image and click "**Administration**" from the drop-down menu.

Click the "**Content**" icon from the left-hand menu.

Click "**Add post**"\ \ Note: **Don't worry if you don't see the first product you just added to this list**. It takes a little while to populate and you should see it shortly.

Select "**Product**"

Add a Product name, Tagline, Description and Product URL.\ \ Here's some text you can use for this product:\ \ **Product name**: Clipro\ **Tagline**: 1 click social media posts directly from your podcasts\ **Description**: 1 click social media posts directly from your podcasts\ **Product URL**: <https://clipro.com>

For this product, select the "**Marketing**" category.

Select Pricing: "**Paid**"

Click the **Thumbnail** box and select "**Unsplash**"

Search for a relevant keyword and then click on the image you'd like to add as a Thumbnail.

Click the "**Gallery**" box and select "**Unsplash**"

Search for a relevant keyword and then click on an image to set it as a Gallery image.

Click "**Publish**"

Repeat this process one more time to add your final product.\ \ Click "**Administration**"

Select "**Content**" from the left-hand menu.

Click "**Add post**"

Select "**Product**"

Add the Product name, Tagline, Description and URL.\ \ Here's some text to copy:\ \ **Product name**: Pod Lab\ **Tagline**: Host and distribute 3 podcasts for free.\ **Description**: Host and distribute 3 podcasts for free.\ **URL**: <https://podlab.com>\ \ Select Category: "**Hosting**"

Select Pricing: Paid (with a free trial or plan)

Click "**Publish**"

You've added 3 new podcast products to your resource directory! 👏👏👏\ \ Now you're going to follow a similar process, but this time you're going to add a "**Perk**" to your directory. You'll add a Perk category first, and then map a Perk post to this category.\ \ Let's pretend you've secured a great deal on a product that's exclusively available for your directory members. That's the Perk you'll add.\ \ Select your profile image and click "**Administration**" from the drop-down menu.

Click "**CMS Beta**"

Click "**Perks**"

Click "**Manage model fields**"

Click this icon within the "**Category**" field.

Click "**Settings**"

Remove all but one of the existing categories. Remember, these categories are pre-populated within the template.\ \ Click 'x' on a category to remove it.

Click "**Remove**" on the pop-up that appears.

Click this icon to edit the last remaining Category name.

Replace this text with "**Podcast Hunt Exclusive**" and **click the + icon**.

Click "**Update**"

You've created a Perk category, and now you're going to create a Perk post. \ \ You'll map the Perk to the Perk category.\ \ Click the "**Content**" icon from the left-hand menu.

Click "**Add post**"

Select "**Perks**"

Add a Perk name and Perk description.\ \ Here's some text to use:\ **Perk name**: 6 Months of Audio Finesse Free\ **Perk description**: Get 6 months of Audio Finesse for free, exclusively for Podcast Hunt members by entering 'podhunt6' during checkout.

Select "**Podcast Hunt Exclusive**" from the Category drop-down.\ \ Add the following for Deal Tagline and Claim URL:\ \ **Deal Tagline**: Exclusive - 6 Months of Audio Finesse \ **Claim URL**: https://audiofinesse.com/podcasthunt

Click the "**Deal Cover Image**" box and use Unsplash to find an image for your Perk.\ \ Click "**Publish**"

Wow, you've already added 3 new products to your resource directory, and now you've added an exclusive perk for your community! 🚀\ \ Time to add one more piece of content, a community post.

Click your profile image and select "**Administration**" from the drop-down menu.

Select "**Content**" from the left-hand menu.

Click "**Add post**"

Select "**Discussion**"

Add a Title and some Content.\ \ Here's some text to use:\ \ **Title**: Best podcast mics for newbies.\ **Content**: I've been testing sub $100 microphones this month. Here's how I scored 5 of the most popular from Amazon.

Add an image to the post by clicking this image icon.

Select Unsplash, search for a relevant keyword and then click the image you want to add into the post.

Click "**Publish**"

You'll automatically be taken to your discussion post.\ \ You've now added 3 different types of posts to your resource directory!\ \ Next you're going to configure some menu settings to ensure that all your new content can be found in the right places. This might feel *slightly* more technical, but will still entirely code-free! Stick with this guide and you should be fine. 💪🏽

Click your profile image and select "**Administration**" from the drop-down menu.

Select "**Content**" from the left-hand menu.

Click "**Spaces**"

Click this icon at the end of the "**All Products**" row.

Click "**Customize**"

Select the area highlighted in the screenshot below and click the gear icon ⚙️ in the top right-hand side of this section. Note: This icon is not captured in the screenshot below. \ \ The left-hand menu will open, allowing you to edit the "**Tab views**" (the section you've got highlighted).\ \ What you're going to do next is configure each tab view to ensure that it only displays the correct products from each category. \ \ First, remove all pre-populated views from the "**Tab views**" section in the left-hand menu, leaving just "**All products**". \ \ Now, use the "**Add view**" button to add your three categories, "Editing", "Hosting" and "Marketing". You should end up with the "**Tab views**" items shown below.

Now you're going to customise the settings of each tab to ensure it only shows the respective products from each category. \ \ Click this icon highlighted below.

Click "**Settings**"

"Source" settings will open automatically, allowing you to select the source of information for your tab view.\ \ Ensure that the source is configured as highlighted below:\ \ Current space\ Specific post types\ Product post type

Now click the "**+ Add filter button**"

Select the "**Category**" option and then set the category as "**Editing**"

Scroll to the top of the filter menu and click the back arrow.

Click the back arrow once more in the editing menu.

Now you're back where you started in the "**Tab views**" section. \ \ **Repeat the same process (steps 87-93) for the Hosting and Marketing categories.** Setting the Category filters as "Hosting" and "Marketing" respectively.

Click "**Save changes**"

Click this icon.

Click "**Products**"

You're now going to check that your tab view configuration is working as expected. You're also going to grab the unique URL for each tab view, as you're going to need that in a moment. \ \ Have a note-taking app ready so that you can copy and paste in the URLs from each tab view.\ \ Click the "**Editing**" tab and copy and paste the URL from your browser into your note-taking app.

Click the "**Marketing**" tab and copy and paste the URL from your browser into your note-taking app.

100

Click the "**Hosting**" tab and copy and paste the URL from your browser into your note-taking app.

101

**Excellent work.** You've now customised the template to allow users to easily navigate products via three tabbed views for "Editing", "Marketing" and "Hosting" categories.\ \ See the "Categories" menu in the top navigation? That's what you're going to configure next. You'll follow a similar process to the one you've just been through for configuring the tabbed views.\ \ Click your profile image and select "**Administration**" from the drop-down menu.

102

Click the "**Design studio**" icon.

103

Click "**Header and sidebar**"

104

Click the gear icon in "**Top Navigation**".

105

Scroll down and open the menu for "**Sections**"

106

Click "**Menu**"

107

Click this icon within "**Categories**"

108

Click "**Settings**"

109

Again, you'll see the template is pre-populated with sub menu items. You're going to remove these items and replace them with your "Editing", "Marketing" and "Hosting" categories. \ \ To remove an item, click this icon.

110

Click "**Delete**"\ \ Repeat this process until you're left with just three sub menu items.

111

Now you're going to rename these sub menu items. \ \ Click the icon highlighted below.

112

Click "**Rename**" and replace the first item with "**Editing**"

113

Repeat this process by renaming the two other sub menu items with "Marketing and "Editing"

114

Remember those URLs you saved a moment ago? This is where you'll need them. \ \ You're now going to map those three URLs you saved to these sub menu items. This will ensure that when a user clicks on the categories "Editing", "Marketing" and "Hosting", they'll be taken to the right place.\ \ **Click this icon** within the Editing sub menu item.

115

Click "**Settings**"

116

Scroll down to the "**URL**" field and replace the URL with the corresponding URL you saved in your note-taking app.

117

Click "**Save changes**"

118

Click this icon.

119

Now repeat this process for the Marketing and Hosting sub menu items.\ \ Click this icon.

120

Click "**Settings**"

121

Replace the current URL with your "**Marketing**" view URL.

122

Click "**Save changes**"

123

Click this icon.

124

Click this icon.

125

Click "**Settings**"

126

Replace the current URL with your "**Hosting**" view URL.

127

Click "**Save changes**"

128

Amazing! ⚡\ \ You've now created three sub menu items and mapped them to the top navigation of your directory so that users can easily browse the categories they're interested in.\ \ Check the results of your work by clicking the icon below.

129

Click the Categories menu and click through your categories to see if everything is working as expected. \ \ Each category should open with a page that displays just one product (because you've added three products to three categories).

130

That's the most technical part of this lesson wrapped up. \ \ Now it's time to put the finishing touches to your directory by giving it a little branding and customisation. 🎨\ \ Click your profile image and select "**Administration**" from the drop-down menu.

131

Click the "**Settings**" icon.

132

Replace the "**Community name**" field with "Podcast Hunt"

133

Click "**Update**"

134

Click the "**Appearance**" icon.

135

Click "**Logos**"

136

Click this image and upload the replacement logo featured in the next step.

137

Upload this new logo.

138

Click "**Save changes**"

139

Click the back arrow icon.

140

Select "**Themes**"

141

Scroll through the theme options and select one you like. You'll see the theme applied to the preview on the right-hand side.

142

Oncs you've found one you like, click "**Save changes**"

143

Click the back arrow icon.

144

Click "**Typographies**"

145

Select a font style that you like. You'll see the preview update on the right-hand side.

146

Once you find a font style you like, click "**Save changes**"

147

Click the back arrow icon.

148

Click the "**Content**" icon.

149

Click "**Spaces**"

150

Click this icon at the end of the "**Home**" row.

151

Click "**Customize**" from the drop-down menu.

152

Select the welcome banner and then click the gear icon ⚙️ in the "**Welcome banner**" menu item

153

Open the "**Text**" settings by clicking this icon.

154

Click the "**Heading**" field and change the heading to "**Welcome to Podcast Hunt**"

155

Click "**Click to insert rich text in this block**"

156

Replace the word "tech" with "podcast" in the pre-populated description.

157

Click "**Save**"

158

Click "**Save changes**"

159

Click the "**Back the community**" icon.

160

You are DONE! ✅\ \ Sit back and admire what you've created. 😍\ \ You have built a resource directory with community features!\ \ You've added products, a discussion and a community perk to your directory. \ \ You've also learned how to configure directory settings to ensure users can easily find what they're looking for.\ \ Today is a huge win, enjoy it.