fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Dicas para redesenhar seu site WordPress

Você está em:

Dicas para redesenhar seu site WordPress

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 web.

Você pode pegar um tema WP básico (e monótono), adicionar um logotipo, editar algumas linhas de código, alterar seu CSS e ter um site profissional (ainda que apresentável) em pouco tempo. É um trabalho fácil e este tutorial irá mostrar-lhe como fazê-lo.

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 serem consideradas. Pense nisso como pintar sua casa ou sua loja de pedra e argamassa. Você tem que determinar a cor que vai 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ê quer seus links? Seu histórico, como você vai torná-lo mais atraente e deixar seus concorrentes boquiabertos? Quais cores complementarão (ou até fortalecerão) sua mensagem? Como você quer seu texto? O céu é o limite para a escolha das cores que você pode usar no seu site WP.

Você tem que determinar todas as cores que usará desde o início. Eu recomendo que você use apenas três cores, mas você pode usar quantas cores quiser.

Só não exagere ou você acabará diluindo sua mensagem de marketing em toda essa cor. Afinal, o excesso de qualquer coisa é venenoso, portanto, não importa as cores que você escolher, é importante garantir que haja harmonia.

É melhor usar a maioria das cores onde a maioria das pessoas vai ver (e espero) amá-las. Estou falando sobre seu logotipo e masthead. Essas áreas são exatamente onde você precisa de mais cores; o resto do seu site pode ser menos colorido, mas mais informativo.

216 cores versus 12 cores

Estamos todos familiarizados com as doze cores elementares, mas a web está cheia de cores e seus diferentes tons. Por isso mesmo, escolher a cor que vai exalar calor pessoal ao mesmo tempo em que cria um look profissional pode ser uma tarefa desafiadora.

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

KULER

kuler

O Kuler foi projetado pela Adobe para ajudar os desenvolvedores da Web a criar esquemas de cores de primeira classe. Kuler é uma ferramenta online, 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 uma Adobe ID, poderá salvar seus esquemas de cores com um único clique.

Existem várias regras de cores para utilizar com o Kuler, incluindo Monocromático, Composto, Complementar, Análogo e Tríade, entre outros.

Confira Kuler .

TABELA DE CORES HTML

Saber 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 HTML Color Chart. É um gráfico colorido com mais de 200 (216 na verdade) códigos de cores da web. Armado com o gráfico, nenhuma cor sob o 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ê precisa de ajuda para escolher cores, GenoPal é o aplicativo que você deseja. É um aplicativo web muito simples que “fixa” paletas de cores na janela do seu navegador. Conforme você escolhe suas cores, elas aparecem em 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.

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

COLORHEXA

ColorHexa é a versão online da placa de pintura do artista. Este site oferece a capacidade de misturar cores apenas inserindo códigos de cores. Seu aplicativo precursor é a ferramenta de mistura de cores, mas eles também têm um gerador de gradiente e um subtrator de cores. Não é puro gênio trabalhando aqui?

colorhexa

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

#ff0000 + #0000ff + #ff00ff e eu tenho #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ê precisa experimentar para experimentar a mistura de cores como nunca antes.

Confira ColorHexa .

ÚLTIMO GERADOR DE GRADIENTE CSS

gerador de gradiente de cor final

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

Há uma área de visualização onde você vê seu gradiente, então tudo o que você precisa fazer é gerar seu gradiente conforme achar adequado e copiar e colar o código CSS gerado. É realmente tão 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 web design atrairão as pessoas, mas são suas palavras, ou seja, suas páginas e postagens que farão as pessoas ficarem por perto.

Estamos ocupados criando nossas melhores histórias o tempo todo, então a maioria de nós esquece que as fontes também importam. Mas a fonte que você escolhe influencia como as pessoas interagem com seu site. Com as fontes certas, seu público-alvo vai querer ficar por perto e, eventualmente, clicar em suas outras páginas, que é exatamente o que você deseja. Noivado.

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

“Brincar com fontes é como brincar com fogo. Às vezes, pode acender um fósforo em uma página da web, uma faísca de texto bonito. Outras vezes, pode incendiar a casa inteira.” – Lorelle de cameraontheroad.com.

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

O seguinte é um bom exemplo:

#menu {font-family:Arial, Helvetica, Sans-serif, Verdana, “Times New Roman”; tamanho da fonte: 0,8em; cor preta;}

O código acima definirá o tamanho da fonte em seu menu para 0,8em e definirá a cor para preto. Ele também definirá a fonte para 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 seu style.css e colocar o seguinte código no topo.

@font-face{font-family: Museo300; src: url(“fonts/museo300-regular.ttf”) formato: (‘truetype’); peso da fonte:normal;}

NOTA: Você tem que definir o nome e a localização 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{font-family:Museo300;}

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

#menu{font-family:Museo300;}

…irá definir o Museo300 no seu menu.

O método acima significa que você precisa baixar a fonte e carregá-la no seu servidor, o que, se você me perguntar, é bastante tedioso.

No entanto, você não precisa baixar nenhuma fonte externa que deseja usar.

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

<link href=”http://fonts.googleapis.com/css?family=over+the+rainbow” rel=”stylesheet” type=”text/css”/>

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

Se você não quiser ou não puder editar seu arquivo header.php, basta importar as fontes digitando a seguinte linha em seu style.css :

@import url(http://fonts.googleapis.com/css?family=over+the+rainbow);

O exemplo acima permitirá que você use a fonte Over The Rainbow do Google em qualquer lugar do seu site. Por exemplo, se você quiser usar o Over The Rainbow em todo o seu site, poderá usar este código:

body{font-family:”Over The Rainbow”;}

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

Atualização (07/12/13) : Se você quiser adicionar o Google Fonts ao seu site WordPress facilmente, você pode usar o plug-in Google Typography . Além disso, você pode aprender mais sobre as fontes do Google e como implementá-las neste  Melhore a tipografia do seu site WordPress com fontes do Google  por Tom Ewer.

Mais recursos sobre como brincar com fontes

Plugins WordPress para adicionar fontes

E para aqueles que não querem se aprofundar no código, você sempre pode instalar um plugin do WordPress para fazer parte do trabalho pesado para você. Aqui estão alguns dos plugins de fontes gratuitas 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 hora em um tom muito legal que fez você se sentir um completo noob no que diz respeito ao seu site? Os proprietários desses sites apenas jogaram com uma única linha de código e agora você não se cansa de suas datas. Haha.

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

Em seu WP Dashboard , navegue até Appearance e depois para Editor como mostrado abaixo:

data de formatação

Uma vez lá, você poderá ver uma lista de seus arquivos .php na extrema direita:

postagem única

Clique no post único (single.php) e uma vez aberto, abra a barra de pesquisa pressionando Ctrl+F . Na barra de pesquisa que aparece, digite:

A Hora

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

<?php the_time(‘F Y’); ?>

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

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

O “F” em (‘F Y’) representa o nome completo do mês e o “Y” representa o ano em 4 dígitos . Portanto, se você usar (‘F Y’), sua data ficará assim:

Setembro de 2013

Se você colocar uma vírgula entre F e Y, você deve ter algo como:

Setembro de 2013

Se você quiser adicionar o dia e outros elementos, você pode 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 (‘F Y’) e, tome nota , não exclua as aspas simples . Sinta-se à vontade para usar quantos caracteres quiser para obter o efeito desejado e lembre-se de salvar tudo quando terminar.

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

<?php the_time(‘F Y’) ?>

…como eu fiz no meu blog há pouco tempo. Agora, tudo que eu recebo é Postado por Fred na categoria fulano de tal… blá blá. Nada de datas.

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

Não encontrou a função the_time?

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

Usando imagens

Esta é 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 por meio do utilitário de upload ou (botão Adicionar mídia) ao criar um novo post ou página. Tudo o que você precisa fazer é colocar o cursor onde deseja que a imagem esteja em sua postagem ou página e clicar em “Adicionar mídia”.

adicionar mídia

Quando o utilitário de upload for aberto, você poderá adicionar outros detalhes, como legenda, tamanho, links e alinhamento.

utilitário de upload

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

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

E se você não tem certeza de onde encontrar algumas imagens gratuitas incríveis, confira o post que escrevemos sobre os melhores recursos de imagem para WordPress .

Ver? Eu disse que seria o mais curto

Adicionando um Favicon

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

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

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 usando programas de edição de imagem como o GIMP, ou qualquer outro que permita salvar arquivos .ico. A maioria dos serviços online são gratuitos.

Embora a imagem seja geralmente muito pequena (16 por 16 pixels), o favicon deve representar seu blog em sua totalidade. A imagem ou texto que você usa para criar seu favicon deve representar seu negócio online.

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 favicons 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, então não se preocupe.

Como instalar seu favicon no WordPress

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

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

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

Em seguida, carregue outra cópia do seu favicon para a pasta raiz (geralmente public_html) ou para o diretório principal onde seu site está armazenado, para que você possa ver seu favicon quando digitar yoursite.com/favicon.ico. Isso adicionará automaticamente seu favicon aos seus feeds.

Quando você terminar de fazer o upload, é hora de fazer seu favicon.ico funcionar. 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 plug-in “ All In One Favicon ” para uso mais avançado para uma abordagem muito simples, você pode usar o plug-in “ The Simplest Favicon ” que não possui opções de back-end, basta fazer o upload de um arquivo chamado favicon. ico no local correto em seu servidor.

tudo-em-um-favicon

Adicionando o favicon manualmente ao seu modelo

Algumas pessoas podem preferir (mesmo que não seja a melhor maneira) adicionar seus favicons manualmente ao seu modelo, para isso siga os seguintes passos:

  • Faça login no seu painel
  • Navegue até a aparência
  • Então para Editor (Editor de Tema)
  • Encontre e abra o arquivo header.php (cabeçalho)

Adicione esta linha ao seu arquivo de cabeçalho (de preferência no topo, onde você vê outras tags <link rel=…/> :

<link rel=”shortcut icon” href=”<? php echo gets_stylesheet_directory_uri(); ?> /favicon.ico”/>

Salve uma vez feito. 

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

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

Conclusão

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

Para beneficiá-lo ao máximo, é melhor dividir o tutorial em várias partes (esta é a parte 1). Compartilharemos mais truques de redesenho com o passar dos 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 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!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$300,00 para liberar o Cupom Secreto
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(