A step-by-step guide for creating landing page for an event utilizing Page Sections

Audience:  Content or program team members

Recently I was tasked with creating a page listing keynote talks for an upcoming keynote series for Elevate Extension. While working on this I thought it might be helpful to share my approach to this request with a step-by-step tutorial. This tutorial includes productivity tips and best practices that you may find useful for other projects you might be involved with down the road. 

The request was to create a page listing all of the keynote speakers for the event. Each keynote needs to include the following information:

  • title of talk
  • speaker’s county or region
  • name of speaker
  • headshot photo
  • abstract
  • speaker’s biography
  • link to download the presentation slide deck (from Box)

Planning

This page will contain a lot of content for seven keynote talks, so some planning is in order. I like to start by quickly sketching out a few rough ideas with all of the elements. Since the page will be quite long, I decided to use a Tabbed section to cut down on the length of the page. The first tab will display the keynote title, speaker and headshot photo, another tab for the biography, and another tab with a link to the presentation.

Now that we know how we want the page structured the next step is to locate all of the resources for the page.

Gathering resources

I like to pull together all of the resources I’ll need before creating the page. To help me stay organized, I created a folder for each talk that includes the headshot photo, keynote abstract, biography, etc. I want to use online resources for the presentation tab’s content. These need to be created before we can link to them to the page.

Creating online resources for the presentations

The presentations will be linked to from Box. We’ll want to include a thumbnail image to display as the teaser image. The simplest way to create a thumbnail is to use PowerPoint’s Export… function. 

  1. Open the presentation in PowerPoint
  2. From the File menu select Export …
  3. Choose either PNG or JPG for the File format then select the Save Current Slide Only option. Save file to the folder created for each keynote

  4. Instead of linking to the actual PowerPoint file, we suggest converting it to a PDF and then linking to the PDF instead of the PowerPoint file. PDF file sizes are generally much smaller and you don’t need PowerPoint in order to view the presentation
  5. From the File menu Save As … and choose PDF as the file format
  6. Repeat the above steps for each presentation
  7. Upload the PDFs to a Box folder. 
  8. Create a shared link for each PDF. See our webguide for detailed  instructions. 
  9. Copy all the shared links to a text file noting which presentation each link is for. We’ll use them in the next step.

From your Group Dashboard, create an online resource for each presentation.

Building the event page

  1. From your group dashboard,  click the Add Subpage button

  2. In  the Page Sections area, Add Text

  3. Enter Session title and county/region
  4. Add Tabbed section

  5. Enter a Tab title for first tab (Name of speaker)
  6. Add Two-column section

  7. Add Image to Left Column Content

  8. Upload a new image or existing image.

  9. Add Text to Right Column Content
  10. Copy and paste abstract text (session description) from Word

This completes the first tab.

Next we’ll add the Biography tab 

  1. Add Tab
  2. Enter Tab title (Biography)
  3. Add Text
  4. Copy and paste biography text from Word

Now add the Presentation tab 

  1. Add Tab 
  2. Enter Tab title (Presentation)
  3. Add Featured content
  4. Select Featured content
  5. Locate and select the Online resource previously created for the first speaker, then click the Finish button to add resource
  6. Save page 
  7. Review page to confirm that the layout for the first speaker looks like the screenshot below

Now that the first keynote has been added, we will use this as a template for the other keynotes. 

Adding the additional keynotes

    1. From the edit screen click Collapse all page sections

    2. Add text and enter the next speakers session title

    3. Click the three vertical dots in the Tabbed section row, then select Duplicate

    4. Replace titles, text, featured content, and photo for each tab
    5. Collapse all page sections again
    6. Repeat steps 1-5 for each speaker
    7. Save

Teaser settings

  1. Add a Thumbnail image and short description (~150 characters). The thumbnail and summary/description are displayed in search results and used when sharing the page with social media. 
  2. Save

Changing the order of the keynotes

    1. From the edit screen, click Collapse all page sections

    2. Click and drag the arrow controls symbol up or down to change the order. Do this for both the Text and Tabbed section
    3. Save

Final result



Key takeaways

  • The time spent planning and organizing all of the resources before creating the page will save a lot of time and frustration
  • Using the Duplicate feature assures consistency and is a time saver
  • Online resources linking to PDF files instead of PowerPoint, Excel, or Word are more accessible, and have smaller file sizes resulting in faster download times.

Refer to the Navigator Blog and the Extension Website User Guide for more ideas, tips and best practices. 

 


Website updates

Page section duplication

Most page sections can now be Duplicated by clicking the three vertical dots and selecting Duplicate.

Print Friendly, PDF & Email

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required