WebSlides Tutorial

Media

* * *

Free Download

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. Create a free account.
  3. Select new icons.
  4. Publish as SVG sprite.
  5. Edit svg-icons.css and svg.icons.js.

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.

Google Maps

Discover Seville

.card-50.bg-white

There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcázar palace complex, the Cathedral and the General Archive of the Indies.

Start in seconds

120+ prebuilt slides ready to use.

Free Download Pay what you want.

😎

@WebSlides