0
1
00:00:02,840 --> 00:00:07,240
In this video, I'm going to show you how to install the portfolio website in your own Webflow account.
1

2
00:00:07,280 --> 00:00:13,400
So, you can make it your own, change things, edit content, even customize style and publish as your personal
2

3
00:00:13,400 --> 00:00:13,790
website.
3

4
00:00:16,900 --> 00:00:19,750
I've created a showcase of this project right here.
4

5
00:00:19,760 --> 00:00:23,480
This is a place where Webflow designers can share their projects with others.
5

6
00:00:23,480 --> 00:00:27,760
Go to this link, to access the page. The link is in the resources of this video.
6

7
00:00:27,800 --> 00:00:32,780
Once you're on that page, you'll see this purple clone button, that lets you clone the entire project
7

8
00:00:32,780 --> 00:00:34,140
into your own account.
8

9
00:00:34,160 --> 00:00:38,940
Click on that. If you are already signed in, you'll get to this page.
9

10
00:00:38,990 --> 00:00:43,250
There is a warning message, saying that we can't create a new project in our account, because we hit the
10

11
00:00:43,250 --> 00:00:44,830
limit. Under the free plan,
11

12
00:00:44,830 --> 00:00:51,050
you can only have 2 unhosted sites in Webflow. So, since you have already built two projects, the Chat App
12

13
00:00:51,080 --> 00:00:54,230
and Team App websites, then you'll face this issue.
13

14
00:00:54,230 --> 00:01:00,470
You have three options: upgrade to a paid plan, create a separate account or delete one of the existing
14

15
00:01:00,470 --> 00:01:01,610
projects.
15

16
00:01:01,700 --> 00:01:01,930
Alright.
16

17
00:01:01,940 --> 00:01:05,790
Once you solve that limit issue, then you'll be able to create a new project.
17

18
00:01:05,930 --> 00:01:07,550
Name your project and create.
18

19
00:01:11,880 --> 00:01:12,340
And that's it.
19

20
00:01:12,340 --> 00:01:14,380
Now you have your version of this website.
20

21
00:01:17,500 --> 00:01:19,920
You already know how to do everything you need to do here.
21

22
00:01:19,930 --> 00:01:22,140
But let me show you things that you should edit.
22

23
00:01:22,210 --> 00:01:24,280
First the name. The logo is just the tag,
23

24
00:01:24,290 --> 00:01:26,430
so just put your name in there. As you wish,
24

25
00:01:26,430 --> 00:01:31,020
if you want first and last name, or just first, or just last name, whatever you prefer.
25

26
00:01:31,330 --> 00:01:32,800
There's also the name in the headline.
26

27
00:01:32,800 --> 00:01:37,940
Don't forget to change that.
27

28
00:01:38,040 --> 00:01:40,990
There is the name in the footer, as well. In the copyright text.
28

29
00:01:41,010 --> 00:01:42,650
Put your first and last name there.
29

30
00:01:51,900 --> 00:01:59,060
Lastly, there are names in the SEO fields. Two places, home page and the project template.
30

31
00:02:20,450 --> 00:02:22,460
Then there are email links in 2 places.
31

32
00:02:22,460 --> 00:02:28,070
There is 1 in the navbar and 1 in the footer. Both navbar and footer are symbols, as you'd expect.
32

33
00:02:28,070 --> 00:02:29,900
So it's synced on the project page too.
33

34
00:02:33,510 --> 00:02:34,260
These are emailing links,
34

35
00:02:34,260 --> 00:02:36,780
so you need to put your email address inside the link.
35

36
00:02:36,780 --> 00:02:37,970
So, when people click on it,
36

37
00:02:37,980 --> 00:02:42,330
new email is pre-filled with your address.
37

38
00:02:55,730 --> 00:03:03,260
Don't forget to change both text and a link setting.
38

39
00:03:03,260 --> 00:03:04,620
That's it for the personal info.
39

40
00:03:04,610 --> 00:03:09,830
The rest is content, which you can update as you wish. Or don't. Feel free to keep it as is. But giving
40

41
00:03:09,830 --> 00:03:11,990
it more personal twist, would be a better idea.
41

42
00:03:15,210 --> 00:03:18,330
You can give this website your own personal colours, if you like.
42

43
00:03:18,330 --> 00:03:19,820
Updating is very easy.
43

44
00:03:19,830 --> 00:03:21,630
All colours are global.
44

45
00:03:21,630 --> 00:03:26,820
That means you can update the global colour and all the instances of that colour will be updated instantly.
45

46
00:03:27,120 --> 00:03:31,100
Click on edit. And just choose a different colour on the map. Or paste the color code.
46

47
00:03:45,710 --> 00:03:53,520
Same thing you can do on the highlight colour.
47

48
00:04:00,690 --> 00:04:04,850
Don't forget to click the pencil icon, otherwise, you won't be editing the global colour.
48

49
00:04:17,870 --> 00:04:19,570
Whatever color you use for the background,
49

50
00:04:19,580 --> 00:04:22,320
don't forget to update project thumbnails accordingly.
50

51
00:04:22,370 --> 00:04:26,680
They are independent images, so they don't automatically update with a global color.
51

52
00:04:26,720 --> 00:04:33,320
I've prepared Figma file for these thumbnails, so you can easily update and export new ones. Later on that.
52

53
00:04:36,960 --> 00:04:42,160
Let me show you how I made this highlight effect. So you know how to reuse it, if you decide to. The highlighted
53

54
00:04:42,190 --> 00:04:49,520
text inside a div block. Which has heading element inside, and a regular div blog as a highlight. Highlight
54

55
00:04:49,530 --> 00:04:53,460
has absolute positioning, that's why it's stacked behind the text.
55

56
00:04:53,550 --> 00:04:59,790
If you feel like highlighting some other text element, just copy this entire highlight box and edit the
56

57
00:04:59,790 --> 00:05:00,720
text inside.
57

58
00:05:07,560 --> 00:05:08,850
Because of these highlights,
58

59
00:05:08,850 --> 00:05:14,640
this headline isn't one fluid text. It's bunch of independent inline elements, sitting next to each other.
59

60
00:05:14,940 --> 00:05:29,730
So, to move the order you need to drag elements around or change the order in the Navigator.
60

61
00:05:29,750 --> 00:05:32,930
Keep in mind, highlighted text can't span on two lines.
61

62
00:05:33,080 --> 00:05:39,500
So try highlighting maximum of 2 consecutive words. Like Web Designer. Or have multiple highlight boxes
62

63
00:05:39,530 --> 00:05:40,540
next to each other.
63

64
00:05:40,550 --> 00:05:42,200
If you really need longer highlight.
64

65
00:05:45,790 --> 00:05:47,530
The link highlights work a little different.
65

66
00:05:47,530 --> 00:05:50,620
Actually much simpler than headlines. It's just a box shadow.
66

67
00:05:54,740 --> 00:05:58,310
And if you need to apply that style anywhere else, just select a class name
67

68
00:05:58,310 --> 00:05:59,070
yellow link.
68

69
00:06:03,730 --> 00:06:06,450
And the highlighted text will be added with its hover effect.
69

70
00:06:13,320 --> 00:06:18,090
As you probably noticed, the page has really cool interactions. Like those highlights on page load. And
70

71
00:06:18,090 --> 00:06:20,430
that scroll line moving like a snake up and down.
71

72
00:06:21,030 --> 00:06:22,620
Let me show you where these things are.
72

73
00:06:22,650 --> 00:06:27,320
If you go to interactions panel, you'll see there are three interactions on page load.
73

74
00:06:27,360 --> 00:06:28,950
They are quite simple interactions.
74

75
00:06:28,950 --> 00:06:30,870
First one controls those highlights.
75

76
00:06:30,870 --> 00:06:33,440
Second one is for the content sliding.
76

77
00:06:33,480 --> 00:06:36,350
And third is for the scroll line in the loop.
77

78
00:06:36,390 --> 00:06:41,910
You probably won't need to edit any of this, except one - highlight. Because if you add any highlight elements,
78

79
00:06:42,330 --> 00:06:45,240
you'll need to add it to the interaction too.
79

80
00:06:45,240 --> 00:06:50,190
For example, this new highlighted box doesn't animate. The best thing is to just add a text inside the
80

81
00:06:50,190 --> 00:06:51,740
existing highlight boxes.
81

82
00:06:51,840 --> 00:06:57,320
But if you really must add new ones, then here is what you need to do, so the new text animates as well.
82

83
00:06:58,680 --> 00:07:00,320
The highlight animation is very simple.
83

84
00:07:00,320 --> 00:07:03,360
The box just scales from 0% to 100%.
84

85
00:07:03,360 --> 00:07:07,180
That's all. The initial state is set to 0 vertical scale.
85

86
00:07:08,570 --> 00:07:12,220
And then it changes to 1. Which means 100%.
86

87
00:07:12,230 --> 00:07:15,620
So it just grows from 0 to 100% in its original size.
87

88
00:07:15,710 --> 00:07:19,160
And the same thing is done for each highlight independently.
88

89
00:07:19,160 --> 00:07:21,950
That's why the first one runs, and then the second one.
89

90
00:07:21,950 --> 00:07:28,190
So to animate the third one, select it on the canvas and under initial states, when this plus icon appears
90

91
00:07:28,190 --> 00:07:34,070
click on it. And select Scale and put 0 under X value.
91

92
00:07:34,620 --> 00:07:39,500
But before you do that, disable this lock. Because this is preserving aspect ratio.
92

93
00:07:39,540 --> 00:07:40,890
And we don't want that.
93

94
00:07:40,890 --> 00:07:43,620
We want it to shrink and grow horizontally only.
94

95
00:07:43,710 --> 00:07:47,820
Now we need to add a final state. Which is to grow it back to 1.
95

96
00:07:47,820 --> 00:07:49,800
And we're going to add that at the end.
96

97
00:07:49,800 --> 00:07:50,100
Why?
97

98
00:07:50,130 --> 00:07:54,050
Because we want it to animate one after another, not at the same time.
98

99
00:07:56,260 --> 00:07:59,370
Again disable the lock and put 1 under X value.
99

100
00:08:02,800 --> 00:08:04,840
Play the animation, to see how it's working.
100

101
00:08:07,890 --> 00:08:10,850
Working good. We just need to match the easing to others.
101

102
00:08:10,860 --> 00:08:14,070
I'm using OutQuad 0.6 seconds.
102

103
00:08:29,020 --> 00:08:30,040
So check the preview.
103

104
00:08:34,090 --> 00:08:35,160
And perfect.
104

105
00:08:35,180 --> 00:08:39,710
As for other interactions, probably you won't be needing to change anything. But if you do, all the settings
105

106
00:08:39,710 --> 00:08:44,510
are visible for you to see how they are set up and what needs to be changed. To find these interactions,
106

107
00:08:44,510 --> 00:08:46,360
you need to select a correct element.
107

108
00:08:46,370 --> 00:08:51,560
So, the interaction appears in the panel. Interactions that are triggered by page load, appear all the
108

109
00:08:51,560 --> 00:08:56,750
time, no matter what element you have selected. But those that have an element trigger, you have to select
109

110
00:08:56,750 --> 00:08:59,600
the exact trigger element. To find these interactions,
110

111
00:08:59,600 --> 00:09:04,350
you can see them in the navigator. All the trigger elements have this lightning icon next to it.
111

112
00:09:04,370 --> 00:09:06,620
That means, there is an interaction on that element.
112

113
00:09:06,620 --> 00:09:08,210
For example, button wrapper.
113

114
00:09:08,210 --> 00:09:11,080
That's where that hover interaction for the button is set up.
114

115
00:09:14,180 --> 00:09:18,460
All right, the last important thing you'll need to know is how to manage projects.
115

116
00:09:18,580 --> 00:09:22,370
There are CMS items, so you can easily manage them inside CMS.
116

117
00:09:22,420 --> 00:09:24,970
I'll add a new project, so you can see what's what.
117

118
00:09:25,270 --> 00:09:27,520
Name, Description pretty straightforward.
118

119
00:09:31,110 --> 00:09:34,450
There are two images you'll need to generate for new projects.
119

120
00:09:34,540 --> 00:09:38,660
A thumbnail, for the home page. And the full screen of the project.
120

121
00:09:38,730 --> 00:09:43,040
The full screen is simple, in Figma go to the design of your page and export the entire frame.
121

122
00:09:49,120 --> 00:09:53,740
Then just upload it to the corresponding field. But make sure to compress the image first. Or it's going
122

123
00:09:53,740 --> 00:09:58,140
to be a very large file.
123

124
00:09:58,170 --> 00:10:01,480
As for the thumbnail, go to this Figma file that I have shared with you.
124

125
00:10:01,500 --> 00:10:03,100
Link in the resources.
125

126
00:10:03,150 --> 00:10:07,050
There is a page called assets. And that's where you can create your thumbnails.
126

127
00:10:07,080 --> 00:10:10,290
By the way, you'll see here there is a favicon and a Webclip.
127

128
00:10:10,290 --> 00:10:14,070
Use this, so you can generate your own and update them in the settings of your project.
128

129
00:10:15,440 --> 00:10:16,640
And drag the image inside.
129

130
00:10:40,650 --> 00:10:42,530
The same thing for the back group.
130

131
00:10:52,970 --> 00:10:54,470
And position it as you like.
131

132
00:11:00,430 --> 00:11:05,760
Then export the thumbnail, compress it and upload it in CMS.
132

133
00:11:19,300 --> 00:11:21,070
Then you have a live site URL.
133

134
00:11:21,070 --> 00:11:26,120
If you leave this empty, link won't appear. So you can leave it empty without a problem.
134

135
00:11:26,140 --> 00:11:27,870
Make sure to enable this toggle.
135

136
00:11:27,940 --> 00:11:30,630
This is for the project to show up on the home page.
136

137
00:11:30,640 --> 00:11:35,220
I've added this, so you have an option to disable or enable any project on the home page.
137

138
00:11:35,380 --> 00:11:38,260
If you're wondering how I've done this, it's filters.
138

139
00:11:38,260 --> 00:11:43,720
So, I created this toggle. And on the home page, then I created the filter for the collection list saying
139

140
00:11:43,720 --> 00:11:49,150
that "display those that have toggle enabled", pretty easy.
140

141
00:11:49,150 --> 00:11:51,660
Then you have these 3 tags that show up under the title.
141

142
00:11:56,530 --> 00:11:57,150
And that's it.
142

143
00:11:57,160 --> 00:12:04,400
Once you save, go to the home page. You can see the new project is going to appear on top of the others.
143

144
00:12:05,010 --> 00:12:08,230
And in links to the project page. Which is ready as well.
144

145
00:12:08,270 --> 00:12:10,100
That's all you need to do to add more projects.
145

146
00:12:11,080 --> 00:12:13,960
By the way, these projects on the home page, are a collection list.
146

147
00:12:13,960 --> 00:12:17,050
Remember those? Content is linked to the CMS fields.
147

148
00:12:17,050 --> 00:12:20,310
You won't be able to edit individual items right on the canvas.
148

149
00:12:20,320 --> 00:12:23,230
You can only edit them inside CMS.
149

150
00:12:23,380 --> 00:12:25,360
Also the collection list has
150

151
00:12:25,360 --> 00:12:26,920
a Sort Order applied to it.
151

152
00:12:26,920 --> 00:12:28,780
I've set it to the Newest to Oldest,
152

153
00:12:28,780 --> 00:12:32,110
based on last time the CMS item was updated.
153

154
00:12:32,110 --> 00:12:35,660
If you want to change this Sort Order to something else, you can do so here.
154

155
00:12:35,740 --> 00:12:37,560
Like Oldest to Newest maybe.
155

156
00:12:37,630 --> 00:12:40,450
Well, that's all the important things you need to know about this site.
156

157
00:12:40,450 --> 00:12:42,550
If you get stuck, let me know and I'll help you out.