Tudo bem, então vamos dar uma olhada em tornar
a página inicial ou responsiva.
E na maioria das partes,
na verdade não é tão ruim.
Isso é para a visualização do tablet.
Obviamente, podemos tornar o título um pouco menor.
Faça a banana também um pouco mais curta em altura.
Bem aqui.
Claro, podemos adicionar um pouco de preenchimento à bola para a
seção de viagens, bem como
ensinável a melhor prosseguir seção também.
Mas acho que isso é tudo o que precisamos fazer porque
o resto é realmente muito bom.
A seção exclusiva de design do canal parece boa.
A galeria está boa.
Visitas, nossa seção de blog está boa.
Ele não empacota avaliações, tudo bem.
No entanto, para a visualização móvel,
que é o que chegamos aqui, obviamente,
teremos que tornar o texto muito,
muito, muito menor como você pode ver.
Também adicione preenchimento aqui também para a seção de viagens.
E precisamos fazer algo sobre o fato
que temos
as duas imagens para a
segunda seção alinhadas
uma ao lado da outra, idealmente deveria ser,
eu adorarei viajar.
Então esta imagem e, em seguida, nossos filhos
, os melhores lugares e depois a imagem desta montanha.
Então, vamos ter que fazer algo sobre isso também.
Fora isso, o resto
da página parece muito bom a considerar.
A galeria agora é uma única linha, o que é bom.
A seção do blog também é uma única linha.
Quero 22 linhas, sinto muito.
Em seguida, ele não empacota todas as revisões agora e
a própria coluna separada e, em seguida, também produz como
você pode ver, isso em.
Tudo. Certo, então vamos em frente e começar
a fazer as alterações.
Então, vamos editar com o Elementor.
Vamos lidar com o banner primeiro porque esse é o
principal. Esse é o principal problema.
Tudo bem. Tablets responsivos.
O que temos aqui?
Vamos seguir em frente agora e editar o texto.
E o texto era de cerca de 120 pixels.
Como você pode ver.
Vamos ter duas grandes quebras,
apenas um pouco mais pequenas.
Então, digamos que 88 pixels de largura.
Mas não se esqueça de que definimos uma altura para a seção.
Vamos para esta seção agora.
Temos a altura mínima aqui.
Vamos reduzir isso o máximo que pudermos.
Não se preocupe com o texto sobrepondo
o cabeçalho por enquanto.
Mas vamos tentar dar-lhe uma altura razoável
para a mesa.
E eu acho que 519, meu bebê,
muito pequeno, digamos setecentos.
Setecentos parecem bem o suficiente.
Então, a partir daqui, não se esqueça de que também lhe damos
margens negativas.
Agora que reduzimos o tamanho de cento, dezentas para 700 mulheres,
além de ir
para o Advanced Convite aqui.
Não se deixe enganar pelo fato de você não ver
nada dentro das caixas de margem.
Na verdade, ele está herdando as margens
da visualização da área de trabalho.
Então, aqui, vamos em frente agora e tentar reduzir isso.
Desculpe, esqueci de desvincular.
Vamos fazer isso 10.
Tudo bem. Vou continuar subindo novamente.
Isso deve ser sobre, deixe-me dar
150 menos, ok, eu não posso fazer isso.
Deixe-me tentar isso.
Menos 150.
Certo? Acho que isso é um pouco demais.
Vamos descer.
Ok, então deve ser
cerca de 123 alto-falantes de lazer
um vinte e cinco, vinte e cinco pixels.
Agora, para o texto em si ou para o cabeçalho,
poderíamos fazer isso um pouco menor novamente.
E é isso.
O que você acha?
Acho que isso está bem. 80 pixels para o cabeçalho.
Reduza a altura desta seção para 700 pixels,
reduziu a margem negativa também.
E eu acho que isso é bom, embora tenha cuidado,
você vê agora que, se expandirmos
a tabela para o tamanho máximo da tela,
você pode ver que agora temos o espaço em branco aparecendo.
Então isso deve nos dizer agora
que tudo bem, espere um segundo.
Precisamos aumentar as imaginas negativas,
na verdade, isso é outra coisa que você deve ser um abastado.
Sempre que você estiver aplicando
margens negativas e modo responsivo,
certifique-se de estar aplicando margens negativas
ao maior tamanho de tela possível.
Este é o maior conciso possível para
a visão inclinada em 1024 por 878,
vamos aumentar, ou melhor,
neste caso, reduzir a margem negativa.
Porque quando você é negativo, estamos
reduzindo isso. É tudo 158.
É, então agora,
se dermos isso para o menor tamanho para tablet,
ainda não veremos nenhum espaço em branco.
E é isso.
Certo, acho que isso é bom para o tablet.
Vamos agora fazer algumas alterações
na primeira ou na segunda seção.
E isso dá agora, o que precisamos fazer?
Para os tablets? Podemos adicionar um pouco de preenchimento.
Tudo bem, vamos entrar aqui e é seção.
Vamos para Avançado.
E aqui, vamos adicionar um pouco de preenchimento.
Podemos ir para os 25 pixels usuais e
, em seguida, um efeito de pixels para a parte inferior também.
Vamos esfriar aqui.
Faremos exatamente a mesma coisa aqui também.
Vou te mostrar algo muito legal.
25 pixels da parte superior e
, em seguida, 25 pixels da parte inferior também.
Eu, agora, se você olhar para isso,
você vai perceber que na verdade não parece tão bom.
Quero dizer, você tem uma imagem aqui bola,
os textos, a coluna de textos é um pouco grande demais.
É um pouco alto demais.
Awesome também vai com a segunda seção.
Então, o que exatamente podemos fazer?
A coisa mais simples que poderíamos fazer seria simplesmente fazer com
que cada coluna tenha 100% de largura.
Então, em vez de ter duas colunas, terá
que vir lado a lado.
Teremos duas colunas uma sobre a outra.
Então, como exemplo, bem aqui,
se eu der essa primeira coluna aqui,
vamos dar a isso um ou
cem, cem.
E então vamos dar esta coluna e também 100.
E lá está ele.
Neste momento, mesmo se expandirmos para
o maior tamanho possível em um tablet,
acho que parece tudo bem.
Isso parece bom em uma dica,
mas apenas certifique-se de que as imagens sejam grandes o suficiente.
Uma mudança só precisaria fazer
aqui seria adicionar
algum preenchimento a este botão Saiba mais.
Vou clicar lá, ir para o
padrão avançado e os budistas adicionarem na parte inferior.
Vamos adicionar um pouco de preenchimento aqui.
Deixe-me dizer que 25 pixels podem ser um pouco demais.
Nesse caso, talvez 15 pixels.
15 pixels estão bons.
E lá está ele.
Ok, vamos fazer exatamente o mesmo sintoma de tema aqui também.
Vou clicar nesta coluna aqui.
O goto, a largura da coluna.
Vou dar um 100.
E então a segunda coluna aqui também, 100.
Certo, e então dê uma olhada nisso.
Idealmente, queremos ter essa coluna aqui
em cima desta coluna.
Como fazemos isso?
Bem, vamos fazer é simplesmente ir para esta seção,
segurando essas duas colunas,
vá para a seção, vá para aqui para Avançado.
Qualquer aqui no responsivo.
Você verá essa opção para reverter as colunas.
Vamos fazer isso no tablet.
Vamos fazer isso e celular também.
Agora você pode ver que a criança,
a melhor coluna versus agora está no topo da montanha.
E é exatamente assim que fazer isso.
Vou apenas ir em frente e adicionar um pouco de preenchimento
ao botão do senhorio aqui.
Preenchimento na parte inferior, 2515 pixels.
Acredito que foi uma M&A está bem,
então vamos voltar ao topo.
Role para baixo.
K.
Temos muitos espaços.
Tudo bem.
Ok, parece bom, bom.
Agora vamos tentar reduzir o tamanho para o
menor e ver se há algo
que precisamos fazer aqui. Parece tudo bem.
Parece perfeitamente bom.
E lá está ele. Certo.
É isso para a visualização do tablet.
E a visualização móvel?
Vamos mudar para o celular.
Tudo bem, então obviamente a banana aqui,
vamos precisar consertar essa.
Bem, eu só vou rolar rapidamente para baixo aqui e
ver o resto da página.
O resto da página parece realmente muito bom.
Sim, isso parece bom.
Tudo está agora em uma única coluna na
qual usamos em uma coluna e,
em seguida, na página Contato.
Então, tudo o que precisamos fazer agora, seríamos
lidar com o banner.
Então, vamos fazer isso. Vou rolar para cima aqui.
Vamos para a seção.
Tudo bem, a primeira coisa que faremos agora
é para as alturas.
É uma altura mínima, 700 pixels.
É claro que isso é herdado da visualização do tablet.
Vamos ver se podemos realmente aumentar
um pouco o tamanho.
Na verdade.
Acho que 879, vamos tentar obter algo um pouco,
mesmo como 870 pixels talvez.
Vamos tentar aumentar o tamanho um pouco para
o maior tamanho para a visualização móvel.
Agora você notaria que há
um pouco demais de uma margem negativa
porque você pode ver a linha azul e você
pode ver o logotipo mostrado acima.
Então, o que vamos ter que fazer
agora é ir para o Advanced.
E então, para as margens negativas,
vamos tentar, na verdade,
não precisamos disso em margens negativas.
Na verdade, ia torná-lo 0.
Sim, vamos fazer isso 0 já que temos
um plano de fundo blecaute de qualquer maneira.
Então, o que o McDonald's 0?
Isso é para dispositivos móveis.
Tudo bem, então a partir daqui,
vamos reduzir as alturas.
Vamos reduzir a altura da página agora do banner em vez de
algo razoável.
Vamos ver. Acho que 535. E quanto a 530?
Acho que isso está bom.
colina de cinco terços parece boa. Role para baixo.
Certo. Sim.
Acho que você ficaria bem. Isso é fazer são muito pequenos.
E veja.
Ok, então os textos podem se tornar,
é um pouco grande demais na verdade.
Então, vamos fazer isso. Vou
voltar para editar a epigrafia do cabeçalho.
Vamos fazer é tentar fazer
isso tão pequeno quanto pudermos.
E agora, se expandirmos o maior para a visualização móvel,
o que você tem aqui é, ok,
então isso nos leva a uma nova discussão.
O silício está bem aqui no maior tamanho para celular,
o Texas, seria muito pequeno.
Se tentarmos aumentar o tamanho aqui,
ele ficará bem no tamanho de tela mais alto
possível para o celular.
O problema que eu sei é que, se reduzirmos o tamanho da tela
para o menor tamanho possível para dispositivos móveis,
agora esse texto é um pouco grande demais,
o que você pode fazer nesse tipo de cenário é mudar
o estilo unidade de tamanho de pixels
para a porta de exibição avaliada revise o VW ou a opção aqui,
o VW é a largura da janela de exibição.
O que tentaremos fazer é tentar ajustar o tamanho do
texto com base na largura do tamanho da tela.
Então confira isso.
Vou mudar agora para a VW.
E vamos tentar ir com um tamanho de dez.
Para o mais alto.
Este é o tamanho mais alto,
tamanho de tela para celular.
E então, se reduzirmos o tamanho para o menor,
você poderá ver que o texto também está reduzindo.
À medida que reduzimos o tamanho da tela.
Essa é uma dica que posso dar agora,
basta simplesmente mudar para VW em oposição
aos pixels ou K. Então, talvez, talvez
uma pequena coisa que possamos fazer.
Uma última coisa que poderíamos fazer novamente será
reduzir a altura um pouco mais.
Digamos que 450 pixels.
Essa deve ser a última mudança.
Vamos tentar fazer com que este seja menor.
E lá vai você.
Ok, eu acho que isso é, tudo bem.
Isso é bom neste momento.
Tudo bem.
Lá vai você.
Vamos rolar para baixo,
ver o que mais podemos fazer.
É praticamente isso.
Acho que estamos bem.
Deixe-me fazer este realmente pequeno.
Evidência, uma coluna.
E aí está,
ok, uma última coisa,
última coisa que poderíamos fazer é
talvez reduzir o tamanho
do botão aqui apenas um pouco.
Então, vamos em frente e edite o fundo
aqui, vamos para o estilo.
Na verdade, vou para o estilo.
Então, para a tipografia aqui,
vamos rapidamente na mistura de tamanhos deles.
Claro, isso está definido para dispositivos móveis,
e então vamos seguir em frente e talvez fazer este.
Vamos ver.
Falhas e pixels, talvez 14 pixels,
ou o que mais podemos mudar?
É claro que também podemos alterar o raio da fronteira.
Vamos derrubar este,
digamos cinco pixels.
E lá está ele.
Ok, agora aqui podemos tentar tornar o tamanho muito pequeno.
Na verdade, não testei isso.
Não tenho certeza se isso afetaria a visualização do tablet.
Vai afetar a visualização do tablet e
até mesmo a visualização da área de trabalho será sempre pequena.
Isso depende de você decidir apenas fazer,
tornar o botão pequeno.
Todos os três são tamanhos de tela.
Ou você poderia simplesmente ir com um meio.
Acho que o meio ficará bem para dispositivos móveis.
Tudo bem.
É isso.
Vou seguir em frente agora atualizações.
E lá está ele.
Construímos com sucesso em
uma nossa página inicial responsiva.
Obrigado por assistir e, claro, verei
você na próxima aula.