1
00:00:00,000 --> 00:00:03,890
Bem-vindo à segunda parte de redesenhar
 o cabeçalho responsivo. 

2
00:00:03,885 --> 00:00:06,785
E esqueci de mencionar
 em um vídeo anterior

3
00:00:06,780 --> 00:00:10,280
quando mudei os sinais
 dos itens do menu aqui,

4
00:00:10,275 --> 00:00:11,945
por algum motivo parece ter
 afetado a versão para

5
00:00:11,940 --> 00:00:13,410
desktop. 

6
00:00:13,410 --> 00:00:14,610
Você pode ver agora que

7
00:00:14,610 --> 00:00:17,610
os textos e não
 mais maiúsculas,

8
00:00:17,610 --> 00:00:19,110
se algo assim acontecer,

9
00:00:19,110 --> 00:00:23,720
basta voltar a
 editar o cabeçalho da página inicial. 

10
00:00:23,715 --> 00:00:26,075
O que você quer fazer
 é simplesmente ir
 para

11
00:00:26,070 --> 00:00:28,020
o elemento do menu. 

12
00:00:28,020 --> 00:00:30,650
Então, vou clicar em
 muitos elementos aqui. 

13
00:00:30,645 --> 00:00:34,225
Vá para Estilo, vá para
 tipografia aqui

14
00:00:34,225 --> 00:00:36,235
e basta clicar nela. 

15
00:00:36,230 --> 00:00:37,520
Isso é tudo que você pode
 ver aqui. 

16
00:00:37,520 --> 00:00:38,810
Diz Transformar em maiúsculas. 

17
00:00:38,810 --> 00:00:42,020
Então estamos basicamente
 apenas reafirmando que,

18
00:00:42,020 --> 00:00:45,260
Ei, queremos que o
 Vamos ser maiúsculas. 

19
00:00:45,260 --> 00:00:47,480
Então, vou avançar as atualizações

20
00:00:47,480 --> 00:00:51,170
novamente e vamos
 voltar, ver a página. 

21
00:00:51,170 --> 00:00:54,620
Vamos para a página inicial. 

22
00:00:54,620 --> 00:00:56,420
Certo. E lá vai você. 

23
00:00:56,420 --> 00:00:59,870
Então, honestamente, não tenho
 certeza por que isso acontece,

24
00:00:59,870 --> 00:01:02,090
mas no caso de
 acontecer com você,

25
00:01:02,090 --> 00:01:04,900
basta simplesmente fazer o que
 acabei de fazer. Certo. 

26
00:01:04,895 --> 00:01:07,795
Agora, anteriormente,
 conseguimos fazer com

27
00:01:07,790 --> 00:01:12,380
a visualização do tablet fosse
 assim,

28
00:01:12,380 --> 00:01:14,180
o que não é nada ruim. 

29
00:01:14,180 --> 00:01:16,090
Mas agora é hora
 de darmos uma
 olhada

30
00:01:16,085 --> 00:01:18,145
na visualização móvel. 

31
00:01:18,140 --> 00:01:20,120
E você pode ver
 agora que parece muito

32
00:01:20,120 --> 00:01:22,420
ruim é
 muito espaço
 em branco

33
00:01:22,415 --> 00:01:26,485
e o logotipo e o menu,
 o menu

34
00:01:26,480 --> 00:01:28,910
de hambúrguer online,

35
00:01:28,910 --> 00:01:31,310
mas precisamos
 consertar o espaço em branco. 

36
00:01:31,309 --> 00:01:33,589
Agora, na verdade, esta é
 a segunda vez que estou

37
00:01:33,590 --> 00:01:34,850
gravando esse vídeo em particular

38
00:01:34,850 --> 00:01:36,650
porque no anterior,

39
00:01:36,650 --> 00:01:38,470
eu realmente consegui consertar

40
00:01:38,465 --> 00:01:41,545
o cabeçalho do celular para ter exatamente
 o mesmo tipo de

41
00:01:41,540 --> 00:01:43,400
estilo lá você terá

42
00:01:43,400 --> 00:01:46,280
o banner se misturando
 em segundo plano. 

43
00:01:46,280 --> 00:01:51,770
No entanto, decidi ir
 com uma rota diferente e

44
00:01:51,770 --> 00:01:56,330
em vez disso, usar o mesmo tipo

45
00:01:56,330 --> 00:01:59,630
de cabeçalho que temos para
 o resto das páginas,

46
00:01:59,630 --> 00:02:02,580
como aquele aqui onde você
 tem o fundo preto,

47
00:02:02,584 --> 00:02:05,724
decidi usá-los cabeçalho para

48
00:02:05,720 --> 00:02:09,500
o cabeçalho da
 página inicial na visualização móvel. 

49
00:02:09,499 --> 00:02:11,779
A razão é porque
 eu realmente queria

50
00:02:11,780 --> 00:02:13,430
usar essa oportunidade para mostrar

51
00:02:13,430 --> 00:02:15,680
um truque muito legal que você

52
00:02:15,680 --> 00:02:18,410
pode usar sempre que estiver trabalhando
 com design responsivo. 

53
00:02:18,410 --> 00:02:21,100
Vamos voltar para a página inicial. 

54
00:02:21,095 --> 00:02:23,395
E eu quero
 te mostrar algo, certo? 

55
00:02:23,390 --> 00:02:25,130
Vou para Editar com

56
00:02:25,130 --> 00:02:28,010
Elementor editando
 o cabeçalho da página inicial. 

57
00:02:28,010 --> 00:02:31,660
Aqui está a coisa. Ok,
 vou seguir em frente

58
00:02:31,655 --> 00:02:36,175
e duplicar esta seção de
 cabeçalho. 

59
00:02:36,170 --> 00:02:39,520
Vou clicar com o botão
 direito do mouse aqui. Duplicados. 

60
00:02:39,515 --> 00:02:42,125
Basicamente, agora
 temos dois cabeçalhos. 

61
00:02:42,125 --> 00:02:45,355
A diferença é que
 vou entrar aqui,

62
00:02:45,350 --> 00:02:47,680
ir para esta seção Editar. 

63
00:02:47,675 --> 00:02:49,725
Vou ao estilo,

64
00:02:49,729 --> 00:02:53,959
tipo de
 fundo,
 dar-lhe uma cor de preto. 

65
00:02:53,960 --> 00:02:57,920
Ok, agora, confira isso. 

66
00:02:57,920 --> 00:02:59,740
Vou para o Advanced,

67
00:02:59,735 --> 00:03:02,755
vir aqui para Responsive
 e,

68
00:03:02,750 --> 00:03:06,970
em seguida, convidar aqui você
 tem opções de visibilidade. 

69
00:03:06,965 --> 00:03:09,205
Quando exatamente
 você gostaria de mostrar
 esta

70
00:03:09,200 --> 00:03:11,440
seção com base
 no tamanho de uma tela? 

71
00:03:11,435 --> 00:03:13,205
Vou escondê-lo na área de trabalho. 

72
00:03:13,205 --> 00:03:14,465
Sim. 

73
00:03:14,465 --> 00:03:15,965
Ainda não queremos
 gravá-lo na área de trabalho

74
00:03:15,965 --> 00:03:17,155
porque
 ainda estamos usando

75
00:03:17,150 --> 00:03:19,790
o cabeçalho da página inicial no tablet. 

76
00:03:19,790 --> 00:03:21,910
Também queremos
 escondê-lo até isso. 

77
00:03:21,905 --> 00:03:23,825
Mas então queremos mostrá-lo

78
00:03:23,825 --> 00:03:26,855
quando chegar à visualização móvel. 

79
00:03:26,855 --> 00:03:29,995
Como tal, agora vou para o

80
00:03:29,990 --> 00:03:32,990
nosso cabeçalho original
 e fazer o contrário. 

81
00:03:32,990 --> 00:03:36,370
Vá para avançado,
 acalme-se hetero responsivo
 e,

82
00:03:36,365 --> 00:03:38,605
em seguida, esconda na área de trabalho. 

83
00:03:38,600 --> 00:03:39,920
Ninguém quer mostrar,

84
00:03:39,920 --> 00:03:41,260
queremos mostrar até isso. 

85
00:03:41,255 --> 00:03:44,495
Mas quando eu for para Hide on Mobile,

86
00:03:44,495 --> 00:03:47,155
deixe-me ir em frente e agora atualiza. 

87
00:03:47,150 --> 00:03:48,790
E dê uma olhada nisso. 

88
00:03:48,785 --> 00:03:51,155
Vamos em frente agora,
 veja a página. 

89
00:03:51,155 --> 00:03:53,855
Vamos para a página inicial. 

90
00:03:53,920 --> 00:03:57,560
Ok, então você pode ver que
 ainda temos o mesmo cabeçalho. 

91
00:03:57,560 --> 00:04:00,950
Mas agora, para a visualização do tablet,

92
00:04:00,950 --> 00:04:02,720
você pode ver
 que ainda temos o mesmo cabeçalho,

93
00:04:02,720 --> 00:04:04,550
o mesmo cabeçalho
 no mesmo cabeçalho. 

94
00:04:04,550 --> 00:04:08,890
Agora, uma vez que chega
 à visualização móvel,

95
00:04:08,885 --> 00:04:12,175
agora
 temos o
 fundo preto com a

96
00:04:12,170 --> 00:04:14,120
ideia do logotipo
 do centro e, em
 seguida, o
 menu de

97
00:04:14,120 --> 00:04:16,480
hambúrguer lá embaixo. 

98
00:04:16,475 --> 00:04:18,415
E então temos o banner da
 página inicial. 

99
00:04:18,410 --> 00:04:19,640
E lá vai você. 

100
00:04:19,640 --> 00:04:21,620
Portanto, esse é um truque que você

101
00:04:21,620 --> 00:04:23,900
pode usar sempre que estiver trabalhando
 com design responsivo. 

102
00:04:23,900 --> 00:04:25,340
Você pode optar por mostrar

103
00:04:25,340 --> 00:04:27,920
uma seção específica
 especificamente na área de trabalho. 

104
00:04:27,920 --> 00:04:30,320
E você pode optar por
 mostrar uma seção específica

105
00:04:30,320 --> 00:04:34,070
especificamente, talvez apenas
 no tablet ou no celular. 

106
00:04:34,070 --> 00:04:36,760
Uma pergunta que eu poderia ter
 ainda está bem,

107
00:04:36,755 --> 00:04:39,455
por que eu simplesmente não
 dupliquei

108
00:04:39,455 --> 00:04:44,695
esse
 cabeçalho específico e, em seguida, simplesmente usei

109
00:04:44,690 --> 00:04:48,970
esse cabeçalho na página inicial
 e simplesmente o

110
00:04:48,965 --> 00:04:51,175
escondi

111
00:04:51,170 --> 00:04:53,950
na área de trabalho e tablet e
, em seguida, exibidos no celular. 

112
00:04:53,945 --> 00:04:55,795
Você pode ter duas cabeças

113
00:04:55,790 --> 00:04:59,600
exibidas em
 qualquer página com elementar,

114
00:04:59,600 --> 00:05:01,840
pelo
 menos é assim que
 esse plug-in funciona. 

115
00:05:01,835 --> 00:05:03,625
Ok, então se você está pensando,

116
00:05:03,620 --> 00:05:05,060
vou simplesmente
 duplicar esse cabeçalho

117
00:05:05,060 --> 00:05:06,710
e mostrar dois cabeçalhos
 na mesma página,

118
00:05:06,710 --> 00:05:08,620
esconder um em desktops ou
 eles não querem um celular,

119
00:05:08,615 --> 00:05:10,835
não vai funcionar
 porque na verdade, tentei. 

120
00:05:10,835 --> 00:05:14,585
É por isso que eu tive que ir
 para o cabeçalho da página inicial. 

121
00:05:14,585 --> 00:05:16,015
E, em seguida, nesse mesmo cabeçalho,

122
00:05:16,010 --> 00:05:18,970
crie uma segunda
 seção que agora será

123
00:05:18,965 --> 00:05:22,915
exibida especificamente
 na visualização móvel. 

124
00:05:22,910 --> 00:05:24,280
Mas não terminamos. 

125
00:05:24,275 --> 00:05:26,035
Na verdade, quero
 fazer outra coisa. 

126
00:05:26,030 --> 00:05:29,450
Veja, você nem sempre tem que
 ir com este tomate. 

127
00:05:29,450 --> 00:05:32,150
Você tem o logotipo e
 o centro no topo
 e, em seguida,

128
00:05:32,150 --> 00:05:34,880
o
 menu de hambúrguer ou abaixo dele. 

129
00:05:34,880 --> 00:05:36,770
Ainda podemos usar
 duas colunas aqui. 

130
00:05:36,770 --> 00:05:39,950
Como fazer logon à esquerda e
 ter o menu na luz. 

131
00:05:39,950 --> 00:05:41,110
Deixe-nos fazer isso. 

132
00:05:41,105 --> 00:05:43,075
Vou voltar a
 editar com Elementor,

133
00:05:43,070 --> 00:05:48,730
o cabeçalho da página inicial e

134
00:05:48,725 --> 00:05:53,135
paletes com para esta página
 carregar, ok, alguma edição. 

135
00:05:53,134 --> 00:05:55,054
O segundo cabeçalho agora. 

136
00:05:55,055 --> 00:05:57,625
Mas vou mudar
 agora para o modo responsivo. 

137
00:05:57,620 --> 00:06:00,010
Vamos para a visualização móvel. 

138
00:06:00,005 --> 00:06:04,805
Tudo o Kn tem exatamente o que
 temos. Bem aqui. 

139
00:06:04,805 --> 00:06:05,635
Vou fazer isso. 

140
00:06:05,630 --> 00:06:07,070
Vou clicar na coluna

141
00:06:07,070 --> 00:06:09,200
segurando o logotipo. Bem aqui. 

142
00:06:09,200 --> 00:06:11,380
Vou dizer 50. 

143
00:06:11,375 --> 00:06:13,405
Então eu irei aqui para
 a

144
00:06:13,400 --> 00:06:15,520
coluna do logotipo
 segurando o logotipo,

145
00:06:15,515 --> 00:06:17,215
desculpe, tudo
 no menu também. 

146
00:06:17,210 --> 00:06:19,700
E então mude o para 50
 também

147
00:06:19,700 --> 00:06:22,820
para que eles
 fiquem lado a lado. 

148
00:06:22,820 --> 00:06:24,800
Agora, vamos fazer algumas alterações. 

149
00:06:24,800 --> 00:06:27,020
Vou clicar
 no menu Editar,
 ícone,

150
00:06:27,020 --> 00:06:29,750
descer, acessar o layout. 

151
00:06:29,750 --> 00:06:31,880
Vamos tentar alinhar com o branco. 

152
00:06:31,879 --> 00:06:34,329
E então
 vamos torná-lo grande. 

153
00:06:34,325 --> 00:06:36,205
Vamos passar para o estilo. 

154
00:06:36,200 --> 00:06:37,720
Aqui embaixo você terá

155
00:06:37,715 --> 00:06:40,615
o gatilho do menu e clique no ícone de
 fechamento dentro. 

156
00:06:40,610 --> 00:06:42,140
E agora Tamanho do Ícone,
 vou fazer

157
00:06:42,140 --> 00:06:45,730
este acima de 40 pixels. 

158
00:06:45,725 --> 00:06:47,395
Keda deve ser grande o suficiente. 

159
00:06:47,390 --> 00:06:48,620
E então, para o logotipo,

160
00:06:48,620 --> 00:06:50,530
vamos editar o logotipo também. 

161
00:06:50,525 --> 00:06:52,465
O tamanho da imagem está definido como cheio,

162
00:06:52,460 --> 00:06:53,750
alinhado à esquerda. 

163
00:06:53,750 --> 00:06:57,080
Vamos ao estilo
 máximo com 100%. 

164
00:06:57,080 --> 00:06:58,930
Certo, vamos em frente agora. 

165
00:06:58,925 --> 00:07:01,805
Atualizações. Na verdade, antes de
 fazermos, vamos segurar. 

166
00:07:01,805 --> 00:07:03,085
Vamos também fazer isso. 

167
00:07:03,080 --> 00:07:05,980
Quando você clica no menu
 de hambúrguer. 

168
00:07:05,975 --> 00:07:07,645
Este vai
 ser o trabalho feito. 

169
00:07:07,640 --> 00:07:10,460
Mas você pode ver agora
 que podemos ver o texto. 

170
00:07:10,460 --> 00:07:12,110
O texto é todo branco,

171
00:07:12,110 --> 00:07:14,270
então precisamos fazer
 algumas alterações aqui. 

172
00:07:14,270 --> 00:07:15,790
Aqui está
 exatamente o que vou fazer. 

173
00:07:15,785 --> 00:07:17,455
Vou cair

174
00:07:17,450 --> 00:07:20,030
no
 menu
 suspenso do sinal aqui. 

175
00:07:20,030 --> 00:07:21,880
E, em seguida, cor de fundo. 

176
00:07:21,875 --> 00:07:23,615
Vamos com preto,

177
00:07:23,615 --> 00:07:26,485
cor de
 texto,
 vamos com branco. 

178
00:07:26,480 --> 00:07:30,080
E isso deve ser isso. 

179
00:07:30,080 --> 00:07:33,370
Não sei por que não o vemos
 aqui ainda, mas está tudo bem. 

180
00:07:33,365 --> 00:07:35,395
Vou seguir em frente as atualizações. 

181
00:07:35,390 --> 00:07:38,910
Vamos voltar, ver a página. 

182
00:07:39,760 --> 00:07:44,350
Volte para a página inicial,
 minimize a janela. 

183
00:07:44,345 --> 00:07:45,685
Tudo bem, então agora
 você pode dizer, Ok,

184
00:07:45,685 --> 00:07:47,195
temos o logotipo à esquerda,

185
00:07:47,195 --> 00:07:48,545
o menu no branco. 

186
00:07:48,545 --> 00:07:51,565
Agora, se clicarmos no menu
 aqui, ele se abre. 

187
00:07:51,560 --> 00:07:56,350
Bobby ainda não consegue ver o
 texto que está interessado. 

188
00:07:56,345 --> 00:07:59,945
Certo, vamos voltar e ver
 o que pode ter acontecido. 

189
00:07:59,945 --> 00:08:03,155
E isso vai
 estar muito interessado. 

190
00:08:03,155 --> 00:08:05,525
Não sei por que não
 vemos os textos. 

191
00:08:05,525 --> 00:08:06,805
Tudo bem. Não se preocupe. 

192
00:08:06,800 --> 00:08:09,500
Vou entrar aqui
 para o modo responsivo,

193
00:08:09,500 --> 00:08:11,110
voltar para o Mobile. 

194
00:08:11,105 --> 00:08:13,195
Clique no menu aqui,

195
00:08:13,190 --> 00:08:14,900
clique no menu suspenso. 

196
00:08:14,900 --> 00:08:17,230
Por que não vemos o texto? 

197
00:08:17,225 --> 00:08:18,805
Vamos para o estilo. 

198
00:08:18,800 --> 00:08:23,840
Vamos descer aqui
 para tipografia e uau,

199
00:08:23,840 --> 00:08:27,530
eu não tenho certeza
 por que o tamanho aqui

200
00:08:27,530 --> 00:08:30,800
em vez de um,
 mas não deve ser um. 

201
00:08:30,800 --> 00:08:34,010
Deve ser um
 pouco maior que um. 

202
00:08:34,010 --> 00:08:36,260
Isso provavelmente é uma
 falha em pixels. 

203
00:08:36,260 --> 00:08:38,000
Então, minhas desculpas, vou
 dizer ao

204
00:08:38,000 --> 00:08:42,110
problema por que eu um pixel,

205
00:08:42,110 --> 00:08:44,510
às vezes sinto que o
 elemento está tentando

206
00:08:44,510 --> 00:08:47,120
me
 impedir de
 fazer bons vídeos. 

207
00:08:47,120 --> 00:08:48,680
Eu, honestamente, não sei o porquê. 

208
00:08:48,680 --> 00:08:49,760
Dizia que não vai pixel. 

209
00:08:49,760 --> 00:08:51,740
Isso é só, isso é
 simplesmente bizarro. 

210
00:08:51,740 --> 00:08:53,990
De qualquer forma, você pode ver que
 pelo menos

211
00:08:53,990 --> 00:08:58,390
os itens do menu
 estão mostrando agora,

212
00:08:58,385 --> 00:09:00,835
Uau, isso é muito,
 muito interessado,

213
00:09:00,830 --> 00:09:02,270
estou dizendo que o web
 design pode ser uma ocupação muito

214
00:09:02,270 --> 00:09:05,120
estranha, muito
 estranha. 

215
00:09:05,120 --> 00:09:06,290
Às vezes você sente, você

216
00:09:06,290 --> 00:09:07,790
sente que todos esses
 elementos têm em mente

217
00:09:07,790 --> 00:09:11,300
que eles não vão voltar. 

218
00:09:11,300 --> 00:09:13,420
Tudo bem, então agora
 eu clico aqui. 

219
00:09:13,415 --> 00:09:14,215
Lá vai ele. 

220
00:09:14,210 --> 00:09:16,000
Agora você pode ver que eu
 tenho os itens do menu

221
00:09:15,995 --> 00:09:18,225
e, claro, agora você pode fechar. 

222
00:09:18,229 --> 00:09:20,509
Então, é basicamente isso

223
00:09:20,510 --> 00:09:22,750
para redesenhar o cabeçalho
 responsivo. 

224
00:09:22,745 --> 00:09:24,085
Na verdade, vou seguir em frente e fazer

225
00:09:24,080 --> 00:09:25,660
exatamente
 a mesma coisa para

226
00:09:25,655 --> 00:09:28,765
o cabeçalho global
 para a visualização móvel,

227
00:09:28,760 --> 00:09:32,420
onde farei a primeira
 coluna 50% e depois farei

228
00:09:32,420 --> 00:09:36,320
a segunda coluna segurando o item de
 menu
 são 50% também. 

229
00:09:36,320 --> 00:09:38,210
E também faça o ícone do
 hambúrguer do menu

230
00:09:38,210 --> 00:09:39,950
um
 pouco maior. 

231
00:09:39,950 --> 00:09:42,980
Então você pode ir em frente
 e fazer isso também. 

232
00:09:42,980 --> 00:09:45,230
Mas é isso para criar os

233
00:09:45,230 --> 00:09:47,300
cabeçalhos
 responsivos ou
 para o site. 

234
00:09:47,300 --> 00:09:48,920
Obrigado por
 assistir
 ao próximo vídeo do evento alemão

235
00:09:48,920 --> 00:09:50,800
, onde
 agora vamos dar uma olhada em

236
00:09:50,795 --> 00:09:52,885
redesenhar o rodapé para

237
00:09:52,880 --> 00:09:56,460
ser um pouco mais
 responsável. Então você.