+
+ +
+ + +
+

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)
    • +
+
+ +
+
+
+

+ + + + img.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.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. +
+
+ +
+
+
+

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.png">
+</figure>
+
+ +
+ +
+
+ +
+

+ Videos +

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+ +
+

Be Awesome

+

Overlay: section.bg-blue > .background-video.dark or .light

+
+ +
+
+ +
+

YouTube Videos

+

Fullscreen, no controls, autoplay, loop, mute...

+
+ +
+
+
+
+

Responsive Videos

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

.embed

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+

Fullscreen video

+

Method 1:

+ 
<section class="fullscreen">
+  <div class="embed">
+    <iframe class="background-video" src="https://www.youtube.com/embed/XjJQBjWYDTs">
+    </iframe>
+  </div>
+</section>
+
+

.fullscreen + .embed + iframe.background-video

+
+ +
+
+ +
+ +
+ +
+
+
+

Fullscreen video (no controls)

+

Method 1:

+ 
<div class="embed">
+ <iframe class="background-video" src="https://www.youtube.com/embed/F-UO9vMS7AI">
+ </iframe>
+</div>
+

.embed + iframe.background-video

+
+ +
+
+
+

Fullscreen video (no controls)

+

Method 2:

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&showinfo=0">
+ </iframe>
+</div>
+

.embed

+
+ +
+
+ +
+ +
+ +
+
+
+

Video (autoplay)

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/F-UO9vMS7AI?autoplay=1">
+ </iframe>
+</div>
+

.embed

+
+ +
+
+ +
+ +
+ +
+
+
+

Video (loop)

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/F-UO9vMS7AI?loop=1">
+ </iframe>
+</div>
+

.embed

+
+ +
+
+ +
+ +
+ +
+
+ +
+

+ + + + Maps & Charts +

+
+ +
+
+
+ +
+ + + +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+

Charts

+ +
+ +
Chart
+ +
+ +
+ +
+
+ +
+

Start in Seconds

+

Create your own presentation instantly.
120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+
+