Divi ile Oluşturulan 13 Diyet ve Beslenme Web Sitesi Örnekleri

Diyet ve beslenme sağlıklı bir yaşam için önemlidir ve web'de konuyla ilgili birçok bilgi bulunmaktadır. Bu, bir sonraki diyet ve beslenme Divi projeniz için ilham alabileceğiniz birçok web sitesi olduğu anlamına gelir. Bu yazıda, herhangi bir Divi tasarımcısının hayal gücünü harekete geçirmeye yardımcı olmak için Divi ile oluşturulmuş 13 diyet ve beslenme web sitesi örneğini ele alacağız.

Müşterinizin diyetleri ve tarifleri tartışması, sağlık takviyeleri ve vitaminler gibi ürünleri göstermesi veya hatta koçluk, kurslar ve atölyeler sağlaması gerekip gerekmediği, bu siteler bir sonraki tasarımınız için ilham almanıza yardımcı olabilir. Web siteleri belirli bir düzende değildir.

1. Lynn K Wagner

Lynn K Wagner, harekete geçirici mesaj (CTA) ve şeffaf dikey menü ile tam ekran bir arka plan görüntüler. Kaydırma, paralaksta şeffaf bir haber bülteni kaydı, paralaksta bir CTA, iki renkte üç sütunlu bir bölüm, bir referans bölümü ve blog gönderilerini ortaya çıkarır. Hakkında bölümü, doğrudan iyi tasarlanmış bir dergi sayfasından gelmiş gibi görünüyor. Referanslar bölümü, görüntüleri kullanır ve referansı, üzerine gelindiğinde bir kaplama olarak görüntüler. Blog bölümü, ayrı bir bindirmede bir alıntıyla birlikte blog resmini içerir. Çeşitli sayfalar galerileri, paralaksları ve CTA'ları içerir.

2. Sonuçlar Gıda Koçluğu

Sonuçlar Gıda Koçluğu, CTA ile paralaks içinde tam ekran bir kaplama içerir. Kaydırma, üç sütun halinde bir hakkında bölümü ve CTA, referanslar, markalı renklere sahip tanıtım yazıları, bir iletişim formu ve sonuçlar ve kaynaklar bağlantılarını içeren bir alt bilgi içeren bir Nasıl Çalışır bölümü ile zarif bilgi bölümünü ortaya çıkarır. Burada ve orada birkaç tam ekran görüntü atılıyor. Ekranın altında bir e-posta CTA'sı kalır ve okuyucu isterse kapatılabilir. Site simgelerden, renklerden ve resimlerden harika bir şekilde yararlanıyor.

3. Büyüleyici Hippi

Glamour Hippie, markalı renklere sahip basit bir menü ile tam genişlikte bir görüntü kullanır. Kaydırma, daha fazla yükleme özelliğine sahip bir kılavuzdaki en son blog gönderilerini gösterir. Bunun altında, markalı renklerle tam genişlikte bir e-posta kaydı bulunur. Son bölüm, daha fazla yükle özelliği ve bir takip düğmesi ile gömülü Instagram beslemelerini görüntüler. Bu site markalı renkler, fotoğrafçılık ve blog gönderileri ve sosyal beslemeler sunma konusunda harika bir iş çıkarıyor.

4. Neo Süplemen

Neo Suplemen, tam ekran bir kaydırıcıyı ve ardından WooCommerce tarafından desteklenen ürün listelerini içerir. Satış istatistikleri paralaks ile görüntülenir, başka bir bölüm ekip üyelerini, ardından telefon numarası ve sloganı içeren bir bölümü gösterir. Alt bilgi, hakkında ve menü widget'ları ile birlikte iletişim bilgilerini görüntüler. Site, renk ve ürün yerleşiminden mükemmel bir şekilde yararlanıyor.

5. Trivert Beslenme

Trivert Nutrition, ürün listelerini takip eden tam ekran bir kaydırıcı içerir. WooCommerce ürünleriyle bir mağaza modülü kullanmak yerine, ürünler ayrıntılı bilgi için resimler ve akordeonlarla görüntülenir ve listeye bir satın alma düğmesi eklemek için WooCommerce kullanılır. Ürünler sayfası, ürünün faydalarını listeler. Site, ürüne odaklanmayı sürdürerek basit ve etkilidir.

6. Yaşamın Kökü

Root of Life, CTA ile paralaks içinde tam ekran bir arka plana sahiptir. Sonraki, fareyle üzerine gelindiğinde ok düğmesi içinde sonraki ürünü gösteren ve ürünleri kaydırıcının hemen altında küçük resimler olarak gösteren bir ürün kaydırıcısıdır. Bir mağaza modülü, mağazaya bağlantı içeren WooCommerce ürünlerini görüntüler. Blog gönderileri, bir blog kaydırıcısı kullanılarak görüntülenir. Altbilgi, bir kayıt formu ve menü bağlantıları görüntüler. Makaleler sayfası, kategorileri en üstte ve çeşitli makalelere bağlantılar görüntüler. Site temiz ve sade bir tasarıma sahiptir.

7. Doğal Canlılık

Natural Vitality, tam ekran bir gönderi kaydırıcısı ve okuyucuyu bir kardeş siteye götüren üst menü için ilginç bir sekmeli menü bağlantısı içerir. Kaydırma, birkaç sayfaya bağlantı içeren görüntüleri, ardından bağlantılar ve bir bülten kayıt formu içeren beş sütunlu bir altbilgi görüntüler. Çeşitli ürün sayfaları, ürünü kaydırma sırasında ekranın bir tarafında tutar. Natural Valley Ürünlerini Bul sayfası, mağaza bulma özelliğini yerleştirmek için EasyLocator'ı kullanır. Mağaza WooCommerce tarafından desteklenmektedir. Bir CTA ekranda kalır ve okuyucu isterse kapatılabilir. Site, ürün paralaksından ve CTA'lardan büyük ölçüde yararlanıyor.

8. Vücut Yağını Kaybet

Lose the Body Fat, bu listede ana sayfa için bir blog olarak ayarlanmış tek sitedir. Bir çizgi film karakteri ve slogan yerleşimi içeren tam ekran bir görüntü içerir. Kaydırma, blog gönderilerini bir kenar çubuğuyla iki sütun halinde görüntüler. Çeşitli sayfalar, diyetle ilgili hayati bilgilere dikkat çekiyor. Kilo Verme sayfası, kategoriyi tek bir sütun listesinde görüntüler. Site içeriğinden uzaklaşmadan temizdir.

9. Diyet Yapmadan Kilo Verin

Diyet Yapmadan Kilo Ver, CTA, şeffaf menü ve kayan bir tanıklık düğmesi ile tam ekran bir görüntü kullanır. Kaydırma, hakkında bir bölüm, bilgi ve referanslar içeren iki sütunlu bir bölüm, zarif bir blog bölümü, bir iletişim formu ve iletişim ve sosyal takip bağlantılarını içeren altbilgiyi ortaya çıkarır. Blog bölümü, bir arka plan ve markalı renkler ve yazı tiplerine sahip iki gönderi içerir. Birkaç bölüm arasında motivasyonel ifadeler içeren daha küçük bölümler bulunur. Diyet Yapmadan Kilo Ver sayfası, sayaçlı zarif bölümler kullanarak bölücüler oluşturur.

10. Yepyeni Bir Hayat

A Whole New Life, başlık öğesi olarak slogan içeren geniş bir bölüme, resim ve iletişim bilgilerini içeren tam genişlikte bir bölüme, bir CTA'ya, referanslara, sayfalara bağlantılar içeren dairesel resimlere, bülten formuna ve tam genişlikte son gönderilerin bir listesine sahiptir. . Tarifler sayfası, her gönderiye bir resim ve metin bağlantıları içeren kategorileri görüntüler. Ödeme, WooCommerce aracılığıyla gerçekleştirilir. Site, markalı renklerden büyük ölçüde yararlanıyor.

11. Diyet Savaşını Kazanın

Win the Diet War, CTA'lı tam ekran bir görüntü, referansların olduğu bir hakkında bölümü, CTA'lı bir hakkında bölümü, CTA'lı üç farklı renkli metin modülünün bulunduğu bir bölüm, öne çıkan medya logoları içeren bir bölüm ve gönderileri görüntülemek için widget'lı altbilgi içerir. ve iletişim bilgileri. WooCommerce, kursları ve kitapları zarif bir şekilde tasarlanmış mağaza sayfalarında görüntülemek için kullanılır. Podcast'ler blog gönderilerinin içine yerleştirilmiştir. Site, renk ve düzen tasarımından büyük ölçüde yararlanır.

12. Ayşe Köri

Ayesha Curry, büyük bir başlık ve logo, ardından bir resim, CTA ve bir seferde iki fotoğraf görüntüleyen üç sayfalık bir fotoğraf galerisi içeren çift sütunlu bir bölüm içerir. Bir CTA bölümü, metin bağlantıları içeren üç kutu içerir. Bir sonraki bölüm, Food Network'teki şovuna bağlantı içeren bir resim içeriyor. Bunu takiben, vurgulu efektli bir blog ızgarası ve Bible Gateway'den zarif bir komut dosyasında Kutsal Yazı içeren bir bölüm. İzleme sayfası bir video galerisi görüntüler. Çeşitli sayfalar içeriği üç sütun halinde görüntüler. WooCommerce, mağaza sayfasını güçlendirir. Site, renk ve düzen tasarımından büyük ölçüde yararlanır.

13. Beslenme Araştırma Enstitüsü

Kuzey Karolina Üniversitesi'nden Beslenme Araştırma Enstitüsü ve dergi tasarımına sahiptir. Ana sayfada bir gönderi kaydırıcısı, CTA, tanıtım yazıları ve akordeonlar içeren bir bölüm, en son gönderiyi ve CTA'yı içeren bir kenar çubuğu ve iletişim bilgilerini içeren bir alt bilgi bulunur. Zaman Çizelgesi sayfası, gömülü bir zaman çizelgesi görüntüler. Takvimler, istihdam ve diğer bilgiler akordeonlarla görüntülenir. WooCommerce bağış almak için kullanılır. Blog gönderileri Haberler kategorisinin altına yerleştirilir ve daha fazla yükleme özelliği ile çift sütunlu ofset biçiminde görüntülenir. Bu büyük bir site ama düzenli ve gezinmesi kolay ve renkten harika bir şekilde yararlanıyor.

Son düşünceler

Divi ile oluşturulmuş bu 13 diyet ve beslenme web sitesi örneği, Divi'nin tarifler ve makaleler, çevrimiçi bir mağaza veya kurslar ve atölyeler içeren bir site olsun, her tür diyet ve beslenme web sitesi için ilginç tasarımlar oluşturmak için kullanılabileceğini göstermektedir. .

Bu siteler, düzenler, renkler, fotoğrafçılık, video, podcast'ler, navigasyon ve daha fazlası için fikirler sağlamak için harikadır. Bu web siteleri, Divi ile bir sonraki diyet ve beslenme tasarımınız için size ilham vereceğinden emin.

Bu Divi diyet ve beslenme sitelerinin en sevdiğiniz unsurları nelerdir? Aşağıdaki yorumlarda bize bildirin!

Görsel Üretim / Shutterstock.com aracılığıyla Öne Çıkan Görsel