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 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Não importa qual tema WordPress você escolher para o seu site, haverá outros sites que o usarão. E mesmo com as muitas opções de personalização oferecidas por muitos temas do WordPress hoje, você pode tornar seu site ainda mais exclusivo.

Para realmente para tocar 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 CSS do seu blog WordPress permitirá que você altere a aparência do seu site para torná-lo realmente ú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

Primeiro: CSS significa Cascading Style Sheetso que não é mais claro que o acrônimo. Então, vamos detalhar.

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

A partecascataO nome faz parte do que o torna realmente 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 nível superior. Isso é importante porque a maneira como você adiciona seus estilos substituirá as alterações originais.

Selector CSS

Por mais simples que possa parecer, o CSS pode ser usado para alterar praticamente qualquer aspecto de 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 o 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 edite 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ê entende melhor o que é CSS e como os temas do 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.

No 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 mencionados anteriormente não serão mais um problema. Uma atualização de um tema do WordPress afetará o tema "principalDeixando intactas as alterações no tema do seu filho. Muitos desenvolvedores de temas do WordPress entendem a utilidade de um tema filho.

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

Criar um tema filho é bastante simples. Envolve a criação de 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 principal (você se lembra do significado das folhas de estilo em "cascata"?).

O WordPress Codex tem mais informações sobre a criação de temas filhos.

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ê poderá 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 de. o editor exibe uma lista de arquivos à direita, disponíveis no tema (Somente arquivos populares são exibidos). Seu arquivo style.css estará na parte inferior da lista e 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 # 2: personalizar CSS do Customizer

Desde o WordPress 3.4, os desenvolvedores de temas do WordPress puderam acessar o WordPress Customizer para criar opções para eles. O Personalizador permite ajustar as configurações de um tema e visualizá-las sem afetar a aparência do site ao salvar as configurações.

Muitos temas do WordPress usam o Personalizador para simplificar o gerenciamento de configurações.

O que nos interessa hoje é a capacidade de adicionar um código CSS personalizado e, felizmente, muitos temas do WordPress podem fazer isso com uma opção disponível no personalizador ou no painel do WordPress.

Você pode consultar a documentação do seu tema WordPress para verificar se esta opção está disponível.

Tema WordPress Total por exemplo, propõe uma área de edição de código CSS no painel.

CodeCSS total WordPress

No entanto, alguns temas do WordPress oferecerão essa opção diretamente da interface do Customizer.

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

A vantagem de usar um plug-in para personalização de CSS é que você mantém o plug-in, mesmo que faça uma alteração no tema do WordPress. Isso tem suas vantagens, porque os estilos não podem ser exibidos corretamente em todos os temas do WordPress.

Aqui estão alguns plugins:

1. CSS personalizado no Jetpack (grátis)

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 em WordPress.com para sites auto-hospedados e também oferece uma módulo para personalização CSS. jetpack-formas-plugin

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]

Quando o módulo estiver 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 (grátis)

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, basta instalar e ativar o plugin. Para modificar seu código CSS, vá para " Aparência> Custom CSS« no painel do WordPress. Aplique suas alterações de CSS na caixa de texto e, uma vez concluído, salve suas configurações.

3. Herói CSS (a partir de US $ 14 por ano)

A última opção do plug-in do WordPress que estamos vendo hoje é um plug-in premium do WordPress 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.

O CSS Hero remove a necessidade de entender a sintaxe do CSS, simplificando a interação com o código por meio de uma interface, e isso se aplica a animações e transições. Você também pode visualizar suas alterações em tempo real e retornar a 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 saiba que o conteúdo é importante, você deseja que seu site se destaque dos outros, mesmo que você use um tema popular do WordPress. Com CSS, você pode personalizar o design do seu site para que ele seja completamente exclusivo.

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.

Esse recurso é crucial, pois ajudará você a melhorar sua campanha e maximizar seus lucros. Este plugin do WordPress Adsense também vem com um recurso exclusivo chamado anúncios em segundo plano. Permite exibir anúncios como pano de fundo para o seu conteúdo.

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

Descarregar | Demo | hospedagem na web

2. WP Media File Manager

O WP Media File Manager é um plugin do WordPress que permite organizar facilmente a biblioteca de mídia em um formato de hierarquia, usando o recurso Arrastar e Soltar. Este é um dos plugins WordPress mais poderosos do gerenciador de arquivos CodeCanyon. Você nem precisará criar pastas manualmente.

Este plugin do WordPress permite fazer upload de 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 fornece essa funcionalidade.

Adeus problemas de download tipos específicos de arquivos, agora você só precisa instalar este plugin WordPress e deixá-lo acompanhá-lo no gerenciamento de seus arquivos.

Descarregar | Demo |hospedagem na web

3. herói do menu

Hero Menu é um plugin WordPress do mega menu. E, embora não seja muito heróico, oferece todos os recursos necessários por apenas 19 $. Um pouco como o Mega Main Menu, é um plug-in que também faz produtos apresentados no CodeCanyon e tem quase vendas 4500 no momento.

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. [Recomendado]

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

O construtor de menus melhora o uso do plug-in e simplifica bastante o trabalho do comprador. A integração da interface do usuário também é um ótimo trabalho e o último se comporta perfeitamente com outros plugins.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

Conclusão

Aqui! É isso neste tutorial. Esperamos que este tutorial tenha mostrado 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,

    Gostaria de informar o plug-in Anym Live Editor, que permite uma 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 modificações feitas! Além disso, o plug-in está equipado com uma variedade de ferramentas que permitem interagir com a página que você 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