Home>Blog>Create a Team Page with the SiteOrigin Features Widget

Save 30% on SiteOrigin Premium for this week only. Use coupon code NOVEMBER30 at checkout Buy Now

Create a Team Page with the SiteOrigin Features Widget

In this tutorial, we’ll create a simple and engaging “Meet the Team” page using Page Builder by SiteOrigin and the SiteOrigin Widget Bundle.

View the demo
Jump to the prebuilt layout

Required Plugins

Page Builder by SiteOrigin
SiteOrigin Widgets Bundle

Once Page Builder and the Widgets Bundle plugins are activated, go to PluginsSiteOrigin Widgets and make sure that the Headline and Features widgets are activated.

Getting Started

Go to Pages and edit the page you’d like to use as your team page. If you haven’t created this page yet, go to PagesAdd New to get started. Once editing the page, if you’re using a SiteOrigin theme, scroll to the Page Settings meta box in the right column. For our demo layout we’ve set Page Layout to No Sidebar and disabled the Page Title. Adjusting page settings is optional, you’re free to set up your page as best suits your site design.

If you haven’t activated Page Builder on this page yet, click on the Page Builder tab and then in the Page Builder toolbar, click the Add Row button and add a single column row to your page. Repeat the process to add a second row.

Adding the Widgets

We’ve started our demo layout off with a Headline widget. To add a Headline widget, click in the first row you’ve created then click Add Widget. Once the Add Widget modal window appears, use the search field on the left to search for “headline”. Click the SiteOrigin Headline widget to insert it into the first row.

In the second row, we’ll be inserting the SiteOrigin Features widget. Click the second row to select it, then Add Widget. Use the search field to search for “features”. Click the SiteOrigin Features widget to insert it.

Adding the Content

SiteOrigin Headline Widget

We’ll start out by editing the Headline widget and then move onto the Features widget. To edit the Headline widget, hover over it and click the Edit link. We’ve used the following settings:

Headline:
Text: Meet the Team
HTML Tag: H1
Font: Use theme font
Font Size: 32px
Alignment: Center

Subheadline:
Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. (This is placeholder text, replace it with a sub-headline that fits your team page)
HTML Tag: H2
Font: Use theme font
Font Size: 23px
Alignment: Center

Divider
Style: Solid
Color: #EEEEEE
Thickness: 1
Alignment: Center
Divider Width: 80%

Use FitText: Enabled
FitText Compressor Strength: 0,85

The Headline widget isn’t necessary, you could also use the regular page title, it’s up to you.

SiteOrigin Features Widget

Next, we’ll add our team members using the Features widget. Hover over the widget and click Edit to get started.

Before adding team members, let’s take a look at the general settings used in our demo.

Font Design
All settings were left at default values.

Other Settings
Container shape: None
Container size: 150px
Icon Size: We’ve cleared this field and left it blank
Features per row: 3
Responsive layout: Enabled
Link feature title to more URL: Disabled
Link icon to more URL: Disabled
Open more URL in new window: Disabled

You’re now ready to add your team. Click the Add link in the Features section to add your first team member. Each feature can be opened, duplicated or deleted using the icons on the right. Features can also be dragged to re-order. The settings we’ve used in each feature are as follows:

Container position: Top
Icon image: Used for the team member’s photo. Our photos were manually resized to 300px x 300px before uploading to the Media Library.
Icon image size: Full
Title text: Used for the team member’s name.
Text: Used for the team member description.

Rounding the Profile Images Using Custom CSS

Our team profile images are square. We’ve used Custom CSS to transform them into round images. Custom CSS can be added to our useful SiteOrigin CSS plugin. To round your profile images, follow these steps:

1. Edit the row containing the SiteOrigin Features widget and open the Attributes section in the right column. Insert the following class name into the Row Class field:

meet-the-team

If you’re using the prebuilt layout provided later in this tutorial, this step isn’t necessary as the class name will already be added to the row containing the SiteOrigin Features widget.

2. Go to AppearanceCustom CSS if you’re using SiteOrigin CSS plugin and insert the following rule:

.meet-the-team .sow-features-feature .sow-icon-image {
border-radius: 50%;
}

This step is necessary even if you’re using the prebuilt layout.

Additional Features and a Helping Hand with SiteOrigin Premium

SiteOrigin Premium is a plugin that adds additional settings and functionality to SiteOrigin widgets, Page Builder and SiteOrign themes. SiteOrigin Premium also includes our next level email support service. If you need expert advice and quick replies, consider SiteOrigin Premium.

Using the Demo Layout

View the Demo.
Download the demo layout (JSON file).

If you’d like to make use of the demo layout, follow these steps:

1. Download the above JSON file to your desktop.
2. Go to the page you’d like to use, if you haven’t activated Page Builder on this page yet, click on the Page Builder tab and then in the Page Builder toolbar, click LayoutsImport/Export.
3. Upload the layout file either by dragging and dropping or selecting it using the select button.
4. Click the Insert button bottom right.
5. To round your team images, add the following to AppearanceCustom CSS:

.meet-the-team .sow-features-feature .sow-icon-image {
border-radius: 50%;
}

* Unfortunately, the Features widget doesn’t have the option of using external image URL’s. This means that the images from the demo layout won’t be imported.

If you have any questions or comments, please let us know below, we’d love to hear from you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 27 days, 11 hours ago Andrew Misplon Hi, I Work Here

    If you’re building a Meet the Team page and run into any challenges, please let us know. We’ll do our best to help :)

  2. 19 days, 16 hours ago Bette Lind

    When playing around with this, it seems that the distance between images, even if identical setup is chosen, is not the same.
    Also, it seems that you have to try several times before an entry is remembered.

    • 19 days, 14 hours ago Andrew Misplon Hi, I Work Here

      Hi Bette, if you’d like us to take a look at the spacing, please send a link. Keep in mind that it’ll be a function of how wide your site container is. If images aren’t adding first time, that’s a problem. You’d have to try a plugin conflict test to begin the investigation. If you’d like to do that, please let us know and we’ll send more info.

  3. 19 days, 14 hours ago Felis Danica Formand

    Just so I understand:

    If my container is wide enough for say 5 icons on a row, I would expect the icon fields to be evenly spaced, no matter if I just start by adding 1 or 2 icons, and added the rest later?

    The other issue is that it is difficult to get the information to "stick". When I click Done, most likely the last entries are without data and the added image.

    mvh

    • 19 days, 14 hours ago Andrew Misplon Hi, I Work Here

      The Features widget has a setting the controls how many features you’d like to display per row. How many features you see per row will depend on that setting. How they are spaced will depend on the space available, the container width. With regards to changing not taking effect, you’d need to run a plugin conflict test to try diagnose that problem. If you’d like help with this, consider opening a support topic on our forum and let us know once that’s done: https://siteorigin.com/thread/. If you open a support topic and share a link to your page, we can assist further :)

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More