- \n
- Modifique a fam\u00edlia da fonte, o tamanho da fonte e a cor de qualquer texto<\/li>\n
- Alterar cores e imagens de fundo<\/li>\n
- Ajuste o espa\u00e7amento entre quaisquer elementos<\/li>\n<\/ul>\n
E isso \u00e9 apenas uma amostra das incr\u00edveis personaliza\u00e7\u00f5es poss\u00edveis.<\/p>\n
O que n\u00e3o \u00e9 CSS Hero?<\/h2>\n
Voc\u00ea n\u00e3o pode criar novos modelos ou layouts inteiramente novos com CSS Hero. \u00c9 para isso que existem construtores de p\u00e1ginas como o Elementor<\/a>.<\/p>\n
Em geral, se voc\u00ea deseja fazer uma altera\u00e7\u00e3o em seu site que exija a adi\u00e7\u00e3o de novo conte\u00fado, CSS Hero n\u00e3o \u00e9 a ferramenta certa. Se voc\u00ea deseja fazer uma modifica\u00e7\u00e3o puramente visual, como alterar a cor ou o tamanho de um elemento, CSS Hero \u00e9 perfeito.<\/p>\n
Como usar CSS Hero<\/h2>\n
Embora venha com uma tonelada de op\u00e7\u00f5es, usar CSS Hero<\/a> \u00e9 na verdade muito simples.<\/p>\n
Clique aqui para experimentar CSS Hero por si mesmo<\/a><\/p>\n
Instala\u00e7\u00e3o<\/h3>\n
CSS Hero \u00e9 carregado por meio do menu Plug-ins como qualquer outro plug-in. Depois de instalado, um bot\u00e3o aparecer\u00e1 solicitando que voc\u00ea obtenha uma chave de licen\u00e7a.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nClicar neste bot\u00e3o leva voc\u00ea a uma p\u00e1gina em seu site com outro bot\u00e3o para clicar e, em seguida, a licen\u00e7a \u00e9 ativada.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nN\u00e3o poderia ser mais simples.<\/p>\n
A interface<\/h3>\n
Assim que o CSS Hero for ativado, seu site ter\u00e1 um novo item Editar com CSS Hero adicionado \u00e0 barra de ferramentas do administrador.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nClicar aqui o levar\u00e1 para a interface de design CSS Hero.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nEstou exibindo CSS Hero com nosso tema Ignite<\/a> gr\u00e1tis<\/p>\n
A interface \u00e9 semelhante ao Customizador (abordado em nosso guia b\u00e1sico de personaliza\u00e7\u00e3o<\/a> ). H\u00e1 um painel \u00e0 esquerda com as ferramentas de personaliza\u00e7\u00e3o e uma visualiza\u00e7\u00e3o \u00e0 direita que \u00e9 atualizada conforme voc\u00ea faz modifica\u00e7\u00f5es. Como o personalizador, nenhuma dessas altera\u00e7\u00f5es \u00e9 vis\u00edvel para os visitantes at\u00e9 que voc\u00ea clique no bot\u00e3o Salvar e publicar.<\/p>\n
Selecione um elemento<\/h3>\n
O processo de personaliza\u00e7\u00e3o com CSS Hero come\u00e7a selecionando um elemento.<\/p>\n
Conforme voc\u00ea move o mouse pela visualiza\u00e7\u00e3o do site, ver\u00e1 um contorno azul definindo todos os elementos selecion\u00e1veis. Clicar em qualquer elemento permitir\u00e1 que voc\u00ea o edite. Veja como eu selecionaria o cabe\u00e7alho do tema do Ignite:<\/p>\n
Personaliza\u00e7\u00e3o de elementos do site<\/h3>\n
Depois que um elemento \u00e9 selecionado, as propriedades personaliz\u00e1veis \u200b\u200bs\u00e3o adicionadas ao painel esquerdo.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nEssas mesmas propriedades est\u00e3o dispon\u00edveis para todos os elementos<\/p>\n
Essas s\u00e3o todas as personaliza\u00e7\u00f5es diferentes que voc\u00ea pode fazer em qualquer elemento usando CSS Hero.<\/p>\n
Vamos dar uma olhada em algumas dessas propriedades para que voc\u00ea tenha uma ideia de como elas podem ser usadas para personalizar seu site.<\/p>\n
Trocar fontes<\/h4>\n
Com o cabe\u00e7alho selecionado, posso escolher a op\u00e7\u00e3o Tipografia e, em seguida, selecionar uma nova fonte. A fonte selecionada ser\u00e1 aplicada automaticamente a todo o texto encontrado no cabe\u00e7alho. Isso \u00e9 muito mais r\u00e1pido do que tentar atribuir uma fonte ao menu ou t\u00edtulo do site individualmente.<\/p>\n
CSS Hero oferece acesso a um conjunto de fontes do sistema (fontes instaladas em seu sistema operacional) e a algumas das fontes mais populares do Google Fonts<\/a>. Tamb\u00e9m existe um “gerenciador de fontes” que permite adicionar qualquer fonte do Google Fonts ao seu site com o clique de um bot\u00e3o.<\/p>\n
Alterar as cores do texto<\/h4>\n
Outra personaliza\u00e7\u00e3o comum que o CSS Hero pode realizar \u00e9 alterar a cor do texto no site.<\/p>\n
Para alterar a cor do texto de qualquer elemento do site, selecione-o, escolha a op\u00e7\u00e3o Tipografia e clique na configura\u00e7\u00e3o de cor. CSS Hero oferece um seletor de cores simples que voc\u00ea pode usar para alterar rapidamente a cor.<\/p>\n
Personalizar bordas<\/h4>\n
O tema Ignite tem uma borda laranja na parte superior do site. Isso \u00e9 t\u00e3o f\u00e1cil de mudar quanto qualquer cor de texto com CSS Hero<\/a>.<\/p>\n
Posso selecionar o cabe\u00e7alho, escolher a op\u00e7\u00e3o Bordas e selecionar o \u00edcone da borda superior para editar apenas a borda superior. A cor pode ser alterada usando a mesma op\u00e7\u00e3o de seletor de cores dispon\u00edvel para alterar as cores do texto.<\/p>\n
Adicionar uma imagem de fundo<\/h4>\n
Voc\u00ea pode alterar a cor de fundo de qualquer elemento ou aplicar uma imagem de fundo.<\/p>\n
Se voc\u00ea quiser uma apar\u00eancia texturizada, pode adicionar uma pequena imagem de fundo e faz\u00ea-la repetir verticalmente e horizontalmente. Voc\u00ea tamb\u00e9m pode criar uma imagem de plano de fundo est\u00e1tica que preencha todo o plano de fundo do site. CSS Hero oferece todos os controles de que voc\u00ea precisa para adicionar uma imagem de fundo com qualquer tipo de posicionamento e tamanho que desejar.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nEmbora voc\u00ea possa carregar qualquer imagem que desejar, CSS Hero tamb\u00e9m tem uma integra\u00e7\u00e3o com o Unsplash<\/a> que d\u00e1 acesso a milhares de fotos gratuitas de alta resolu\u00e7\u00e3o, o que \u00e9 extremamente conveniente.<\/p>\n
Ajustar espa\u00e7amento<\/h4>\n
O \u00faltimo recurso de personaliza\u00e7\u00e3o do CSS Hero que abordarei s\u00e3o as propriedades de espa\u00e7amento.<\/p>\n
A margem \u00e9 usada para criar espa\u00e7o entre os elementos. Por exemplo, posso diminuir o espa\u00e7o acima deste bot\u00e3o e aumentar o espa\u00e7o abaixo dele usando a propriedade CSS margin.<\/p>\n
Por outro lado, o preenchimento \u00e9 usado para criar espa\u00e7o dentro dos elementos. Posso aumentar o preenchimento nos quatro lados do bot\u00e3o para torn\u00e1-lo maior e mais f\u00e1cil de clicar.<\/p>\n
E sabe o que \u00e9 ainda mais impressionante?<\/p>\n
Essas altera\u00e7\u00f5es s\u00e3o aplicadas automaticamente a todos os bot\u00f5es “Leia mais” no site, portanto, s\u00f3 preciso fazer esse ajuste uma vez.<\/p>\n
Op\u00e7\u00f5es adicionais<\/h2>\n
O CSS Hero tamb\u00e9m tem se\u00e7\u00f5es para modificar o raio da borda (cantos arredondados) e estilos de lista, mas voc\u00ea n\u00e3o vai us\u00e1-los com tanta freq\u00fc\u00eancia.<\/p>\n
H\u00e1 tamb\u00e9m uma se\u00e7\u00e3o Extras que inclui algumas propriedades aleat\u00f3rias, como opacidade, sombras de caixa e visibilidade (ocultar qualquer elemento), para citar alguns.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nVoc\u00ea deve usar CSS Hero?<\/h2>\n
Se voc\u00ea tiver apenas alguns ajustes para fazer, pode ser dif\u00edcil justificar a compra de um novo plugin. Por exemplo, se voc\u00ea deseja apenas alterar o tamanho do t\u00edtulo do seu site, voc\u00ea provavelmente pode enviar um e-mail ao desenvolvedor do seu tema para um snippet CSS para fazer isso.<\/p>\n
Dito isso, o CSS Hero custa apenas US $ 29, o que o torna muito acess\u00edvel. A alternativa \u00e9 descobrir as coisas por conta pr\u00f3pria, o que pode levar horas. Voc\u00ea n\u00e3o poder\u00e1 contratar um desenvolvedor para trabalhar em seu site por US $ 29.<\/p>\n
Clique aqui para conferir CSS Hero agora<\/a><\/p>\n
Se voc\u00ea frequentemente deseja fazer personaliza\u00e7\u00f5es em seu site, acho que uma licen\u00e7a multi-site \u00e9 bem garantida para garantir que voc\u00ea sempre possa fazer as altera\u00e7\u00f5es desejadas no design de seu site.<\/p>\n
Concluindo, CSS Hero<\/a> \u00e9 uma excelente ferramenta para customiza\u00e7\u00e3o de sites e preenche um nicho importante. Para personaliza\u00e7\u00f5es dr\u00e1sticas de sites, voc\u00ea desejar\u00e1 selecionar um novo tema<\/a> ou aprender a usar um construtor de p\u00e1ginas<\/a>.<\/p>\n
Clique aqui para encontrar mais maneiras de personalizar seu site<\/a>.<\/p>\n