Hey everyone today I will show you how
to create a minimal style website using
slides framework in this video I will
explain how to work with the slides app
how to use the manual how to use the
examples and how to edit the code in
less than 30 minutes we'll create a cool
website with good design and animation
start by opening the slides app here I
will start to build my website by
choosing from designs and effects the
first thing I will do is switch the
background option to white because I
want a minimalistic website and don't
need background images and effects I
choose the desired slides one by one I'm
trying to choose different types of
slides to show you how to work with each
of them free animation I will select the
chain effect
I think this effect is perfect for my
website style I will ignore the menus
and navigation and will leave the
default style of the website because it
is perfect for what I want to build
let's see the preview of the actual
template to be sure I have finished the
slide selection and I can export them to
my local computer
okay the animations look good and all
the selected slides are here but I think
I will make changes to the slides order
and we'll swap one slide with another
one I want to remove slide 82 for this I
open the selected slide and remove it
and I will select another one slide 87
the order of slides is not good now and
I will change the slide location by
dragging and dropping them right in the
slides app let's preview the result this
is better because the slides are ordered
logically and I can make additional
changes to the order later
now let's go back and export the
template to my local computer find the
downloaded zip file and export it right
here all files are located in this
folder here are the first step files
manual files CSS HTML files and more
open the index.html file in your
favorite code editor you can see the
code is well organized open index.html
in a browser this is our website with
all the selected slides and effects
website images are located in the assets
folder so let's start to customize our
template I will open the first slide
image in Photoshop and change this image
with another one
in this tutorial I will use the images
and text from one of the projects from
Kickstarter called new row take a look
at this minimal watch it's very cool ok
let's start with template customization
I have saved a few images from new row
watch I will copy these images to
Photoshop and adjust it to the size of
the previous image refresh the page and
here's the new image I will remove this
play button because I don't need the
video function for this image in the
code I will remove the part of the code
related to Vimeo and the video thumbnail
class refresh the page and it's just
what I want to see now I want to remove
the link to the image also go back to
the code editor and remove these classes
the result is good let's change the text
on the page I can copy/paste the text
because I have prepared it from the new
row watch campaign
the result is good but I want to fix the
description because the word yet is
orphan and is not good so let's remove
it
now it is perfect let's go to the next
slide I will change this image and
remove the open effect open the image in
the same way in Photoshop remember you
can change images how you want I just
show my workflow here you might do this
another way
drag-and-drop the new image and adjust
it to the size save the image let's see
ok I don't like how the watches are
positioned I will adjust this in
Photoshop yes now is better next I want
to remove this effect open the code
editor and let's see where to change the
code here is the data action and I will
remove the zoom effect and Link refresh
the page good this is what I want now I
will change the text and move forward
the video in order to not lose the time
for these simple and repetitive changes
now in the same way refresh the page and
check the changes good for the next
slide I prepared something new I will
use a Jif image instead of a static
image for this I will copy and paste the
prepared jiff image to IMG folder let's
rename it and open the code editor here
we'll change the file extension to jiff
remove the video thumbnail code save the
file and check the result I think the
image is too big so I will remove the
shadow back to code editor and remove
the rounded shadow and paste the height
and width of the jiff image right here I
will make the image smaller refresh the
page the results is not very good it
seems we should remove a style open the
code editor and here we'll remove the
wide class and also I will change the
height and width size to 500 pixels
change the text of this slide and
refresh the page to check the final
results yes now this is good let's move
on to the next slide
okay for this slide I will use the
slides manual because I want to use a
background image here open the code
editor remove the code from Vimeo from
the previous slide and change the text
on slide 4 in this slide I will use the
information about the red dot design
award because this watch was awarded in
2010 for the best concept I need a
background image here open the slides
manual find the background section and
copy this part of the code open the code
editor and paste it before the section
now copy and paste the background image
to background folder located in IMG
folder change the name of the image
directly in the code and save I will
refresh the page and check the result
the page looks good the background has a
perfect fit for the typography colors
and grid
scroll down to see the next slide in
this slide will change the text and
icons and you will learn how to change
icons without image editing open the
code editor and edit all the text I will
move forward because it's a repetitive
part of our tutorial save the file to
see the live result the text is changed
and fits well now for the most
interesting part how to change the icons
for this purpose I will use the manual
open the manual and scroll to material
icons you'll find detailed information
about how to use the material icons and
slides open the material icons website
which includes all the icons supported
by slides each icon has a name so we'll
use this name to change icons on our
slide I have selected a few names of
icons and I will change them directly in
the code material icons have a dedicated
class so it's easy to find them
just change the name with your desired
icon name refresh the page to see the
new icons in this style you can change
any icon you want more details are
available in our documentation page
scroll down for next slide in this slide
I will change the video and thumbnail
open the code editor and find the code I
will change the text and remove the blue
button to change the video you need to
copy and paste the ID of the video from
Vimeo insert the ID here and that's it
we have changed the video next I will
change the thumbnail do this in the same
way as before open the image in
Photoshop resize it to fit the previous
image and save the file go back to the
browser and refresh the page to check
the changed file here it is let's play
the video
very good
in the next slide we'll create a small
gallery with three images open the code
editor and start making the changes
first I will edit the text and remove
the unnecessary part of the content from
our design also I will remove the second
row of images
open the folder with images and remove
the unnecessary images now it's time to
change the existing three images and
insert ours there I will use the same
editing process in Photoshop as we have
previously used I will move forward the
video because the process is exactly the
same as before
you
save all the changes and open the
browser to check the images are here
I think the gallery looks good it all
works well now let's go to the next
slide here I want to mention the
creators of this watch I open the code
editor and remove this text and change
the next one
also I want to add a background image
for this I copy the same code as before
and I change the title of the image save
the document and refresh the browser
here is the result it looks good but I
will change the font to bold for this
open the code editor and add the class
bolt let's see the results
great you can leave the default style of
the font if you like our website is
almost ready but I want to add a slide
with a video background I want to create
a spectacular intro to my website
because now it's a little bit static
this slide will be the first open the
slides app and in the footer of the page
you will find examples click here copy
and use the ready-made code for
different services tools or a new
functionality for your website I will
use the Vimeo background for this
example here is a preview
go back and copy the HTML code or you
can download it I have copied it and
will paste to our code before the first
slide here is the step by step
instruction on how to use this example
and integrate it on your website first
we have to add this script to the head
section of our code just cut the code
and paste a head
second insert this code custom Dutch es
file copy the code and open the custom
das file located in J's folder and the
last step is to cut this CSS code and
put it to the custom CSS file located in
CSS folder okay clean the unused code
now and let's change the text and video
in this example open your video on Vimeo
and copy the ID of the video now paste
it right here in the code and change the
remaining text to the name of the watch
in description save the file open the
browser and refresh the website the
first slide is here and is attractive
with a nice video background in a short
description of what about this website
is about I want one more small change I
will make the title of the watch bolt
for this I have to change the class of
font the light parameter to be bold
refresh the website I think it's better
now
after watching this video you should be
ready to use slides to create a website
fast for an advanced customization just
use our detailed documentation page and
ready-made examples which will help you
integrate different services and options
into your website I hope you enjoyed
this video see you again soon
