Mostrar em imagens: cartões, miniaturas, galerias, carrossel, antes/depois, vídeo

Os componentes da categoria Mídias: Cartões, Miniaturas, Galeria de fotos, Carrossel, Antes / depois e Vídeo, com as proporções de imagem, o recorte, os filtros, a ampliação com um clique, a rolagem, a comparação com o cursor e os vídeos do YouTube ou do Vimeo.

Seis componentes para destacar suas imagens e seus vídeos, na categoria Mídias da paleta. Os que mostram imagens as buscam na biblioteca de mídias e as recortam conforme sua proporção, no centro ou em torno do seu ponto forte no caso da Galeria de fotos: veja Imagens e ícones no editor.

Cartões#

Uma grade de cartões com imagem + título + texto, com um link opcional por cartão: serviços, projetos, equipe. A proporção das imagens é escolhida para o bloco inteiro (padrão 4:3, quadrada, foto 3:2, paisagem 16:9 ou altura natural). No máximo três colunas; um ou dois cartões ocupam toda a largura.

Miniaturas#

Uma grade de imagens, cada uma com um texto alternativo, uma categoria exibida como legenda e um link opcional: projetos, trabalhos, produtos. A imagem é obrigatória. A proporção das imagens é escolhida para o bloco inteiro (padrão 4:3, quadrada, foto 3:2 ou paisagem 16:9), em três colunas por padrão (duas no tablet). As imagens também podem vir de uma galeria do site, escolhida em Imagens exibidas: veja As galerias.

A opção Largura total de uma imagem a transforma em um banner em toda a linha, na sua altura natural e sem legenda.

Os botões de filtro acima das miniaturas vêm de uma galeria do site: crie nela um campo Etiquetas, marque as de cada obra e depois escolha esse campo em Botões de filtro. Uma obra aparece sob cada uma de suas etiquetas. Veja As galerias.

Galeria de fotos#

Uma grade de fotos que se ampliam com um clique: o visitante passa de uma a outra em tela cheia, com seu título e sua descrição. Três apresentações na paleta: Galeria de fotos (quadrados regulares), Galeria em mosaico (cada foto mantém seu formato) e Galeria de ponta a ponta (sem espaçamento). O restante é ajustado no bloco: número de colunas, formato das miniaturas, espaçamento, efeito ao passar o mouse, legenda sob cada foto. Uma foto que tenha um link leva a esse link em vez de se ampliar. As fotos também podem vir de uma galeria do site, escolhida em Imagens exibidas: veja As galerias.

O mais rápido: arraste suas fotos do seu computador diretamente para a galeria, elas são adicionadas em sequência. Caso contrário, Adicionar fotos abre a biblioteca de mídias: marque as imagens (Shift+clique para um intervalo, Selecionar tudo após uma busca), elas são adicionadas na ordem escolhida. Uma galeria comporta no máximo 40 fotos (todas aparecem na página: acima disso, crie vários álbuns), e cada adição no máximo 10. O seletor sempre indica quanto espaço resta. No envio, a posição GPS registrada em suas fotos é removida para proteger sua privacidade; o restante de suas informações (autor, copyright, câmera, configurações) é preservado.

Para organizar, dê um clique duplo na galeria: todas as fotos aparecem em miniaturas. Clique em uma delas para escrever seu título, sua descrição, seu texto alternativo ou seu link, ou para substituí-la. ⌘ ou Ctrl+clique e Shift+clique selecionam várias, para mover ou remover de uma só vez; arraste uma miniatura para alterar a ordem. As configurações (colunas, formato…) estão em Apresentação da galeria.

Quando as miniaturas são recortadas (quadrada, paisagem, retrato), o detalhe de uma foto mostra a imagem inteira: clique no seu ponto focal, a parte que deve permanecer sempre visível, um rosto por exemplo, ou arraste o ponto. A miniatura no formato escolhido acompanha. O ponto focal pertence à imagem: ele vale em todo lugar onde ela é recortada, inclusive como fundo de seção, e você o reencontra se mudar de formato. Recentralizar o remove. Ele é gravado com Salvar, e ⌘Z o desfaz. No formato original (mosaico), nada é recortado: não há ponto focal a ajustar.

Cada foto tem seu próprio endereço. No visualizador, o botão Copiar o link copia o endereço da página que abre diretamente nessa foto, ampliada: para compartilhar em uma mensagem ou em uma rede social. Ele não muda se você renomear ou mover a foto. No formato original (mosaico), cada foto se encaixa na coluna mais curta, sem buracos, na ordem da galeria.

Carrossel#

Fotos em formato fixo que passam uma a uma: com o dedo em um celular, com as setas ou os pontos, ou sozinhas. Cada slide pode ter um título, um texto e um link (o slide inteiro fica clicável). Inserido pela paleta (Carrossel de fotos), ele avança quando o visitante decide; o restante é ajustado no bloco: formato, enquadramento, largura, transição, rolagem automática, navegação. Para uma apresentação de ambiente, escolha uma Rolagem automática e a transição Fusão (ou Fusão e zoom lento); Largura total (borda a borda) o transforma em banner.

As fotos são adicionadas como na galeria: arraste-as para o carrossel ou clique em Adicionar fotos, depois dê um clique duplo no carrossel para organizá-las e escrever seus textos (configurações em Apresentação do carrossel). Um carrossel comporta no máximo 8 fotos: acima disso, uma galeria mostra tudo de uma vez. Quando ele avança sozinho, para ao passar o mouse, e um botão de pausa permite que o visitante o interrompa.

Antes / depois#

Duas fotos do mesmo lugar, uma antes do seu trabalho, outra depois: o visitante arrasta o cursor para passar de uma à outra, com o mouse, com o dedo ou pelo teclado. Ideal para uma reforma, um corte de cabelo, um jardim ou um retoque de foto. Inserido pela paleta (Antes / depois), ele é preenchido no bloco: Foto antes, Foto depois, uma descrição de cada uma para os visitantes que não veem a imagem, e uma legenda se você quiser. Enquanto faltar uma das duas fotos, ele não aparece no seu site.

As etiquetas exibem “Antes” e “Depois” no idioma da página; escreva as suas para datar as fotos (“Março”, “Junho”). O Formato define a proporção do quadro: Retrato (3:4) combina com um penteado ou um rosto. O Sentido do cursor faz com que ele deslize da esquerda para a direita ou de cima para baixo, a Posição inicial do cursor mostra de cara mais do antes ou mais do depois, e as Etiquetas ficam em cima, embaixo ou desaparecem. Um clique em uma etiqueta mostra sua foto por inteiro. Se o seu tema tiver um Movimento, a comparação é executada uma vez quando o visitante chega ao bloco: um traço de luz revela o depois, e então o cursor volta ao seu lugar. No editor, passe para o modo Prévia para vê-la.

Vídeo#

Um vídeo do YouTube ou do Vimeo na sua página. Primeiro publique o vídeo em um desses serviços, copie o link dele (botão Compartilhar) e cole-o em Link do vídeo. A imagem de prévia é opcional: sem ela, fica um fundo escuro nas cores do site. O formato Vertical combina com os Shorts.

Nada é carregado para os seus visitantes enquanto eles não iniciarem o vídeo. Eles veem primeiro a imagem de prévia e uma frase informando que o vídeo está hospedado no YouTube ou no Vimeo, que instalam seus próprios cookies: o clique deles equivale a um consentimento. É isso que permite que seu site continue sem banner de cookies.