Integração de layouts de grade CSS simples ao WordPress
Obter um layout de grade consistente e sólido no WordPress pode ser um processo indolor se você usar as ferramentas certas. Neste tutorial, você aprenderá passo a passo como configurar rapidamente um sistema de grade no WordPress que é muito leve e fácil de modificar. Manteremos o design simples para que possamos nos concentrar no uso das ferramentas certas para configurar sua grade, mas tenha em mente que você pode estilizar a grade por conta própria, se necessário.
Eu vou estar usando um tema de pool padrão no WordPress para este tutorial apenas para mostrar-lhe uma abordagem "começar do zero" para obter as grades apenas para a direita.
Etapa 1: determine sua largura de grade
Antes de começar, você precisa determinar o quão ampla sua grade precisará ser. Para o meu site WordPress, posso ver que a largura da minha coluna principal é de 450 px usando o recurso "Inspecionar elemento" do Google Chrome quando você clica com o botão direito do mouse em um objeto. Essa é a maneira mais rápida que encontrei que pode determinar rapidamente a largura e a altura de um objeto em uma página da Web.
Etapa 2: Designer de Grade
Em vez de construir manualmente uma grade, o que você pode fazer se quiser, sugiro usar uma das muitas ferramentas disponíveis do gerador de grade. Para este tutorial, usarei o gerador de grade do MindPlay. É um gerador de grade muito simples e leve.
Eu quero um display de três colunas e preciso ter certeza de que meus pixels estão em 450. Então, ajuste de acordo e pule para a guia "Exportar". Nós não vamos passar por cima do *tipografia características neste tutorial, embora isso certamente valha a pena ser explorado por conta própria.
Na guia Exportar, use o quadro "Folha de estilo" mais acima e role para baixo até ver o comentário "Grade". Você copiará tudo, desde o comentário até a parte inferior desse quadro. Deve ser apenas cerca de 30 linhas de .
Etapa 3: Atualizando sua Folha de Estilo do WordPress
Entre no seu site WordPress e vá para Aparência> Editor.
No canto inferior direito do painel Editor, você verá um Styles.css arquivo (ou algo semelhante, dependendo do seu tema). Clique aqui para abri-lo.
Role até o final da folha e cole seu pre do MindPlay.dk:
Etapa 4: Implementando a grade
Para usar a grade, você simplesmente cria um Aqui está uma amostra de pré que você pode colar no lugar para você começar: Coluna esquerda Coluna do meio Coluna Direita Aqui está o que parece no WordPress: Salve / atualize a página e veja os resultados. No meu caso, esta é a home page do site: Como você pode ver na captura de tela acima, temos nossas três colunas e tudo está exatamente onde esperamos que esteja. Você pode adicionar quantas linhas desejar simplesmente iniciando com as seguintes Coluna esquerda Coluna do meio Coluna Direita Linha Esquerda # 2 Linha do meio 2 Linha direita # 2 Veja como parece até agora: Agora você pode adicionar imagens ou texto e estilizar cada linha exatamente como deseja. Você pode ter problemas em alguns navegadores quando você tem mais de uma linha. Para contornar este problema, você precisará fazer a margem na extremidade direita ( Isso fará com que o seu Se você quiser estilizar o fundo de toda a grade, você precisará ajustar a altura do Dependendo da versão do gerador de grade MindPlay.dk que você usa, o site não pode gerar o ".grid-m4" e, em vez disso, você precisará usar Coluna esquerda Coluna do meio Coluna Direita Aqui estão os meus resultados finais com duas linhas e alguns gráficos simples: Divirta-se projetando e lembre-se de que você pode estilizar sua grade da maneira que desejar. Nota do editor: Este post foi escrito por Tara Hornor para Hongkiat.com. Tara é formada em inglês e escreve sobre marketing, publicidade, branding, design gráfico e editoração eletrônica. Além de sua carreira como escritora, Tara também gosta de passar tempo com o marido e dois filhos..
:
Dicas para ajustes
.grid-m4, no nosso caso) para a altura que você quer que cada linha seja. Se você estiver usando imagens de 250 x 250 pixels, faça a altura da linha no .grid-m4 para ser 250px:.grid-m4 float: esquerda; largura: 20px; altura: 250px;
.grid-m1 no lado esquerdo da próxima linha não flutua até a linha acima dela..grade classe. Então, digamos que você tenha quatro linhas na sua grade, cada uma com 250px. Você vai querer adicionar altura à classe .grid a 1000px, então qualquer elemento de estilo que você adicionar cobrirá todo o design da grade...grade largura: 450px; altura: 1000 px; margem: auto;
.grid-m1 depois de .grid-c3 para garantir que sua grade se estenda ao local apropriado:Resultados finais
