-
- - - -
- - -
-

WebSlides Tutorial

-

Media

-

* * *

-

- - - - - Free Download - -

-
- -
-
-
-

A quick reference guide for beginners

-

Videos, images, maps, and charts.

- -
- -
-
- -
-

- - - - Insert images wherever you want -

-

15 different positions.

-
- -
-
-
-

15 Different Backgrounds

-
    -
  • .background (fullscreen)
    • -
  • .background-top (cover)
    • -
  • .background-bottom (cover)
    • -
  • .background.light (opacity)
    • -
  • .background.dark (opacity)
    • -
  • .background-center
    • -
  • .background-center-top
    • -
  • .background-center-bottom
    • -
  • .background-left
    • -
  • .background-left-top
    • -
  • .background-left-bottom
    • -
  • .background-right
    • -
  • .background-right-top
    • -
  • .background-right-bottom
    • -
  • .background-anim (animated)
    • -
-
- -
-
-
-

- - - - .background = Fullscreen Backgrounds -

-

How to embed Unsplash photos? →

- 
<section>
-  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
-  <div class="wrap">
-    <h1>Slide</h1>
-  </div>
-</section>
-

- - - - Position .background outside of .wrap container. -

-
- -
-
- -
-
-

.background-(position)

-

.background-right-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- -
-
-

.background-(position)

-

.background-left-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- - -
-

.background.anim

-
- -
-
- -
-

Opacity

-

[class*="bg-"] > .background.light

- 
<section class="bg-black">
-	<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
- -
-

Opacity

-

[class*="bg-"] > .background.dark

- 
<section class="bg-black">
-	<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
-
-

Optional · 500+ icons

-

- - - - - Font Awesome - - as SVG icons -

- 
<svg class="fa-flag">
-	<use xlink:href="#fa-flag"></use>
-</svg>
-

How to change icons?

-
    -
  1. Go to fontastic.me.
    2. -
  2. Create a free account.
    3. -
  3. Select new icons.
    4. -
  4. Publish as SVG sprite.
    5. -
  5. Edit svg-icons.css and svg.icons.js.
    6. -
-
- -
-
-
-

ul.flexblock.metrics.border

- -
    -
  • Founded - 2024 -
    • -
  • - - - - - - 24M Subscribers -
    • -
  • - - - - - - Revenue: $16M -
    • -
  • - Monthly Growth - 64% -
    • -
  • - - - - - - 8 Offices -
    • -
  • - - - - - - 48 Employees -
    • -
  • - - - - - - EBITDA: $2,4M -
    • -
  • - - - - - - Bank: $32M -
    • -
-
- -
-
-
-

Transparent Logos

-

- Change the color of a .svg/.png image using CSS. Images are property of their respective owners. -

-
- -
- -
-
- -
-
-

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

-

Avatar @username, .avatar-56

-
-
-

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

-
- -
-
-
-
-
-

Devices

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
- -
-
- iPhone -
-
- -
- -
- -
-
-
-
-
- Screenshot -
-
- -
-

Screenshots

-

HTML/CSS Browser.

- 
<figure class="browser">
-  <img alt="Screenshot" src="image.jpg">
-</figure>
-
- -
- -
-
- -
-

- Videos -

-
- -
-
-
-

Background videos

- 
<section class="fullscreen">
-  <div class="embed">
-    <video autoplay loop poster="image.jpg">
-      <source src="video.mp4" type="video/mp4">
-    </video>
-  </div>
-</section>
-
-

.fullscreen > .embed (responsive) > video

-
- -
-
-
- -
-
-
-
-

Background videos

-

Transparent overlay:

- 
<section class="fullscreen bg-blue">
-  <div class="embed dark">
-    <video autoplay muted loop poster="image.jpg">
-      <source src="video.mp4" type="video/mp4">
-    </video>
-  </div>
-</section>
-
-

.fullscreen.bg-blue > .embed.dark (or .light) > video

-
- -
-
-
- -
- -
-

Muted

-

Overlay: section.fullscreen.bg-blue > embed.dark or .light

-
- -
-
-
-
-

Responsive Videos

-

Just copy and paste the code from YouTube to your slide.

- 
<div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
- </iframe>
-</div>
-

.embed (responsive)

-
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
-
-
-

Fullscreen YouTube Video

- 
<section class="fullscreen">
-  <div class="embed">
-    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
-    </iframe>
-  </div>
-</section>
-
-

.fullscreen > .embed (responsive)

-
- -
-
- -
- -
- -
-
-

- -

-
-

- - YouTube API

-

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

- -

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

-
- -
-
-
-

- - YouTube API Parameters

-

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

-
-
-
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop> 
-  </div>
-</div>
-

autoplay + loop

-
- -
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls> 
-  </div>
-</div>
-

autoplay + mute + no controls.

-
- -
- -
- -
-
-
-
-

YouTube API

-

autoplay + loop

- 
<div class="embed">
-  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop> 
-  </div>
-</div>
-
- -
- -
-
-
- -
- -
- -
-
-
-

- - Autoplay Feature

-

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

-
- -
-
-
-

Let's make some magic with the YouTube API

-

How to make a fullscreen YouTube video? .fullscreen > .embed

-
- 
<section class="fullscreen">
-  <div class="embed">
-    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
-  </div>
-</section>
-
-

The video will automatically play when the slide is loaded.

-
- -
-
- -
-
-
- -
-
-
-

Fullscreen YouTube video background

-

Overlaying a transparent background on an embedded Youtube video:

-
- 
<section class="fullscreen bg-black">
-  <div class="embed dark">
-    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
-  </div>
-</section>
-
-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-
-
- -
-

Overlay

-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-

- - - - Maps & Charts -

-
- -
-
-
-

Status of Net Neutrality around the world.

-
- -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-

Charts

- -
- -
Chart
-
- -
- -
-
- -
-

Start in seconds

-

120+ prebuilt slides ready to use.

-

- - - - - Free Download - - - - - - - Pay what you want. - - -

-
- -
-
-

😘

-

@WebSlides

-
-
-