1
00:00:00,000 --> 00:00:01,730
Tudo bem, então com
 todas as coisas chatas

2
00:00:01,725 --> 00:00:02,885
fora do caminho, limão,

3
00:00:02,880 --> 00:00:05,640
mostrarei a interface do usuário para

4
00:00:05,640 --> 00:00:07,320
elementar da interface do
 usuário e

5
00:00:07,320 --> 00:00:09,570
como os elementos são realmente funcionam. 

6
00:00:09,570 --> 00:00:12,440
Agora estou nas minhas páginas
 aqui e o que vou fazer

7
00:00:12,435 --> 00:00:16,175
é ir em frente
 e editar a página inicial. 

8
00:00:16,170 --> 00:00:19,110
O que você vai fazer é o que
 você verá luz aqui. 

9
00:00:19,110 --> 00:00:21,710
Você verá Editar
 com Elementor. 

10
00:00:21,705 --> 00:00:23,495
Vai ser esse grande botão
 azul aqui. 

11
00:00:23,490 --> 00:00:25,590
Então, vamos seguir em frente
 e clicar nisso. 

12
00:00:25,590 --> 00:00:27,780
E o que acontecerá aqui
 é que o elemental será

13
00:00:27,780 --> 00:00:31,470
lançado para caminhar
 nesta página em particular. 

14
00:00:31,470 --> 00:00:33,390
Certo, esta é a página inicial. 

15
00:00:33,385 --> 00:00:35,155
Agora, à esquerda,
 obviamente você pode

16
00:00:35,150 --> 00:00:39,310
ver a caixa para
 elementar, a interface do usuário. 

17
00:00:39,305 --> 00:00:41,525
O primeiro que
 quero mostrar aqui

18
00:00:41,525 --> 00:00:43,795
são os três botões aqui,

19
00:00:43,790 --> 00:00:47,100
o menu basicamente,
 você clica lá. 

20
00:00:47,320 --> 00:00:50,720
Você terá acesso a coisas
 como as configurações do site,

21
00:00:50,719 --> 00:00:52,879
acúmulo de
 FIM, sobre o qual
 falaremos um pouco mais tarde. 

22
00:00:52,880 --> 00:00:54,890
Mas muito rapidamente,
 vamos
 aqui

23
00:00:54,890 --> 00:00:57,040
para usar referências. 

24
00:00:57,035 --> 00:00:59,215
E eu não sei sobre você. 

25
00:00:59,210 --> 00:01:01,090
Talvez você goste do tema leve. 

26
00:01:01,085 --> 00:01:02,395
Gosto do tema escuro. 

27
00:01:02,390 --> 00:01:04,580
Então o que vou fazer aqui
 é para o tema da interface do usuário,

28
00:01:04,580 --> 00:01:07,190
vou mudar de
 forma, detectar automaticamente. 

29
00:01:07,190 --> 00:01:08,300
Muito escuro. 

30
00:01:08,300 --> 00:01:10,520
Eu prefiro apenas um fundo preto

31
00:01:10,520 --> 00:01:12,350
e o texto branco é
 muito mais legal. 

32
00:01:12,350 --> 00:01:13,810
Na minha opinião, novamente,

33
00:01:13,805 --> 00:01:15,555
isso é inteiramente subjetivo,

34
00:01:15,559 --> 00:01:17,349
mas vou mantê-lo tão escuro. 

35
00:01:17,345 --> 00:01:18,985
Vamos voltar. 

36
00:01:18,980 --> 00:01:21,730
Aqui. Você pode encontrar

37
00:01:21,725 --> 00:01:23,885
algo dentro do
 elemento para qualquer lugar. 

38
00:01:23,885 --> 00:01:25,705
De qualquer forma, elementos, se você quiser,

39
00:01:25,700 --> 00:01:27,350
você pode visualizar a página
 e, em seguida,

40
00:01:27,350 --> 00:01:29,630
você pode sair
 para o painel. 

41
00:01:29,630 --> 00:01:31,940
Mas vamos voltar. 

42
00:01:31,940 --> 00:01:33,010
Agora. 

43
00:01:33,005 --> 00:01:37,385
Aqui, você tem elementos
 e depois tem global. 

44
00:01:37,385 --> 00:01:40,075
Global só funciona com a versão
 paga do elemento. 

45
00:01:40,070 --> 00:01:41,270
E é aí que se
 você quiser salvar

46
00:01:41,270 --> 00:01:43,400
seu bloco específico
 de conteúdo e usar

47
00:01:43,400 --> 00:01:47,830
esse mesmo bloco em outra
 página em qualquer lugar do seu site. 

48
00:01:47,825 --> 00:01:50,005
É a isso que o global
 basicamente se refere. 

49
00:01:50,000 --> 00:01:52,520
Mas não se preocupe,
 falaremos um pouco mais tarde. 

50
00:01:52,520 --> 00:01:54,590
Mas esses são seus elementos. 

51
00:01:54,590 --> 00:01:57,830
Você tem elementos básicos
 como sua interseção. 

52
00:01:57,830 --> 00:02:00,350
Você entrará no editor de texto de
 imagem. 

53
00:02:00,350 --> 00:02:02,020
Então, digamos, por exemplo,

54
00:02:02,015 --> 00:02:05,105
que
 você queria adicionar uma
 imagem à sua página. 

55
00:02:05,105 --> 00:02:07,765
Você simplesmente clicaria no elemento
 da imagem e, em seguida,

56
00:02:07,760 --> 00:02:11,080
simplesmente soltá-lo dentro
 da caixa ali mesmo. 

57
00:02:11,075 --> 00:02:12,775
E então, a partir daqui, você pode

58
00:02:12,770 --> 00:02:14,810
escolher a
 imagem com a qual deseja trabalhar. 

59
00:02:14,810 --> 00:02:16,460
Então, apenas como exemplo,

60
00:02:16,460 --> 00:02:18,890
deixe-me escolher a
 imagem dessa garota

61
00:02:18,890 --> 00:02:22,030
aqui segurando
 a bandeira brasileira. 

62
00:02:22,025 --> 00:02:23,785
E lá está ele. 

63
00:02:23,780 --> 00:02:26,510
A coisa é a maioria dos
 elementos que será bem-vinda com

64
00:02:26,510 --> 00:02:29,510
normalmente 3,5 compartimentos principais. 

65
00:02:29,510 --> 00:02:30,770
Se eu concluir superar,

66
00:02:30,770 --> 00:02:33,320
você terá a área de conteúdo. 

67
00:02:33,320 --> 00:02:37,360
Nesse caso, é aqui que
 você pode adicionar textos,
 imagens,

68
00:02:37,355 --> 00:02:41,705
arquivos de vídeo,
 áudio e assim por diante. 

69
00:02:41,705 --> 00:02:44,065
Então você terá estilo onde

70
00:02:44,060 --> 00:02:46,240
você pode fazer coisas como
 talvez mudar a lei do carvão,

71
00:02:46,235 --> 00:02:48,155
alterar o tamanho, adicionar

72
00:02:48,155 --> 00:02:50,765
uma imagem de fundo desde
 a altura e assim por diante. 

73
00:02:50,765 --> 00:02:53,835
E então você terá
 a guia Avançado. 

74
00:02:53,839 --> 00:02:55,279
Mas você pode fazer coisas como adicionar

75
00:02:55,280 --> 00:02:57,450
margens, padrões, sem espaçamento. 

76
00:02:57,454 --> 00:02:59,614
Você também pode adicionar
 alguns efeitos de movimento,

77
00:02:59,615 --> 00:03:01,345
são algumas bordas e assim por diante. 

78
00:03:01,340 --> 00:03:02,980
Então você geralmente,

79
00:03:02,975 --> 00:03:04,975
maioria dos elementos com os quais
 você está trabalhando

80
00:03:04,970 --> 00:03:08,890
terá essas três
 guias ou compartimentos diferentes. 

81
00:03:08,885 --> 00:03:10,435
Então, voltando

82
00:03:10,430 --> 00:03:11,780
aqui e você clica
 no botão aqui,

83
00:03:11,780 --> 00:03:13,670
isso lhe dará acesso
 a todos os elementos. 

84
00:03:13,670 --> 00:03:16,580
Então você pode ver que temos
 os elementos básicos aqui,

85
00:03:16,580 --> 00:03:18,620
botão
 Vídeo, espaçador e assim por diante. 

86
00:03:18,620 --> 00:03:21,460
Agora, você pode ver aqueles em

87
00:03:21,455 --> 00:03:24,145
liberdade condicional sob a versão paga da galeria de

88
00:03:24,140 --> 00:03:27,280
portfólio de postagens
 elementares. 

89
00:03:27,275 --> 00:03:28,675
Muitos deles. 

90
00:03:28,670 --> 00:03:30,110
Então você pode ver
 agora, porque não estamos

91
00:03:30,110 --> 00:03:32,120
usando a
 versão paga do elemental,

92
00:03:32,120 --> 00:03:34,820
não
 temos acesso
 a todos esses elementos. 

93
00:03:34,820 --> 00:03:36,400
Mas, felizmente,

94
00:03:36,395 --> 00:03:38,995
porque estamos trabalhando

95
00:03:38,990 --> 00:03:41,870
com o plug-in de
 complementos essenciais,

96
00:03:41,870 --> 00:03:43,600
temos acesso a

97
00:03:43,595 --> 00:03:47,725
muitos
 elementos adicionais gratuitamente. 

98
00:03:47,720 --> 00:03:50,590
Você pode ver aqui
 nos átomos essenciais. 

99
00:03:50,585 --> 00:03:53,285
Você tem coisas como
 acordeão avançado,

100
00:03:53,285 --> 00:03:56,755
call to action, botão
 criativo inferior e assim por diante. 

101
00:03:56,750 --> 00:03:58,400
Então, vamos
 entrar com
 alguns

102
00:03:58,400 --> 00:04:00,260
desses elementos. 

103
00:04:00,260 --> 00:04:03,740
Mas, voltando a elementos
 ou sob geral,

104
00:04:03,740 --> 00:04:06,350
também
 temos acesso a
 mais blocos. 

105
00:04:06,350 --> 00:04:08,330
Estou apenas fechar essa coordenada. 

106
00:04:08,330 --> 00:04:09,710
Então, o geral com

107
00:04:09,710 --> 00:04:11,720
a versão gratuita dos elementos
 aos quais temos acesso,

108
00:04:11,720 --> 00:04:13,850
mais elementos como a caixa de ícones,

109
00:04:13,850 --> 00:04:16,720
testemunhos,
 ícones sociais e assim por diante. 

110
00:04:16,715 --> 00:04:18,415
Deixe-me fechar este. 

111
00:04:18,410 --> 00:04:19,670
E então você tem site. 

112
00:04:19,670 --> 00:04:22,550
Infelizmente, esses elementos
 só estão

113
00:04:22,550 --> 00:04:25,150
disponíveis com a versão
 paga do elementar. 

114
00:04:25,145 --> 00:04:26,945
Você tem o WooCommerce, novamente,

115
00:04:26,945 --> 00:04:29,915
disponível
 apenas com a versão
 paga do elemental. 

116
00:04:29,915 --> 00:04:31,685
Falamos sobre
 os átomos essenciais. 

117
00:04:31,685 --> 00:04:34,015
Então este é o outro plug-in. 

118
00:04:34,010 --> 00:04:35,890
Instalamos o
 cabeçalho e o rodapé. 

119
00:04:35,885 --> 00:04:37,765
Este plugin nos
 permitirá construir

120
00:04:37,760 --> 00:04:39,890
um cabeçalho personalizado e
 o rodapé personalizado

121
00:04:39,890 --> 00:04:42,050
para o nosso site
 terá acesso a

122
00:04:42,050 --> 00:04:44,830
elementos como os elementos do Menu de
 Navegação,

123
00:04:44,825 --> 00:04:47,825
página, título do site,

124
00:04:47,825 --> 00:04:49,795
logotipo do site e assim por diante. 

125
00:04:49,790 --> 00:04:51,560
E, por último, mas não menos importante,

126
00:04:51,560 --> 00:04:52,850
temos acesso aos

127
00:04:52,850 --> 00:04:56,570
widgets
 do WordPress,
 como suas páginas,

128
00:04:56,570 --> 00:05:00,820
áudio do
 Callender fez
 nossa pesquisa e assim por diante. 

129
00:05:00,815 --> 00:05:03,765
Ok, isso é isso
 para os elementos. 

130
00:05:03,769 --> 00:05:09,219
Agora, aqui em baixo, você tem
 acesso a mais algumas configurações. 

131
00:05:09,215 --> 00:05:11,375
Pode parecer um pouco
 avassalador, mas não se preocupe,

132
00:05:11,375 --> 00:05:12,805
uma vez que você começar a receber
 com elementar,

133
00:05:12,800 --> 00:05:14,230
na verdade não
 é
 tão avassalador. 

134
00:05:14,225 --> 00:05:16,315
Na verdade, é
 muito, muito fácil de trabalhar. 

135
00:05:16,310 --> 00:05:18,130
Aqui em configurações. 

136
00:05:18,125 --> 00:05:20,065
Aqui, você pode fazer coisas

137
00:05:20,060 --> 00:05:22,310
como alterar o
 título da página,

138
00:05:22,310 --> 00:05:25,370
alterar o status de
 publicado para Penn e revisar,

139
00:05:25,370 --> 00:05:27,440
você pode adicionar sua imagem em destaque. 

140
00:05:27,440 --> 00:05:29,690
Você também pode
 optar por ocultar o título,

141
00:05:29,690 --> 00:05:31,720
o que, na verdade, vamos fazer isso. 

142
00:05:31,715 --> 00:05:32,845
Certo, vou esconder o título. 

143
00:05:32,840 --> 00:05:35,240
Quero dizer, quantas vezes você
 acessa um site e, em seguida,
 na

144
00:05:35,240 --> 00:05:38,510
página inicial, diz que trivalente em
 casa faz isso. 

145
00:05:38,510 --> 00:05:39,970
Então, vamos apenas ir em frente e ocultar

146
00:05:39,965 --> 00:05:42,905
o título e, em seguida,
 o layout da página. 

147
00:05:42,905 --> 00:05:44,845
Vou explicar isso
 um pouco mais tarde

148
00:05:44,840 --> 00:05:47,300
à medida que avançamos no curso. 

149
00:05:47,300 --> 00:05:50,090
Então você tem o alarme,

150
00:05:50,090 --> 00:05:53,320
Desculpe, você tem a barra de progresso de
 leitura. 

151
00:05:53,315 --> 00:05:56,815
Isso é fornecido pelo plug-in de complementos
 essenciais. 

152
00:05:56,810 --> 00:05:59,870
Basicamente, o ponto aqui é
 que você pode ter visto em

153
00:05:59,870 --> 00:06:01,130
alguns episódios antes de onde

154
00:06:01,130 --> 00:06:02,960
à
 medida que começa a
 rolar para baixo a página,

155
00:06:02,960 --> 00:06:04,930
você verá como uma barra IDA

156
00:06:04,925 --> 00:06:07,585
se movendo horizontal
 ou verticalmente

157
00:06:07,580 --> 00:06:09,620
indicando quanto

158
00:06:09,620 --> 00:06:11,030
da quantidade de
 realmente lido e
 quanto

159
00:06:11,030 --> 00:06:12,470
mais conteúdo você
 ainda precisa comer. 

160
00:06:12,470 --> 00:06:14,300
Então você tem essa inspiração
 futura. 

161
00:06:14,300 --> 00:06:16,330
Vamos dar uma olhada
 nisso um pouco mais tarde. 

162
00:06:16,325 --> 00:06:18,475
E então o
 Índice vá para o topo. 

163
00:06:18,470 --> 00:06:21,540
Não se preocupe, falaremos
 sobre isso mais tarde. 

164
00:06:21,544 --> 00:06:25,774
E então, sob estilo aqui,

165
00:06:25,775 --> 00:06:27,625
você pode mudar o tipo de corpo. 

166
00:06:27,620 --> 00:06:30,310
Você pode adicionar uma
 cor de fundo, se quiser. 

167
00:06:30,305 --> 00:06:31,495
Você vem aqui agora,

168
00:06:31,490 --> 00:06:34,880
escolha como a
 cor principal do azul e assim por diante. 

169
00:06:34,880 --> 00:06:36,820
Mas, por enquanto, vou apenas
 ir

170
00:06:36,815 --> 00:06:39,215
em frente e desmarcar um. 

171
00:06:39,215 --> 00:06:41,395
E, finalmente, você tem o

172
00:06:41,390 --> 00:06:42,830
avançado onde você pode adicionar

173
00:06:42,830 --> 00:06:44,930
sua própria fantasia,
 nosso código JavaScript

174
00:06:44,930 --> 00:06:47,900
ou algum código CSS personalizado,

175
00:06:47,900 --> 00:06:49,430
que infelizmente
 só está disponível com

176
00:06:49,430 --> 00:06:52,170
a versão paga de elementar. 

177
00:06:52,174 --> 00:06:53,614
Certo, vamos seguir em frente. 

178
00:06:53,615 --> 00:06:54,625
Ao lado da frase. 

179
00:06:54,620 --> 00:06:56,650
Você, você tem o Navegador. 

180
00:06:56,645 --> 00:06:59,605
Agora, a coisa sobre navegar
 TO é que, uma vez que você começar a

181
00:06:59,600 --> 00:07:02,870
adicionar elementos e
 conteúdo à sua página,

182
00:07:02,869 --> 00:07:06,589
a parte inferior do navegador
 permitirá que você veja basicamente

183
00:07:06,590 --> 00:07:08,840
toda
 a estrutura em

184
00:07:08,840 --> 00:07:11,750
um formato hierárquico 
de toda a sua página. 

185
00:07:11,750 --> 00:07:14,120
Portanto, pode ser muito, muito fácil
 para nós procurar rapidamente

186
00:07:14,120 --> 00:07:16,850
um determinado elemento ou livro
 com o qual você queira trabalhar. 

187
00:07:16,850 --> 00:07:19,430
Isso é o que a navegação
 ou a navegação é importante. 

188
00:07:19,430 --> 00:07:21,860
Portanto, Next é a história. 

189
00:07:21,860 --> 00:07:24,440
Então, se você fizer coisas como

190
00:07:24,440 --> 00:07:27,610
mudar a cor ou basicamente
 se você fizer alguma coisa,

191
00:07:27,605 --> 00:07:29,125
ela estará na guia Histórico

192
00:07:29,120 --> 00:07:30,310
e você poderá vê-la bem aqui,

193
00:07:30,305 --> 00:07:33,205
desde o início,
 quando começamos a editar,

194
00:07:33,200 --> 00:07:35,060
se mudarmos a preferência
 do usuário

195
00:07:35,060 --> 00:07:36,380
para o tema da interface do usuário
 de luz,

196
00:07:36,380 --> 00:07:38,120
do nosso automático, muito escuro,

197
00:07:38,120 --> 00:07:39,710
você pode ver que ele está bem ali. 

198
00:07:39,710 --> 00:07:41,090
Adicionamos uma imagem,

199
00:07:41,090 --> 00:07:42,170
atingimos o título da página

200
00:07:42,170 --> 00:07:43,340
para que você possa facilmente
 entrar aqui
 agora

201
00:07:43,340 --> 00:07:46,530
e reverter qualquer
 uma dessas ações. 

202
00:07:46,534 --> 00:07:47,604
E então você tem revisões. 

203
00:07:47,600 --> 00:07:49,520
As revisões são um pouco mais,

204
00:07:49,520 --> 00:07:51,740
O que é agora? Um
 pouco mais robusto. 

205
00:07:51,740 --> 00:07:53,560
Normalmente, nas
 revisões, é aqui que

206
00:07:53,555 --> 00:07:56,065
depois de atualizar e
 salvar sua página,

207
00:07:56,060 --> 00:07:59,780
você verá essas alterações
 em sua visão paradas. 

208
00:07:59,780 --> 00:08:02,240
Então ele é um pouco mais
 robusto e ações. 

209
00:08:02,240 --> 00:08:03,380
Então essa é a gordura. 

210
00:08:03,380 --> 00:08:04,720
E então aqui,

211
00:08:04,715 --> 00:08:06,925
você tem o modo responsivo. 

212
00:08:06,920 --> 00:08:08,570
Você clica aqui. 

213
00:08:08,570 --> 00:08:12,490
Agora você
 pode escolher a visualização da área de trabalho,

214
00:08:12,485 --> 00:08:15,925
visualização do
 tablet ou a visualização móvel. 

215
00:08:15,920 --> 00:08:18,620
E o fino é que você pode
 até se tornar muito,
 muito,

216
00:08:18,620 --> 00:08:22,330
muito específico com a
 largura da tela. 

217
00:08:22,325 --> 00:08:24,355
Então, digamos, por exemplo, se
 eu escolhi a tabela
 aqui

218
00:08:24,350 --> 00:08:26,270
você verá essas
 alças para a esquerda e para a direita. 

219
00:08:26,270 --> 00:08:31,370
Você pode realmente se mover
 para uma determinada dimensão. 

220
00:08:31,370 --> 00:08:32,750
E, claro, OPIA,
 você terá

221
00:08:32,750 --> 00:08:34,490
a largura e a altura. 

222
00:08:34,490 --> 00:08:37,100
Se você tiver um tipo específico
 de dispositivo que
 deseja

223
00:08:37,100 --> 00:08:39,380
ver como
 você

224
00:08:39,380 --> 00:08:41,300
definiu será semelhante
 no dispositivo específico. 

225
00:08:41,300 --> 00:08:42,670
Nós dimensões muito especificamente. 

226
00:08:42,665 --> 00:08:44,005
Você pode entrar aqui e alterar

227
00:08:44,000 --> 00:08:45,200
as dimensões da largura

228
00:08:45,200 --> 00:08:48,290
, bem
 como a altura. 

229
00:08:48,290 --> 00:08:50,950
Mas vou voltar, mudar para
 a

230
00:08:50,945 --> 00:08:54,335
área de trabalho e
 depois dividir aqui. 

231
00:08:54,335 --> 00:08:58,105
Você pode visualizar suas alterações
 depois de fazê-las. 

232
00:08:58,100 --> 00:08:59,980
E, finalmente, você pode atualizar

233
00:08:59,975 --> 00:09:01,615
toda a luz em Opções de
 salvamento. 

234
00:09:01,610 --> 00:09:02,900
Você pode salvar como rascunho

235
00:09:02,900 --> 00:09:05,390
ou salvar como
 um fio de modelo. 

236
00:09:05,390 --> 00:09:07,250
Como modelo significa
 que você pode reutilizar

237
00:09:07,250 --> 00:09:10,910
exatamente
 o mesmo conteúdo
 em outra página. 

238
00:09:10,910 --> 00:09:13,990
Então, isso é basicamente
 como um detalhamento

239
00:09:13,985 --> 00:09:18,655
de como o elementar caminha nos
 bastidores,

240
00:09:18,650 --> 00:09:20,710
a interface do usuário,
 como adicionar elementos. 

241
00:09:20,705 --> 00:09:22,135
Novamente, não
 se preocupe se parecer muito,

242
00:09:22,130 --> 00:09:25,510
muito avassalador, o Azure
 começa a andar com elementar. 

243
00:09:25,505 --> 00:09:28,595
Vai se tornar muito fácil
 para você trabalhar. 

244
00:09:28,595 --> 00:09:30,515
Isso era basicamente
 um curso intensivo

245
00:09:30,515 --> 00:09:33,155
na
 interface do usuário elementar. Obrigado por assistir. 

246
00:09:33,155 --> 00:09:34,345
Junte-se a mim na próxima aula,

247
00:09:34,340 --> 00:09:35,620
agora
 começaremos a definir

248
00:09:35,615 --> 00:09:39,065
nossas variáveis globais. 
Vejo você então.