Resumo: Como adicionar um separador de formas ao WordPress
Um separador de formas é um gráfico SVG que adiciona transições visuais entre as seções da página. Não é necessário programar com o SeedProd.
- Instale o SeedProd – Adquira um plano pago, instale o plugin e insira sua chave de licença.
- Abra o editor visual – Crie ou edite uma página de destino ou um modelo de tema.
- Encontre os divisores de forma – Clique em qualquer seção, vá para a guia “Avançado” e abra o painel “Divisores de forma”.
- Personalizar – Escolha entre 18 formas e defina a cor, a largura e a altura.
- Opção sem plugin – Use o bloco Separador do WordPress para criar uma linha horizontal simples.
A maioria dos temas do WordPress não inclui uma função integrada para adicionar separadores com formas entre as seções. Esses separadores criam transições visuais elegantes que ajudam a orientar os visitantes ao longo da página, sem animações pesadas.
Você não precisa ter conhecimentos de programação ou design para adicioná-los, seja no site de uma pequena empresa, em um portfólio ou em um blog. Neste guia, vou mostrar duas maneiras de adicionar um separador de formas ao WordPress.
O que é um divisor de seção no WordPress?
Um divisor de seção, às vezes chamado de divisor de forma, é um elemento de design que pode ser usado para separar o conteúdo do WordPress. Ele adiciona uma transição visual entre as seções para que sua página pareça mais estruturada e mais fácil de acompanhar.
Você pode colocar divisores acima ou abaixo dos blocos de conteúdo para separar tópicos ou destacar áreas importantes na página.
Os divisores vêm em diferentes estilos, como divisores em formato SVG, divisores baseados em linha ou texto e designs personalizados. A maioria pode ser estilizada para combinar com as cores e o layout de sua marca, proporcionando um visual sofisticado.
Como adicionar divisores sofisticados ao seu site WordPress
O SeedProd permite adicionar divisores de forma a qualquer seção no WordPress por meio do seu painel integrado de divisores de forma, sem a necessidade de código.
Você pode escolher entre 18 estilos SVG e personalizar a cor, a largura, a altura e a posição.
Método 1: Criar divisores de site com o SeedProd
Para este método, vou usar o SeedProd para adicionar separadores com formas ao seu site WordPress.
O SeedProd é um dos melhores criadores de sites para WordPress. Ele permite que você crie temas personalizados para WordPress, páginas de destino e layouts de sites responsivos sem código.
Ele vem com centenas de modelos predefinidos, vários elementos de conteúdo e um editor visual fácil de arrastar e soltar para personalizar suas páginas do WordPress.
Um dos recursos que vou usar neste guia são os elegantes separadores de formas integrados do SeedProd. Eles permitem adicionar separadores de formas atraentes a qualquer postagem ou página com apenas alguns cliques, sem necessidade de programação.
Siga as etapas abaixo para adicionar divisores de forma ao WordPress com o SeedProd.
Instalar e ativar o plug-in do WordPress SeedProd
Primeiro, clique aqui para começar a usar o SeedProd e faça o download do plug-in em seu computador. Em seguida, carregue o arquivo .zip do plug-in em seu site do WordPress.
Você pode seguir este guia sobre como instalar um plug-in do WordPress se precisar de ajuda.
Observação:existe uma versão gratuita do SeedProd, mas vou usar a versão premium do SeedProd para o recurso Shape Divider.
Depois de instalar e ativar o SeedProd, vá para SeedProd " Settings e insira sua chave de licença do plug-in.
Para encontrar a chave de licença, faça login no site do SeedProd e procure na seção Downloads.
Criar um tema WordPress ou uma página de destino
Há duas maneiras de usar divisores de seção no SeedProd.
Você pode criar um novo tema do WordPress e adicionar divisores de forma a diferentes partes do tema. Ou pode criar uma página de destino independente e adicionar divisores de forma a uma única página.
Aqui estão as instruções para a configuração de ambos:
Tema para WordPress
O criador de temas do SeedProd permite que você crie um novo tema do WordPress com seu editor de arrastar e soltar.
Ele cria todos os arquivos que compõem o tema, inclusive a barra lateral, o cabeçalho, o rodapé, a postagem única etc. Em seguida, você pode personalizar cada arquivo visualmente, sem código.
Quando você ativar o novo tema, ele substituirá o tema existente do WordPress, portanto, escolha essa opção somente se você não se importar em perder o tema existente.
Siga este tutorial para criar um tema WordPress personalizado com o SeedProd.
Página de destino
O construtor de páginas de destino do SeedProd permite que você use sua interface de arrastar e soltar para criar páginas de destino únicas no WordPress. Você pode personalizar completamente o design, mas ele não substituirá o tema existente, ao contrário da versão do construtor de temas.
Essa é uma boa solução se você quiser manter seu tema atual do WordPress, mas ainda quiser usar o recurso de divisão de formas.
Siga este guia passo a passo para criar uma página de destino no WordPress.
Depois de criar um tema do WordPress ou uma página de destino, você pode passar para a próxima etapa.
Personalize seu design com um divisor de seção
Para adicionar separadores de forma ao WordPress, edite um modelo de tema ou uma página de destino, o que abrirá o editor visual do SeedProd. Neste tutorial, vou editar a página inicial do meu tema personalizado do WordPress.
Quando estiver no editor visual, você precisará encontrar uma área da página onde deseja adicionar o divisor de forma. O SeedProd permite adicionar divisores de forma a Seções, Colunas e Linhas.
Clique na seção ou linha escolhida para abrir o painel de configurações no lado esquerdo. Dentro desse painel, clique na guia avançada para ver mais opções de personalização.
Você verá o cabeçalho Shape Dividers na parte inferior do painel. Clique no título para abrir as configurações do Shape Divider.
Primeiro, você pode optar por adicionar um divisor na parte superior ou inferior da sua seção.
Em seguida, você pode clicar no menu suspenso para selecionar 18 formas diferentes para o divisor.
Depois de selecionar uma forma, o SeedProd mostrará configurações adicionais para personalizar a aparência da forma.
Por exemplo, você pode:
- Alterar a cor da forma
- Escolha uma largura e altura personalizadas
- Inverter a forma
- Traga a forma para a frente
Você pode seguir os mesmos passos para adicionar um separador de forma na parte inferior de uma seção.
Aqui estão mais alguns exemplos dos diferentes efeitos que você pode criar com os divisores de forma do SeedProd:
Montanhas
Ondas
Curva
Faça experiências com diferentes divisores de sites até que você esteja satisfeito com a aparência de tudo.
Os separadores de forma do SeedProd são responsivos por padrão. Se precisar ocultar um deles em dispositivos específicos, use as configurações de visibilidade do bloco na guia “Avançado”.
Publique seus divisores sofisticados no WordPress
Agora que os divisores de forma estão no lugar, você pode publicar seu novo design.
Se estiver criando um tema do WordPress, poderá publicá-lo acessando o SeedProd Theme Builder e clicando na opção "Enable SeedProd Theme" (Ativar tema do SeedProd) na posição Yes (Sim).
Basta clicar na seta suspensa no botão Salvar e clicar em Publicar para páginas de destino.
Agora você pode visitar o site ativo e ver o divisor de seção em ação. Aqui está um exemplo do nosso site de demonstração com divisões de seção na seção de imagem de fundo do herói:
Adição de ícones e divisores de texto com o SeedProd
Se os divisores de seção sofisticados não atenderem às necessidades do seu site, você também poderá usar o bloco Divider do SeedProd para adicionar uma linha de texto e divisores de ícones ao seu site WordPress.
O princípio é o mesmo de antes, mas em vez de escolher uma opção em linhas, colunas ou seções, você precisará arrastar o bloco Divider para a sua página.
A partir daí, você pode clicar em uma caixa suspensa para escolher um divisor de linha de ícone como este:
Ou um divisor de texto semelhante a este exemplo:
Portanto, agora você tem duas maneiras de criar divisores atraentes no WordPress com o SeedProd. A seguir, vamos dar uma olhada na adição de divisores sem um plug-in.
Método 2: Criar um divisor de seção no WordPress sem um plug-in
Você também pode usar as configurações internas do WordPress para adicionar divisores ao seu site. Esse método é útil se você não quiser instalar plug-ins adicionais do WordPress.
No entanto, as opções de personalização são mais limitadas. Por exemplo, você só pode adicionar diferentes estilos de linha e alterar a cor de fundo de cada quebra de linha.
Sugiro usar o Método 1 para opções avançadas de personalização. Siga as etapas abaixo para adicionar uma linha horizontal como divisória de seção no WordPress sem usar um plugin.
Adição de uma linha horizontal no editor de blocos do WordPress
Para adicionar um divisor de seção horizontal usando o editor de blocos do WordPress, abra um post ou uma página e clique no ícone de mais (+) no local onde deseja que o divisor fique.
Em seguida, digite "Separator" na caixa de pesquisa e clique no bloco Separator.
Depois de adicionar o bloco à sua página, você verá um separador horizontal entre cada seção de texto.
Você pode alterar o estilo do divisor clicando em Default (Padrão), Wide Line (Linha larga) ou Dots (Pontos) no painel à direita.
Você também pode alterar a cor de fundo do separador no mesmo painel.
Quando estiver satisfeito com a aparência de tudo, atualize ou publique sua página para ver os resultados.
Adição de uma linha horizontal no editor clássico do WordPress
Siga estas instruções para adicionar divisores de seção ao seu site usando o editor clássico do WordPress.
Edite uma postagem ou página existente ou crie uma nova. Se você não conseguir ver todas as configurações do editor, clique no ícone Alternar barra de ferramentas.
Em seguida, clique no local da página onde deseja adicionar o divisor. Em seguida, clique no ícone Linha horizontal.
Seu divisor de linha horizontal será preto e branco ou cinza-claro e cobrirá todo o post ou a página desta forma:
Perguntas frequentes sobre divisores de seção no WordPress
Como faço para adicionar um separador em forma de figura a uma página do WordPress sem usar código?
Abra qualquer seção no editor visual do SeedProd, clique na guia “Avançado” e role a tela até o painel “Divisórias de formas”. Escolha entre 18 formas SVG, defina a cor, a largura e a altura e, em seguida, publique. Não é necessário usar CSS nem código.
O divisor de formas do SeedProd funciona em qualquer página ou postagem?
Sim. Os separadores de forma funcionam em qualquer seção ou linha dentro do editor visual do SeedProd, seja você criando uma página de destino ou um tema completo do WordPress. Você pode adicionar um separador na parte superior ou inferior de qualquer seção.
O recurso de divisão por formas está disponível na versão gratuita do SeedProd?
Não. Os Divisores de Forma são um recurso premium. Você precisará de um plano pago do SeedProd para acessar o painel Divisores de Forma nas configurações avançadas.
Posso usar divisores de forma com o meu tema atual do WordPress?
Sim, com uma ressalva. Se você usar o criador de páginas de destino do SeedProd, seu tema atual permanecerá ativo e apenas a página de destino utilizará divisores de forma. Se você ativar o criador de temas do SeedProd, ele substituirá totalmente o seu tema atual.
Qual é a diferença entre um divisor de forma e um bloco separador no WordPress?
Um bloco separador (o bloco nativo do WordPress) insere uma linha horizontal simples entre áreas de conteúdo. Um divisor de forma é um gráfico SVG que ocupa toda a largura, como ondas ou curvas, e se estende por toda a borda da seção. Os divisores de forma são visualmente mais marcantes e totalmente personalizáveis no SeedProd.
SeedProd e sua pequena empresa
Esperamos que este artigo tenha ajudado você a aprender a adicionar um divisor de seção ao WordPress. Com o poderoso construtor de sites de arrastar e soltar do SeedProd, é muito fácil criar divisores de formas sofisticadas.
Aqui estão alguns artigos relacionados que podem ser úteis para você:
- Como criar uma página de blog no WordPress
- Como adicionar uma caixa de autor no WordPress
- Como adicionar uma barra lateral personalizada ao WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
