Ir para o conteúdo principal

Como recuar parágrafos sobre WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você quer adicionar espaços ou subseções recuado no WordPress?

Embora a maioria dos seus textos esteja alinhada à esquerda, em alguns casos, pode ser necessário recuar determinados parágrafos para melhor tipografia e melhor experiência de leitura.

Neste tutorial, mostraremos como recuar facilmente parágrafos no WordPress.

Método 1: usando os botões de remoção de texto no Editor Visual

Por padrão, a maioria Temas do WordPress Exiba parágrafos justificados à esquerda ou à direita nos idiomas da direita para a esquerda.

Se você deseja mudar um parágrafo, pode fazê-lo manualmente clicando no botão Aumentar recuo do editor de texto visual. Isso adicionará o espaçamento à esquerda do parágrafo.

Caso você queira recuar mais de um parágrafo, selecione esses parágrafos e clique no botão Aumentar recuo.

Você pode clicar no botão várias vezes para aumentar a retirada. Por exemplo, se você clicar duas vezes, duplicará o espaçamento de retirada.

Você também pode reduzir a retirada clicando no botão Diminuir recuo.

Também o convidamos antes de continuar a descobrir Como usar o WordPress Gutenberg Editor 5.0: Parte Um

Método 2: Recuo manual o parágrafo usando o editor de texto

Uso de botões de retirada texto no editor visual é a maneira mais fácil de adicionar recuo nos parágrafos. No entanto, isso não permite controlar quanto espaço você deseja adicionar.

Os usuários mais avançados podem mudar para o editor de texto para adicionar manualmente a retirada. Tudo o que você precisa fazer é colocar o texto na tag <p> e </ p> e, em seguida, adicionar código CSS assim:

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

<P style = "padding-left: 25px;"> Seu texto do parágrafo vai aqui ... </ p>

Este método permite controlar o espaçamento que você deseja usar como um psiquiatra. Esse método funciona melhor se você não precisar recuar os parágrafos regularmente.

Portanto, se você os recuar com bastante frequência, essa não será a solução ideal.

Descubra o nosso guia em Como escrever (gravar) um bom número sobre o seu blog

Método 3: Recue apenas a primeira linha de um parágrafo

As páginas da Web não usam o espaçamento de parágrafo tradicional usado pelo software de processamento de texto, que marca apenas a primeira linha do parágrafo.

Mesmo no WordPress, quando você recua um parágrafo, o espaçamento é adicionado ao parágrafo inteiro.

Alguns sites de revistas ou literárias podem querer adicionar uma remoção mais tradicional. Nesse caso, você precisa adicionar CSS personalizado ao seu tema WordPress.

Vá para " Aparência> Personalizar Para iniciar o " Customizer Tema WordPress. Clique na aba « CSS adicional ".

Isso exibirá uma caixa de texto no painel esquerdo, onde você pode adicionar seu código CSS personalizado. Adicione este código CSS nesta caixa de texto.

p.custom-indent {text-indent: 60px; }

Descubra também o nosso Tutorial: Como dominar o editor visual do WordPress

Esse código CSS simplesmente informa aos navegadores que, se um parágrafo tiver a classe ".custom-indent", ele adicionará um recuo de 60px.

Você pode editar seu artigo no editor de texto. Em seguida, circule seu texto com as tags <p class = "custom-indent"> e </ p> da seguinte maneira:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

<P class = "custom-indent"> Seu texto do parágrafo vai aqui ... </ p>

Depois de concluído, você pode visualizar seu artigo e verá que apenas a primeira linha do parágrafo tem espaçamento antes.

Este método funcionará com cuidado se você quiser apenas recuar alguns parágrafos. No entanto, se você deseja adicionar esse estilo a todos os parágrafos do seu site, basta modificar o código CSS personalizado como este:

Artigo p {text-indent: 60px; }

Esse código CSS adicionará automaticamente uma retirada à primeira linha de todos os parágrafos dentro de um artigo ou página do WordPress.

Descubra também antes de sair Como adicionar um estilo visual para o editor WordPress

Para aqueles que procuram editores de estilos visuais para melhorar a aparência do site, oferecemos a eles aqui plugins WordPress 3 premium projetados para esta tarefa.

1. Lápis Amarelo: Editor CSS de Estilo Visual

Yellow Pencil é um editor de estilo visual que você pode usar com qualquer tema para personalizar seu site em minutos (fontes, cores, animações e muito mais ...).

Este plug-in criará estilos CSS em segundo plano enquanto você joga com as cores como se fosse um jogo, projetado para usuários iniciantes e experientes. Nenhum conhecimento de codificação é necessário; No entanto, o plugin possui um bom editor de CSS para quem gosta de codificar. Você pode codificar ao vivo com este editor e personalizar seu CSS.

Descarregar | Demo | hospedagem na web

2. Easy Custom JS e CSS

Este plugin premium do WordPress é um poderoso editor de código CSS e JavaScript que permite adicioná-lo a qualquer seção do seu site. Ele permite que você mantenha suas personalizações mesmo após uma atualização importante do seu tema WordPress.

Você tem a possibilidade de limitar o campo de uso do seu código personalizado. Por exemplo, você pode usar seu código apenas para um artigo que tenha o formato de vídeo. Ou você pode limitar seu código a um tema específico; O que é útil se você estiver alterando temas para o seu blog WordPress.

Descarregar | Demo | hospedagem na web

3. JS e CSS personalizados para Gutenberg

O plugin JS personalizado e CSS para Gutenberg WordPress permitirá que você adicione um número ilimitado de estilos personalizados ao editor WYSIWYG para seus artigos e páginas do WordPress. É totalmente compatível com a versão Gutenberg do WordPress.

Você pode simplesmente criar um novo estilo com um editor CSS fácil de usar. Este plug-in amplia a funcionalidade dos campos personalizados em seu site e permite modificar seus campos personalizados com um módulo de personalização dinâmico e poderoso. e o recurso de visualização em tempo real deste plugin o torna muito confortável e fácil de usar.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que ajudarão você seduzir melhor leve em mãos o seu editor de texto visual.

Conclusão

É isso aí! Isso é tudo para este tutorial, espero que lhe permita organizar melhor o recuo dos seus artigos. Não hesite em compartilhe a dica com seus amigos em suas redes sociais.

Se você tiver alguma sugestão ou comentário, será bem-vindo. Também convidamos você a consultar nosso recursos se você é um blogueiro iniciante.

...

Este artigo contém 1 comentário
  1. Artigo p {traço-texto: 60 px; }
    string que me dá um erro.
    O serviço de validação também me fornece o erro "60 px; } »
    Como devemos corrigir?
    bom trabalho

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo