Redesenhando seu site WordPress (para adicionar um toque pessoal)

Nenhuma outra plataforma oferece a você o poder de personalizar a aparência do seu site como o WordPress. É uma das razões pelas quais o WordPress é popular entre editores e desenvolvedores da web.


Você pode usar um tema básico (e monótono) do WP, adicionar um logotipo, editar algumas linhas de código, alterar seu CSS e criar um site com aparência profissional (mas agradável) em pouco tempo. É um trabalho fácil e este tutorial mostrará como fazer isso.

Você está pronto? Vamos começar com as primeiras coisas primeiro; as cores.

Projetando um esquema de cores

Ao desenvolver um esquema de cores para o seu site WordPress, há muitas coisas a considerar. Pense nisso como pintar sua casa ou sua loja de pedra e argamassa. Você precisa determinar a cor que ficará nas suas paredes e a cor que você quer nas suas portas.

A maneira como você pinta seus exteriores e interiores dependerá de alguns fatores, sendo suas preferências pessoais.

Colorir seu site WordPress também não é diferente. De que cor você deseja seus links? Seu histórico, como você o tornará o mais atraente e deixará seus concorrentes boquiabertos? Quais cores complementam (ou até fortalecem) sua mensagem? Como você quer seu texto? O céu é o limite para a escolha de cores que você pode usar no seu site WP.

Você precisa determinar todas as cores que usará desde o início. Eu recomendaria que você ficasse apenas com três cores, mas você pode usar quantas cores quiser.

Apenas não exagere ou você acabará diluindo sua mensagem de marketing com toda essa cor. Afinal, um excesso de qualquer coisa é venenoso, portanto, independentemente das cores que você escolher, é importante garantir que haja harmonia.

É melhor usar o máximo de cores em que a maioria das pessoas as verá (e espero) amá-las. Estou falando do seu logotipo e cabeçalho. Essas áreas são exatamente onde você precisa de mais cores; o restante do site pode ser menos colorido, mas mais informativo.

216 cores versus 12 cores

Todos conhecemos as doze cores elementares, mas a web está cheia de cores e de diferentes tonalidades. Por essa mesma razão, escolher a cor que exala calor pessoal enquanto cria uma aparência profissional pode ser uma tarefa desafiadora.

Você está com sorte, porque pesquei por toda a Internet e encontrei as seguintes ferramentas para você começar:

KULER

kuler

O Kuler foi desenvolvido pela Adobe para ajudar os desenvolvedores da Web a criar esquemas de cores de primeira classe. O Kuler é uma ferramenta on-line, o que significa que você pode carregá-lo e usá-lo de qualquer lugar, mas também há um aplicativo de desktop para ajudá-lo a desenvolver esquemas de cores diretamente do seu desktop. Além disso, se você tiver um ID da Adobe, poderá salvar seus esquemas de cores com um único clique.

Existem várias regras de cores a serem utilizadas com o Kuler, incluindo monocromático, composto, complementar, análogo e tríade, entre outras..

Confira Kuler.

GRÁFICO DE CORES HTML

Conhecer as cores que você usará é apenas metade do trabalho. Para implementar suas cores, você precisa traduzi-las em códigos HTML.

cartela de cores html

É aqui que entra o gráfico de cores HTML. É um gráfico colorido com mais de 200 (216, na verdade) códigos de cores da web. Armado com o gráfico, nenhuma cor ao sol deve ser difícil de implementar.

Os códigos funcionarão com HTML, CSS, Adobe PhotoShop e outras ferramentas de manipulação gráfica, para que você tenha toda a liberdade do mundo para brincar com suas cores o quanto quiser.

Confira a tabela de cores HTML.

GENOPAL

Se você precisar de ajuda para escolher as cores, o GenoPal é o aplicativo que você deseja. É um aplicativo da web muito simples que fixa as paletas de cores na janela do navegador. Conforme você escolhe suas cores, elas aparecem no seu navegador na forma de “notas adesivas” coloridas. ��

genopal

Com o GenoPal, você pode aumentar o brilho e controlar a saturação da tonalidade, para obter exatamente a tonalidade desejada.

No site deles, um aplicativo móvel está em andamento. Uma vez lançado, ele permite que você carregue o aplicativo e desenvolva cores no seu dispositivo móvel. Seu design é engenhoso, e o fato de esse aplicativo realmente funcionar é um sinal claro de que GenoPal significa negócios..

COLORHEXA

ColorHexa é a versão online do placa de pintura do artista. Este site permite que você misture cores apenas inserindo códigos de cores. O aplicativo anterior é a ferramenta de mistura de cores, mas eles também têm um gerador de gradiente e um subtrator de cores. Não é esse puro gênio trabalhando aqui?

colorhexa

Como o ColorHexa Blender funciona? Tudo o que você precisa fazer é digitar seus códigos de cores separados por um “+” e o ColorHexa faz o resto do trabalho. Por exemplo, eu tentei:

# ff0000 + # 0000ff + # ff00ff e recebi # aa00aa. Além disso, eles fornecem uma página inteira de informações sobre cores (na sua cor final, por exemplo, # aa00aa). Esta é uma ferramenta que você deve experimentar para experimentar a mistura de cores como nunca antes.

Confira o ColorHexa.

GERADOR GRADIENTE DE CSS ULTIMATE

melhor gerador de gradiente de cor

Essa é provavelmente a melhor ferramenta no que diz respeito à geração de gradientes de cores. É totalmente online e ajuda você a gerar pontos médios atualizados e seus códigos CSS correspondentes. Eles também fornecem complementos para Chrome e Firefox para permitir a integração do aplicativo ao seu navegador para um acesso mais fácil e rápido.

Há uma área de visualização em que você vê seu gradiente; portanto, tudo o que você precisa fazer é gerar seu gradiente conforme julgar adequado e copiar colar o código CSS gerado. É realmente fácil e eles têm mais cores do que você jamais usará.

Confira o Ultimate CSS Gradient Generator.

Escolhendo fontes

Agora que mostrei como escolher e misturar cores como Picasso, vamos brincar com as fontes.

Suas cores e design da web atraem as pessoas, mas são suas palavras, ou seja, suas páginas e postagens que farão com que as pessoas fiquem por perto.

Estamos sempre ocupados criando nossas melhores histórias, para que a maioria de nós esqueça que as fontes também são importantes. Mas a fonte escolhida influencia a maneira como as pessoas interagem com seu site. Com as fontes corretas, seu público-alvo desejará permanecer por aí e, eventualmente, clicar em outras páginas, exatamente o que você deseja. noivado.

Existem um milhão e uma de fontes por aí, mas, infelizmente, o usuário verá apenas as fontes instaladas em sua máquina. Se a fonte usada não estiver instalada em suas máquinas, elas verão uma alternativa próxima (ou uma fonte completamente diferente), que não terá o mesmo efeito que você deseja.

“Brincar com fontes é como brincar com fogo. Às vezes, pode acender uma correspondência em uma página da web, um brilho de texto bonito. Outras vezes, pode incendiar toda a casa. – Lorelle de cameraontheroad.com.

Você pode controlar suas fontes (e criar o efeito desejado) com sua folha de estilo. No seu tema, a folha de estilo é geralmente a style.css Arquivo. Você pode usar esse arquivo para controlar a cor de suas fontes, tipo de fonte / família de fontes, tamanho da fonte e outros aspectos da fonte escolhida.

A seguir, é um bom exemplo:

#menu {família de fontes: Arial, Helvetica, Sans Serif, Verdana, "Times New Roman"; tamanho da fonte: 0.8em; cor preta;}

O código acima definirá o tamanho da fonte no seu menu para 0.8em e a cor para preto. Ele também definirá a fonte como Arial, mas se o usuário não tiver Arial em sua máquina, a Helvetica assumirá o controle. Se eles não tiverem Helvetica ou Arial, Verdana, Sans Serif ou Times New Roman assumirão.

Ao controlar as fontes, você pode criar uma aparência mais consistente.

No entanto, para resolver o problema de inconsistência de fonte de uma vez por todas, você pode usar fontes incorporadas. Ao usar fontes incorporadas (ou externas), o usuário não precisa ter a fonte em sua máquina.

Além disso, é um trabalho fácil.

Tudo o que você precisa fazer é abrir o seu style.css e coloque o seguinte código no topo.

@ font-face {família de fontes: Museo300; src: url ("fonts / museo300-regular.ttf") formato: ('truetype'); peso da fonte: normal;}

NOTA: Você precisa definir o nome e o local da sua fonte. No exemplo acima, “Museo300” é a fonte, que foi salva em uma pasta chamada “fontes”.

Para usar a fonte em seu site, por exemplo, você pode escrever:

body {família de fontes: Museo300;}

Você pode usar uma fonte incorporada para qualquer elemento do seu site. Por exemplo…

#menu {família de fontes: Museo300;}

… Definirá o Museo300 no seu menu.

O método acima significa que você precisa baixar a fonte e fazer o upload da mesma para o servidor, o que, se você me perguntar, é bastante entediante.

Contudo, yvocê não precisa baixar nenhuma fonte externa que deseja usar.

Você pode simplesmente vincular as fontes da seção head (header.php) da seguinte forma:

Como e onde você adiciona a linha acima? Você precisa abrir o seu Painel de Administração do WordPress -> Aparência -> Editor -> header.php

Se você não deseja ou não pode editar seu arquivo header.php, importe as fontes digitando a seguinte linha no seu style.css:

URL de importação (http://fonts.googleapis.com/css?family=over+the+rainbow);

O exemplo acima permitirá que você use o Além do arco-íris fonte do Google em qualquer lugar do seu site. Por exemplo, se você quiser usar o Over The Rainbow em todo o site, use este código:

body {família da fonte: "Over The Rainbow";}

O Google fornece mais de 600 famílias de fontes gratuitas, então jogue fora!

Atualização (12/12/13): Se você deseja adicionar fontes do Google ao seu site WordPress com facilidade, use o Plug-in de tipografia do Google. Além disso, você pode aprender mais sobre as fontes do Google e como implementá-las nesta seção Melhore a tipografia de seu site WordPress com o Google Fonts de Tom Ewer.

Mais recursos sobre como jogar com fontes

Plugins do WordPress para adicionar fontes

E para aqueles que não querem se aprofundar no código, você sempre pode instalar um plug-in do WordPress para fazer um trabalho pesado para você. Aqui estão alguns dos plugins de fontes gratuitos mais populares do WordPress.com:

Você está se divertindo? Vamos continuar…

 Formatação de data e hora

Você já esteve em um site WordPress que exibiu a data ou a hora em um tom muito agradável que fez você se sentir como um noob completo no que diz respeito ao seu site? Os proprietários desses sites apenas brincaram com um única linha de código e agora você não se cansa das datas deles. Haha.

Boas notícias, você pode editar esta linha de código e surpreenda seus leitores também.

Na tua Painel WP, navegar para Aparência, e depois para editor como mostrado abaixo:

data de formatação

Uma vez lá, você poderá ver uma lista dos seus arquivos .php à direita:

postagem única

Clique na postagem única (single.php) e, uma vez aberta, abra a barra de pesquisa pressionando Ctrl + F. Na barra de pesquisa exibida, digite:

A Hora

Você verá imediatamente uma linha que pode ser algo como:

Agora, a área que você deseja editar é (‘FY’).

Permita-me detalhar esta seção para lhe dar algo mais carnal para morder.

O “F” em (‘F Y’) significa Nome completo do mês e o “Y” representa o Ano em 4 dígitos. Portanto, se você usar (‘FY’), sua data será semelhante a:

Setembro de 2013

Se você inserir uma vírgula entre F e Y, deverá ter algo como:

Setembro de 2013

Se você desejar adicionar o dia e outros elementos, poderá usar os seguintes caracteres:

l = Nome completo do dia (L minúsculo)

F = mês

j = O dia do mês (a data)

Y = Ano em 4 dígitos

y = Ano em 2 dígitos

Mais caracteres podem ser encontrados na tabela abaixo:

formatação da tabela de datas

E aqui, alguns exemplos:

exemplos de formatação de data

Lembre-se sempre de editar apenas os caracteres entre colchetes (‘FY’) e, tome nota, não exclua as aspas simples. Sinta-se livre para usar quantos caracteres desejar para obter o efeito desejado e lembre-se de salvar tudo quando terminar.

Além disso, você pode se livrar da data excluindo …

… como eu fiz no meu blog não faz muito tempo. �� Agora, tudo o que recebo é Postado por Fred na categoria mais ou menos … blá blá. Nenhuma data.

Você está abastecido para a próxima parte? É melhor você estar.

Não encontrou a função_time?

Tudo bem, porque muitos temas hoje em dia estão usando a função date () em vez da função time (), que é realmente uma prática melhor. Se o seu tema estiver usando a função data (), você não precisará fazer nenhuma edição, pois você pode simplesmente alterar a maneira como seus dados são exibidos no painel em “Configurações-> Geral”.

Usando Imagens

Essa é provavelmente a parte mais fácil (e mais curta) deste tutorial. Mas se você é realmente novo no WordPress, adicionar imagens pode ser um desafio.

O WordPress permite adicionar imagens através do utilitário de upload ou (botão Adicionar mídia) ao criar uma nova postagem ou página. Tudo o que você precisa fazer é colocar o cursor no local em que deseja que a imagem esteja na sua postagem ou página e, em seguida, clique em “Adicionar mídia”.

adicionar mídia

Depois que o utilitário de upload é aberto, você pode adicionar outros detalhes, como legenda, tamanho, links e alinhamento.

utilitário de upload

Esta área encontra-se no lado direito do utilitário de upload.

Para saber mais sobre como adicionar imagens, consulte os seguintes recursos:

E se você não tem certeza de onde encontrar algumas imagens gratuitas impressionantes, confira a postagem que escrevemos sobre os melhores recursos de imagem para WordPress.

Vejo? Eu te disse que será o mais curto ��

Adicionando um Favicon

Antes de esquecermos totalmente as imagens, vamos criar e adicionar um favicon ao seu site WordPress. Um ícone favorito (ou ícone de favoritos) é o ícone usado para marcar um site como favorito.

Um favicon ajudará seus leitores a identificar visualmente seu site.

Geralmente, um favicon é um arquivo gráfico quadrado de 16 x 16 pixels com a extensão .ico. A extensão significa ícone.

Como criar um Favicon

Você pode criar seu favicon online ou usar programas de edição de imagens como o GIMP ou qualquer outro que permita salvar arquivos .ico. A maioria dos serviços online é gratuita.

Embora a imagem seja geralmente muito pequena (16 por 16 pixels), o favicon deve representar seu blog por inteiro. A imagem ou o texto usado para criar seu favicon deve representar seu negócio on-line.

Se você estiver usando um editor de imagens:

  • Corte ou adicione espaço de acordo para garantir que sua imagem seja quadrada
  • Redimensione a imagem para 16 x 16 pixels e
  • Salve a imagem como favicon.ico

Os serviços online que você pode usar para criar ícones favoritos incluem (mas não se limitam a):

Depois de criar seu favicon, eles permitirão que você faça o download para o seu computador, portanto, não se preocupe.

Como instalar o seu Favicon no WordPress

Se houver outro favicon na pasta principal do tema, será necessário excluí-lo usando o cliente FTP ou qualquer outro método disponível. Os clientes FTP são recomendados porque são fáceis de usar e você pode encontrar rapidamente o arquivo que procura..

Neste tutorial, usei o faviconer.com para criar um favicon para o meu blog e o Filezilla para excluir os favicons existentes..

Com o arquivo favicon.ico em mãos, faça o upload do mesmo na pasta principal do seu tema. Esta é a pasta onde seu tema atual está armazenado.

Em seguida, faça upload de outra cópia do seu favicon na pasta raiz (geralmente public_html) ou no diretório principal em que seu site está armazenado, para que você possa ver seu favicon ao digitar yoursite.com/favicon.ico. Isso adicionará automaticamente seu favicon aos seus feeds.

Quando você terminar de enviar, é hora de colocar seu favicon.ico em funcionamento. Isto é o que você deve fazer:

Adicionando seu Favicon usando um plugin

A melhor maneira de adicionar seu favicon é usando um plugin. Eu recomendaria usar o “Tudo em um Favicon“Para uso mais avançado, para uma abordagem muito simples que você pode usar”O Favicon Mais Simples“, Que não possui opções de back-end, você só precisa fazer o upload de um arquivo chamado favicon.ico no local correto do seu servidor.

tudo-em-um-favicon

Adicionando o favicon manualmente ao seu modelo

Algumas pessoas podem preferir (embora não seja a melhor maneira) adicionar seus favoritos manualmente ao modelo, para fazer isso, siga as seguintes etapas:

  • Faça login no seu painel de controle
  • Navegar para Aparência
  • Então, para Editor (Editor de temas)
  • Encontre e abra header.php (cabeçalho) Arquivo

Adicione esta linha ao seu arquivo de cabeçalho (de preferência no topo, onde você vê outras Tag:

Salvar uma vez feito. 

Atualize seu navegador para ver suas novas alterações.

Nesse ponto, você poderá alterar suas cores, escolher fontes melhores, formatar datas e horas, usar imagens e adicionar um favicon.

Conclusão

Há muito o que discutir sobre a reformulação do seu site WordPress que seria um desserviço (para você) tentar cobrir tudo em um único post.

Para beneficiar você mais, é melhor dividir o tutorial em várias partes (esta é a parte 1). Compartilharemos mais truques de redesenho nos próximos dias, então fique atento. O objetivo desses tutoriais é ajudá-lo a criar o melhor site WordPress de todos os tempos e deixá-lo mais feliz, porque você fez tudo sozinho.

Se você gostaria de compartilhar sua (s) opinião (ões) ou adicionar algo à discussão, sinta-se à vontade para deixar seu comentário na seção de comentários abaixo!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map