1
00:00:00,000 --> 00:00:02,610
Tudo bem, agora vamos em frente e

2
00:00:02,610 --> 00:00:05,760
construir o cabeçalho
 para o nosso site. 

3
00:00:05,760 --> 00:00:08,870
E isso é exatamente o que
 parece agora,

4
00:00:08,865 --> 00:00:11,165
e não
 parece nada bom. 

5
00:00:11,160 --> 00:00:13,620
Isso é o que estamos
 tentando realizar. 

6
00:00:13,620 --> 00:00:14,790
Você pode ver o
 cabeçalho aqui,
 temos

7
00:00:14,790 --> 00:00:16,430
o logotipo à esquerda
 e,

8
00:00:16,425 --> 00:00:19,415
em seguida, temos o menu
 principal à direita. 

9
00:00:19,410 --> 00:00:21,140
No entanto,

10
00:00:21,135 --> 00:00:23,855
mostre algo como se eu
 fosse para outra página,

11
00:00:23,850 --> 00:00:26,300
digamos que a
 página Sobre como exemplo,

12
00:00:26,295 --> 00:00:28,955
aqui você pode ver que
 o cabeçalho é diferente. 

13
00:00:28,950 --> 00:00:31,490
Este tem um fundo preto,

14
00:00:31,485 --> 00:00:33,455
enquanto o cabeçalho na

15
00:00:33,450 --> 00:00:36,210
página inicial não tem
 nenhum fundo,

16
00:00:36,210 --> 00:00:39,150
é simplesmente mesclado com
 a imagem de fundo aqui,

17
00:00:39,150 --> 00:00:44,830
basicamente, precisamos criar
 82 cabeçalhos diferentes. 

18
00:00:44,825 --> 00:00:47,605
Um especificamente para a
 página inicial e depois o

19
00:00:47,600 --> 00:00:50,780
outro para o resto de nossas páginas. 

20
00:00:50,779 --> 00:00:52,359
Agora, como fazemos isso? 

21
00:00:52,355 --> 00:00:53,845
Antes de mostrar isso,

22
00:00:53,840 --> 00:00:57,250
deixe-me arrastar o site de
 demonstração para longe. 

23
00:00:57,245 --> 00:00:58,825
Agora, antes de mostrar
 como fazer isso,

24
00:00:58,820 --> 00:01:00,130
quero mostrar outra
 coisa. 

25
00:01:00,125 --> 00:01:02,815
Se eu fosse para
 Editar com Elementor,

26
00:01:02,810 --> 00:01:05,050
fui para as configurações do site. 

27
00:01:05,045 --> 00:01:06,715
Além de poder definir

28
00:01:06,710 --> 00:01:09,700
seus telefones globais e
 suas cores e tudo mais,

29
00:01:09,695 --> 00:01:12,085
você também pode fazer alterações

30
00:01:12,080 --> 00:01:15,770
identidade
 do site
 aqui, temos Configurações. 

31
00:01:15,770 --> 00:01:17,540
Se eu clicar dentro
 da densidade aqui,

32
00:01:17,540 --> 00:01:19,520
também
 podemos alterar o nome do site. 

33
00:01:19,520 --> 00:01:21,800
Vou chamar
 minha viagem de passaporte. 

34
00:01:21,800 --> 00:01:23,620
Esse é o nome do site. 

35
00:01:23,615 --> 00:01:28,865
E então o slogan será
 quando viajar encontrar aventura. 

36
00:01:28,865 --> 00:01:33,655
Para o logotipo, vou
 escolher o logotipo aqui. 

37
00:01:33,650 --> 00:01:35,830
Vamos inserir esse. 

38
00:01:35,825 --> 00:01:38,245
E então, para o Phi de ícone,

39
00:01:38,240 --> 00:01:39,830
vou escolher a
 imagem de TI com a que

40
00:01:39,830 --> 00:01:41,720
o fundo verde. 

41
00:01:41,720 --> 00:01:43,300
Vou inserir isso. 

42
00:01:43,295 --> 00:01:46,295
E lá vai você,
 temos a identidade do nosso site. 

43
00:01:46,295 --> 00:01:48,745
Agora você também pode
 vir aqui para o

44
00:01:48,740 --> 00:01:51,980
cabeçalho e fazer diferentes tipos

45
00:01:51,980 --> 00:01:55,250
de alterações, você pode
 optar por ocultar o logotipo,

46
00:01:55,250 --> 00:01:58,220
mostrar o slogan, aumentar

47
00:01:58,220 --> 00:01:59,510
a largura do conteúdo ou reduzir

48
00:01:59,510 --> 00:02:01,240
a largura do conteúdo
 depende de você. 

49
00:02:01,235 --> 00:02:04,315
Mas como vamos
 criar nossos próprios cabeçalhos personalizados,

50
00:02:04,310 --> 00:02:06,710
não
 precisamos mudar
 nada aqui. 

51
00:02:06,710 --> 00:02:07,910
Então, vou seguir
 em frente agora e simplesmente

52
00:02:07,910 --> 00:02:10,010
atualizar. E então
 vou verificar isso. 

53
00:02:10,010 --> 00:02:16,330
Certo, vou voltar para o
 backend Sair to Dashboard. 

54
00:02:16,325 --> 00:02:18,845
E agora vamos criar nosso cabeçalho. 

55
00:02:18,845 --> 00:02:20,795
Vou vir
 aqui para nossos pais. 

56
00:02:20,795 --> 00:02:23,215
Aqui você verá elementos ou
 alimentos prontos são construtores. 

57
00:02:23,210 --> 00:02:25,810
Isso é do plugin. 
Vou clicar lá. 

58
00:02:25,805 --> 00:02:28,265
E agora vou
 clicar em Adicionar novo. 

59
00:02:28,265 --> 00:02:34,175
E agora vamos chamar isso
 de cabeçalho da página inicial. 

60
00:02:34,174 --> 00:02:37,404
Então aqui, onde você
 tem o tipo de modelo. 

61
00:02:37,400 --> 00:02:39,100
Vamos escolher o cabeçalho,

62
00:02:39,095 --> 00:02:41,455
e então podemos escolher, ok,

63
00:02:41,450 --> 00:02:43,840
onde gostaríamos de
 exibir esse cabeçalho? 

64
00:02:43,835 --> 00:02:46,315
Como será especificamente
 para a primeira página,

65
00:02:46,310 --> 00:02:49,250
vou escolher aqui
 você tem alvos específicos. 

66
00:02:49,250 --> 00:02:51,620
Vou escolher páginas
 específicas e

67
00:02:51,620 --> 00:02:54,820
convidar aqui
 simplesmente digitar em casa. 

68
00:02:54,815 --> 00:02:56,075
E lá vai você. 

69
00:02:56,075 --> 00:02:57,665
Agora, neste
 cabeçalho específico,
 só será

70
00:02:57,665 --> 00:02:59,945
exibido
 na página inicial. 

71
00:02:59,945 --> 00:03:02,095
E, em seguida, para funções de usuário
 aqui, você pode escolher, ok,

72
00:03:02,090 --> 00:03:05,150
talvez você queira exibir
 esses cabeçalho apenas para

73
00:03:05,150 --> 00:03:06,920
que os usuários conectados sejam usuários desconectados

74
00:03:06,920 --> 00:03:09,080
ou edições ou você tem
 muita flexibilidade. 

75
00:03:09,080 --> 00:03:11,120
Só vou manter
 isso em branco porque
 queríamos

76
00:03:11,120 --> 00:03:13,250
ser para todos. 

77
00:03:13,250 --> 00:03:15,710
Agora aqui, você tem

78
00:03:15,710 --> 00:03:18,860
esse
 layout habilitado para opção para nós modelo. 

79
00:03:18,860 --> 00:03:21,350
Agora, a coisa com o Elementor
 é que, além

80
00:03:21,350 --> 00:03:24,160
do modelo padrão e
 um fornecido pelo seu tema,

81
00:03:24,155 --> 00:03:26,575
elementos, que oferece
 dois modelos personalizados. 

82
00:03:26,570 --> 00:03:30,140
Um deles é chamado de dados da
 tela elementar,
 largura total,

83
00:03:30,140 --> 00:03:31,400
mais simples, significa que

84
00:03:31,400 --> 00:03:34,850
seu conteúdo pode se estender até
 as bordas da tela. 

85
00:03:34,850 --> 00:03:36,410
Então, basicamente, vai a largura
 total que

86
00:03:36,410 --> 00:03:38,230
eu sou como se nenhuma margem
 fosse padrão. 

87
00:03:38,225 --> 00:03:40,075
Elemental Canada como
 implementos que você

88
00:03:40,070 --> 00:03:41,980
não terá nenhum
 cabeçalho ou rodapé. 

89
00:03:41,975 --> 00:03:45,595
É basicamente um
 elemento em branco ou nossos modelos,

90
00:03:45,590 --> 00:03:47,420
não
 vamos andar
 com um modelo de tela. 

91
00:03:47,420 --> 00:03:50,260
Portanto, realmente não há necessidade de
 habilitar esse layout,

92
00:03:50,255 --> 00:03:51,685
mas vou
 escolher os elementos

93
00:03:51,680 --> 00:03:53,740
do modelo de largura total. 

94
00:03:53,735 --> 00:03:56,315
Vamos em frente agora
 e clique em Publicar. 

95
00:03:56,315 --> 00:04:00,865
Agora vou clicar
 em editar com o Elementor. 

96
00:04:00,860 --> 00:04:03,440
Então, o que estamos tentando
 alcançar aqui é isso,

97
00:04:03,440 --> 00:04:05,500
deixe-me trazer de volta o site de demonstração. 

98
00:04:05,495 --> 00:04:08,545
Basicamente, será
 uma seção com duas colunas. 

99
00:04:08,540 --> 00:04:11,510
O da esquerda, a
 coluna esquerda teremos o logotipo,

100
00:04:11,510 --> 00:04:13,010
enquanto a coluna à direita,

101
00:04:13,010 --> 00:04:16,160
teremos o
 menu principal e também queremos que

102
00:04:16,160 --> 00:04:18,230
a coluna na luz

103
00:04:18,230 --> 00:04:20,990
que contém o menu
 principal tenha mais largura . 

104
00:04:20,990 --> 00:04:21,740
Então confira isso. 

105
00:04:21,740 --> 00:04:23,420
Certo, aqui,
 vou

106
00:04:23,420 --> 00:04:25,060
clicar no botão
 Plus aqui. 

107
00:04:25,055 --> 00:04:27,425
E agora podemos escolher
 nossa estrutura. 

108
00:04:27,425 --> 00:04:29,935
E eu vou escolher
 esta divisão aqui. 

109
00:04:29,930 --> 00:04:31,390
Esta terá,

110
00:04:31,385 --> 00:04:35,435
a primeira coluna terá um
 terço da seção inteira,

111
00:04:35,435 --> 00:04:38,545
enquanto a segunda coluna
 terá dois terços. 

112
00:04:38,540 --> 00:04:42,170
Então, aqui, já que estamos
 editando a seção,

113
00:04:42,170 --> 00:04:44,830
como você pode ver, para
 a largura do conteúdo,

114
00:04:44,825 --> 00:04:47,605
poderíamos realmente ir a toda a
 largura se você quisesse. 

115
00:04:47,600 --> 00:04:50,120
Mas vou usar
 a caixa e vou

116
00:04:50,120 --> 00:04:54,310
escolher 1240 pixels. 

117
00:04:54,305 --> 00:04:56,215
Esta é apenas minha preferência
 pessoal. 

118
00:04:56,210 --> 00:04:58,510
Eu adorei 1240 pixels. 

119
00:04:58,505 --> 00:05:01,825
Agora, aqui para a
 primeira coluna,

120
00:05:01,820 --> 00:05:03,160
vou clicar dentro. 

121
00:05:03,155 --> 00:05:06,095
Vou rolar
 todo o caminho até aqui. 

122
00:05:06,095 --> 00:05:09,035
E estamos
 tentando adicionar o logotipo. 

123
00:05:09,035 --> 00:05:12,365
Então, vou adicionar o logotipo do site. 

124
00:05:12,365 --> 00:05:15,415
Clique em, solte-o para dentro. 

125
00:05:15,410 --> 00:05:18,010
E agora temos nosso logotipo. 

126
00:05:18,005 --> 00:05:20,515
Agora você pode ver
 porque o logotipo tem

127
00:05:20,510 --> 00:05:22,610
texto
 branco e este é
 um fundo branco. 

128
00:05:22,610 --> 00:05:23,810
Mas apenas tenha paciência comigo. 

129
00:05:23,810 --> 00:05:25,630
Certo, vou escolher. 

130
00:05:25,625 --> 00:05:29,995
O tamanho da imagem aqui eu
 vou ficar cheio por enquanto. 

131
00:05:29,990 --> 00:05:32,360
Em seguida, vamos seguir em frente e

132
00:05:32,360 --> 00:05:34,940
clicar no botão
 Editar desta seção. 

133
00:05:34,940 --> 00:05:36,740
Tudo bem, então eu
 cliquei lá. 

134
00:05:36,740 --> 00:05:38,550
Vou voltar ao estilo. 

135
00:05:38,554 --> 00:05:40,254
E então ele foi para onde
 você começou a digitar. 

136
00:05:40,250 --> 00:05:42,380
Vou escolher o clássico. 

137
00:05:42,380 --> 00:05:46,150
Agora vou escolher
 a cor preta. 

138
00:05:46,145 --> 00:05:49,615
Então agora você pode realmente
 ver o logotipo, certo? Certo. 

139
00:05:49,610 --> 00:05:52,190
Agora vamos para
 a segunda coluna. 

140
00:05:52,190 --> 00:05:55,760
Vamos adicionar nossos elementos de
 navegação. 

141
00:05:55,760 --> 00:05:57,200
Então, escrevendo
 no menu de navegação,

142
00:05:57,200 --> 00:05:59,720
clique em arrastar, drogue isso dentro. 

143
00:05:59,720 --> 00:06:02,660
E então você pode ver o
 menu principal selecionado por padrão. 

144
00:06:02,660 --> 00:06:06,110
No entanto, quando é para fazer um
 grande número de alterações,

145
00:06:06,110 --> 00:06:08,500
observe aqui que
 permanecerá no menu principal. 

146
00:06:08,495 --> 00:06:11,245
O texto está em
 letras maiúsculas, está em branco. 

147
00:06:11,240 --> 00:06:14,840
Também está alinhado à
 direita e também no centro. 

148
00:06:14,840 --> 00:06:16,540
Então, precisamos fazer por finas. 

149
00:06:16,535 --> 00:06:19,225
Vamos voltar aqui. 
A primeira coisa que vou fazer

150
00:06:19,220 --> 00:06:22,190
é ao editar o menu de
 navegação aqui,

151
00:06:22,190 --> 00:06:24,830
você tem layout clicando lá. 

152
00:06:24,830 --> 00:06:28,490
E agora vamos
 escolher alinhar à direita. 

153
00:06:28,490 --> 00:06:30,980
Como você pode ver
 agora, está à direita. 

154
00:06:30,980 --> 00:06:33,550
Agora vamos passar para o estilo. 

155
00:06:33,545 --> 00:06:36,865
E vamos vir
 aqui para tipografia. 

156
00:06:36,860 --> 00:06:38,800
Clique no botão Editar. 

157
00:06:38,795 --> 00:06:42,185
Com transformação não peluda,
 escolha maiúsculas. 

158
00:06:42,185 --> 00:06:43,045
Certo? 

159
00:06:43,040 --> 00:06:45,070
E, em seguida, para a cor do texto,

160
00:06:45,065 --> 00:06:47,425
vamos clicar no ícone
 global
 ali

161
00:06:47,420 --> 00:06:49,990
e, em seguida, escolher
 principalmente para Branco. 

162
00:06:49,985 --> 00:06:50,815
Bom. 

163
00:06:50,810 --> 00:06:52,940
Mas agora, como alinhamos

164
00:06:52,940 --> 00:06:56,240
os itens do menu no
 meio verticalmente? 

165
00:06:56,240 --> 00:06:58,070
O que você quer fazer aqui é
 clicar no

166
00:06:58,070 --> 00:07:00,130
Editar potência
 da coluna aqui,

167
00:07:00,125 --> 00:07:02,395
neste botão específico
 aqui, você clica lá. 

168
00:07:02,390 --> 00:07:05,240
E agora aqui você pode ver que
 temos alinhamento vertical. 

169
00:07:05,240 --> 00:07:07,490
Vamos escolher o meio. 

170
00:07:07,490 --> 00:07:08,800
Lá vai você. 

171
00:07:08,795 --> 00:07:10,255
É isso. 

172
00:07:10,250 --> 00:07:12,430
Mas ainda não terminamos. 

173
00:07:12,425 --> 00:07:13,885
Para o logotipo. 

174
00:07:13,880 --> 00:07:17,360
Vamos clicar no
 botão Editar para o logotipo do site. 

175
00:07:17,360 --> 00:07:19,550
E então o alinhamento aqui,

176
00:07:19,550 --> 00:07:21,710
vamos para a esquerda. 

177
00:07:21,710 --> 00:07:24,050
Como se você não conseguisse ver
 a diferença ainda,

178
00:07:24,050 --> 00:07:25,580
mas apenas fique comigo. 

179
00:07:25,580 --> 00:07:27,080
Vamos escolher
 esse para a esquerda. 

180
00:07:27,080 --> 00:07:30,780
Ok, vamos em frente
 agora e atualizamos. 

181
00:07:31,180 --> 00:07:34,390
Agora vamos dar uma
 olhada no que temos. 

182
00:07:34,385 --> 00:07:36,565
Veja a página. 

183
00:07:36,560 --> 00:07:38,480
E lá vai você. 

184
00:07:38,480 --> 00:07:39,500
Agora você pode ver

185
00:07:39,500 --> 00:07:43,130
nossa página inicial tem esse cabeçalho
 específico aqui,

186
00:07:43,130 --> 00:07:44,720
mas depois evolui para ir para,

187
00:07:44,720 --> 00:07:47,110
digamos que a
 página Sobre como exemplo,

188
00:07:47,105 --> 00:07:50,545
você pode ver que não
 temos esse cabeçalho. 

189
00:07:50,540 --> 00:07:53,930
Se quiser ir para
 a página de contato. 

190
00:07:53,930 --> 00:07:57,230
Como exemplo, você pode ver que não
 temos esse cabeçalho. 

191
00:07:57,230 --> 00:07:58,730
Então, aqui,

192
00:07:58,730 --> 00:08:01,660
a página inicial agora tem

193
00:08:01,655 --> 00:08:03,925
esse folheto específico
 com o fundo preto,
 o

194
00:08:03,920 --> 00:08:07,960
logotipo e, em seguida,
 os itens do menu. 

195
00:08:07,955 --> 00:08:09,625
Agora, para arredondar isso,
 eu realmente vou
 fazer

196
00:08:09,620 --> 00:08:11,930
algumas mudanças. 

197
00:08:11,930 --> 00:08:14,570
Vamos voltar para a seção. 

198
00:08:14,570 --> 00:08:15,890
Certo, e eu sei que disse que

199
00:08:15,890 --> 00:08:18,670
a largura do conteúdo era de 1240 pixels,

200
00:08:18,665 --> 00:08:20,315
mas fiz alguns testes
 adicionais,

201
00:08:20,315 --> 00:08:23,485
e acho que é melhor
 irmos com toda a largura. 

202
00:08:23,480 --> 00:08:25,930
Então, vamos com largura
 total por enquanto. 

203
00:08:25,925 --> 00:08:28,765
Então, esta coluna, a
 que está segurando o logotipo,

204
00:08:28,760 --> 00:08:36,030
vamos
 reduzi-lo para 2525% por cento. 

205
00:08:36,034 --> 00:08:41,554
Enquanto a coluna segurando os itens
 manuais terá 75%. 

206
00:08:41,555 --> 00:08:43,585
Então, vamos também fazer
 uma alteração no logotipo. 

207
00:08:43,580 --> 00:08:45,250
Vou clicar em Editar logotipo. 

208
00:08:45,245 --> 00:08:46,925
Vamos para o estilo. 

209
00:08:46,925 --> 00:08:48,235
E então, para a largura máxima,

210
00:08:48,230 --> 00:08:51,460
vamos definir isso para 75%. 

211
00:08:51,455 --> 00:08:54,595
E uma pergunta que você pode ter é

212
00:08:54,590 --> 00:08:59,120
por que, obviamente, a largura
 máxima e não a largura real. 

213
00:08:59,120 --> 00:09:00,230
Aqui está a coisa. 

214
00:09:00,230 --> 00:09:02,860
Quando você define a
 largura do logotipo,

215
00:09:02,855 --> 00:09:05,425
o logotipo sempre
 terá essa largura. 

216
00:09:05,420 --> 00:09:08,190
Nós sem Deus, do tamanho da tela. 

217
00:09:08,194 --> 00:09:09,954
Você está trabalhando com largura máxima. 

218
00:09:09,950 --> 00:09:11,320
Você está basicamente dizendo: Ei,

219
00:09:11,315 --> 00:09:14,725
o logotipo nunca deve
 exceder essa largura. 

220
00:09:14,720 --> 00:09:17,240
Em seguida, em situações em que
 o tamanho da tela não é

221
00:09:17,240 --> 00:09:19,990
grande
 o suficiente documentado, a largura total do logotipo

222
00:09:19,985 --> 00:09:21,145
reduz o tamanho da

223
00:09:21,140 --> 00:09:25,670
largura
 basicamente máxima é muito
 melhor para o design responsivo. 

224
00:09:25,670 --> 00:09:27,890
E você sempre
 quer ser responsivo. 

225
00:09:27,890 --> 00:09:30,980
Então, vamos definir
 isso para 75 pixels. 

226
00:09:30,980 --> 00:09:33,620
E agora, se atualizarmos,

227
00:09:33,620 --> 00:09:37,000
se dermos uma olhada no nosso cabeçalho,

228
00:09:36,995 --> 00:09:38,815
você pode ver
 agora que ele se parece

229
00:09:38,810 --> 00:09:40,490
muito parecido com o que
 temos

230
00:09:40,490 --> 00:09:44,120
aqui
 no site de demonstração. 

231
00:09:44,119 --> 00:09:47,239
A última coisa a fazer
 é
 duplicar

232
00:09:47,240 --> 00:09:51,980
esse cabeçalho
 para o segundo cabeçalho. 

233
00:09:51,980 --> 00:09:53,480
Então, basicamente, ele tem
 o que vamos fazer. 

234
00:09:53,480 --> 00:09:56,070
Ok, bem, vou
 voltar para o backend. 

235
00:09:56,440 --> 00:10:00,350
Em vez de criar
 o segundo cabeçalho

236
00:10:00,350 --> 00:10:02,020
para o resto do site,

237
00:10:02,015 --> 00:10:04,355
simplesmente
 entraremos
 aqui e, em seguida, você verá

238
00:10:04,355 --> 00:10:05,995
duplicatas da