1
00:00:00,000 --> 00:00:01,200
Tudo bem, então vamos começar a
 projetar

2
00:00:01,200 --> 00:00:03,600
nosso cabeçalho
 para ser responsivo

3
00:00:03,600 --> 00:00:08,330
e o Lambda mostra os
 estados como está agora. 

4
00:00:08,325 --> 00:00:11,795
A área de trabalho está praticamente pronta. 

5
00:00:11,790 --> 00:00:15,260
Quando começamos a minimizar
 a tela do nosso navegador. 

6
00:00:15,255 --> 00:00:16,865
Você pode ver agora
 que, neste momento

7
00:00:16,860 --> 00:00:18,390
essa seria a visualização do tablet. 

8
00:00:18,390 --> 00:00:21,600
E você pode ver que o
 logotipo se torna muito menor. 

9
00:00:21,600 --> 00:00:23,790
O menu também se
 transformou no

10
00:00:23,790 --> 00:00:26,940
tradicional
 menu de hambúrguer. 

11
00:00:26,940 --> 00:00:32,400
E está tudo bem, mas
 definitivamente pode ser melhorado. 

12
00:00:32,395 --> 00:00:34,975
Mas então, se formos um
 pouco menores agora você pode

13
00:00:34,970 --> 00:00:37,450
ver que é onde as coisas
 parecem muito, muito ruins. 

14
00:00:37,445 --> 00:00:38,545
Esta é a visualização móvel,

15
00:00:38,540 --> 00:00:40,070
aquela para o celular. 

16
00:00:40,070 --> 00:00:41,330
Então, precisávamos fazer

17
00:00:41,330 --> 00:00:43,370
algumas mudanças aqui. 
Vou seguir em frente. 

18
00:00:43,370 --> 00:00:45,110
E, na verdade, antes de fazer isso,

19
00:00:45,110 --> 00:00:48,670
deixe-me mostrar o outro
 cabeçalho, o cabeçalho global. 

20
00:00:48,665 --> 00:00:51,565
Vamos para a
 página de contato e você
 notará

21
00:00:51,560 --> 00:00:54,970
que este é
 um pouco melhor. 

22
00:00:54,965 --> 00:00:57,835
Temos o fundo preto
 e, em seguida, na visualização móvel,

23
00:00:57,830 --> 00:00:59,900
mesmo que o menu de hambúrguer

24
00:00:59,900 --> 00:01:01,580
esteja desalinhado com o logotipo,

25
00:01:01,580 --> 00:01:03,410
ainda
 é muito melhor
 porque não temos

26
00:01:03,410 --> 00:01:06,340
nenhum espaço em branco no topo. 

27
00:01:06,335 --> 00:01:08,425
Tudo bem, vou ir em frente e

28
00:01:08,420 --> 00:01:10,910
editar os cabeçalhos da página inicial. 

29
00:01:10,905 --> 00:01:12,645
Vamos para Editar com Elementor

30
00:01:12,649 --> 00:01:14,639
e, em seguida, a página inicial para cima. 

31
00:01:14,640 --> 00:01:18,720
Agora vamos mudar para o modo
 responsivo aqui embaixo. 

32
00:01:18,715 --> 00:01:21,645
Modo responsivo, vamos
 alternar para a tabela primeiro. 

33
00:01:21,640 --> 00:01:24,000
Agora, eu quero te mostrar
 algo muito rápido. 

34
00:01:23,995 --> 00:01:26,695
Tudo bem, deixe-me
 voltar ao responsivo. 

35
00:01:26,695 --> 00:01:29,685
Por padrão, seu menu principal ou

36
00:01:29,680 --> 00:01:31,060
um menu em destaque
 ativado se
 transformou

37
00:01:31,060 --> 00:01:33,070
no menu de hambúrguer na visualização do tablet

38
00:01:33,070 --> 00:01:36,820
, no
 entanto, note que você

39
00:01:36,820 --> 00:01:39,570
nem sempre precisa seguir
 as configurações padrão. 

40
00:01:39,565 --> 00:01:42,195
Neste momento, se eu mudar para a
 mesa, como você pode ver,

41
00:01:42,190 --> 00:01:44,890
ela virou para
 o menu de hambúrguer. 

42
00:01:44,890 --> 00:01:47,580
E isso porque se
 eu clicar e

43
00:01:47,575 --> 00:01:50,575
editar o menu principal
 no layout,
 você verá os

44
00:01:50,575 --> 00:01:51,975
tamanhos de tela de tablet de
 ponto de interrupção positivo dos EUA

45
00:01:51,970 --> 00:01:55,180
tamanhos de tela de tablet de
 ponto de interrupção

46
00:01:55,180 --> 00:01:57,390
de 1025 pixels e abaixo. 

47
00:01:57,390 --> 00:02:01,310
Claro, o menu de hambúrguer borra. 

48
00:02:01,310 --> 00:02:02,690
Se não quisermos fazer isso,

49
00:02:02,690 --> 00:02:07,400
vou mudar este para
 a visualização móvel, em vez disso. 

50
00:02:07,400 --> 00:02:09,680
Uma visualização de tablet. Ainda
 teremos

51
00:02:09,680 --> 00:02:11,620
o menu principal mostrando e
 só nos transformamos

52
00:02:11,615 --> 00:02:13,165
no menu de hambúrguer

53
00:02:13,160 --> 00:02:15,290
assim que chegarmos à visualização móvel. 

54
00:02:15,290 --> 00:02:16,910
Vamos atualizar em frente. 

55
00:02:16,910 --> 00:02:18,280
E vamos ver o que essa pequena,

56
00:02:18,275 --> 00:02:20,035
pequena mudança fez por nós. 

57
00:02:20,030 --> 00:02:28,310
Veja a página. Volte
 para a página inicial ou caso. 

58
00:02:28,310 --> 00:02:29,480
Então, agora, neste momento,

59
00:02:29,480 --> 00:02:30,920
esta é a visualização do tablet. 

60
00:02:30,920 --> 00:02:34,240
E você pode ver que
 na verdade não é tão ruim assim. 

61
00:02:34,235 --> 00:02:37,025
Você não precisa
 mudar para o celular,
 para o

62
00:02:37,025 --> 00:02:39,595
menu de hambúrguer
 uma vez, que é tablets. 

63
00:02:39,590 --> 00:02:42,230
Claro, se você
 tivesse muitos itens de menu,

64
00:02:42,230 --> 00:02:44,810
digamos 678 itens do que anos,

65
00:02:44,810 --> 00:02:47,210
obviamente você não
 terá espaço suficiente. 

66
00:02:47,210 --> 00:02:48,860
Mas instituições
 onde você tem

67
00:02:48,860 --> 00:02:50,870
quatro ou cinco itens de menu,

68
00:02:50,870 --> 00:02:53,300
é perfeitamente bom
 para sua exibição. 

69
00:02:53,300 --> 00:02:57,250
Eles como estão
 no modo tablet. 

70
00:02:57,245 --> 00:02:59,155
Há duas mudanças que
 vou fazer aqui. 

71
00:02:59,150 --> 00:03:00,560
Um seria aumentar

72
00:03:00,560 --> 00:03:02,630
o tamanho do logotipo
 apenas um pouco. 

73
00:03:02,630 --> 00:03:04,850
E então também podemos
 tentar reduzir o tamanho dos

74
00:03:04,850 --> 00:03:07,420
itens
 do menu
 apenas um pouco. 

75
00:03:07,415 --> 00:03:08,815
Vamos fazer isso muito
 rápido. Vou

76
00:03:08,810 --> 00:03:11,070
voltar para o cabeçalho da página inicial. 

77
00:03:12,220 --> 00:03:16,400
Vamos mudar para
 responder SUV, tablet de ponta. 

78
00:03:16,400 --> 00:03:18,680
Tudo bem. Vou
 clicar no menu. 

79
00:03:18,680 --> 00:03:22,700
Sinto muito, o logotipo
 aqui no logotipo da UT vai para Estilo. 

80
00:03:22,700 --> 00:03:24,760
Agora observe agora

81
00:03:24,755 --> 00:03:27,475
que a dimensão aqui
 foi configurada para tablet. 

82
00:03:27,470 --> 00:03:29,630
Como você pode ver, é tudo tablet, tablet
 SASE. 

83
00:03:29,630 --> 00:03:34,270
Então aqui vou
 mudar o tamanho para 100%. 

84
00:03:34,265 --> 00:03:36,955
Vamos mostrar o tamanho
 total do logotipo. 

85
00:03:36,950 --> 00:03:38,810
Agora, para o menu principal,

86
00:03:38,810 --> 00:03:40,100
sei que está tudo em branco. 

87
00:03:40,100 --> 00:03:41,690
Você não pode ver, mas
 apenas tenha cuidado comigo. 

88
00:03:41,690 --> 00:03:43,060
Vou clicar em editar, no

89
00:03:43,055 --> 00:03:45,265
menu
 principal, ir para o estilo. 

90
00:03:45,260 --> 00:03:48,380
Então vamos à
 tipografia aqui. 

91
00:03:48,380 --> 00:03:50,300
Agora, assista a isso, certifique-se de que

92
00:03:50,300 --> 00:03:52,450
o tamanho aqui esteja definido para tablet. 

93
00:03:52,445 --> 00:03:54,745
Vamos fazer esses 114 pixels

94
00:03:54,740 --> 00:03:57,020
um
 pouco
 menores do que o normal. 

95
00:03:57,020 --> 00:03:58,880
Vamos atualizar. 

96
00:03:58,880 --> 00:04:01,200
Agora vamos dar uma olhada. 

97
00:04:01,200 --> 00:04:05,280
Adicione o novo cabeçalho da página inicial
 e o modo responsivo. 

98
00:04:05,275 --> 00:04:07,975
E lá vai você. 

99
00:04:07,975 --> 00:04:09,315
Lá vai você. 

100
00:04:09,310 --> 00:04:13,000
Então, até este ponto, está
 parecendo muito bom. 

101
00:04:13,000 --> 00:04:14,590
Obviamente, vamos
 fazer algumas grandes mudanças
 na

102
00:04:14,590 --> 00:04:16,930
manchete do banner,

103
00:04:16,930 --> 00:04:18,640
o vencedor que estamos
 viajando, é aventura. 

104
00:04:18,640 --> 00:04:19,930
Vamos reduzir o tamanho,

105
00:04:19,930 --> 00:04:22,810
mas apenas preste atenção
 ao cabeçalho real. 

106
00:04:22,810 --> 00:04:25,690
Ok, parece bom
 até a visualização móvel,

107
00:04:25,690 --> 00:04:27,460
que agora terá que continuar. 

108
00:04:27,460 --> 00:04:29,160
Mas, por enquanto, sábio,

109
00:04:29,155 --> 00:04:31,045
isso está parecendo muito bom. 

110
00:04:31,045 --> 00:04:32,535
Vamos agora dar uma olhada
 no

111
00:04:32,530 --> 00:04:35,610
cabeçalho do
 cabeçalho global global. 

112
00:04:35,605 --> 00:04:38,005
Vamos escolher uma página, vamos
 escolher a página Artigos. 

113
00:04:38,005 --> 00:04:39,435
E a partir daqui
 vamos em frente para

114
00:04:39,430 --> 00:04:41,400
editar o cabeçalho global. 

115
00:04:41,395 --> 00:04:44,845
Vamos lidar com
 o modo tablet primeiro. 

116
00:04:44,840 --> 00:04:48,800
Então, vamos vir aqui para o
 seu responsivo. Vá para o tablet. 

117
00:04:48,800 --> 00:04:51,760
Tudo bem, vamos
 lidar com os pontos do pão. 

118
00:04:51,755 --> 00:04:54,465
Vamos mudar
 esse para celular. 

119
00:04:54,469 --> 00:04:56,299
E isso só fará exatamente
 a mesma coisa

120
00:04:56,300 --> 00:04:58,970
para o estilo também. 

121
00:04:58,970 --> 00:05:01,640
Vamos nos
 alinhar à direita,

122
00:05:01,640 --> 00:05:03,800
para o menu principal,

123
00:05:03,800 --> 00:05:05,830
alinhamento com o branco
 e depois o estilo. 

124
00:05:05,825 --> 00:05:08,305
Vamos vir
 aqui para tipografia. 

125
00:05:08,300 --> 00:05:10,080
Certifique-se de que isso esteja configurado para tablet. 

126
00:05:10,075 --> 00:05:13,195
Então, vamos com
 14 pixels também. 

127
00:05:13,190 --> 00:05:15,040
E lá está ele. 

128
00:05:15,035 --> 00:05:17,755
Ok, Next
 vai ser o logotipo. 

129
00:05:17,750 --> 00:05:21,380
Não vamos esquecer, precisamos
 fazer o logotipo ou 100%. 

130
00:05:21,380 --> 00:05:23,360
Certifique-se de que isso esteja
 configurado para tablets. 

131
00:05:23,360 --> 00:05:25,830
100%, ótimo. 

132
00:05:25,830 --> 00:05:29,820
Agora vamos mudar para
 a visualização móvel. 

133
00:05:29,815 --> 00:05:32,805
A única coisa que precisamos
 fazer aqui é
 delinear

134
00:05:32,800 --> 00:05:37,860
o
 menu de navegação para o centro. 

135
00:05:37,855 --> 00:05:39,705
Na verdade, não deveríamos
 ter tocado

136
00:05:39,700 --> 00:05:41,950
nos alinhamentos
 no modo tablet,

137
00:05:41,950 --> 00:05:45,180
então está tudo bem, vamos
 simplesmente definir isso de volta. 

138
00:05:45,175 --> 00:05:47,535
Vou para o Layout
 de conteúdo

139
00:05:47,530 --> 00:05:48,870
e, em seguida, o alinhamento aqui. 

140
00:05:48,865 --> 00:05:50,115
Vamos apenas
 mantê-lo no centro. 

141
00:05:50,110 --> 00:05:52,080
Acho que eles vão ser melhores. 

142
00:05:52,075 --> 00:05:53,295
Tudo bem. É isso. 

143
00:05:53,290 --> 00:05:55,350
Vou seguir em frente
 e atualizarei. 

144
00:05:55,345 --> 00:05:57,015
Vamos dar uma
 olhada no que temos. 

145
00:05:57,010 --> 00:05:59,140
Vamos ver a página. 

146
00:05:59,140 --> 00:06:03,080
Vamos escolher a página Artigos. 

147
00:06:03,420 --> 00:06:07,380
Reduza o tamanho. O
 que temos aqui? 

148
00:06:07,375 --> 00:06:09,225
Tudo bem, é tablet,

149
00:06:09,220 --> 00:06:10,820
tablet está com boa aparência. 

150
00:06:10,824 --> 00:06:16,034
E agora aqui esta será
 a visualização móvel,

151
00:06:16,030 --> 00:06:18,460
mas parece
 haver um desalinhamento

152
00:06:18,460 --> 00:06:20,950
com o logotipo e, em
 seguida, o próprio menu. 

153
00:06:20,950 --> 00:06:23,100
Então, vamos consertar isso rapidamente. 

154
00:06:23,095 --> 00:06:24,795
Vamos voltar. 

155
00:06:24,790 --> 00:06:26,440
Precisamos tornar
 o logotipo, na verdade

156
00:06:26,440 --> 00:06:27,700
talvez um pouco menor. 

157
00:06:27,700 --> 00:06:29,650
Acho que é um
 pouco grande demais também. 

158
00:06:29,650 --> 00:06:31,390
Então, vamos fazer essas mudanças. 

159
00:06:31,390 --> 00:06:34,020
Volte para o celular responsivo. 

160
00:06:34,015 --> 00:06:37,455
Ok, vamos editar o
 primeiro alinhamento do logotipo aqui,

161
00:06:37,450 --> 00:06:39,150
vamos configurá-lo para o centro. 

162
00:06:39,145 --> 00:06:41,275
Digamos que este
 seja um dissidente. 

163
00:06:41,275 --> 00:06:42,885
E então talvez o tamanho,

164
00:06:42,880 --> 00:06:45,880
talvez um 100% seja um pouco
 grande demais, sem pensar nisso. 

165
00:06:45,880 --> 00:06:50,510
Então, vamos reduzir isso para 75%. 

166
00:06:50,505 --> 00:06:52,835
Vamos em frente e datas. 

167
00:06:52,835 --> 00:06:54,295
E vamos ver como
 isso será. 

168
00:06:54,290 --> 00:06:56,820
Vamos voltar a ver a página. 

169
00:06:57,010 --> 00:07:02,170
Artigo. Eu minimizo, ok,

170
00:07:02,165 --> 00:07:03,595
muito melhor
 agora e agora você pode ver

171
00:07:03,590 --> 00:07:05,710
o alinhamento está no centro. 

172
00:07:05,705 --> 00:07:07,915
E lá está ele. 

173
00:07:07,910 --> 00:07:09,740
Então, parece muito melhor,

174
00:07:09,740 --> 00:07:11,420
muito melhor agora. 

175
00:07:11,420 --> 00:07:13,970
Claro, ainda
 vai fazer mais algumas,
 mais algumas

176
00:07:13,970 --> 00:07:15,920
mudanças nos
 cabeçalhos,

177
00:07:15,920 --> 00:07:18,350
mas por enquanto pelo menos
 está parecendo

178
00:07:18,350 --> 00:07:21,230
muito melhor do que o que
 tínhamos inicialmente. 

179
00:07:21,230 --> 00:07:23,590
Tanto o cabeçalho da página inicial

180
00:07:23,585 --> 00:07:26,725
quanto o cabeçalho global
 estão com uma aparência melhor. 

181
00:07:26,720 --> 00:07:29,600
Vamos lidar com o
 espaço em branco

182
00:07:29,600 --> 00:07:32,760
no cabeçalho da página inicial
 no próximo vídeo.