Divi ile Berber Sitesi Nasıl Oluşturulur
Her berber dükkanının harika bir web sitesine ihtiyacı vardır. Ve arkanızdaki Divi’nin gücü (ve olağanüstü serbest divi düzen paketi) ile, herhangi bir saç kesimi tarafından gurur duyacak bir web sitesi oluşturabilirsiniz. Bugün size Divi kullanarak bir saç kesimi dükkanı için nasıl bir web sitesi oluşturacağınızı göstereceğim. Bir kahve dükkanı düzeni paketi ile başlayacağım. Bunu birkaç nedenden dolayı yaptım: 1. Düzen, berber dükkanına uygun iyi bir renk şeması sunuyor. 2. Sayfanın düzeni, Barber Shop web sitesinin ihtiyaç duyduğu şeyle tutarlıdır.
Örneğin, çoğu berber mağazası, mağaza sayfasının iyi bir içerme olması için ürünler sunar. Menü düzeni, sunulan her türlü saç kesimi hizmetini içerecek şekilde bir hizmet sayfasına kolayca dönüştürülebilir. Ve içecek kılavuzu sayfasını “mükemmel” bir saç kesimi deneyimi ile yönlendiren bir işlem sayfasına dönüştürme fikrini seviyorum. Gizlice göz atma
Divi temaları kurulur ve etkinleştirilir.
Kahve dükkanı düzeni paketi Divi kütüphanenize aktarılır. İstediğiniz mizanpajı seçebilirsiniz, ancak bu eğitim uğruna, işleyen bir örneğimiz olması için kahve dükkanının düzenini kullanacağım. Eminim yakında her şeyi kolaylaştıracak bir berber düzeni olacak.
Resimler – ShutterStock’un fotoğraflarını ve diğer düzen paketlerinden çekilen bazı görüntüleri kullanacağım. Kendi berber sitenizi oluştururken, sütun için bunları barındıracak doğru boyutlara sahip yüksek kaliteli fotoğraflar seçtiğinizden emin olun (yani arka plan görüntüsü en az 1920×1080 olmalıdır). Divi ile görüntüleri kullanmak için bu ana kılavuzu da görebilirsiniz. Görüntü stoğu için ücretsiz bir çözüm arıyorsanız, bkz. Unssplash.com. Berber Mağazası Sitesinin bir saç kesimi dükkanı için etkili bir web sitesi oluşturmak için neye ihtiyaç duyduğunu belirleyin, en azından aşağıdakileri içermelidir (elbette saç kesimine bağlı olarak): iletişim bilgileri (iletişim formları, operasyonel saatler, adresler ve telefon numaraları dahil)
Çevrimiçi toplanma sözü planlama veya en azından bir toplama sözü nasıl planlayacağınız hakkında bilgi.
Fiyat
Referans
Personel Bilgileri
Şirketler ve tarih hakkında bilgi
Çevrimiçi mağaza veya ürün sunulan
Harika fotoğraflar (fotoğraf çekimi öncesi ve sonra, resim/şirket binası, eylemdeki çalışanların fotoğrafı ve şaşırtıcı yüksek kaliteli saç kesimlerinin ortak bir fotoğrafı.
Bize rehberlik etmek için bu genel liste ile, bu öğeleri girmek ve bunları etkili bir şekilde yönetmek için düzenimizi ayarlamaya başlayabiliriz.
Bu berber dükkanı için yeni bir düzen içeren bir sayfa oluşturun, kahve dükkanı düzeni paketinin sayfa düzenini kullanarak 4 sayfa yapacağım. İşte her biri için kullandığım düzen içeren sayfaların bir listesi.
Ana Sayfa – Kahve Dükkanı İniş
İletişim Sayfası – Kahve Mağazası ile iletişime geçin
Kitap Sözü Sayfası – Kahve Dükkanı Blogu
Mağaza Sayfası – Kahve Dükkanı
Bu noktada 4 sayfa yapmanız ve her sayfa için uygun düzeni içe aktarmanız gerekir. Ana menünüzü oluşturun Şimdi yeni siteniz için gezinme olarak ana menüyü oluşturmanız gerekir. Menüye 4 sayfa eklediğinizden emin olun. Varsayılan renk paletinizi ayarlayın Divi> Tema seçeneğini ayarlayın ve varsayılan renk paletinize aşağıdaki renkleri ekleyin: #1D2528 #3D3A35 #DCA47D
Bunu bir öğretici için gerçekten kullanmak istesem de, kendi saç kesimi mağazasında her ayarlama yaptığınızda, özellikle de düzende bulunmayan yeni içerik oluşturmanız gerektiğinde bana daha sonra teşekkür edeceksiniz. Divi’yi açtığınız Global Accent Rengi’ni ekleyin> Tema Ayarı> Genel Ayarlar> Düzen ayarları. Daha sonra küresel aksanın rengini aşağıdakilere değiştirin: #DCA47D Bu renk, tüm temalarınızda 20’den fazla yere uygulanacaktır (asla göremeyeceğiniz bazı yerler), ancak bu, tema aksanının rengidir. Düzen kullandığımız, mükemmel çünkü bağlantılar ve simgeler için varsayılan rengi güncellemek için bu rengi eklemek (en azından). Temanızı ayarlamak için düzenlemeler yayınlayın ve bu değişiklikleri uygulamak için sayfalarınızı yenileyin. Tema ayarındaki tipografik ayarları güncelleyin Düzeniniz modül seviyesinde özel tipografik ayarlara sahip olsa da, düzen ayarı ayarlamasında varsayılan tipografik ayarlarınıza girebilmeniz için düzen yazı tiplerinizin ne olduğunu bulmanız önemlidir. Bu, tüm divi temalarınızda (yeni düzeninizin dışında) kullanılan yazı tiplerini düzeninizde kullanılan yazı tiplerinin bir kombinasyonuyla eşleştirmek için gereklidir. Bu ayrıca, yeni bir modül oluştururken eklediğiniz ek metnin siteyle eşleşmesini sağlayacaktır. Divi Open> Tema Ayarı> Genel Ayarlar> Tipografi ve Aşağıdaki Güncelleme: Vücut Metin Boyutu: 18px Vücut Çizgisinin Yüksekliği: 1.8m Yazı Tipi Boyut Başlığı: 42px; Başlık Leting Alan: 2px Sonraki Yükseklik: 1.5EM Yazı Tipi Stili Başlık: TT Font Terda: Oswald Font Body: Nunito Renkli Metin Tajuk: #333333
Ana menü çubuğunu bu noktada ayarlayın, devam edebilir ve ana menü çubuğunuzun doğru tasarlandığından emin olabilirsiniz. Menüyü bu düzene uyacak şekilde ayarlamanın birçok farklı yolu var, ancak şimdilik tek yapacağım tek şey sadece metin boyutumu güncellemek. Temanın ayarlanmasından, başlığı aç ve navigasyon> ana menü bıçaklarını güncelleyin ve aşağıdakileri güncelleyin: Metin boyutu: 18px yazı tipi stili: kalın (b), büyük harf (tt)
Ayrıca, varsayılan içerik metninin menü metni için bir yazı tipi olarak eklendiğini de fark etmelisiniz. Ayrıca aktif bağlantının rengi, gerilme menü hatlarının rengi ve mobil cihazdaki Hamburger menü simgeleri, küresel aksanın rengini otomatik olarak devralır. Bu, web sitenizin ilk ayarları için yapmakla ilgilidir. Düzeninizi nasıl ayarlayacağınız hakkında bir hatırlatmaya ihtiyacınız varsa, bu adımlara bakın. Berber dükkanı siteniz için çevrimiçi planlanmış bir program seçmek Bu yazıdaki araştırmama dayanarak, ücretsiz WordPress eklentilerinden pahalı oran şirketlerine kadar birçok seçenek tarafından biraz bunalmışım. İyi haber, birçoğunun iyi çalıştığı görülüyor (en azından denedim). Bu nedenle, para bir sorunsa, bazı ücretsiz WordPress eklentileri denemeye başlayın ve web siteniz için çevrimiçi rezervasyon hizmetlerinde istediğiniz işlevselliği ve tasarıma sahip olana kadar artar. İncelenecek ücretsiz seçeneklerden biri, berber türlerinin vaadine hizmet eden ve kişisel bir takvim ve ödeme ağ geçidini entegre etmek için bir uzantıya sahip görünen kolay randevu WordPress eklentisidir. Calendly’nin de ücretsiz bir seçeneği vardır, ancak çeşitli etkinlik türleri ve çevrimiçi ödeme gibi belirli özellikleri açmak için artmanız gerekir. Calendly’den sevdiğim şey temiz ve basit bir kullanıcı arayüzü. Bunun kullanımı kolaydır ve kesinlikle bir berber deri için iyi çalıştığını görebiliyorum.
Vcita, işiniz için zamanlama alanının ötesine geçen ve temelde yaptığınız her şeyi (QuickBooks ile entegre etmek gibi) ele alacak harika bir hepsi bir arada çözümdür. Aşağıdakiler VCITA’nın daha ayrıntılı detayları bulunmaktadır. AcuityScheduler, tüm güçlü zamanlama özellikleri nedeniyle favorilerimden biri olabilir, ancak itiraf etmeliyim ki, küçük bir öğrenme eğrisi var. Squareup, bir sistemde randevu alma ve ödeme alma yeteneğine sahip rahat bir yazılımdır. Berberim bu sistemi gerçekten kullandı ve bunu iyi çalışmak için itiraf etmeliydim (en azından müşterinin bakış açısından). Ve iPad’inize bağlanabilen, fiziksel mağazanızda size kolay bir ödeme işlemi verebilen Magstrip okuyucuları kullanabilirsiniz. Berber sitenizde çevrimiçi sipariş becerileri sunmaya kararlıysanız, tavsiyem çok güvenilir ve kullanımı kolay bir şekilde kullanmaktır. . Ve eğer işletmeniz için mükemmel olanı bulursanız, maliyet o zaman bir sorun olmamalıdır. İşletmeniz için işlev gören otomatik bir rezervasyon sistemine sahip olmak, eklentiler veya sipariş yazılımı için her ay ödeyeceğinizden çok daha değerlidir. Veranda için ana sayfa sayfasını optimize ederek, kesinlikle harika görünen bir arka plan görüntüsü ile harika görünen bir başlığa sahip olmak istiyorum. Bu, sitenin geri kalanının tonu ayarlar. Kutunun dışında, yön sayfasında harika görünen bir başlık vardır. Bu yüzden sadece berber mağazasına uyacak şekilde resmi ve içeriği güncellemem gerekiyor. Kanopi altındaki parçayı, randevu almak için CTA ile birlikte sunulan hizmetleri ve fiyatları gösteren bir parçaya değiştirdim.
Hikayemizin altındaki videodan kurtuldum ve kısa bir metin bloğu ile hala basit hale getirdim. Ayrı bir sayfaya bağlantı kurmak istersem, yukarıdaki “Hizmet” bölümünden düğmeyi kopyalayıp ekliyorum. Ayrıca çevrimiçi mağazayı ve dükkanın atmosferini tanıtmak için özelliklerin bazı bölümlerini ayarlıyorum. Bunu yapmak için, ana sayfama düzen hakkında bir kahve dükkanı ekledim ve istediğimden başka tüm parçaları sildim. İşte nasıl yapılacağı. Ayarlar menünüzü Visual Builder üzerinden açın ve Kütüphane’den Yükle ve ardından Kütüphane Ekle sekmesini seçin. Mevcut içeriği değiştirme seçeneğini silin (bu, ek içerik olarak geçerli düzeninizin altına yeni bir düzen ekleyecektir). Ardından listeden hakkında kahve dükkanının düzenini seçin.
Şimdi tek yapmanız gereken, ana sayfa içeriğiniz altında içe aktarılan sayfa içeriğinden istemediğiniz her şeyi silmektir (bu durumda, ekip bölümümüz hariç her şey). Ardından, takım bölümümüzü altbilgi içeriği bölümünün hemen üzerinde kesin ve yapıştırın (veya sürükleyin). Bence her sayfada iyi çalışan altbilgi iletişim bilgilerinin düzenini kaydediyorum. Değiştirdiğim tek şey arka plan görüntüsüydü. Değişikliğimden sonra ana sayfa bu:
Kahve Dükkanı Düzeni Düzeni Mağazası sayfasını optimize etmek zaten sayfanıza üstün ürünler uygulamaya hazır bir mağaza modülü vardır. Tek yapmanız gereken WooCommerce mağazanıza yeni ürünler eklemek. Sonra yeniden uydurun ve sayfanızda göründüğünü görün. Oldukça kolay. Tabii ki üstbilginize ve altbilginize yeni bir arka plan resmi eklemeniz gerekiyor. Woocommerce’in içinden varsayılan mağaza sayfanız olarak bu sayfayı seçmeyi unutmayın. Bunu yapmak için WooCommerce> Ayarlar> Ürünler (sekme)> “Mağaza sayfası” nın yanındaki gerilme menüsünden bu sayfayı görüntüleyin ve seçin. Son mağaza sayfamızın tasarımı:
Görüntüyü ve arka plan rengini güncellemek dışında iletişim sayfalarını optimize ederek, çevrimiçi randevu sipariş etmek için CTA ekledim. Ayrı bir toplama sözü sayfası istemiyorsanız, gömülü sipariş formunu da buraya eklemeyi seçebilirsiniz. Ayrıca, harita Google API’sının çalışmasını gerektirir, bu nedenle tema seçeneklerinizde yönetmeyi unutmayın. Ayrıca e -posta hizmet sağlayıcı listenizi optin e -posta formunuza entegre etmeniz gerekir.
