Deseja adicionar um divisor de seção ao seu site WordPress?
Os divisores de seção são uma excelente maneira de separar o conteúdo e criar efeitos visuais para envolver os visitantes do seu site. No entanto, eles são difíceis de criar se você não tiver experiência em design e codificação.
Isso parece com você? Não se preocupe; mostraremos a você como criar divisores de site sem código neste artigo.
O que é um divisor de seção no WordPress?
Um divisor de seção também é chamado de divisor de forma no WordPress. Eles permitem que você adicione formas e efeitos personalizados às páginas, criando transições envolventes entre o conteúdo.
É possível colocar um divisor de seção acima e abaixo dos blocos de conteúdo, facilitando a organização e a separação de diferentes tópicos.
Os divisores de site têm vários formatos, como divisores de página com formas SVG e divisores de texto, que são bordas de texto que separam blocos de texto. Você também pode personalizar os divisores em muitos casos.
Quais são os benefícios de usar divisores de forma?
Os divisores de forma são uma ferramenta eficaz para capturar a atenção em seu site. Eles fazem com que os usuários parem de rolar a página, chamando a atenção deles para informações que você não quer que eles percam.
Alguns proprietários de sites usam animações chamativas e imagens impressionantes para envolver os visitantes. Entretanto, os divisores de forma podem fazer o mesmo trabalho com menos confusão visual.
Além disso, os divisores de forma podem transformar instantaneamente o design do seu site sem a necessidade de criar um novo design do zero.
Como adicionar divisores sofisticados ao seu site WordPress
Como mencionamos anteriormente, normalmente é necessário ter algum conhecimento de design e codificação para criar divisores de seção sofisticados no WordPress. No entanto, compartilharemos abaixo duas maneiras de adicionar um divisor de seção ao seu site sem código.
Método 1: Criar divisores de site com o SeedProd
Usaremos o SeedProd para adicionar divisores de forma ao seu site WordPress para o primeiro método.
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 usaremos neste guia são os sofisticados Shape Dividers integrados do SeedProd. Eles permitem que você adicione separadores de formas atraentes a qualquer post ou página com apenas alguns cliques, sem necessidade de codificaçã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 usaremos 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 divisores de forma ao WordPress, edite um modelo de tema ou página de destino, o que abre o construtor de páginas visuais do SeedProd. Neste tutorial, editaremos a página inicial de nosso tema personalizado do WordPress.
Quando estiver dentro do editor visual, você precisará encontrar uma área da página onde deseja adicionar o divisor de forma. O SeedProd permite que você adicione 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 seu 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 as mesmas etapas para adicionar um divisor de forma à parte inferior de uma seção. Você pode criar alguns efeitos visuais impressionantes com apenas alguns cliques.
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.
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.
Sugerimos usar o Método 1 para obter 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 plug-in.
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 (+) 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:
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.
A SeedProd está aqui para ajudá-lo a expandir seus negócios de todas as formas! Para obter mais dicas sobre pequenas empresas e desenvolvimento da Web, confira nosso blog. Aqui estão algumas de nossas postagens relevantes favoritas:
- 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, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
