1
00:00:00,000 --> 00:00:03,350
Agora que construímos
 os cabeçalhos e rodapés,

2
00:00:03,345 --> 00:00:06,275
agora
 é hora de criarmos
 nossa página inicial. 

3
00:00:06,270 --> 00:00:07,740
E a primeira
 seção que vamos

4
00:00:07,740 --> 00:00:10,890
construir
 será
 o banner que você pode ver

5
00:00:10,890 --> 00:00:13,110
aqui, temos
 a imagem de fundo
 com as

6
00:00:13,110 --> 00:00:15,680
árvores tropicais,

7
00:00:15,675 --> 00:00:17,405
palmeiras e a praia. 

8
00:00:17,400 --> 00:00:19,170
E então, claro, os textos,

9
00:00:19,165 --> 00:00:21,415
estamos viajando com
 aventura e, em seguida

10
00:00:21,410 --> 00:00:24,770
o botão que diz nosso
 livro, sua viagem agora. 

11
00:00:24,770 --> 00:00:27,320
Além disso, é claro, você
 teria notado que

12
00:00:27,320 --> 00:00:31,220
o plano de fundo basicamente se
 mistura com o cabeçalho. 

13
00:00:31,220 --> 00:00:32,450
Como fazemos isso? 

14
00:00:32,450 --> 00:00:33,920
Bem, vamos seguir em frente

15
00:00:33,920 --> 00:00:36,040
e editar a página inicial. 

16
00:00:36,035 --> 00:00:38,855
Vou dizer Editar
 com Elementor. 

17
00:00:38,855 --> 00:00:40,135
Bem aqui. 

18
00:00:40,130 --> 00:00:43,010
Você pode notar que temos
 basicamente duas colunas,

19
00:00:43,010 --> 00:00:44,360
uma em cima, aquela que

20
00:00:44,360 --> 00:00:46,240
contém onde viajou
 significa aventura. 

21
00:00:46,235 --> 00:00:47,695
E então teremos
 outra coluna

22
00:00:47,690 --> 00:00:49,490
contendo o
 livro de botões, sua viagem. 

23
00:00:49,490 --> 00:00:53,440
Agora, o que eu simplesmente
 vou fazer aqui é isso. 

24
00:00:53,435 --> 00:00:56,965
Temos um
 texto de cabeçalho aqui,

25
00:00:56,960 --> 00:00:58,700
mas caso você
 não veja nada,

26
00:00:58,700 --> 00:01:01,460
basta arrastar
 o elemento de cabeçalho

27
00:01:01,460 --> 00:01:04,160
e soltá-lo dentro da
 sua caixa aqui. 

28
00:01:04,160 --> 00:01:06,560
E eu simplesmente vou dizer

29
00:01:06,560 --> 00:01:15,740
onde estamos viajando
 com aventura. 

30
00:01:15,740 --> 00:01:19,010
Esse é o
 slogan principal do site All. 

31
00:01:19,010 --> 00:01:21,770
E vou fazer
 este um a um. 

32
00:01:21,770 --> 00:01:23,780
Mas vamos
 fazer algumas mudanças na

33
00:01:23,780 --> 00:01:27,110
topografia real em si.
 

34
00:01:27,110 --> 00:01:29,350
Então, vamos para o estilo. 

35
00:01:29,345 --> 00:01:31,985
E para a tipografia aqui,

36
00:01:31,985 --> 00:01:37,505
vou mudar a
 transformação para maiúsculas. 

37
00:01:37,505 --> 00:01:39,265
E também vamos
 fazer o peso

38
00:01:39,260 --> 00:01:42,730
900 só para torná-lo
 muito, muito grosso. 

39
00:01:42,725 --> 00:01:47,435
E então o estilo também o
 tornará itálico. 

40
00:01:47,435 --> 00:01:49,775
Isso é isso para
 o texto por enquanto. 

41
00:01:49,775 --> 00:01:51,295
Vamos seguir em frente agora e adicionar

42
00:01:51,290 --> 00:01:54,290
a imagem de fundo
 para esta seção. 

43
00:01:54,290 --> 00:01:57,070
Então, vou clicar no botão Editar
 seção aqui. 

44
00:01:57,065 --> 00:01:59,645
A largura do conteúdo,
 vamos manter esta caixa,

45
00:01:59,645 --> 00:02:04,925
mas depois a largura aqui
 faremos 1240 pixels. 

46
00:02:05,920 --> 00:02:09,400
E nossa lista de verificação
 defende a altura,

47
00:02:09,395 --> 00:02:13,355
vamos defini-la para
 uma altura mínima de

48
00:02:13,355 --> 00:02:15,985
mil pixels porque
 realmente queríamos

49
00:02:15,980 --> 00:02:18,980
mostrar o máximo possível dessa imagem de
 fundo. 

50
00:02:18,980 --> 00:02:21,860
Então deixe-me fazer isso mil. 

51
00:02:21,860 --> 00:02:24,230
E agora vamos passar para o

52
00:02:24,230 --> 00:02:27,280
estilo, tipo de fundo clássico. 

53
00:02:27,275 --> 00:02:29,435
E vou
 escolher a imagem. 

54
00:02:29,435 --> 00:02:32,095
E vai
 ser, eu peço desculpas. 

55
00:02:32,090 --> 00:02:35,170
Na verdade, tenho dois
 separados aqui por enquanto. 

56
00:02:35,165 --> 00:02:37,715
Vou excluir a mulher
 que vai usar,

57
00:02:37,715 --> 00:02:39,625
vamos usar
 a versão grande. 

58
00:02:39,620 --> 00:02:42,080
Este tem apenas 859
 pixels de altura,

59
00:02:42,080 --> 00:02:44,330
mas este tem 1274. 

60
00:02:44,330 --> 00:02:46,160
Então, vamos fazer
 uso deste. 

61
00:02:46,160 --> 00:02:47,870
Então, vou inserir isso. 

62
00:02:47,870 --> 00:02:49,610
E lá vai você. 

63
00:02:49,610 --> 00:02:51,500
Agora, deixe-me mostrar
 alguns truques em relação ao

64
00:02:51,500 --> 00:02:54,730
posicionamento da sua imagem de
 fundo. 

65
00:02:54,725 --> 00:02:56,425
Você tem diferentes tipos de

66
00:02:56,420 --> 00:02:58,460
posições no centro, centro,

67
00:02:58,460 --> 00:03:02,420
centro esquerdo, centro,
 direita e assim por diante. 

68
00:03:02,420 --> 00:03:04,690
Portanto, cabe
 a você escolher

69
00:03:04,685 --> 00:03:09,635
os ângulos de posição ideais
 para sua imagem de fundo. 

70
00:03:09,635 --> 00:03:13,475
O meu aqui que eu escolhi
 vai ser o centro inferior. 

71
00:03:13,475 --> 00:03:16,285
Aqui você pode realmente
 ver as palmeiras,

72
00:03:16,280 --> 00:03:18,200
a praia também. 

73
00:03:18,200 --> 00:03:20,440
Portanto, é familiar é
 a melhor posição. 

74
00:03:20,435 --> 00:03:22,045
E então, para o tamanho,

75
00:03:22,040 --> 00:03:23,510
você tem várias opções

76
00:03:23,510 --> 00:03:25,400
aqui, eu vou com cava. 

77
00:03:25,400 --> 00:03:28,100
A diferença entre
 Kovach e conter é

78
00:03:28,100 --> 00:03:31,730
o mostrador contêiner toda
 a imagem. 

79
00:03:31,730 --> 00:03:34,070
conteúdo nem sempre é
 a melhor opção

80
00:03:34,070 --> 00:03:37,130
porque quando você mostra
 a imagem inteira,

81
00:03:37,130 --> 00:03:40,810
se a imagem não for grande o suficiente
 para toda a tela,

82
00:03:40,805 --> 00:03:42,265
ela começará a estudar repetidos. 

83
00:03:42,260 --> 00:03:44,150
Você pode ver em
 segundo plano aqui que você meio

84
00:03:44,150 --> 00:03:46,280
que tem a imagem
 se repetindo novamente. 

85
00:03:46,280 --> 00:03:48,400
Mas com o COVID, você basicamente,

86
00:03:48,395 --> 00:03:49,765
você está basicamente dizendo: Ei,

87
00:03:49,760 --> 00:03:51,800
tente garantir que a imagem

88
00:03:51,800 --> 00:03:53,820
cubra toda a tela. 

89
00:03:53,820 --> 00:03:56,770
É por isso que escolhi
 são abordados aqui,

90
00:03:56,765 --> 00:03:59,375
mas também
 adicionarei

91
00:03:59,375 --> 00:04:03,475
uma sobreposição de fundo. 
Então confira isso novamente. 

92
00:04:03,470 --> 00:04:05,090
Vou voltar na

93
00:04:05,090 --> 00:04:07,580
sobreposição. Vou
 clicar lá. 

94
00:04:07,580 --> 00:04:09,110
Eu quero, vou fazer
 é ir para

95
00:04:09,110 --> 00:04:10,840
o tipo de fundo como de costume,

96
00:04:10,835 --> 00:04:13,885
vamos escolher
 uma sobreposição preta. 

97
00:04:13,880 --> 00:04:15,680
E então a opacidade aqui,

98
00:04:15,680 --> 00:04:19,790
eu realmente fui
 com o 0.23. 

99
00:04:19,785 --> 00:04:22,245
Claro que você pode mudar isso

100
00:04:22,240 --> 00:04:24,340
se não quiser
 usar Zope e 23. 

101
00:04:24,340 --> 00:04:26,920
Mas agora vamos
 voltar aos textos reais. 

102
00:04:26,920 --> 00:04:28,060
Vamos voltar aqui. 

103
00:04:28,060 --> 00:04:29,620
E, claro, a cor do texto,

104
00:04:29,620 --> 00:04:32,520
vamos deixar
 este branco. 

105
00:04:32,515 --> 00:04:35,275
E aí está, ok. 

106
00:04:35,275 --> 00:04:39,885
Também vamos
 alterar o tamanho também. 

107
00:04:39,880 --> 00:04:45,920
Então, vou até 120 pixels.
 

108
00:04:46,170 --> 00:04:49,600
E, novamente, isso é
 totalmente subjetivo. 

109
00:04:49,600 --> 00:04:51,390
Você pode tornar o seu um
 pouco maior,

110
00:04:51,385 --> 00:04:52,645
um pouco menor. 

111
00:04:52,645 --> 00:04:56,245
Mas também vamos
 mudar o alinhamento também. 

112
00:04:56,245 --> 00:04:58,005
Vamos para o conteúdo. 
Vamos

113
00:04:58,000 --> 00:04:59,430
alinhá-lo ao centro. 

114
00:04:59,425 --> 00:05:01,825
E aí está, estamos
 viajando com eventual. 

115
00:05:01,829 --> 00:05:03,679
E então o que
 vamos fazer agora
 seria

116
00:05:03,680 --> 00:05:05,630
adicionar nosso botão. 

117
00:05:05,630 --> 00:05:07,640
Vou arrastar o
 botão aqui,

118
00:05:07,640 --> 00:05:10,580
Element e vou pular
 logo abaixo do título. 

119
00:05:10,580 --> 00:05:13,390
Claro que aqui,
 vamos dizer,

120
00:05:13,385 --> 00:05:20,315
reserve sua viagem. Agora. 

121
00:05:22,210 --> 00:05:24,440
Claro, é
 aqui que você adicionaria

122
00:05:24,440 --> 00:05:26,150
o link para talvez uma página ou
 um

123
00:05:26,150 --> 00:05:29,360
site XNOR, como um
 dourado ou Booking.com. 

124
00:05:29,360 --> 00:05:30,860
Se eu fosse sete, faça isso
 e poderíamos apenas dizer

125
00:05:30,860 --> 00:05:33,490
book kin dot com. 

126
00:05:33,485 --> 00:05:36,565
Vamos fazer isso. Nós podem.com
 só pela diversão disso. 

127
00:05:36,560 --> 00:05:39,250
E é claro que vamos
 alinhá-lo ao centro. 

128
00:05:39,245 --> 00:05:41,915
O tamanho aqui será médio. 

129
00:05:41,914 --> 00:05:44,364
Vamos adicionar um ícone também. 

130
00:05:44,360 --> 00:05:46,840
Ok, então vou escolher
 a biblioteca de ícones aqui. 

131
00:05:46,835 --> 00:05:50,975
Vamos procurar avião. 

132
00:05:51,310 --> 00:05:55,160
Vou escolher
 muito, minha inserção de urso. 

133
00:05:55,160 --> 00:05:56,570
Você tem a opção de alterar
 a

134
00:05:56,570 --> 00:05:59,800
posição do ícone para
 depois ou antes do texto. 

135
00:05:59,795 --> 00:06:01,925
Queremos manter isso antes. 

136
00:06:01,925 --> 00:06:04,675
E, em seguida, o espaçamento de ícones. 

137
00:06:04,670 --> 00:06:06,500
Você também pode adicionar
 algum espaçamento entre

138
00:06:06,500 --> 00:06:08,930
o ícone e a imagem. 

139
00:06:08,930 --> 00:06:11,000
Então, vou com a AIDS

140
00:06:11,000 --> 00:06:13,970
só para dar um
 pouco de espaçamento. 

141
00:06:13,970 --> 00:06:16,820
Agora vamos
 passar para o estilo. 

142
00:06:16,820 --> 00:06:20,370
É aqui que vamos
 fazer algumas grandes mudanças. 

143
00:06:20,374 --> 00:06:21,864
Então, o primeiro que
 vamos fazer

144
00:06:21,860 --> 00:06:23,840
aqui seria a topografia,

145
00:06:23,840 --> 00:06:25,640
os pesos dos textos. 

146
00:06:25,640 --> 00:06:31,780
Haverá 600 e
 depois se transformarão em maiúsculas. 

147
00:06:31,775 --> 00:06:33,175
Agora, como este é um link,

148
00:06:33,170 --> 00:06:36,140
você notaria que
 existe a ideia sublinhada,

149
00:06:36,140 --> 00:06:37,280
mas não queremos essa. 

150
00:06:37,280 --> 00:06:39,080
Então eu vou ao
 Estilo, vou,
 vou

151
00:06:39,080 --> 00:06:42,350
para a declaração
 e depois escolho nenhuma. 

152
00:06:42,350 --> 00:06:44,720
Não queremos nenhum
 dos textos em

153
00:06:44,720 --> 00:06:47,200
nenhum dos
 textos subjacentes lá. 

154
00:06:47,195 --> 00:06:51,115
Tudo bem, tipografia, cor,
 texto, cor aqui. 

155
00:06:51,110 --> 00:06:53,720
Vamos com o branco. 

156
00:06:53,720 --> 00:06:54,920
Tudo bem? 

157
00:06:54,920 --> 00:06:58,010
Então, para o botão
 em si,

158
00:06:58,010 --> 00:06:59,420
você terá o tipo de
 fundo

159
00:06:59,420 --> 00:07:00,880
e vamos clicar lá. 

160
00:07:00,875 --> 00:07:02,365
E nós vamos com a

161
00:07:02,360 --> 00:07:05,800
cor
 clássica aqui
 seria laranja. 

162
00:07:05,795 --> 00:07:10,745
Agora vamos definir uma
 fronteira, bem como sólida. 

163
00:07:10,745 --> 00:07:12,725
Então o que vamos

164
00:07:12,725 --> 00:07:13,885
fazer para a borda é
 que vamos mudar

165
00:07:13,880 --> 00:07:17,350
a cor da borda para a cor
 laranja também. 

166
00:07:17,345 --> 00:07:20,225
E então vamos adicionar
 um raio de borda

167
00:07:20,225 --> 00:07:22,855
apenas para fazer os círculos,

168
00:07:22,850 --> 00:07:25,010
as bordas apenas um
 pouco circulares. 

169
00:07:25,010 --> 00:07:27,590
Vamos com dez,

170
00:07:27,590 --> 00:07:30,800
desculpe, vamos
 com 12 pixels aqui. 

171
00:07:30,800 --> 00:07:33,050
E é isso. 

172
00:07:33,050 --> 00:07:35,990
Vou seguir em frente
 agora e atualizar. 

173
00:07:35,990 --> 00:07:39,050
E vamos ver o
 que parece. 

174
00:07:39,050 --> 00:07:42,250
Vamos sair para o painel. 

175
00:07:42,245 --> 00:07:46,655
Vamos clicar aqui,
 ir para a página inicial

176
00:07:46,655 --> 00:07:48,865
e lá está. 

177
00:07:48,860 --> 00:07:50,750
Então, viajando em
 seu eventual,

178
00:07:50,750 --> 00:07:52,760
é
 claro que temos o botão

179
00:07:52,760 --> 00:07:56,930
aqui que se
 vincularia à nossa booking.com. 

180
00:07:56,930 --> 00:07:59,710
Mas então, como conseguimos isso? 

181
00:07:59,705 --> 00:08:02,935
Onde você tem o
 fundo basicamente

182
00:08:02,930 --> 00:08:06,650
se
 misturando com a
 cabeça para a Alemanha. 

183
00:08:06,650 --> 00:08:10,260
Próximo vídeo, onde
 mostrarei como fazer isso.