Bu ekran video kaydında, Fırsatlar bölümünü inceleyeceğiz. Anlaşmalar bölümü aslında bir "reklam duvarı" dır. Bu, sitenin insanların kendilerine gitmek zorunda kalacağı bir alan, bu yüzden reklamları insanların düşüncelerine karıştırmaktan endişelenmiyorum. Ayrıca, her reklamın üzerinde bir indirim var ve şahsen tavsiye ettiğim bir ürün, bu yüzden gölgelik yok.
Başlığı zaten yerleştirdik. Ayrıca, stil vermemiz gereken sayfaya tükenen içeriğe de zaten sahibiz. Burası CSS yazmaya başlamak için mükemmel bir yer.
Bu sayfanın harika yanı, duyarlı reklamcılık dünyasına ayak parmaklarımızı daldırabilmemizdir. Reklam dünyası, duyarlı tasarıma gerçekten yetişemedi. Reklamlar genellikle sabit boyuttadır ve yeniden boyutlandırılması zordur veya doğrudan yasaktır. Bu sitede durum böyle değil çünkü reklamları kendim oluşturuyorum.
Her reklam bir arka plan resminden, bir logo resminden ve metin parçalarından oluşturulur. Bir background-imagearaç kullanarak kenarlarını kırpabiliriz ve sorun değil. Logonun herhangi bir metnini veya önemli kısımlarını kaybetmeyiz.
Bu "duvarın" düzeni duvara benzer =). Geniş masaüstü boyutlarında üç sütun olacak ve ardından iki sütuna ve son olarak telefona benzer boyutlarda tek bir sütun olacak. Tek yaptığımız, reklamları yüzdürmek ve min-heighthepsini aynı yükseklikte tutmak için a uygulamak . Farklı medya sorgularında, reklamların genişliklerini ayarlıyoruz ve hangilerinin sağ kenar boşluğuna sahip olduğunu ve hangilerinin (aracılığıyla :nth-child) olmadığını değiştiriyoruz .
Arka uçta, her reklam WordPress'te özel bir alandır. Bunları sayfaya çıktıladığımızda, önce onları sorgulayıp bir diziye koyarız. Sonra o diziyi karıştırın. Sonra nihayet onları yankılayın. Herkese en iyi reklam olma konusunda adil bir şans verebilir!