Resumo: Como Adicionar um Separador de Forma ao WordPress
Um separador de forma é um gráfico SVG que adiciona transições visuais entre seções da página. Sem código necessário 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 modelo de tema.
- Encontre os Separadores de Forma – Clique em qualquer seção, vá para a aba Avançado e abra o painel Separadores de Forma.
- Personalize – Escolha entre 18 formas, defina cor, largura e altura.
- Opção sem plugin – Use o bloco Separador do WordPress para uma linha horizontal simples em vez disso.
A maioria dos temas do WordPress não inclui uma maneira integrada de adicionar separadores de forma entre seções. Os separadores de forma criam transições visuais limpas que ajudam a guiar os visitantes pela página, sem animações pesadas.
Você não precisa de habilidades de codificação ou design para adicioná-los, quer você tenha um site de pequena empresa, um portfólio ou um blog. Neste guia, mostrarei duas maneiras de adicionar um separador de forma ao WordPress.
O Que é um Separador de Seção no WordPress?
Um separador de seção, às vezes chamado de separador de forma, é um elemento de design que você pode usar para dividir seu conteúdo do WordPress. Ele adiciona uma transição visual entre as seções para que sua página pareça mais estruturada e fácil de seguir.
Você pode colocar separadores acima ou abaixo dos blocos de conteúdo para separar tópicos ou destacar áreas importantes na página.
Os separadores vêm em diferentes estilos, como separadores de forma SVG, separadores de linha ou baseados em texto e designs personalizados. A maioria pode ser estilizada para combinar com as cores da sua marca e layout para um visual polido.
Como Adicionar Separadores Elegantes ao Seu Site WordPress
O SeedProd permite que você adicione separadores de forma a qualquer seção no WordPress através de seu painel integrado de Separadores de Forma, sem necessidade de código.
Você pode escolher entre 18 estilos SVG e personalizar cor, largura, altura e posição.
Método 1: Crie Separadores de Site com SeedProd
Usarei o SeedProd para adicionar separadores de forma ao seu site WordPress para este método.
O SeedProd é um dos melhores construtores de sites para WordPress. Ele permite que você crie temas personalizados do WordPress, páginas de destino e layouts de sites responsivos sem código.
Ele vem com centenas de modelos pré-fabricados, inúmeros 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 usarei neste guia são os separadores de forma elegantes integrados do SeedProd. Eles permitem que você adicione separadores de forma atraentes a qualquer post ou página com alguns cliques, sem necessidade de código.
Siga as etapas abaixo para adicionar separadores de forma ao WordPress com o SeedProd.
Instale e Ative o Plugin SeedProd para WordPress
Primeiro, clique aqui para começar com o SeedProd e baixar o plugin para o seu computador. Em seguida, faça o upload do arquivo .zip do plugin para o seu site WordPress.
Você pode seguir este guia sobre instalar um plugin do WordPress se precisar de ajuda.
Observação: Existe uma versão gratuita do SeedProd, mas usarei a versão premium do SeedProd para o recurso Shape Divider.
Após instalar e ativar o SeedProd, vá para SeedProd » Configurações e insira sua chave de licença do plugin.
Você pode encontrar sua chave de licença fazendo login no site do SeedProd e procurando na seção Downloads.
Criar um Tema ou Landing Page do WordPress
Existem 2 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 você pode criar uma landing page independente e adicionar divisores de forma a uma única página.
Aqui estão as instruções para configurar ambos:
Tema do WordPress
O construtor 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 seu tema, incluindo a barra lateral, cabeçalho, rodapé, post único, etc. Você pode então personalizar cada arquivo visualmente, sem código.
Quando você ativar seu novo tema, ele substituirá seu tema existente do WordPress, portanto, escolha esta opção apenas se estiver satisfeito em perder seu tema existente.
Siga este tutorial para criar um tema WordPress personalizado com o SeedProd.
Página de Destino
O construtor de landing pages do SeedProd permite que você use sua interface de arrastar e soltar para criar landing pages únicas no WordPress. Você pode personalizar completamente o design, mas ele não substituirá seu tema existente, ao contrário da versão do construtor de temas.
Esta é uma boa solução se você quiser manter seu tema do WordPress atual, mas ainda quiser usar o recurso de divisor de forma.
Siga este guia passo a passo para criar uma landing page no WordPress.
Após criar um tema ou landing page do WordPress, você pode passar para a próxima etapa.
Personalize seu Design com um Divisor de Seção
Para adicionar divisores de forma ao WordPress, edite um modelo de tema ou landing page, o que abre o editor visual do SeedProd. Eu vou editar a Página Inicial do meu tema personalizado do WordPress neste tutorial.
Uma vez dentro do editor visual, você precisará encontrar uma área da página onde deseja adicionar seu 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 seu painel de configurações no lado esquerdo. Dentro desse painel, clique na aba avançada para ver mais opções de personalização.
Você verá o título Divisores de Forma na parte inferior do painel. Clique no título para abrir as configurações do Divisor de Forma.
Primeiro, você pode escolher adicionar um divisor na parte superior ou inferior da sua seção.
Você pode então clicar no menu suspenso para selecionar 18 formas diferentes para o seu divisor.
Após selecionar uma forma, o SeedProd mostrará configurações extras para personalizar a aparência da forma.
Por exemplo, você pode:
- Alterar a cor da forma
- Escolher uma largura e altura personalizadas
- Inverter a forma
- Trazer a forma para a frente
Você pode seguir os mesmos passos para adicionar um divisor 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
Experimente diferentes divisores de site até ficar satisfeito com a aparência de tudo.
Os divisores de forma do SeedProd são responsivos por padrão. Se você precisar ocultar um em dispositivos específicos, use as configurações de visibilidade do bloco na guia Avançado.
Publique Seus Divisores Elaborados no WordPress
Agora que seus divisores de forma estão no lugar, você pode publicar seu novo design.
Se você estiver criando um tema do WordPress, poderá publicá-lo acessando o Construtor de Temas do SeedProd e clicando na opção "Ativar Tema SeedProd" para a posição "Sim".
Simplesmente clique na seta suspensa no botão Salvar e clique em Publicar para páginas de destino.
Agora você pode visitar seu site ativo e ver seu divisor de seção em ação. Aqui está um exemplo do nosso site de demonstração com divisores de seção em nossa seção de imagem de fundo do herói:
Adicionando Ícones e Divisores de Texto com SeedProd
Se os divisores de seção elaborados não atenderem às necessidades do seu site, você também pode usar o bloco Divisor do SeedProd para adicionar uma linha de divisores de texto e í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 Divisor para 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:
Então, agora você tem 2 maneiras de criar divisores atraentes no WordPress com SeedProd. Em seguida, vamos ver como adicionar divisores sem um plugin.
Método 2: Crie um Divisor de Seção no WordPress Sem um Plugin
Você também pode usar as configurações integradas do WordPress para adicionar divisores ao seu site. Este método é útil se você não quiser instalar plugins do WordPress adicionais.
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 para cada quebra de linha.
Sugiro usar o Método 1 para opções avançadas de personalização. Siga as etapas abaixo para adicionar um divisor de seção de linha horizontal no WordPress sem um plugin.
Adicionando 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 uma postagem ou página e clique no ícone de mais (+) onde você deseja que seu divisor esteja.
Em seguida, digite "Separador" na caixa de pesquisa e clique no bloco Separador.
Após 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 Padrão, Linha Larga ou Pontos no painel direito.
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.
Adicionando 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 sua página onde deseja adicionar seu divisor. Depois, clique no ícone Linha Horizontal.
Seu divisor de linha horizontal será preto e branco ou de cor cinza claro e cobrirá toda a sua postagem ou página como esta:
Perguntas frequentes sobre Divisores de Seção no WordPress
Como adiciono um divisor de forma a uma página do WordPress sem código?
Abra qualquer seção no editor visual do SeedProd, clique na guia Avançado e role até o painel Divisores de Forma. Escolha entre 18 formas SVG, defina a cor, largura e altura, e então publique. Nenhum CSS ou código é necessário.
O divisor de forma do SeedProd funciona em qualquer página ou postagem?
Sim. Os Divisores de Forma funcionam em qualquer seção ou linha dentro do editor visual do SeedProd, seja você esteja construindo uma página de destino ou um tema completo do WordPress. Você pode adicionar um divisor na parte superior ou inferior de qualquer seção.
O recurso divisor de forma 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 meu tema WordPress existente?
Sim, com uma ressalva. Se você usar o construtor de páginas de destino do SeedProd, seu tema existente permanecerá no lugar e apenas a página de destino usará divisores de forma. Se você ativar o construtor de temas do SeedProd, ele substituirá completamente 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) adiciona uma linha horizontal simples entre as áreas de conteúdo. Um divisor de forma é um gráfico SVG de largura total, como ondas ou curvas, que abrange toda a borda da seção. Os divisores de forma são mais visualmente distintos e totalmente personalizáveis no SeedProd.
SeedProd e Sua Pequena Empresa
Esperamos que este artigo tenha ajudado você a aprender como adicionar um divisor de seção ao WordPress. Com o poderoso construtor de sites de arrastar e soltar do SeedProd, criar divisores de forma sofisticados é moleza.
Aqui estão alguns artigos relacionados que você pode achar úteis:
- 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 por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
