Guia para inserir imagens responsivas no Visual Composer

By

Posted in

Índice:

Primeiro Passo – Acessando painel de administração:

Para acessar o painel de administração do website, vamos digitar a URL http://janiero.com.br/wp-admin em nosso navegador.

Uma página irá carregar solicitando dados de acesso – login e senha – que, uma vez preenchidos, irão redirecionar para a página principal do WordPress. A opção do painel estará logo acima do Início, no menu ao lado esquerdo como mostra a imagem abaixo:

Segundo Passo – Minhas Páginas:

Clique na opção “ Páginas” no menu do painel de administração.

Em seguida, selecione uma página e clique em “Editar”.

Terceiro passo – Editor Visual Padrão:

Se seu Editor Visual não estiver habilitado, clique em “Editor Visual Padrão”.

Agora, vamos adicionar um elemento à nossa página.

Para isso, clique no ícone “+” para adicionar um novo elemento e selecione a opção “Linha”;

Depois, clique no ícone de “lápis” para editar nossa linha.

3.1 Imagens Responsivas (background):

DICA IMPORTANTE: Verifique o Comportamento da Imagem em Diferentes Telas e Dispositivos

Nem todos os visitantes do seu site usam os mesmos dispositivos e os mesmos browsers (navegadores). Por isso, você, como designer e dono(a) do site, precisa se certificar de que seu background (imagem de fundo) tenha uma aparência boa no maior número possível de formas de visualização (diferentes telas). Para browsers da web (desktop), teste o seu plano de fundo pelo menos nos browsers mais comuns – Chrome, Firefox e Internet Explorer. Teste ainda sua versão mobile em um tablet ou um dispositivo móvel. Caso você tenha um desktop com aquelas belíssimas telas grandes (ou conhece algum sortudo que tenha), não esqueça de testar lá também. A ideia é testar para ver se seu plano de fundo funciona no maior número possível de tamanhos de tela.

Exemplo de uma boa imagem background:

Selecione a aba “Opções de Design” e clique no ícone “+” verde para inserir uma imagem. Nessa etapa, utilizarei como referência uma imagem de 1920 pixels de largura por 1080 pixels de altura.

Abaixo da imagem, onde está escrito “Restaurar Padrões”, temos 2 opções:

 

OBS (IMPORTANTE): Como estamos trabalhando com diversos tamanhos de tela, infelizmente não existe uma regra de tamanho de imagens que sempre devemos utilizar. Sempre quando inserimos uma imagem em nosso site, temos que ter em mente que ela se apresentará diferente para cada usuário. Para contornar essa situação, devemos realizar testes nas resoluções mais utilizas e ajustar a imagem para que ela se apresente da melhor maneira possível. Uma sugestão que posso te passar, é que utilize no máximo 1920 pixels de largura.
<h3″>Top 10 resoluções de tela mais usadas:

Fontehttps://www.w3counter.com/globalstats.php

 

1. Alterar para CAPA:

O mais recomendado é você deixar em CAPA, pois a imagem irá se adaptar em todas as telas. A única desvantagem dessa prática é que, para compensar a altura, a largura é alterada.

IMPORTANTE  – OBSERVAÇÃO PARA “CAPA”: Como estamos trabalhando o background do nosso conteúdo com uma imagem, devemos ter em mente que essa imagem SEMPRE será redimensionada para se adaptar à tela do usuário, ou seja, SEMPRE será “cortada” nesse processo. Minha dica é que você escolha imagens com seu principal conteúdo centralizado, pois nada de importante será perdido após o redimensionamento.

2. Deixar “Restaurar Padrões” (normal):

Diferente da “Capa”, ela não é cortada, sempre mantendo o ratio original. Porém, você deve tomar cuidado com o conteúdo, pois a altura da imagem pode acabar sendo menor na versão mobile.

Imagens comparativas (capa x normal):

Mobile conteúdo mínimo:

Mobile Conteúdo Regular:

Nas imagens acima, o mesmo conteúdo foi inserido nas 2 imagens background, porém o conteúdo da imagem 2 está bem diferente… No backgroundCapa”, o conteúdo se encaixou perfeitamente, pois a imagem foi cortada na largura para compensar na altura.

Já no background normal, a imagem permaneceu com o mesmo ratio, ou seja, nada foi perdido, porém o conteúdo passou a altura da imagem.

Desktop:

Clique na aba “Configurações Gerais” e altere os seguintes valores:

  1. Em Row Stretch, selecione “Stretch row and content” ou “Stretch row and content (no paddings)” para uma imagem sem margens.
  2. E em Content Position, selecione “Middle”;

  1. Desça a rolagem até a parte inferior e em “Classe Extra (Para Desenvolvedores)” insira a seguinte linha: “imagem-responsiva

  1. Ao final, clique em “Salvas Mudanças”.

As configurações da minha página de teste ficaram da seguinte forma:

3.2 Conteúdo somente Mobile ou Desktop:

Nesse tópico, irei mostrar como adicionar conteúdos exclusivos para desktop ou mobile. Para tanto, é necessário seguir os passos que explicarei a seguir:

Para conteúdo exclusivo em Desktop:

  1. Clique no ícone “+” para adicionar um novo elemento e selecione “Linha”;
  2. Depois, clique no ícone de “lápis” para editar nossa linha.
  3. Em seguida, desça até encontrar o formulário “Classe Extra” e adicione a classe “only-desktop”:

  1. Lembramos que essa classe foi criada pela Agência Layer Up para forçar o conteúdo a aparecer somente em computadores desktop.
  2. Ao final, clique em “Salvas mudanças”.

OBS: A classe “imagem-responsiva” da imagem acima é apenas um exemplo de nome de arquivo. Quando for em casos reais, ela não precisará ser inserida.

Para conteúdo exclusivo em Mobile (smartphone):

  1. Clique no ícone “+” para adicionar um novo elemento e selecione “Linha”;
  2. Depois, clique no ícone de “lápis” para editar nossa linha.
  3. Em seguida, desça até encontrar o formulário “Classe Extra” e adicione a classe “only-mobile”:

  1. Assim como na classe de Desktop, a classe mobile também foi criada pela Agência Layer Up de modo a forçar o conteúdo a aparecer somente em computadores desktop.
  2. Ao finalizar, clique em “Salvas mudanças”.

OBS: A classe “imagem-responsiva” da imagem acima é apenas um exemplo de nome de arquivo. Quando for em casos reais, ela não precisará ser inserida.

Extras – Outros Elementos:

1) Parágrafos

Para adicionar parágrafos simples:

  • Clique em adicionar elemento (+).
  • Selecione “Bloco de Texto“.
  • Preencha o campo “Texto” como quiser.
  • Ao final, clique em “Salvas Mudanças“.

2) Textos Personalizados

Para adicionar textos personalizados:

  • Clique em adicionar elemento (+).
  • Selecione “Cabeçalho Personalizado“.
  • Preencha o campo “Texto“.
  • Escolha as propriedades como quiser
  • Ao final, clique em “Salvas Mudanças“.

3) Espaço Vazio (espaçamento)

Para adicionar espaçamentos:

  • Clique em adicionar elemento (+).
  • Selecione “Espaço Vazio“.
  • Selecione o tamanho do espaço como quiser.
  • Ao final, clique em “Salvas Mudanças“.

Exemplo de espaço vazio:

4) Adicionar Imagens responsivas no conteúdo (não background)

Para adicionar imagens de conteúdo – que não sejam de background:

  • Clique em adicionar elemento (+).
  • Selecione “Imagem Única“.
  • Preencha os campos como quiser.
  • Ao final, clique em “Salvas Mudanças”.

OBS: no campo “Tamanho da(s) Imagem(ns)”, você irá digitar o tamanho da imagem que deseja conforme as seguintes medidas:

  1. thumbnail” = Miniatura de imagem;
  2. medium” = Imagem de tamanho médio;
  3. large” = Imagem de tamanho grande;
  4. full” = Imagem com tamanho completo.

Ou você pode escolher o tamanho em pixels, como por exemplo: 200 x 100 (largura x altura).


Seguindo os passos que expliquei, o resultado será algo como este exemplo abaixo:

5) Adicionar Vídeos

Para adicionar vídeos:

  • Clique em adicionar elemento (+)
  • Selecione “Player de Vídeo
  • Preencha o campo “Link(URL) do Vídeo” com o link de seu vídeo no YouTube ou Vimeo
  • Escolha as outras propriedades como quiser
  • Ao final, clique em “Salvas Mudanças“.

Seguindo os passos que expliquei, o resultado será algo como este exemplo abaixo:

 

Como otimizar as imagens para melhor desempenho:

Para suas fotos, recomendo que salve no formato .JPG.

OPCIONAL: Se estiver trabalhando com o Photoshop, salve (CTRL+S) a imagem em .jpg com qualidade 10.

Agora vamos comprimir o máximo da imagem utilizando uma ferramenta gratuita chamada TinyPng.

1- Entre no website e arraste a imagem para o local indicado abaixo:

2- Ele começara a compressão automaticamente.

3- Após concluído, clique em download.

4- Pronto! agora você já pode subir sua imagem para o site.

 

Comparação de formatos

Veja uma comparação dos diferentes tipos de formatos e compressões:

Graphic type JPEG GIF PNG-8 PNG-24
Single color
378 bytes

156 bytes

588 bytes

809 bytes
Anti-aliased text on a solid background
1876 bytes

566 bytes

1015 bytes

1791 bytes
Anti-aliased text on a transparent background no transparency
365 bytes

867 bytes

1538 bytes
Gradient
742 bytes

2331 bytes

1072 bytes

1299 bytes
Flat colors
3006 bytes

964 bytes

1237 bytes

2346 bytes
Flat-color motive on transparent background no transparency
784 bytes

1105 bytes

2007 bytes
Full-color motive
2942 bytes

2662 bytes

2270 bytes

4847 bytes
Full-color motive on transparent background no transparency
2373 bytes

2333 bytes

5211 bytes
Animation no animation
16086 bytes
no animation no animation
Photo
4208 bytes

6995 bytes

7521 bytes

23810 bytes

 

Observações finais:

Todos os conteúdos inseridos nesta artigo, foram inseridos neste link: http://layerup.com.br/janiero/layerup-pagina-de-testes/

Para acessar a parte administrativa dessa página utilizando os mesmos dados da janiero.com.br, é só entrar pelo: http://layerup.com.br/janiero/wp-admin

Dúvidas? Pode nos mandar uma mensagem para contato@layerup.com.br

About The

No comments yet.

Deixe uma resposta

Comment


btt