Skip to main content

Creating a Content with a Playlist Zone

Introduction​

Completion Time: 20 minutes

Description

This guide will walk you through embedding a Playlist into a single-zone Content layout in Wallboard. The Playlist will play in one area of the design, while other widgets like a logo, ticker, clock, or weather widget are added around it for a complete and dynamic display.

Widgets Used

  • Content (Embedded Playlist): Plays promotional videos or images for products.
  • Image Widget: Positioned at the bottom-left corner for branding.
  • Scroll Widget: Scrolls across the bottom with daily deals.
  • Clock Widget: Displays the current time in the top-right corner.
  • Weather Widget: Shows the local weather conditions in the bottom-right corner.

Step-by-Step Interactive Tutorial​

Step-by-Step Instructions​

1. Preparing the Playlist​

Before embedding a Playlist into Content, ensure the Playlist is ready:

Create or Open a Playlist:

  • Navigate to the Contents section on the Wallboard dashboard.
  • Click the + button then select Create Playlist.
  • Enter a name for the Playlist and click Create and Open.

Uploading New Images & Videos:

  • Once in the Playlist, at the top, click the + icon followed by Add File.
  • In the popup, click on the Upload box and select files from your PC.
  • Once selected, press the Upload button.

Add Assets to the Playlist:

  • Drag assets from the asset panel into the timeline in the desired order.
  • Set the dwell time for each asset by double-clicking the Duration field above each asset.

Save the Playlist:

  • At the top of the Playlist editor, click the Save button (floppy disk) to apply your changes.

2. Setting Up the Content​

Create a Content:

  • Navigate to the Contents section on the Wallboard dashboard.
  • Click the + icon, select Create Content.
  • Once in the popup, name your content.
  • Also in the popup, confirm the Resolution matches your screen resolution by selecting it in the dropdown. This is especially important if you are designing a portrait content as opposed to landscape.
  • Once complete, press Create and Open to enter the content editor.

3. Adding a Background​

Add an Image Widget:

  • Go to the Widgets panel and drag the Image Widget onto the canvas.
  • Click the widget to open the Properties Panel.
  • Click the Source field, select your background in the file manager, and click Choose File.

Resize the Image Widget Fullscreen:

  • Resize and position the background as needed.

4. Embedding the Playlist​

Add a Content Widget for the Playlist Zone:

  • Go to the Widgets panel to the left of the canvas.
  • Drag the Content Widget onto the canvas.

Select the Playlist:

  • Click the Content Widget to choose the Playlist you want to use.
  • Open the Properties Panel on the right.
  • Under Content, click the Choose Content button.
  • Select your Playlist in the popup. Then select Save.

Resize the Playlist Zone:

  • Resize and position the content widget by dragging its corners or by moving it.

5. Adding Surrounding Widgets​

Image Widget (Logo):

  • Go to the Widgets panel and drag the Image Widget onto the canvas.
  • Click the widget to open the Properties Panel.
  • Click the Source field, select your logo in the file manager, and click Choose File.
  • Resize and position the logo as needed.

Scroll Widget (Ticker):

  • Drag the Scroll Widget from the widgets panel onto the canvas. Then select i.
  • In the Properties Panel, within the Main tab, select the Data Origin dropdown, then choose RSS or Text.
    • RSS: These are commonly for bringing in news and weather announcements from an RSS feed. You can find examples of these here. If you copy a URL of one of the RSS feeds, you can enter it into the RSS URl field in the properties panel.
    • Text: You can always type an announcement or custom text in the Text field
  • Adjust the text speed, font, and color in the Main tab of the Properties Panel.
  • Resize and position the widget as needed.

Clock Widget (Time):

  • Drag the Clock Widget onto the canvas.
  • In the Properties Panel, under the Main tab, set the Type to Digital.
  • More options will appear where you can change the Format of how the time and date are displayed (e.g. h:mm a).
  • Choose a font family, style, size, and color under the Main tab in the properties panel.
  • Resize and position the widget as needed.

Clock Widget (Date) (Optional):

  • If you would like to show multiple clock widgets, you can copy and paste widgets by using CTRL + C / CTRL + V, then set the format, size, and font again for the new widget. (e.g. MMMM Do)

Weather Widget (Icon):

  • Add the Weather Widget from widgets panel.
  • In the Properties Panel, under the Main tab, start by selecting the – icon to remove the additional locations so there is only one listed.
  • Enter the location’s City ID (Postal Code) (e.g. 75052)
  • Provide the location’s Display Name (Name) (e.g. Dallas)
  • Then select the Country Code in the dropdown (Country)
    • If you are located in the US, we would suggest choosing the option that states your Country and Sate (e.g. US_TX for United States, Texas)
  • Most importantly, select the Partial toggle and select whether you would like to show an Icon, current temperature, etc in the Part dropdown.
  • Resize and position the widget as needed.

Weather Widget (Temperature) (Optional):

  • If you would like to show multiple weather widgets, like the current temperature and an icon, you can copy and paste widgets by using CTRL + C / CTRL + V.
  • Change the Part property by selecting Temperature in the dropdown.
  • Customize the Temperature Unit in the dropdown(Celsius/Fahrenheit).
  • Finally, you can change how the text appears under the Other tab. For example, the font family, style, and color.
  • Resize and position the widget as needed.

6. Final Adjustments​

Layout Alignment:

  • Use the alignment tools in the top toolbar to center or align widgets.
  • You can align widgets more precisely by using the arrow keys on your keyboard
  • Ensure there is no overlap between the Playlist Zone and other widgets.

Save and Publish:

  • Click Save to store your content.

Preview the Content:

  • Click the Preview button at the top-right of the editor to see how the Playlist and widgets look together.
  • Make adjustments as needed.

Downloads​

Downloadable content!

downloadIcon.png

Tip!

If you have further questions please do not hesitate to contact us at support@wallboard.info. Happy editing!