Ir para o conteúdo principal

Como personalizar o CSS do seu site WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

Como personalizar o CSS do seu site WordPress? Descubra neste artigo.

Não importa qual tema WordPress você escolher para seu site, haverá outros sites que irão usá-lo. E mesmo apesar das muitas opções de personalização que muitos temas do WordPress oferecem atualmente, você pode tornar seu site ainda mais exclusivo.

Para realmente tocando no aspecto visual do seu tema WordPress, você deve ir além da personalização padrão oferecida pelas opções ou configurações de um tema WordPress. A personalização de CSS do seu blog WordPress permitirá que você modifique a aparência do seu site para torná-lo verdadeiramente único.

Este tutorial abordará a variedade de métodos disponíveis para personalizar seu site com CSS, criar e customizar temas filhos, usando os plug-ins do personalizador do WordPress e os plug-ins do CSS do WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então vamos voltar ao porquê estamos aqui

CSS: O básico e como o WordPress os usa

Em primeiro lugar: CSS significa Cascading Style Sheets, o que não é mais claro do que a sigla. Então, vamos decompô-lo.

Uma folha de estilos é um documento que descreve estilos (como fonte, cores, etc..) para ser usado para a apresentação de outro documento. No nosso caso, estamos lidando com um estilo de páginas da web.

A partecascataDo nome é parte do que o torna verdadeiramente poderoso. As páginas da Web podem ser projetadas com várias folhas de estilo, como uma cascata em cascata, com a folha inferior adicionando ou substituindo estilos de um nível superior. Isso é importante porque a maneira como você adiciona seus estilos substituirá as alterações originais.

Como personalizar o CSS do seu site WordPress

Tão simples quanto parece, CSS pode ser usado para mudar quase tudo em uma página da web (incluindo layout, cores, fontes e até animações).

Aprenda a gerenciar suas notificações descobrindo Como gerenciar as notificações de e-mail no WordPress

A maioria dos temas do WordPress usa código CSS disponível em um arquivo chamado style.css. Se você abrir esse arquivo, verá uma lista completa de regras de estilo para o seu tema WordPress. Faça o que fizer, não modifique este arquivo! As atualizações substituirão suas alterações.

Existem várias maneiras de adicionar um código CSS personalizado ao seu tema WordPress, para que suas alterações sobrevivam a uma atualização do tema WordPress.

Como personalizar seu site WordPress com CSS

Agora que você tem um melhor entendimento do que é CSS e como os temas WordPress os usam, vamos dar uma olhada nas opções que você pode usar para personalizar seu blog WordPress e discutiremos os prós e contras de cada método.

como personalizar o site css wordpress 1

Ao final do nosso trabalho, você poderá determinar qual método corresponde ao seu tema WordPress.

Opção # 1: personalizar CSS usando um tema filho

Se você usar un tema criança para personalizar seu código CSS, as atualizações dos temas de que falamos antes não serão mais um problema. Uma atualização de um tema WordPress afetará o tema "principal», Deixando as alterações do tema infantil intactas. Muitos desenvolvedores de temas WordPress entendem a utilidade de um tema filho.

Discover Quando e como instalar o WordPress em um subdiretório

Criar um tema filho é muito simples. Consiste em criar uma pasta em sua hospedagem na web que inclui um arquivo style.css que lista o tema pai como modelo e importa arquivo style.css do tema pai (você se lembra do significado de folhas de estilo 'em cascata'?).

O WordPress Codex tem mais informações sobre como criar temas filho.

como personalizar o site css wordpress 1 1

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]

Depois de criar seu tema filho e ativá-lo corretamente, você pode começar a personalizar seu tema WordPress. A maneira mais rápida será editar seu arquivo style.css, que pode ser acessado de duas maneiras.

Confira este artigo para descobrir Como comprimir seus arquivos CSS, HTML e Javascript

A primeira é usar o editor incluído no painel do WordPress, clicando em Aparência> Editor. L 'editor exibe uma lista de arquivos à direita, disponíveis no tema (Somente arquivos populares são exibidos). Seu arquivo style.css estará no final da lista, clicando na opção stylesheet seu arquivo style.css cobrará.

Você pode adicionar suas alterações a esse local e salvá-las.

estilo WordPress

A outra maneira de acessar seu arquivo style.css (que nós recomendamos) é procurar os arquivos em sua hospedagem na web através de um cliente FTP ou um gerenciador de arquivos. A pasta do tema filho que você criou estará na pasta " wp-content> temas« . Você poderá usar um editor de texto para editar o arquivo style.css.

Opção nº 2: personalizar o CSS no personalizador

A partir do WordPress 4.7, os usuários podem adicionar CSS personalizado diretamente da área de administração do WordPress. É super fácil e você seria capaz de ver suas alterações com uma visualização em tempo real.

como personalizar o site css wordpress 2

Primeiro, você precisa ir para a página Temas »Personalizar.

Acesso ao personalizador WordPress para personalizar o tema

Isso iniciará a interface de personalização do tema do WordPress.

Você verá uma visualização em tempo real do seu site à direita, com várias opções no painel esquerdo. Clique na aba CSS adicional no painel esquerdo.

A guia deslizará para mostrar uma área simples onde você pode adicionar seu CSS personalizado. Assim que adicionar uma regra CSS válida, você poderá vê-la aplicada no painel de visualização em tempo real do seu site.

insira o código css adicional e publique

Você pode continuar a adicionar código CSS personalizado até ficar satisfeito com a aparência do seu site. Não se esqueça de clicar no botão " Salvar e Publicar No topo quando terminar.

Observação: Qualquer CSS personalizado que você adicionar usando o Customizador está disponível apenas com esse tema WordPress específico. Se quiser usá-lo com outros temas, você precisará copiar e colar em seu novo tema usando o mesmo método.

Opção # 3: personalize CSS usando um plug-in

A vantagem de usar um plug-in para customização CSS é que você mantém o plug-in mesmo se fizer uma alteração no tema do WordPress. Isso tem suas desvantagens, já que os estilos não podem ser exibidos bem em todos os temas do WordPress.

Aqui estão alguns plugins:

Pare de perder tempo e dinheiro!

Descubra a melhor ferramenta para criar o seu blog, o blog da sua loja online ou qualquer outro site em apenas alguns cliques!

1. CSS personalizado no Jetpack (gratuito)

O plugin WordPress jetpack  está instalado em mais de um milhão de sites WordPress, e provavelmente no seu também. Traz recursos disponíveis no WordPress.com para sites auto-hospedados e também oferece uma módulo para personalização CSS. jetpack-formas-plugin

Assim que o módulo for ativado no painel do Jetpack, um editor CSS personalizado estará disponível, permitindo que você personalize seu tema WordPress sem criar um tema filho. Você acessa o editor seguindo este caminho " Aparência> Editar CSS« .

2. CSS personalizado simples (gratuito)

Se em vez disso você quiser uma opção stand-alone, Custom CSS simples é uma boa escolha Este plug-in gratuito, usado em mais de sites da 200.000 com uma classificação de estrelas 4,9, ajudará definitivamente a personalizar seu blog CSS CSS.Custom-single-css

Este plugin não requer nenhuma configuração, você só precisa instalar e ativar o plugin. Para modificar seu código CSS, vá para " Aparência> CSS personalizado«  no painel do WordPress. Aplique suas alterações de CSS na caixa de texto e, quando terminar, salve suas configurações.

3. CSS Hero (a partir de $ 14 por ano)

A última opção do plugin WordPress que estamos vendo hoje é um plugin WordPress premium chamado CSS herói. A partir de 14 $ por ano para um site, esse plug-in permite que você personalize seu tema WordPress usando uma interface intuitiva.CSS herói WordPress Plugin

Projetado para funcionar melhor com dezenas de temas WordPress compatíveis , CSS Hero oferece controle total sobre todos os elementos do seu tema WordPress. Para temas que não estão na lista deles, você pode usar o moda foguete para ativar a personalização do CSS Hero.

CSS Hero elimina a necessidade de entender a sintaxe CSS, simplificando a interação com o código por meio de uma interface, e isso vale para animações e transições. Você também pode visualizar suas alterações em tempo real e reverter para uma versão anterior.

Descobrir Como mover comentários de um artigo para outro no WordPress

Se você deseja alterar completamente o CSS do seu blog WordPress, mas não deseja aprender CSS, o CSS Hero é uma ótima opção para personalizar seu site, especialmente se você usar um dos temas do WordPress.

Embora você saiba que o conteúdo é importante, no entanto, você deseja que seu site se destaque da multidão, mesmo se estiver usando um tema WordPress popular. Com CSS, você pode personalizar o design do seu site para que seja totalmente único.

Vá além descobrindo Como permitir aos usuários editar certas páginas

Portanto, existem várias maneiras de personalizar o CSS do seu tema WordPress:

  1. um tema infantil.
  2. o Customizer.
  3. plug-in CSS.

Descubra também alguns plugins premium do WordPress  

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Publicidade Adning

O WP PRO Advertising System é um plug-in de gerenciamento de publicidade do WordPress, que oferece locais estratégicos 18 para ajudá-lo a exibir anúncios em seu site. Ele também possui uma seção de estatísticas detalhadas, na qual você verá o desempenho de cada anúncio.Plug-in Adning Advertising WordPress

Esse recurso é crucial porque o ajudará a melhorar sua campanha e maximizar seus lucros. Este plugin WordPress Adsense também vem com um recurso exclusivo chamado anúncios de fundo. Ele permite que você exiba anúncios como plano de fundo de seu conteúdo.

Além disso, uma vez que é compatível com plugins como WPBakery et Revolução Slider, você pode exibir seus anúncios na forma de controles deslizantes ou colocá-los em qualquer lugar do seu site.

Descarregar | Demo | hospedagem na web

2. WP Media File Manager

WP Media File Manager é um plugin do WordPress que facilita a organização da biblioteca de mídia em uma forma de hierarquia, usando a funcionalidade Arrastar e Soltar. É um dos mais poderosos plugins gerenciadores de arquivos WordPress no CodeCanyon. Você nem precisará criar pastas manualmente.

WP Media File Manager WordPress Media Library Pastas Categorias Upload Plugin

Este plugin do WordPress permite que você carregue milhares de arquivos do gerenciador de arquivos do seu PC para o site, copiando automaticamente a hierarquia da pasta de origem. Se você deseja ter o mesmo arquivo em pastas diferentes, saiba que agora você tem uma biblioteca de mídia real que oferece essa funcionalidade.

Diga adeus aos problemas de download de tipos de arquivos específicos, agora você só precisa instalar este plugin do WordPress e deixá-lo ajudá-lo a gerenciar seus arquivos.

Descarregar | Demo | hospedagem na web

3. herói do menu

Hero Menu é um plugin de mega menu para WordPress. E embora não seja muito heroico, tem todos os recursos necessários por apenas US $ 19. Um pouco como o Mega Main Menu, é um plugin que também apresenta produtos apresentados no CodeCanyon e tem cerca de 4500 vendas a seu crédito no momento.Hero Menu Responsive WordPress Mega Menu Plugin

Na seção de recursos, você perceberá rapidamente que é muito fácil criar um megamenu. O processo leva apenas algumas etapas. Além disso, você notará que o plugin é compatível com WooCommerce, oferece um design responsivo e uma interface "arrastar e soltar" para criar os menus.

O criador de menus melhora o uso do plugin e simplifica muito o trabalho do comprador. A integração da IU também é um ótimo trabalho e a IU se comporta perfeitamente com outros plug-ins.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

Conclusão

Aqui! É isso para este tutorial. Esperamos que este tutorial tenha mostrado a você como personalizar o CSS do seu site WordPress. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

... 

Este artigo contém 1 comentário

  1. Bom Dia,

    Eu gostaria de apresentar a você o plugin Anym Live Editor que permite a edição completa de CSS ou SCSS e Javascript a partir de qualquer página do WordPress, e que oferece uma renderização ao vivo das alterações feitas! Além disso, o plugin é equipado com uma variedade de ferramentas que permitem a você interagir com a página que deseja modificar e funciona como qualquer IDE comum (estilo de texto sublime), mas desta vez dedicado ao seu site WordPress.

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
4 ações
ação2
chilrear
Enregistrer2