Site Wix do zero - Galeria de grades

• Pode 3, 2024

Neste tutorial, adicionaremos uma galeria ao nosso site Wix, que criamos a partir de um modelo em branco. Começar do zero é uma ótima maneira de aprender o básico.

Diferente dos modelos Wix que não são intercambiáveis, você pode alternar os tipos de galeria para uma nova aparência a qualquer momento. Existem muitos tipos de galerias, da grade de alvenaria ao favo de mel. Cada galeria tem seus próprios recursos. Vamos dar uma olhada na galeria básica de Grade (retrato).

1. Clique no ícone Mais no menu esquerdo e escolha Galeria na lista.
   
   
2. Passe o mouse sobre cada miniatura da galeria para ver uma visualização e uma descrição.
   
   
3. Agora, arraste a galeria Grade para a página.
   
   
4. Use as alças de redimensionamento para redimensionar a grade como desejar. Redimensionei a grade para a largura de 980 páginas.
   
   Nesse momento, a galeria possui algumas imagens de espaço reservado. Vamos mantê-los por enquanto e trabalhar na personalização das configurações da galeria para nossas necessidades.
   
   Configurações da galeria de grade
   
   Escala de imagem - Você tem a opção de cortar ou dimensionar a imagem para caber no quadro. A configuração de corte automático cortará automaticamente as imagens para caber no quadro e a opção Ajustar redimensionará a imagem para caber no quadro.
   
   Quando clicado - Você tem três opções para o que acontece quando uma imagem da galeria é clicada. Uma opção para que nada aconteça. O segundo é ter a imagem aberta como uma janela pop-up. O terceiro é abrir um link. Na maioria das vezes, a pop-up é uma boa opção, porque a imagem é exibida em um tamanho maior. Mas se você quiser enviar o visitante para outra página, use a opção A Link Opens.
   
   
5. Selecione a Galeria e clique no ícone Configuração no menu pop-up.
   
   
6. Na janela Configurações da grade, localize a seção Como as imagens se comportam. Escolha Corte automático ou Ajuste.
   
   
7. Na seção Quando clicado, defina uma das três opções.
   
   Galeria De Design
   
   Como mencionado acima, você pode alternar os designs da galeria a qualquer momento. Mas vamos continuar personalizando nosso design de grade. Para o design da grade, podemos personalizar a borda, os cantos, a sombra e o texto.
   
   
8. Com a galeria ainda selecionada, clique no ícone Design (pincel).
   
   
9. Para as configurações de borda, podemos alterar a cor, a opacidade e a largura da borda. Vamos manter a configuração padrão da largura definida como 0 e, portanto, sem borda.
   
   
10. Raio do canto - Clique no ícone do Raio do canto e defina o raio do canto superior esquerdo como desejar. Como o ícone do link indica, os outros três cantos serão atualizados para corresponder.
    
    
11. Sombra - selecione o ícone Sombra. Para adicionar uma sombra projetada, clique no botão Ativar sombra e defina Ângulo, Distância, Tamanho, Desfoque e Cor / Opacidade para a sombra.
    
    
12. Texto - Clique no ícone T para definir as opções para as configurações de título, descrição e outras configurações de texto. Vamos mudar o texto do padrão para o nosso tema de texto do parágrafo 1. Repita o procedimento para o texto Descrição.
    
    Configurações de Layout
    
    Para o design da galeria de grade, podemos controlar o número de colunas e linhas para as miniaturas. Também podemos controlar o espaçamento entre as miniaturas e como o texto é exibido sobre a imagem.
    
    
13. Com a galeria ainda selecionada, clique no ícone Layout no menu pop-up.
    
    
14. Use o controle deslizante para definir o número de colunas e linhas. Adicionar mais colunas e linhas resultará em imagens em miniatura menores na grade.
    
    
15. Você pode usar o controle deslizante de espaçamento para aumentar a quantidade de pixels entre as miniaturas. Adicionar mais espaço reduzirá o tamanho das miniaturas.
    
    
16. Sob os controles deslizantes, está a seção de alinhamento de texto. Você tem a opção de exibir o texto à esquerda, direita ou centro.
    
    

Capturas de tela usadas com permissão do Wix.com, Inc.

Instruções De Vídeo: Como criar um painel de membros com Site Wix 2018 [1º parte] (Pode 2024).