On this Webflow lesson we take a look at dynamic templates. How to import our design components into dynamic templates in Webflow and when to use conditional elements on Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right so let's try to bring in
some of the styles and elements that we
created in our playground
and bring him over to this dynamic
template
the way i do this is i've created
already a theme called
dark so i'm going to apply that to the
body
next i'm going to my playground and i'm
simply going to copy
that same component of the slideshow
and i'm going to bring it over into
our dynamic template so i'm going to
copy this
bring it over to our entries template
and simply paste it
okay now all we have to do start
replacing some of the content just like
this
so get text from the name
and let's replace the extra details we
can change that to the year
okay we can select the year from there
from the properties panel as well
so we can just toggle this and then
choose year
can ask you for the format all right
something very cool that we can use with
webflow is adding conditionals
what this does is we can decide which
one
of these three different colors to use
based on
a specific field type and based on or
based on the value of the field type
for example i want to show this orange
one
only if has a lower score and it has a
grade of low
and in order for us to do that is we we
select the actual
field with the navigator and we go over
to our property panel and select
conditions
we click on add a condition and we look
for the field we want to try to filter
for
so in this case is the grade option so
in the grade it's going to ask us if it
equals
and then the value that we have
determined if it's equals to low
then show me so element is visible when
the grade
equals to low then we save that and
immediately that
media is disappearing because this has a
high value or a high score
then we do the same thing over here so
we do this so if the grade
is equal to okay then we save that
okay so now that we have those
conditions set we want to look for a
one of the one of the movies that has a
value because some of these movies that
we've entered do not have the grade
established yet
so let's say for example the godfather
and we change the value of the grade
to a high and we click save we can click
on the actual on the actual movie so
let's look for godfather
just like that he will preview that
particular
entry so right away we can see the
the green one is showing up okay
then the actual value inside we can
change that
through here select the text pull that
text
from the score just like that and we
want to do that same thing
on the other three so you want to pull
the score from there
and the score from there
so if we were to put on the database
the godfather part 2 maybe this one was
a low score
we put it to like six or seven then we
save it
then what's going to happen is when we
go to godfather
two we'll see that godfather two
let's remove that we have got father two
has a score of seven
and it's showing the orange color uh
that we have established and that's
based all on classes so we have the
class low which is a combo class
we have a combo class for preview and
then we have a combo class for hi
that's pretty simple another thing that
we can do here
is look for images and set them as
background images so if i select the
hero bg
which is taking care of this background
we can simply go to the
properties panel and select to get the
background image from
our entries so all we have to do is
choose the hero image
and just like that spooling the
background image and setting it to this
class
the hero bg class all right so let's go
ahead and check out
the multi-reference functionality and
this is the
this is something we're going to use to
start showing some of the related data
into our dynamic template so for example
the actors how would we show
related actors on this page let's go
ahead and take a look
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS