Divi'deki İçerik için Tasarım Aksanları Olarak Blurb Simgelerini Stillendirme

Tasarım vurgusu olarak tanıtıcı simgeleri kullanmak, sayfa düzeninize daha önce hiç düşünmemiş olabileceğiniz benzersiz bir tasarım verebilir. Bir tanıtım yazısı modülünün simgesini bir metin modülüyle örtüşecek şekilde konumlandırmaya ek olarak, simgeye stil vermek için metin modülü arka planını ve kenarlığını kullanabilirsiniz. Bu, içeriği çerçeveleyen ve simgelerinize tamamen benzersiz bir tasarım veren hoş bir tasarım vurgusu oluşturur.

Bu eğitimde, Divi'deki içeriğiniz için tasarım vurgusu olarak tanıtım yazısı simgelerini nasıl şekillendireceğinizi göstereceğim.

Hadi dalalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarımın birkaç örneği.

Bu Eğitim için Örnek Düzenleri İndirin

Ellerinizi ücretsiz tanıtıcı modül vurgu tasarımları düzenine koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyayı indir

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Tasarımı Sıfırdan Oluşturmaya Başlarken

Başlamak için yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından Divi oluşturucuyu ön uçta konuşlandırın. Tek sütunlu bir satıra sahip normal bir bölüm ekleyin. İlk modülünüzü eklemeden önce, satır ayarlarını aşağıdakilerle güncelleyin:

Özel Oluk Genişliğini Kullan: EVET
Özel Oluk Genişliği: 1

Bu, modüller arasındaki herhangi bir özel kenar boşluğundan kurtulacaktır.

Metin Modülünü Oluşturma

Ardından satırın içine bir metin modülü ekleyin.

Metin modülünü aşağıdaki dolgu metniyle güncelleyin:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

Metin Modülünü Şekillendirme

Şimdi Metin modülü ayarının geri kalanını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #ffffff

• Başlık 2 Yazı Tipi: Nunito
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Rengi: #f24a5b
• Başlık 2 Metin Boyutu: 42px (Masaüstü), 32px (tablet), 22px (telefon)
• Başlık 2 Harf Aralığı[aralama: 16px
• Başlık 2 Çizgi Yüksekliği: 1.3em

• Genişlik: 500 piksel (masaüstü), 490 piksel (tablet)
• Modül Hizalaması: merkez
• Özel Dolgu (masaüstü): 40 piksel üst, 40 piksel alt, 50 piksel sol, 50 piksel sağ
• Özel Dolgu (telefon): 20 piksel sol, 20 piksel sağ
• Kenar Genişliği: 10px
• Kenar Rengi: #ffffff

Metin modülünü tanıtıcı simgelerle üst üste bindireceğimiz için, metin modülünün simgelerin üzerinde z-boşluk düzeninde oturduğundan emin olmamız gerekir. Bunu yapmak için önce Metin modülü Ana Öğe CSS kutusuna aşağıdaki CSS parçacığını eklemeliyiz:

position: relative;

Ardından z-endeksi değerini 1 olarak ayarlayın.

Şimdi bu metin modülü, tasarım için önemli olan diğer örtüşen modüllerin üzerine oturacaktır.

Bulanıklık Simgesi Oluşturma

Artık ilk tanıtım yazısı simgesini oluşturmaya hazırız. Bunu yapmak için önce bir tanıtıcı modül eklemeli ve onu metin modülünün en üstüne sürüklemeliyiz. Ardından sahte içeriği (başlık metni ve gövde metni) silin ve tanıtım yazısı için resim yerine bir simge kullanmak için tıklayın.

Ardından aşağıdaki tasarım ayarlarını güncelleyin:

• Simge Rengi: #2ea3f2
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 100px
• Özel Kenar Boşluğu: 0 piksel alt (bu, modüller arasındaki varsayılan alt kenar boşluğunu çıkarır; 1 satır oluk genişliği kullanıyorsanız gerekli değildir)

Ardından, modül ile herhangi bir metin kullanmadığımız için (sadece simge), tanıtım yazısı simgesinin altındaki varsayılan alt kenar boşluğundan kurtulabiliriz. Bunu yapmak için Blurb Image CSS kutusuna aşağıdaki özel CSS'yi ekleyin:

Bulanık Resim CSS'si:

margin-bottom: 0px

Bulanıklık Simgesini Çoğalt

Tanıtım yazısı yerleştirmeye başlamadan önce, tanıtım yazısı modülünü çoğaltalım ve kopyayı metin modülünün altına sürükleyelim. Artık metin modülünün üstünde ve altında bir tanıtım yazısı simgesine sahip olmalısınız.

Dönüştürme Çevirisini Kullanarak Blurb Simgelerini Konumlandırma

Tanımlayıcı simgelerini konumlandırmak için, simgeli tanıtım yazısı modülünü sayfada istediğimiz herhangi bir yere yerleştirmemize izin veren Divi'nin dönüştürme seçeneklerini kullanacağız.

Konumlandırma Bulanıklığı Simgesi #1

En üstteki tanıtım yazısı simgesini konumlandırmak için tanıtım yazısı modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dönüştür X eksenini çevir (masaüstü): -242 piksel
• Dönüştür Y eksenini çevir (masaüstü): 50 piksel
• Dönüştür X eksenini çevir (telefon): -170 piksel

Konumlandırma Blurb Simgesi #2

Bu tanıtım yazısı simgesini konumlandırmadan önce, onu biraz daha büyütelim. Bunu yapmak için, tanıtıcı modül ayarlarını açın ve Simge Yazı Tipi Boyutunu 150 piksel olarak değiştirin.

Ardından, aşağıdaki dönüştürme seçeneklerini güncelleyerek tanıtım yazısı simgesini konumlandırın:

• Dönüştür X eksenini çevir (masaüstü): 242 piksel
• Dönüştür Y eksenini çevir (masaüstü): -100 piksel
• Dönüştür X eksenini çevir (telefon): 190 piksel

İki Sütunlu Satır Oluşturma

Sonraki sütunu oluşturmak için mevcut satırı çoğaltın ve satırın sütun düzenini iki sütunlu bir düzene (1/2 1/2) değiştirin.

Ardından, sol sütundaki üç modülün tümünü seçmek için Divi'nin çoklu seçim özelliğini kullanın ve ardından bunları kopyalayıp ikinci sütuna yapıştırın.

Ardından, birinci sütundaki alt tanıtıcı simgesini silin.

Sütun 2'deki Blurb Simgelerini Hizalama

2. sütundaki Blurb Simgeleri için üstteki simgeyi sola, alttaki simgeyi sağa kaydırmamız gerekiyor. Bunu, Transform Translate X ekseni değerini değiştirerek basitçe yapabiliriz.

Sütun 2'deki en üst tanıtım modülü için tanıtım yazısı modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dönüştür X eksenini çevir (masaüstü): 242 piksel
• Dönüştür X eksenini çevir (telefon): 170 piksel

Temel olarak yaptığınız tek şey, x ekseni boyunca ters yönde kaydırmak için bu değerleri negatiften pozitife değiştirmek.

Ardından, 2. sütundaki alt tanıtıcı modül için dönüştürme çevirme değerini aşağıdaki gibi güncelleyin:

• Dönüştür X eksenini çevir (masaüstü): -242 piksel
• Dönüştür X eksenini çevir (telefon): -190 piksel

İkinci Satırdaki Metin Modülü Stillerini Güncelle

İkinci içerik satırı, öne çıkan hizmetlerin bir alt kümesi olarak hizmet eder. Bu nedenle başlık yazı tipi boyutunun başlığımızdan farklı ve daha küçük olmasını istiyoruz. İki metin modülünü aynı anda güncellemek için, her iki metin modülünü birden seçmek için çoklu seçimi kullanın. Ardından aşağıdakileri güncelleyin:

h2 başlık içeriğini “Servis” olarak değiştirin.

• Başlık 2 Metin Boyutu: 28px (masaüstü), 22px (tablet), 18px (telefon)

Ayarları kaydet.

Şimdi 2. sütundaki metin modülü için ayar modunu açın ve aşağıdakileri güncelleyin:

• Metin Yönü: Sağ

Düzenin Aralığını Ayarlama

Şu anda iki içerik satırı arasında muhtemelen biraz fazla beyaz (veya negatif) boşluk var. Bu alanın bir kısmını çıkarmak için, üst satırdaki alt tanıtım modülüne aşağıdaki gibi negatif bir alt kenar boşluğu ekleyebiliriz:

• Özel Kenar Boşluğu: -100 piksel alt

Son sonuç

Şimdi nihai sonuca bir göz atalım.

Diğer Simgeleri Denemek

Mizanpajınız için farklı simgeler denemek için bul ve değiştir özelliğini kullanabilirsiniz. Simgenizi içeren tanıtım yazılarından birinin tanıtım yazısı ayarlarını açın. Ardından, ayarlar modundaki simgeye sağ tıklayın ve Bul ve Değiştir'i seçin.

Bul ve Değiştir açılır penceresinde aşağıdakileri güncelleyin:

• İçinde: Bu Bölüm
• Şununla Değiştir: [yeni simge seç]

Bundan sonra, değiştir düğmesine tıklayın.

Bu, bölümünüzdeki tüm tanıtım yazılarını yenisiyle değiştirecektir.

Aşağıda, farklı simgeler kullanan düzene ilişkin bazı örnekler verilmiştir.

Son düşünceler

İçeriğinize tasarım vurgusu olarak tanıtım yazısı simgeleri eklemek, tamamen benzersiz bir tasarım oluşturmak için iki modülün nasıl birleştirilebileceğinin bir örneğidir. Bu durumda, metin modülü arka planı ve kenarlığı, çevreleyen simgeler için kısmi bir kaplama görevi görür. Sonuç benzersizdir ve daha fazla tasarım varyasyonunu keşfetmenin kapısını açar. Kendi ihtiyaçlarınız için bir şeyler yaratmak için farklı simgeleri ve renk kombinasyonlarını keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!