Neste screencast, veremos a seção Ofertas. A seção de ofertas é essencialmente uma “parede de anúncios”. É uma área do site que as pessoas teriam que navegar por si mesmas, então não estou preocupado em bloquear os pensamentos das pessoas. Além disso, cada anúncio tem um desconto e é um produto que eu recomendo pessoalmente, portanto, não haverá obscuridade.
Já temos o cabeçalho no lugar. Também já temos o conteúdo sendo cuspido na página que precisamos estilizar. Este é o lugar perfeito para começar a escrever CSS.
O legal dessa página é que podemos mergulhar no mundo da publicidade responsiva. O mundo da publicidade realmente não alcançou o design responsivo. Os anúncios geralmente são de tamanho fixo e redimensioná-los é difícil ou proibido. Esse não é o caso neste site, porque eu mesmo crio os anúncios.
Cada anúncio é criado a partir de uma imagem de plano de fundo, uma imagem de logotipo e pedaços de texto. Usando um background-imagemeio, podemos cortar as bordas e está tudo bem. Não perdemos nenhum texto ou partes importantes do logotipo.
O layout desta “parede” será semelhante a uma parede =). Teremos três colunas em tamanhos de área de trabalho amplos e depois descer para duas colunas e, finalmente, uma única coluna em tamanhos de telefone. Tudo o que fazemos é flutuar os anúncios e aplicar um min-heightpara mantê-los todos na mesma altura. Em diferentes consultas de mídia, simplesmente ajustamos as larguras dos anúncios e alteramos quais deles têm margem direita e quais não têm (via :nth-child).
No back end, cada anúncio é um campo personalizado no WordPress. Quando os colocamos na página, primeiro os consultamos e os colocamos em um array. Em seguida, embaralhe essa matriz. Então, finalmente, ecoe-os. Pode muito bem dar a todos uma chance justa de ser o melhor anúncio!