Bloco personalizado
Leia o guia completo para aprender tudo sobre o bloco personalizado ou vá diretamente para a seção que você está interessado em:
— Dicas.
O bloco Personalizado é um editor profissional embutido no Taplink que permite que você crie blocos únicos com seu próprio design. É como os editores gráficos populares, mas mais simples, mais conveniente e diretamente dentro do Taplink.
O bloco Personalizado permite implementar ideias de qualquer complexidade, incluindo a criação de um cabeçalho de página, um banner, uma galeria, cartões de produto e muito mais:
O bloco utiliza uma grade modular; ele se ajusta automaticamente a diferentes telas e dispositivos.
Criar e editar o bloco personalizado é fácil tanto em um computador quanto em um telefone.
As funções básicas do bloco estão disponíveis com o plano BÁSICO. Todas as funções estão disponíveis com os planos PRO e BUSINESS.
Existem duas maneiras de adicionar o bloco personalizado:
- Selecione um modelo pronto da biblioteca e personalize-o.
- Crie do zero.
A biblioteca de modelos oferece as seguintes categorias:
- Sobre mim.
- Banners promocionais.
- Navegação.
- Galerias.
- Recursos.
- Produtos.
Você pode personalizar cada modelo para atender às suas necessidades: editar texto, fazer upload de suas próprias imagens, alterar cores, adicionar ou remover elementos, reorganizar elementos, ajustar espaçamento e muito mais.
Para usar um modelo pronto:
- No modo de edição, toque em Adicionar bloco.
- Selecione o Bloco personalizado.
- Toque no modelo que você gostar.
Isso abrirá o editor de blocos, onde você pode fazer as alterações que desejar.
Para criar o Bloco Personalizado do zero:
- No modo de edição, toque em Adicionar bloco.
- Selecione o Bloco personalizado.
- Toque em Modelo em branco.
Isso abrirá o editor de blocos. Vamos dar uma olhada mais de perto na sua interface.
A interface do editor consiste em três partes principais:
- Camadas.
- Layout.
- Configurações de layout.
A interface pode parecer um pouco diferente dependendo do dispositivo que você está usando. Veja como ela se parece em um computador:
Se você estiver usando um telefone, verá o layout por padrão. Para acessar o painel de camadas ou as configurações de layout, toque nos ícones correspondentes (1 e 2).
Se você usar um telefone, também verá dois botões extras:
- Desfazer.
- Refazer.
Ao editar em um computador, use os atalhos do teclado: Ctrl + Z para desfazer e Ctrl + Shift + Z para refazer.
Em seguida, vamos dar uma olhada mais de perto nas principais partes da interface.
O painel de camadas exibe uma lista de todos os elementos adicionados. Veja o que você pode fazer com cada camada:
- Ocultar / mostrar.
- Trancar / destrancar.
- Mover uma camada para cima (para a frente) / para baixo (para trás).
O layout é a área onde você pode adicionar elementos e criar um design. A área usa uma grade modular na qual os elementos se encaixam.
Aqui é onde você pode encontrar as configurações de layout, como:
- Fundo.
- Ação de clique.
- Tamanho do layout.
Vamos analisar cada configuração com mais detalhes.
Para o plano de fundo do layout, você pode:
- Selecione uma cor da paleta.
- Defina uma cor personalizada.
- Crie um degradê.
A ação de clique é uma configuração que torna todo o bloco clicável. Quando clicado, uma ação específica como fazer uma ligação, abrir um produto digital, redirecionar para um site externo é realizada.
Por favor, note que se a ação Clique estiver ativada para o bloco inteiro, essa configuração não estará mais disponível para elementos individuais dentro do bloco.
O tamanho padrão do layout é 8×6 (8 colunas e 6 linhas). Para alterar o tamanho, toque em “+” ou “–” na lateral que deseja expandir ou reduzir (superior, inferior, direita ou esquerda).
O tamanho mínimo do layout é 1×1. O tamanho máximo é 12 colunas de largura e 36 linhas de altura.
O bloco Personalizado suporta os seguintes elementos:
- Texto.
- Botão.
- Retângulo.
- Ícone.
- Forma.
- Imagem.
Você pode adicionar elementos ao layout de várias maneiras:
- Toque em “+” (ou “+ ADICIONAR” em um computador) e selecione o elemento que você precisa. Isso adicionará um elemento 2×2 ao centro do layout.
- Toque duplo em qualquer célula na grade e selecione o elemento que você precisa. Isso adicionará um elemento 1×1 na célula exata em que você tocou.
- Selecione múltiplas células e escolha o elemento que você precisa. Isso adicionará o elemento dentro das células selecionadas.
Para redimensionar um elemento, arraste um dos pontos quadrados nos cantos do elemento.
Para mover um elemento, selecione-o, segure e arraste-o para a posição desejada.
Se você está trabalhando em um computador, também pode usar as teclas de seta para mover o elemento.
Todos os elementos no bloco personalizado podem ser personalizados. Para acessar as configurações de um elemento, toque nele.
Alguns ajustes são comuns para vários elementos (vamos chamá-los de ajustes “Repetidos”), enquanto outros são únicos e disponíveis para elementos específicos. Começaremos com os ajustes repetidos e depois passaremos para os ajustes únicos de cada elemento.
Vamos dar uma olhada nas configurações que são comuns a vários elementos.
Com cada elemento, você pode fazer o seguinte:
- Excluir: Excluir o elemento do layout.
- Duplicar: Criar uma cópia do elemento que será colocado uma camada acima do elemento original.
- Travar/destravar: Travar o elemento no layout para que ele não possa ser movido ou redimensionado acidentalmente. Destravar o elemento o torna editável novamente.
- Ocultar/mostrar: Tornar o elemento invisível no layout ou exibi-lo novamente.
Aqui, você pode ajustar:
- Preenchimento: Você pode definir uma cor (selecionar na paleta, usar uma cor personalizada ou criar um degradê) e transparência.
- Borda: Você pode ajustar a cor e a espessura da borda do elemento.
- Arredondamento: Você pode aplicar o mesmo arredondamento a todos os cantos do elemento ou definir valores de arredondamento individuais para cada canto.
Aqui, você pode ajustar:
- Sombra.
- Desfoque.
Você pode definir a cor da sombra, ajustar sua transparência, deslocamentos X e Y, e um efeito de desfoque.
Esta configuração (ver captura de tela #1) torna um elemento clicável e permite que você atribua qualquer ação disponível (ver captura de tela #2).
Por favor, note que se um ação de clique é definida para todo o bloco, essa configuração não estará disponível para elementos individuais.
Para cada elemento (exceto Forma), você pode definir preenchimentos internos, incluindo topo, parte inferior, esquerda e direita. Os preenchimentos permitem ajustar a posição de um elemento em relação à grade. Os valores de preenchimento são medidos como uma porcentagem do tamanho atual do elemento. O valor máximo de preenchimento é 40%.
Ao usar um computador, você pode ajustar os preenchimentos sem abrir as configurações. Para fazer isso, selecione o elemento no layout, segure e arraste a alça localizada no meio da borda que você deseja ajustar.
Vamos passar por cada elemento e entrar em mais detalhes sobre as configurações específicas para eles.
Este elemento é usado para adicionar qualquer tipo de texto, como títulos, descrições, listas e muito mais.
Vamos dar uma olhada mais de perto nas configurações de tipografia. As configurações de Aparência, Efeitos, Ação de clique e Preenchimentos são ajustadas da mesma maneira que para outros elementos.
Tipografia. As configurações de tipografia permitem que você altere o seguinte:
- Tamanho.
- Fonte. Além das fontes embutidas, você pode usar qualquer fonte da biblioteca Google Fonts. Para fazer isso, digite o nome da fonte na barra de pesquisa e selecione a fonte que você precisa.
- Cor.
- Espaçamento entre linhas.
- Espaçamento entre letras.
- Alinhamento horizontal (esquerda, centro, direita ou justificado).
- Alinhamento vertical (topo, meio ou fundo).
O elemento de botão é usado para criar elementos interativos que direcionam os visitantes a tomar ações específicas, como navegar para outro bloco, outra página ou um site externo, abrir um produto digital, enviar um e-mail e mais.
Vamos dar uma olhada nas configurações de tipografia. As configurações de Aparência, Efeitos, Ação de clique e Preenchimentos são ajustadas da mesma maneira que para outros elementos.
Tipografia. As configurações de tipografia permitem que você altere o seguinte:
- Tamanho.
- Fonte. Além das fontes incorporadas, você pode usar qualquer fonte da biblioteca do Google Fonts. Para fazer isso, digite o nome da fonte na barra de pesquisa e selecione a fonte que você precisa.
- Cor.
- Espaçamento de linha.
- Espaçamento de letras.
Você pode usar o elemento Retângulo para adicionar formas geométricas individuais (um quadrado, retângulo, círculo) ao layout, criar contêineres, bem como criar designs complexos de várias camadas.
Vamos dar uma olhada nas configurações de Fundo. As configurações de Aparência, Efeitos, Ação de clique e Preenchimentos são ajustadas da mesma forma que para outros elementos.
Plano de fundo. Além de preenchimentos de cor sólida, você pode definir uma imagem como plano de fundo. Vamos considerar as configurações de imagem de plano de fundo com mais detalhes:
— Fonte da imagem. Você pode:
- Escolha uma imagem da galeria.
- Carregar sua própria imagem.
— Cortar. Ao carregar uma imagem, você pode cortá-la. Por padrão, a proporção de corte corresponde ao tamanho do elemento, mas você pode alterá-la, se necessário. Você pode selecionar uma das proporções de aspecto predefinidas (2) ou definir uma personalizada (3). Após escolher a proporção de aspecto desejada, arraste uma das alças quadradas (4) para cortar a imagem.
Se precisar alterar as proporções do elemento no futuro, você pode cortar a imagem novamente (desde que a imagem tenha sido inicialmente selecionada da galeria):
— Remoção de fundo. A função de remoção de fundo (veja a captura de tela #1) remove automaticamente o fundo da imagem enviada, deixando apenas o objeto principal (veja a captura de tela #2). Isso facilita a integração da imagem em seu layout, garantindo uma aparência limpa e profissional, ao mesmo tempo que simplifica a colocação do objeto em qualquer fundo.
— Alinhamento. Você pode alterar o alinhamento da imagem de fundo dentro do elemento usando a configuração correspondente:
— Excluir uma imagem. Se necessário, você pode excluir a imagem:
O elemento Ícone permite que você adicione ícones pré-fabricados aos seus designs. Esses ícones ajudam os usuários a navegar na página e entender rapidamente qual é o objetivo dos botões e texto.
Vamos dar uma olhada mais de perto nas configurações de miniatura. As configurações de Aparência, Efeitos, Ação de clique e Preenchimentos são ajustadas da mesma forma que para outros elementos.
Miniatura. Permite que você mude:
- Miniatura.
- Cor.
- Tamanho.
- Rotação.
O elemento Forma permite que você crie formas poligonais com qualquer número de lados: de triângulos a formas mais complexas. Eles podem ser usados como plano de fundo, elementos decorativos ou outros elementos de design gráfico.
As configurações da imagem de plano de fundo são as mesmas para o elemento Retângulo. As configurações de Aparência, Efeitos, Ação de Clique e Preenchimentos são ajustadas da mesma forma que para outros elementos.
Vamos nos concentrar em como criar uma forma personalizada.
1. Para ajustar um ângulo e dimensões laterais, basta arrastar um dos quadros de manuseio nos cantos do elemento.
2. Para adicionar outro canto, toque na alça circular com o sinal “+”.
Assim, adicionando mais lados e usando a opção de arredondamento nas configurações de Aparência , você pode criar a seguinte forma:
Você pode usar o elemento de Imagem para adicionar conteúdo visual, criar fundos, destacar produtos, demonstrar serviços ou projetar uma página para torná-la mais atraente e informativa para os visitantes.
Fazendo upload e ajustando uma imagem funciona da mesma forma que com o elemento Retângulo, exceto que você também pode ajustar a transparência nas configurações da Imagem:
As configurações de Aparência, Efeitos, Ação de clique e Preenchimentos são ajustadas da mesma forma que para outros elementos.
Depois de adicionar e personalizar os elementos, você precisa salvar o bloco. Veja como:
- Salve o layout tocando no botão Salvar.
- Salve o bloco clicando no botão Salvar novamente.
Essas dicas irão te ajudar a trabalhar de forma mais rápida e eficaz com as configurações do editor.
Você pode redefinir qualquer configuração para o seu valor padrão. Para fazer isso, toque no título da configuração, que está destacado em cinza. Isso abrirá uma janela pop-up Retornar ao padrão?. Se você tocar em Sim, a configuração será redefinida para o seu valor padrão.
