EverWeb widgets hero switch scroller
Podcasting With EverWeb Widgets

Responsive Podcast Playlist

  1. Podcast Title

    AuthorDateDuration: 0:03:45The fixed header has an h1 heading with optional scroll arrows and the audio MP3 player.
    The player has a play/pause function, progress bar and shows the elapsed and run times.

  2. Player

    The player has a maximum width setting to prevent it spreading too wide if required. For a full width player, set its maximum width to the same value as the container's max width.

  3. Playing

    Using the play/pause button will play and pause the first item in the list. Another track is selected by clicking or tapping its title.
    As can be seen from this example, the title of the active track can have a contrasting color and background.

  4. Setup

    The player will accommodate up to 100 items. The tracklist has a fixed height setting so that the overflow will scroll into view. The height can be set to a large value while adding tracks so that they can be seen when adding the content.
    Reduce the height to the required value before publishing.

  5. Fields

    There are fields for entering the title, author, date, time and a description. The date and time fields are optional and can have a contrasting color.
    Note that - apart from the title - these fields can be used for any type of info or used as extra paragraphs for the track content description.

  6. Download Link

    The download links are optional and are turned on globally. The link icon uses an SVG so the icon color, hover color and background color can al be changed.

  7. Download Files

    The MP3 files should be created as a ZIP files and can either be dragged into the EverWeb Assets List and linked using a relative file path or uploaded to a folder on the same or another server and linked to using an absolute path.The link can also be used for linking to a buy page such as iTunes.

  8. Copyright Notice

    The © symbol is optional and remains in view at the bottom of the player. It has an option to add an auto update of the copyright year if required. The © symbol is created using the HTML code …©

© EverWeb Widgets -

© EverWeb Widgets -