Wix Art Store: personalizar o design da sua galeria do Wix Art Store
8 min de leitura
Importante:
No momento, o Wix Art Store não está disponível para todos os usuários. A partir de outubro de 2022, não é mais possível adicionar o Wix Art Store ao seu site. Como alternativa, você pode adicionar o Wix Stores ao seu site e conectá-lo ao Printful para vender sua arte.
Você pode personalizar o design da sua galeria do Wix Art Store para as visualizações normal e ao passar o mouse (a visualização que um cliente vê ao passar o mouse sobre a galeria).
Para personalizar o design:
- Clique na galeria do Wix Art Store no Editor.
- Clique em Configurações.
- Clique na aba Design.
- Personalize o design da galeria usando as seguintes opções:
Sobreposição e ícones
Uma sobreposição fica em cima de uma imagem e adiciona um efeito extra quando você passa o mouse sobre a imagem. Você pode personalizar esse efeito, assim como quaisquer ícones que você tenha.
- Clique em Sobreposição e ícones.
- Escolha entre uma sobreposição total ou parcial e personalize usando as opções disponíveis:
- Sobreposição total: a sobreposição cobre todo o item.
- Gradiente: clique na alavanca para ativar uma sobreposição de gradiente.
- Cor e opacidade 1 e 2: clique na caixa de cores relevante para personalizar as cores do gradiente. Em seguida, arraste o slider para ajustar a opacidade das cores.
- Direção do gradiente: arraste o slider para ajustar a direção da sobreposição do gradiente.
- Cor do ícone: clique na caixa de cores para alterar a cor dos ícones da galeria que aparecem ao passar o mouse.
- Sobreposição de cores: clique na caixa de cores para escolher uma cor. Em seguida, arraste o slider para alterar a transparência da sobreposição de cores.
- Cor do ícone: clique na caixa de cores e selecione uma nova cor para os ícones da galeria.
- Gradiente: clique na alavanca para ativar uma sobreposição de gradiente.
- Sobreposição parcial: a sobreposição cobre apenas uma parte do item.
- Definir tamanho em: gerencie o tamanho da sobreposição em porcentagens ou pixels.
- Tamanho: arraste o slider ou insira um valor para escolher o tamanho da sobreposição.
- Sobreposição começa em: escolha onde sua sobreposição é posicionada.
- Preenchimento: arraste o slider para ajustar a quantidade de espaço entre a borda da galeria e sua sobreposição.
- Gradiente: clique na alavanca para ativar uma sobreposição de gradiente.
- Cor e opacidade 1 e 2: clique na caixa de cores relevante para personalizar as cores do gradiente. Em seguida, arraste o slider para ajustar a opacidade das cores.
- Direção do gradiente: arraste o slider para ajustar a direção da sobreposição do gradiente.
- Cor do ícone: clique na caixa de cores para alterar a cor dos ícones da galeria que aparecem ao passar o mouse.
- Sobreposição de cores: clique na caixa de cores para escolher uma cor. Em seguida, arraste o slider para alterar a transparência da sobreposição de cores.
- Cor do ícone: clique na caixa de cores e selecione uma nova cor para os ícones da galeria.
- Sobreposição total: a sobreposição cobre todo o item.
- Escolha um efeito de sobreposição entre opções disponíveis:
- Sem efeito: a sobreposição não aplica nenhum efeito.
- Aparecer: a sobreposição aparece gradualmente ao passar o mouse.
- Expandir: a sobreposição se expande ao passar o mouse.
- Deslizar: a sobreposição desliza para cima ao passar o mouse.
- Deslizar para a direita: a sobreposição desliza para a direita ao passar o mouse.
Textos
Você pode personalizar o design do título e do texto da descrição, desde que você escolha exibi-los na aba Layout. Se você não vir as opções Textos (etapa 1 abaixo), vá para a aba Layout, clique em Personalizar Layout e marque as caixas de seleção ao lado de Título e Descrição para exibi-los.
- Clique em Textos.
- Personalize o texto usando as opções abaixo:
- Informações a serem exibidas: marque a caixa de seleção ao lado das informações que você deseja exibir (Título, Descrição, Contador de slideshow).
Observação: a opção Contador de slideshow só está disponível no layout Slideshow se você tiver ativado o slide automaticamente. - Informações e posição do botão: escolha exibir seu texto e o botão acima, abaixo, à esquerda ou à direita da imagem.
- O que acontece com a informação ao passar o mouse? Escolha o que acontece com seu texto quando os visitantes passam o mouse sobre um item.
- Estilo e cor do título: selecione a fonte e a cor do texto do título.
- Estilo e cor da fonte da descrição: selecione a fonte e a cor do texto da descrição.
- Alinhamento horizontal: escolha alinhar o texto horizontal à esquerda, à direita ou ao centro.
- Alinhamento vertical: escolha alinhar o texto vertical à esquerda, à direita ou ao centro.
- Preenchimento vertical do texto: arraste o slider para alterar a quantidade de espaço entre o texto vertical e a borda.
- Preenchimento horizontal do texto: arraste o slider para alterar a quantidade de espaço entre o texto horizontal e a borda.
- Informações a serem exibidas: marque a caixa de seleção ao lado das informações que você deseja exibir (Título, Descrição, Contador de slideshow).
Botões
Personalize os botões Comprar Agora e Ver mais.
Clique em Botões e personalize o seguinte:
Clique em Botões e personalize o seguinte:
- Botão de Compre Já: clique no botão para ativar ou desativar o botão Compre Já.
- Ativado: o botão Comprar Agora aparece abaixo da imagem. Personalize o botão:
- Texto do botão: edite o texto que aparece no botão Comprar Agora.
- Estilo e cor da fonte: clique no menu dropdown para selecionar a fonte e clique no seletor de cores para alterar a cor do texto do botão.
- Cor e opacidade do botão: arraste o slider para alterar a opacidade e clique no seletor de cores para alterar a cor do botão.
- Largura e cor da borda: arraste o slider para alterar a largura e clique no seletor de cores para alterar a cor da borda.
- Raio do canto: arraste o slider para alterar o raio do canto. Quanto maior o raio, mais arredondados serão os cantos.
- Alinhamento horizontal: escolha alinhar o botão à esquerda, ao centro ou à direita horizontalmente.
- Alinhamento vertical: escolha alinhar o botão à esquerda, ao centro ou à direita verticalmente.
- Desativada: o botão Compre Já não aparece.
- Ativado: o botão Comprar Agora aparece abaixo da imagem. Personalize o botão:
- Botão Ver mais: personalize o botão Ver mais que aparece sob a galeria:
Observação: essa seção aparecerá se você optar por mostrar o botão Ver mais na aba Layout.- Texto do botão: edite o texto que aparece no botão Ver mais.
- Estilo e cor da fonte: clique no menu dropdown para selecionar a fonte e clique no seletor de cores para alterar a cor do texto do botão.
- Cor e opacidade do botão: arraste o slider para alterar a opacidade e clique no seletor de cores para alterar a cor do botão.
- Largura e cor da borda: arraste o slider para alterar a largura e clique no seletor de cores para alterar a cor da borda.
- Raio do canto: arraste o slider para alterar o raio do canto. Quanto maior o raio, mais arredondados serão os cantos.
Estilo do item
Cada imagem ou vídeo na galeria é um item. Você pode alterar a aparência dos itens tanto no modo normal quanto no ao passar o mouse.
- Clique em Estilo do Item.
- Personalize a exibição normal do item em Estilo do item:
- Largura e cor da borda: arraste o slider para alterar a largura da borda e clique na caixa de cores para selecionar uma cor.
- Raio do canto: arraste o slider para deixar os cantos mais redondos ou quadrados.
Observação: as opções Largura e cor da borda e Raio do canto só estão disponíveis quando você escolhe recortar suas miniaturas nas configurações do layout e se aplicam apenas à imagem principal (não às miniaturas).
- Sombra: clique na alavanca para ativar ou desativar a sombra:
- Ativada: o item da galeria tem uma sombra ao seu redor. Personalize a opacidade, a cor, o desfoque, a direção da sombra e o tamanho da sombra.
- Desativada: o item da galeria não tem uma sombra ao seu redor.
- Escolha o que acontece quando alguém passa o mouse sobre o item da galeria:
- Sem efeito: nenhum efeito é aplicado ao passar o mouse.
- Aproximar: aumente o zoom na imagem ao passar o mouse.
- Blur (ou desfoque): a imagem fica desfocada ao passar o mouse.
- Tons Cinza: a imagem fica em preto e branco ao passar o mouse.
- Encolher: a imagem fica menor ao passar o mouse.
- Invertido: a cor da imagem é invertida ao passar o mouse.
- Cor: a imagem passa de preto e branco para colorido ao passar o mouse.
- Escurecer: a imagem fica um pouco mais escura ao passar o mouse.
- Escolha o que acontece enquanto a imagem está carregando:
- Imagem desfocada: uma versão desfocada da imagem aparece durante o carregamento.
- Cor do placeholder: um placeholder colorido aparece enquanto a imagem está sendo carregada.
Animação de rolagem
Escolha como os itens da galeria aparecem enquanto os visitantes rolam a página para baixo.
Clique em Animações de rolagem e selecione um efeito:
Clique em Animações de rolagem e selecione um efeito:
- Sem efeito: nenhum efeito ao rolar a galeria para baixo.
- Aparecer: a sobreposição aparece gradualmente.
- Tons de cinza: as cores da imagem mudam para tons de cinza.
- Deslizar: a sobreposição desliza para cima a partir da parte inferior.
- Expandir: a sobreposição se expande no mesmo lugar.
- Encolher: a imagem diminui um pouco.
- Zoom out: a imagem diminui.
- Uma cor: uma cor de sua escolha é exibida antes que o item seja revelado.
Personalizar
Personalize a janela pop-up que é aberta quando seus visitantes clicam em uma imagem.
Clique em Modo expansão e personalize o seguinte:
Clique em Modo expansão e personalize o seguinte:
- Configurações do modo expansão: selecione quais informações você deseja exibir na janela:
- Título: o título da imagem é exibido.
- Descrição: a descrição da imagem é exibida.
- Link: o link da imagem é exibido.
- Configurações de design: selecione as cores e fontes usadas na janela:
- Cor do background: clique no seletor de cores para alterar a cor do background.
- Cor do ícone: clique no seletor de cores para alterar um dos ícones (ex.: o ícone de coração).
- Estilo do título: clique no menu dropdown para selecionar a fonte e clique no seletor de cores para alterar a cor do texto do título.
- Estilo da descrição: clique no menu dropdown para selecionar a fonte e clique no seletor de cores para alterar a cor do texto da descrição.
- Botão Adicionar ao carrinho: personalize o botão Adicionar ao carrinho:
- Estilo e cor da fonte: clique no menu dropdown para selecionar a fonte e clique no seletor de cores para alterar a cor do texto do botão.
- Cor e opacidade do botão: arraste o slider para alterar a opacidade do botão.
- Largura e cor da borda: arraste o slider para alterar a largura da borda e clique no seletor de cores para alterar a cor do botão.
- Texto do botão: edite o texto do botão.
- Clique em OK.
Dica:
Por definição, a visualização que você vê no Editor é a visualização ao passar o mouse. Clique em Sair do modo mouseover para desativar essa visualização. Clique em Visualizar modo mouseover para ver a visualização ao passar o mouse novamente.