Bloom E-posta Tercihlerinizi Sitenizin Tasarımına Uygun Şekilde Nasıl Biçimlendirirsiniz?

Kaçırdıysanız, kısa süre önce, her hafta hepinize ücretsiz, profesyonel Divi düzen paketleri sağladığımız yeni bir tasarım girişimi başlattık. Tamamen işlevseldirler ve doğrudan .zip dosyasından kullanıma hazırdırlar ve bu harika.

Ancak, web sitenizi kullanıcılarınız ve ziyaretçileriniz için daha da iyi hale getirmek için mizanpajlara ekleme yapmanın yollarını bildiğinizden emin olmak istiyoruz. Örneğin, Bloom, Elegant Themes üyeliğinizle birlikte gelen olağanüstü şekilde özelleştirilebilir bir e-posta eklentisidir ve onu düzen paketlerine uyacak şekilde biçimlendirebilirsiniz (ve yapmalısınız).

Bugün, Bloom'un ziyaretçilerinizi nasıl yepyeni bir dünyaya götürmesini sağlayacağınızı göstermek için ilk bedavamız olan seyahat web sitesi yerleşim paketine geri dönüyorum.

Düzen paketlerimizden birini kullanmıyorsanız, bu da harika. Stili nasıl ve neden böyle yaptığımın sürecini parçalayacağım ve ilkeleri sitenizin tasarımına da uygulayabilirsiniz. Temel olarak, halihazırda çalışan öğeleri ve varlıkları alacağız ve bunları yeni tercihimiz için hafifçe yeniden kullanacağız.

Bin Mil Yolculuğun İlk Adımları

Tamam, eklentiyi ve stili kullanmak, bin millik bir yolculuğa çıkmaktan çok daha kolay. Yani bu muhtemelen kötü bir metafordu. Her neyse. Anlıyorsun değil mi?

Bloom'u yükleyin

Yapmanız gereken ilk şey Bloom'u kurmak. Bloom'u indirmek ve kurmak için ET Üyeleri Alanına gidin. E-posta sağlayıcınız (Mailchimp, Aweber, Emma, ​​vb.) için her şeyi ayarlamak için oradaki belgeleri de takip edebilirsiniz.

Çok kolay (biz yaptık, tabii ki öyle!) ve ziyaretçilerinizin kürelerini çok kısa sürede dolaştırmaya hazır olacaksınız.

Son Sonucu Görselleştirin

Başlarken, Bloom'un nihai sonucunun gerçekten nasıl görünmesini istediğiniz konusunda gerçekten bir fikriniz olmalı. Sitenize gitmenizi ve sahip olduğunuz en ikonik öğeyi ya da en sevdiğiniz öğeyi bulmanızı öneririm.

Seyahat blogunu örnek olarak kullanarak, Bloom'a katılmayı özellikle bu bölümle eşleşecek şekilde biçimlendirmek istiyorum:

Bu bölümü başka bir şeye tercih etmemin bir kafiyesi ya da nedeni yok (çünkü tasarım ekibi tüm düzende böyle harika bir iş çıkardı) en çok hoşuma gitti. Bana macerayı ve heyecanı hatırlatıyor ve insanlara e-posta listesine kaydolmaları için bunu iletmek istiyorum.

Bloom E-posta Katılımınızı Biçimlendirme Adımları

İlk kez yeni bir Bloom katılımı yaptığınızda, ne tür bir katılım göstermek istediğinizi seçmelisiniz. Bloom size birçok seçenek sunar, ancak bu düzen paketi tamamen stil ve içerikle ilgili olduğundan, bu konuda çok can sıkıcı olmak istemiyoruz (yani açılır pencereler yok).

Bu yüzden eski bekleme modunu, Alt Yazıyı kullanacağız. Ziyaretçileri kaçırmayacaksınız ve kalıcı müşterilere ve ilişkilere dönüşen iyi dönüşüm oranlarına sahipler.

Sonraki sayfa sadece e-posta sağlayıcınızı ve listenizi adlandırmak ve seçmektir, bu nedenle gerçek tasarımla hiçbir ilgisi yoktur (ve bu arada, daha sonra her zaman değiştirilebilir). Bunu doldurun ve bir sonraki bölüme geçin ve bir şablon seçin.

Alanları sağda olan oldukça basit bir şablona gitmeye karar verdim. Yine, sitenin stiline uyacak şekilde çalışan basit bir şey.

Bundan sonra, bir resim bulmanız gerekecek. Seyahat düzeni paketini kullanıyorsanız, .json dosyalarını Divi Kitaplığınıza aktardığınızda, tüm görüntüler Ortam Kitaplığınıza aktarılacaktır. Seyahat-binoculars.jpg ile gitmeye karar verdim çünkü ilham aldığım bölümle unsurları paylaştı. Ayrıca travel-coffee.jpg'nin iyi bir seçim olacağını düşünüyorum.

Emin olmanız gereken bir şey, Görüntü Yönlendirme açılır menüsü için Metnin Solunda Görüntü'yü seçmenizdir. İşleri düzenimize uyacak ve çok daha güzel olacak şekilde yeniden boyutlandıracak.

Stiller, Renkler ve Yazı Tipleri

Seyahat paketinin bindirmeleri renk olarak #1d2633'ü kullanır, bu da görüntülerin üzerlerinde o koyu, şeffaf gölgeye sahip olmasını sağlar. Bloom şu anda arka plan olarak saydamlık efektine izin vermese de, yine de Bloom katılımı için bu rengi kullanmak istiyorum.

Yazı tipleri için, seyahat web sitesi düzeni, başlıklar için Oswald'ı ve metin için Roboto'yu kullanır. Sürekliliği sağlamak için burada da aynı şeyi yapabiliriz. Aynısı kare köşeler için de geçerlidir ve tek bir beyaz iç dikdörtgenle (renk ayarlı dördüncü seçenek olan #ffffff ) tam bir kenarlığın kullanılmasının, etkinleştirmeyi yalnızca dikkat çekecek, ancak dışarı bakmayacak kadar açtığını düşünüyorum. yer.

Renkle ilgili olarak yapılması gerektiğini düşündüğüm diğer tek değişiklik, düğmenin kendisi: Ücretsiz Divi yerleşim paketinde zaten bulunan düğmelerle eşleştirmek için #ed4441'i kullanın.

Bir Bloomin' Tweak Daha

Yapmanız gereken diğer tek şey, yazı tipi boyutlarını ve ağırlıklarını mizanpaj paketiyle eşleştirmek için CSS'nize birkaç küçük ince ayar yapmak. Bunu kopyalayıp Bloom Tasarım Sayfasındaki Özel CSS kutusuna yapıştırmanız yeterlidir:

/* This snippet will target any paragraph text in the primary area of Bloom and style it without touching any other text on the page or in the plugin */ 

.et_bloom .et_bloom_form_header p { 
font-size:20px;
} 

/*This snippet will target only the h2 text within the Bloom opt-in form and size it at half of the normal H2 in the layout pack */

.et_bloom .et_bloom_form_header h2 { 
font-size:40px!important;
}

Ve evet, !important kullanmaktan artık sizin kadar hoşlanmıyorum ama bu durumda Bloom'un sayfaya eklenme şekli nedeniyle bu bir zorunluluk.

Artık gönderileriniz biraz buna benziyorsa, her birinin altında nefis zevkli bir e-posta seçeneği var.

Bloom Yapabilir!

Umarım, bu gönderideki seyahat düzeni paketini gözden geçirerek, kendi sitenizdeki bazı öğeleri nasıl alabileceğinizi ve Bloom e-posta tercihlerinizi sitenizin tasarımına uyacak şekilde nasıl şekillendirebileceğinizi görmüşsünüzdür. Gördüğünüz gibi, sadece aynı yazı tiplerini, renkleri ve hatta görüntüleri yeni şekillerde kullanmak, çok fazla çalışma yapmadan tamamen canlandırıcı yeni ve canlı bir şey yaratabilir.

Öyleyse sitenizin en sevdiğiniz öğesini seçin (veya ücretsiz düzen paketlerimizden birini alın!) ve Bloom'un sizin için çalışmasını sağlayın!

Makale özellikli görsel Sammby / Shutterstock.com