Overview

Showcasing your staff members on your website adds a human element to your brand. This tutorial covers the basics of creating a team page using Solodev Modules and Shortcodes. 

Prerequisites

Users must be familiar with the following: 

  • Shortcodes
  • Mapping pages to modules. 

Step 1 – Installing a team module

  • On the Solodev dashboard click Modules.
  • Click Add Modules on the next page.
  • On the Team card click Install. 
  • In the modal window Enter the Name of the module. 
  • Click Browse and select the web files -> managers folder. 
  • Click Choose
  • Click Submit



Step 2 – Creating a repeater template

  • Expand the web files -> content folders and open the about-us folder. 
  • Click Add Folder
  • Enter the Name (team), Title, and Description of the folder. 
  • Click Submit
  • Open the team folder. 
  • Click Add File
  • Enter the Name (team-repeater.tpl) and Title of the file. 
  • Set the File Type to Code
  • Click Submit
  • The user is directed to the open file. 
  • In the text box, enter the code provided below: 
<div class="row py-5">
<div class="text-center col-md-8 mx-auto">
<h2 class="text-uppercase">Seeing the World Anew</h2>
<p>Meet the team of talented people that are leading our low earth orbit tours.</p>
</div>
</div>
 
<div class="row pb-5">
[repeater id='##'  pages="22" order="start_time desc" display_type="news"]
<div class="col-md-6 col-lg-3 mt-3">
<a href="{{path}}">
<div class="position-relative bg-secondary bg-hover-secondary-dark">
<img alt="Team Image" src="[get_asset_file_url id='{{team_member_image}}']" class="w-100 img-fluid">
<div class="text-white text-center border-top border-white w-100 p-2">
<h2 class="mb-0 h6 text-uppercase">
[is_set value="{{heading_title}}"]
{{heading_title}}
[/is_set]
[is_empty value="{{heading_title}}"]
{{event_title}}
[/is_empty]
</h2>
<p class="mb-0"><small>{{team_member_pos}}</small></p>
</div>
</div>
</a>
</div>
[/repeater]
</div>
  • Click Publish

Note: The id value in the repeater should match the id value of the module.



Step 3 – Creating a detail template

  • Open the team folder located in web files -> content -> about-us folder. 
  • Click Add File
  • Enter the Name (team-detail.tpl) and Title of the file. 
  • Set the File Type to Code
  • Click Submit
  • The user is directed to the open file. 
  • In the text box, enter the code provided below: 
[entry]
<div class="row align-items-center mb-lg-5">
<div class="col-md-3 text-lg-center text-left">
<img alt="Image Title" class="w-225p img-fluid rounded-circle" src="[get_asset_file_url id='{{team_member_image}}']">
</div>
<div class="col-md-9 mt-lg-0 mt-5">
[is_set value="{{team_member_pos}}"]
<h2 class="text-uppercase">{{team_member_pos}}</h2>
[/is_set]

<hr class="my-4">
     
<div class="row">
<div class="col-md-6">
<p><i class="w-25p far fa-envelope pr-2"></i> <a href="mailto:{{team_member_email}}">{{team_member_email}}</a></p>
<p><i class="w-25p fas fa-mobile-alt pr-2"></i> <a href="tel:{{team_member_phone}}">{{team_member_phone}}</a></p>
</div>
<div class="col-md-6">
<p><i class="w-25p fas fa-map-marker-alt pr-2"></i>{{team_member_location}}</p>
<p><i class="w-25p far fa-clock pr-2"></i>{{team_member_hours}}</p>
</div>
</div>
</div>
  </div>
  <hr>
  <div class="row pt-4">
<div class="col-sm-12">
{{post_content}}
</div>
  </div>
[/entry] 
  • Click Publish

Step 4 – Creating a page to house the repeater template

  • Open the www folder. 
  • Click Add Folder.
  • Enter the Name (team), Title, and Description of the folder. 
  • Click Submit
  • Open the team folder. 
  • Click Add Page.
  • Enter the Name (index.stml), Title and Description of the page.
  • Choose a template.
  • Click Submit
  • The user is directed to the index.stml page.
  • Select an empty DynamicDiv on the page.
  • Select the team-repeater.tpl file located in the web files -> content -> about-us -> team folder to insert it into the dynamic div.
  • Click Publish






Step 5 – Creating a page to house the detail template

  • With the www -> team folder open, click Add Page.
  • Enter the Name (detail.stml), Title and Description of the page.
  • Choose a template.
  • Click Submit
  • The user is directed to the detail.stml page.
  • Select an empty DynamicDiv on the page.
  • Select the team-detail.tpl file located in the web files -> content -> about-us -> team folder to insert it into the dynamic div.
  • Click Publish





Step 6 – Mapping the detail.stml page to the team module

  • Expand the web files -> managers -> Staff folders. 
  • Open the Staff module. 
  • Click Modify
  • Expand the Website Properties accordion.
  • Click Browse next to the Detail Template textbox. 
  • Select the detail.stml page located in the www -> team folder. 
  • Click Browse next to the Detail Folder Location text box. 
  • Select the folder (www ->team) that contains the detail.stml file.
  • Click Submit.

Step 7 – Add an Entry

  • Expand the web files -> managers -> Staff folders. 
  • Open the Team module. 
  • Click Add Entry
  • Set the Status to Publish
  • Enter the Content.
  • Choose a Featured Image.
  • Click Submit

Did this answer your question?