TSL – TUTORIALS

Set up guides for using TSL WordPress Dashboard, Bunny.net, and Presto Player, Pages and Posts.

*I will add more tutorial updates as I go…

PRESTO SETUP
FEATURED IMAGE
ADD NEW POST CATEGORY

Add Presto video’s

How to Add Videos to Your Website (Step-by-Step)

Step 1: Log In to Bunny.net
Navigate to the Bunny.net Dashboard.

Username: startthepossible@gmail.com
Password: [Your Password Here]
*Keep your API Key handy if needed for the initial connection.

Step 2: Prepare & Upload to Bunny Stream
Retrieve Video Links:

Navigate to Storage on the side bar menu> every-way-woman-early-years.
Open your desired folder (e.g., parenthood).
Right-click the video file and Copy URL.
Copy the Title of the video and paste both the URL and Title into a notepad for easy access.

Organize Collections:

Click Stream on the left-hand menu.
Select your library: TalkShowLand (Presto Public).
Under Manage Library, click Collections to set up a new category.
Click Add Collection (Top Right), name it, and click Create.

Upload via URL:

Click into your new Collection.
Click the down arrow next to the Upload Video button and select Upload Video from URL.
Paste the link and title you saved earlier.
Click Upload Video. The video will now begin processing.

Step 3: Add Video to WordPress Media Hub
Log into your WordPress Admin Dashboard.

Go to Presto Player > Media Hub on the left menu.
Click the Add New Media button.
Enter your video title (e.g., Breastfeeding Doula Melanie Wachsman).
Select the Bunny.net option and click the blue Add/Select Video Stream button.
Browse your TalkShowLand (Presto Public) library, select your Collection, and click your video.
Press the Choose button (Bottom Right).

(Optional) Add a Poster Image by clicking the blue Select button under Poster Image to pick a thumbnail from your Media Library.

Click Publish (Top Right) to save your video to the Hub.

Step 4: Embed Video on a Page (Divi Builder)
Navigate to Posts and click Edit on your desired page.

Click the purple Edit With The Divi Builder button.
Locate the Presto Player Media module (look for the grey bounding box).
Open the module settings and Choose Media from the dropdown list.
Click the Green Checkmark to accept, then Save the page (Bottom Right).
Click Exit Visual Builder in the top admin bar to view your live video.
You should now see you Post page with the new video you selected
Return to the WordPress Admin Dashboard and repeat

Bunny Setting for Presto Intergration

TalkShowLand (Presto Public)
Library ID: 543238
Library API Key: 0d4438e3-d6de-4aeb-88181c1c4a29-dbd3-4a2f
Pull Zon e ID CDN: TalkShowLand.b-cdn.net

Video Upload Quick-Start

1. Grab Source URL (Bunny Storage)
Location: Storage > every-way-woman-early-years > [Folder Name].
Action: Right-click video file → Copy URL.
Save: Note the URL and Exact Title in a notepad.

2. SetUp Stream (Bunny Stream)
Location: Stream > TalkShowLand (Presto Public).
Collection: Open (or create) the target Collection.
Upload: Upload Video (Down Arrow) → Upload Video from URL.
Input: Paste URL/Title → Upload.

3.Add in Media Hub (WordPress)
Path: Presto Player > Media Hub > Add New Media.
Type: Select Bunny.net.
Sync: Click Add/Select Video Stream → Select your video from the Collection → Choose.
Poster: Select Poster Image (Thumbnail) → Publish.

4. Embed in Page (Divi)
Action: Open Divi Builder on your post/page.
Module: Open Presto Player Media module settings.
Select: Choose your new video from the dropdown menu.
Save: Green Checkmark → Save Page.

Presto Player

ADD NEW POST CATEGORY

How to Add New Post Catagory (Step-by-Step)

Adding a new “Button” & “POST Category” Carousel…
*Updates are easier if you are in the Wireframe View to see all of the Sections, Rows, and Modules.

Step 1: Goto TSL-Blog Post Sections
Open the Button Row:

Duplicate Any Button and rename the Row ( *Example Button “SPORTS Button” ).

Open settings for the new Button change the name ( “SPORTS” ).
Click the Advanced Tab and open CSS ID & Classes toggle.
Rename CSS Class ( tsl-button tslCat-* ) to the new name. (tsl-button tslCat-sports).
Click green check mark to save changes.

Step 2: TSL-Blog Post Sections
Duplicate any Row: ( *Example “News Row” ).
Rename the new Row ( *Example “Sports Row” ).

Open settings for the new Row click the Advanced Tab and open CSS ID & Classes toggle.
Rename CSS Class ( tsl-row-* ) to the new name. (tsl-row-sports).
Click green check mark to save changes.

Toggle Row open to see the two Modules nested inside.
Rename Modules to the new the category ( *Example “Sports Text” & “Sports Carousel”).
*This is not necessary but keeps the page organized.

Open the settings for the Text Module ( *Example “SPORTS Text” ).
Update the text to new category name ( “SPORTS” ).
Click green check mark to save changes.

Step 3: TSL-Blog Post Sections
Toggle open the last Row named “Code Row”.
Open the Settings for the Row named “Main CSS Code Module”.
Add our new CSS Class to the code ( .tsl-row-sports, )
Click green check mark to save changes.

Step 4: Open the “JavaScript Code” settings
Add our new CSS Class to the code ( .tsl-row-sports )
*Make sure there is no “,” after the last CSS Class.
Click green check mark to save changes.

Now the new “Sports Button” & “Sports Carousel” Category should be working!
*There needs to be at least 1 Posts with the Category set to the “Category” we just setup ( “SPORTS” ).

 

Button CSS Code

<style>

/* Container for scrollable buttons */
.tsl-inline-buttons2 .et_pb_column {
display: flex;
overflow-x: auto;
white-space: nowrap;
gap: 10px; /* Space between buttons */
padding: 10px 0;
-ms-overflow-style: none;
scrollbar-width: none;
}

.tsl-inline-buttons2 .et_pb_column::-webkit-scrollbar {
display: none;
}

/* Prevent buttons from shrinking */
.tsl-inline-buttons2 .et_pb_button_module_wrapper {
flex: 0 0 auto;
width: auto;
}

/* Desktop (center) */
@media (min-width: 981px) {
.tsl-inline-buttons2 .et_pb_column {
justify-content: center;
padding: 0px 0px 20px 0px;
}
}

/* Tablet (center) */
@media (min-width: 481px) and (max-width: 980px) {
.tsl-inline-buttons2 .et_pb_column {
justify-content: flex-start;
padding: 0px 0px 20px 20px;
}
}

/* Phone (left-aligned) */
@media (max-width: 480px) {
.tsl-inline-buttons2 .et_pb_column {
justify-content: flex-start;
padding: 0px 0px 20px 20px;
}
}

</style>

POST Thumbnail CSS

<style>

/* Only apply hover effects to modules with ‘has-hover-effect’ class */
.has-hover-effect .dg-post-thumb::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}

.has-hover-effect .dg-post-thumb img {
transition: transform 0.5s ease;
will-change: transform;
}

.has-hover-effect .dg-post-thumb:hover::before {
opacity: 1;
}

.has-hover-effect .dg-post-thumb:hover img {
transform: scale(1.1);
}

</style>

Main CSS Code

<style>
.tsl-row-daytime,
.tsl-row-dialogue,
.tsl-row-featured,
.tsl-row-food,
.tsl-row-gameshows,
.tsl-row-news,
.tsl-row-parenthood,
/*// ADD NEW CSS Class HERE //*/

{ display: none; }

.tsl-button {
background-color: #9e0000!important;
color: #333 !important;
padding: 5px 8px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.tsl-button.active,
.tsl-button.active:hover,
.tsl-button.active:focus {
background-color: #bc0000 !important;
color: #fff !important;
border-bottom: 0px solid #000000 !important;
}

</style>

JavaScript Code

<script>

jQuery(document).ready(function($) {
$(‘.tsl-button’).click(function(e) {
e.preventDefault(); // Prevent default action
if ($(this).hasClass(‘active’)) return;

$(‘.tsl-button’).removeClass(‘active’);
$(this).addClass(‘active’);

const target = $(this).attr(‘class’).match(/tslCat-\w+/)[0].replace(‘tslCat-‘, ‘tsl-row-‘);

$.when(
/*// ADD NEW CSS Class Below //*/
$(‘.tsl-row-all, .tsl-row-daytime, .tsl-row-dialogue, .tsl-row-featured, .tsl-row-food, .tsl-row-gameshows, .tsl-row-news, .tsl-row-parenthood’).fadeOut(300)
).done(function() {
$(‘.’ + target).fadeIn(300);
});
});

$(‘.tslCat-all’).click();
});

</script>

</script>