KreativePro Masterclass
Hello, {first_name}
6.4
Dynamic Templates
Learn to build websites without code in Webflow
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
56
lessons
7
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Webflow Dynamic Templates

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.

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

đź“Ą Download Template

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Download
Download
Webflow Project Files

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
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.
Noel Hale
Founder of Slush Monkeys®
Mae
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!
Mae Green
Product Designer @ Dropbox

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

The future of the web without code
56
lessons
7
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
NEXT COURSE IN
00
Days
00
hrs
00
mins
00
secs
🚀