Divi'nin Dönüştürme Seçenekleriyle Görüntü İşaretleyicileri Nasıl Eklenir

Görüntü işaretleyiciler, bir ürünün özel özelliklerini sergilemenin harika bir yoludur. Bu gönderide, bir metin modülü ve dikey bir ayırıcı kullanarak görüntü işaretleyicilerinin nasıl oluşturulacağını göstereceğiz. Sütunların içindeki dönüştürme ayarları sayesinde, ihtiyacınız olan her yere bir görüntü işaretçisi yerleştirilebilir. Bu tekniğin ne kadar çok yönlü olduğunu göstermek için size iki farklı tasarım örneği göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

ÜCRETSİZ Görüntü İşaretleyici Düzenini İndirin

Ellerinizi ücretsiz görüntü işaretleyici 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.

Youtube Kanalımıza Abone Olun

Örnek 1'i Yeniden Oluştur

İlk tasarım örneğini yeniden oluşturmaya başlayalım!

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin. Bir satır eklemeden önce, önce bölüm ayarlarını yapın.

Arka plan

Bir degrade ve ardından ekran karışım moduyla bir görüntü ekleyin.

• Arkaplan: Gradyan + Resim
• Gradyan Rengi 1: Beyaz #ffffff
• Gradyan Rengi 2: Orta Gri #666666
• Gradyan Başlangıç ​​Konumu: %22
• Arka Plan Resmi Karışımı: Ekran

aralık

Sonraki bölümün varsayılan üst ve alt dolgusunu kaldırın.

• Üst ve Alt Dolgu: 0vw

görünürlük

Bölüm taşmalarını gizleyerek bölüm ayarlarını tamamlayın.

• Dikey ve Yatay Taşma: Gizli

1. Satır Ekle

Şimdi, üç sütunlu yeni bir satır ekleyin.

Herhangi bir modül eklemeden önce satır ayarlarını yapın.

boyutlandırma

İlk olarak, satırın boyutunu ayarlayın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Özel CSS

Ardından, satırın ana öğesine tek bir CSS kodu satırı ekleyin. Bu, sütunların daha küçük ekran boyutlarında da yan yana görünmesini sağlar.

• Ana Öğe CSS: display: flex;

display: flex;

Sütun 1

Dönüştür Çeviri

Sütunu yeniden konumlandırmak için ilk sütuna özel bir dönüştürme çevirme efekti uygulayın. Bu adım, daha sonra gönderiye görüntü işaretleyici modüllerini eklediğinizde anlamlı olacaktır. Bu tekniği başka bir tasarımda kullanıyorsanız, bu değerleri uygun şekilde değiştirmeniz gerekecektir.

• Dönüştür Çevir: x ekseni 2vw, y ekseni 16vw

Z İndeksi

Görünürlük sekmesine daha yüksek bir z dizini değeri ekleyin.

• Z İndeksi: 10

2. sütun

Dönüştür Çeviri

İkinci sütuna bir dönüştürme çevirme efekti uygulayın.

• Dönüştür Çevir: x ekseni -11vw, y ekseni 6vw

Z İndeksi

z dizin değerini artırın.

• Z İndeksi: 10

Sütun 3

Dönüştür Çeviri

Üçüncü sütunun transform translate değerlerini değiştirin.

• Dönüştür Çevir: x ekseni -11vw, y ekseni 8vw

Z İndeksi

Ve z indeks değerini değiştirin.

• Z İndeksi: 10

2. Satır Ekle

İlk satıra herhangi bir modül eklemeden önce, yeni bir tek sütunlu satır ekleyin. Bunu, tasarım sırasında ekranda neler olduğunu görebilmek için görüntü işaretçilerini eklemeden önce yapın.

boyutlandırma

Satırın boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Resim Modülü Ekle

Daha sonra bir görüntü modülü ekleyin.

boyutlandırma

Tasarımın tüm ekran boyutlarında yanıt vermeye devam etmesini sağlamak için görüntü modülünü tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

aralık

Ardından, resmi küçültmek için biraz sol ve sağ dolgu ekleyin.

• Sol ve Sağ Dolgu: 10vw

3 Metin Modülü Ekle

Şimdi ilk 3 sütunlu satıra dönün ve 3 metin modülü ekleyin.

Daha kolay erişim için tel kafes görünümünü kullanın.

İlk sütuna bir metin modülü ekleyin, iki kez kopyalayın ve kopyaları diğer sütunlara sürükleyin.

Sütun 1'deki metin modülünü değiştirmeye başlayın. İstediğiniz içeriği girin ve ayarları aşağıdaki gibi değiştirin.

Arka plan

Siyah bir arka plan ekleyin.

• Arka Plan Rengi: Siyah #000000

Metin

Metne stil verin.

• Metin Yazı Tipi: Aldrich
• Metin Rengi: Beyaz #ffffff
• Metin Hizalama: Ortalanmış
• Yazı Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2vw
  • Telefon: 2.4vw
• Başlık Yazı Tipi Ağırlığı: Kalın

boyutlandırma

Metin modülünün boyutunu ayarlayın.

• Genişlik:
  • Masaüstü: 17vw
  • Tablet: 23vw
  • Telefon: 30vw
• Modül Hizalaması: Merkez

aralık

Üst ve alt dolgu ekleyin.

• Üst ve Alt Dolgu: 0.9vw

Sınır

Kenarlık ayarlarını değiştirin.

• Yuvarlatılmış Köşeler: Tüm köşelerde 14 piksel
• Alt Stiller: Alt Kenarlık
• Alt Kenar Genişliği: 4px
• Alt Kenar Rengi: Kırmızı #E02B20

Kutu Gölge

Bir kutu gölgesi uygulayın.

• Kutu Gölgesi: Üçüncü Seçenek

Metin Stillerini Genişlet

Zaman kazanmak için, bölümdeki diğer metin modüllerinin stilini genişletmek için stili genişlet seçeneğini kullanın.

• İlk olarak, metin modülünün sağ kenarındaki üç noktayı tıklayın ve "Metin Stillerini Genişlet"i seçin.
• Ardından, açılır kutuda “Her Yere” tıklayın ve menü düştüğünde “Bu Bölüm” ü seçin.
• Her metin modülündeki içeriği değiştirin.

3 Bölücü Modülü Ekleyin

Sütun 1'deki metin modülünün altına bir ayırıcı ekleyin. Ardından onu iki kez kopyalayın ve kopyaları diğer sütunlara sürükleyin.

Sütun 1'deki ayırıcı modülünü açın ve bazı değişiklikler yapın.

Hat

Ayırıcıyı siyah yapın.

• Çizgi Rengi: Siyah #000000

boyutlandırma

Bölücünün kalınlığını ayarlayın.

• Bölücü Ağırlığı: 3px
• Genişlik: 20vw
• Modül Hizalaması: Merkez

aralık

Üst kenar boşluğunu ayarlayın.

• Üst Marj: 7vw

dönüştürmek

Ayırıcıyı dikey yapmak için bir dönüştürme döndürme efekti ekleyin.

• Dönüştür Döndür: İlk Seçenek 90deg'de

Bölücü Ayarlarını Genişlet

Zamandan tasarruf edin ve stilleri genişlet seçeneğini kullanın.

• İlk olarak, ayırıcı modülün sağ tarafındaki üç noktaya tıklayın ve “Bölücü Stillerini Genişlet” seçeneğini seçin.
• Ardından, açılır kutuda “Tümünü” tıklayın ve açılır menüden “Bu Bölüm”ü seçin.

Tasarım şimdi şöyle görünmelidir:

3. Satır Ekle

Aşağıdaki sütun yapısını kullanarak bölüme üçüncü bir satır ekleyin:

Şimdi herhangi bir modül eklemeden önce satır ayarlarını buna göre yapın.

boyutlandırma

Boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Sütun 1

dönüştürmek

İlk sütuna bir dönüştürme çevirme efekti uygulayın.

• Dönüştür Çevir: y ekseni -8vw

Z İndeksi

z indeks değerini de ayarlayın.

• Z İndeksi: 10

2. sütun

dönüştürmek

Bazı özel dönüştürme çevirme ayarlarını kullanarak ikinci sütunu yeniden konumlandırın.

• Dönüştür Çevir: x ekseni -17vw, y ekseni -14vw

Z İndeksi

z dizin değerini ayarlayın.

• Z İndeksi: 10

2 Bölücü Ekle

Her sütunda bir tane olmak üzere iki bölücü ekleyin.

Bölücü Stillerini Genişlet

Bölücüleri ekledikten sonra, stilleri yenilerine genişletmek için önceki bölücüleri kullanın.

• İlk olarak, yukarıdaki ilk satırda bulunan bölücü modüldeki üç noktaya tıklayın ve “Bölücü Stillerini Genişlet” seçeneğini seçin.
• Ardından, açılır pencerede “Bu Sayfa Boyunca” seçeneğini seçin.

Şimdi, üçüncü satırımızın ilk sütunundaki bölücüde bazı değişiklikler yapacağız.

boyutlandırma

Kenar boşluğunu kaldırın.

• Üst Kenar Boşluğu: varsayılan

Z İndeksi

Z indeksini de değiştirin.

• Z İndeksi: -2

2 Metin Modülü Ekle

Her sütuna bir metin modülü ekleyin.

Metin Stillerini Genişlet

Yeni metin modüllerini ekledikten sonra, ilk satırdaki metin modülünden metin stillerini genişletin.

• İlk olarak, üst sıradaki ilk metin modülündeki üç noktaya tıklayın ve “Metin Stillerini Genişlet” seçeneğini seçin.
• Ardından, açılır pencerede “Bu Sayfa Boyunca” seçeneğini seçin.

Şimdi metni tasarıma uyacak şekilde değiştirin. Ayrıca, üçüncü satırdaki her iki metin modülüne de bir miktar üst kenar boşluğu ekleyin.

aralık

• Üst Marj: 7vw

Örnek 2'yi Yeniden Oluştur

Bir sonraki örneğe geçelim!

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin. Bir satır eklemeden önce bölüm ayarlarını yapın.

görünürlük

Görünürlük ayarlarında bölümün taşmalarını gizleyin.

• Yatay ve Dikey Taşma: Gizli

1. Satır Ekle

Şimdi, beş sütunlu bir satır ekleyin. Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi yapın.

boyutlandırma

İlk olarak, boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından aralığı ayarlayın.

• Sol ve Sağ Dolgu: 19.5vw

Özel CSS

Satırın ana öğesine bir satır CSS kodu ekleyerek sütunların yan yana görünmesine izin verin.

• Ana Öğe CSS: display: flex;

display: flex;

Tüm Sütun Ayarları

Ardından, sütunların her birinde bazı değişiklikler yapın.

Özel CSS

• Ana Öğe: genişlik: %20 !önemli;

width: 20% !important;

Z İndeksi

z indeks değerini de ayarlayın.

• Z İndeksi: 10

5 Metin Modülü Ekle

Her sütuna bir metin modülü ekleyin.

İçerik kutusuna ilgili içeriği ekleyin ve sütun 1'deki metin modülünün metin modülü ayarlarını değiştirerek devam edin.

Arka plan

Bir arka plan rengi ekleyin.

• Arka Plan Rengi: Yeşil #2f7713

Metin

İçeriği aşağıdaki gibi şekillendirin.

• Metin Yazı Tipi: Allerta
• Metin Hizalama: Merkez
• Metin Rengi: Beyaz #ffffff
• Yazı Boyutu:
  • Masaüstü: 1.3vw
  • Tablet: 2vw
  • Telefon: 2.4vw
• Metin Satır Yüksekliği: 2.9em

boyutlandırma

Boyutlandırmayı ayarlayın.

• Genişlik:
  • Masaüstü: 6vw
  • Tablet: 8vw
  • Telefon: 9vw
• Modül Hizalaması: Merkez

aralık

Modülü kareye dönüştürmek için aralığı ayarlayın.

• Alt Marj: -2vw
• Üst ve Alt Dolgu: 1vw
• Sol ve Sağ Dolgu: 1vw

Sınır

Kenarlık ayarlarında metin modülünü bir daireye çevirin.

• Yuvarlatılmış Köşeler: Dört tarafı 50vw

Kutu Gölge

Bir kutu gölgesi de seçin.

• Kutu Gölgesi: Üçüncü Seçenek

Metin Stillerini Genişlet

Satırdaki tüm metin modüllerinin ayarlarını yapmak için stilleri genişlet seçeneğini kullanın.

• İlk olarak, metin modülünün sağındaki noktalara tıklayın ve “Metin Stillerini Genişlet” seçeneğini seçin.
• Ardından, açılır pencerede “Her Yere” tıklayın ve “Bu Sayfa”yı seçin.
• Son olarak, her modülün içerik kutusundaki metni değiştirin.

Tasarım şimdi böyle görünmelidir.

Metin Modülü 2

İkinci daireyi sarı yapın.

• Arka Plan Rengi: Sarı #f2e200

Metin Modülü 3

Üçüncü daireyi turuncu yapın.

• Arka Plan Rengi: Turuncu #f2b100

Metin Modülü 4

Dördüncü daireyi turuncu-kırmızı yapın.

• Arka Plan Rengi: Turuncu Kırmızı

Metin Modülü 5

Beşinci modülü mor yapın.

• Arka Plan Rengi: Mor #8e008c

5 Bölücü Modülü Ekleyin

Şimdi, her metin modülünün altına bir ayırıcı modül ekleyin.

Ayarları buna göre ilk bölücüye ayarlayın.

Hat

Bölücüye bir renk verin.

• Çizgi Rengi: Yeşil #2f7713

boyutlandırma

Genişliği ayarlayın.

• Bölücü Genişliği: 4px
• Genişlik: 13vw

aralık

Bir üst kenar boşluğu değeri ekleyin.

• Üst boşluk:
  • Masaüstü: 7vw
  • Tablet + Telefon: 5vw

dönüştürmek

Dikey yapmak için ayırıcıyı döndürün.

• Dönüştür Döndür: İlk Seçenekte 90 derece

Bölücü Ayarlarını Genişlet

Diğer bölücülere stil vermek için stilleri genişlet seçeneğini kullanın.

• İlk olarak, bölücü modülünün sağındaki noktalara tıklayın ve “Bölücü Stillerini Genişlet” seçeneğini seçin.
• Ardından, açılır pencerede “Bütünlük”e tıklayın ve “Bu Bölüm”ü seçin.

Renkleri eşleştir

bölücü 2

İkinci bölücüyü sarı yapın.

• Çizgi Rengi: Sarı #f2e200

bölücü 3

Üçüncü bölücüyü turuncu yapın.

• Çizgi Rengi: Turuncu #f2b100

bölücü 4

Dördüncü bölücüyü turuncu kırmızı yapın.

• Çizgi Rengi: Turuncu Kırmızı #ef4a21

bölücü 5

Beşinci bölücüyü mor yapın.

• Çizgi Rengi: Mor #8e008c

2. Satır Ekle

Yeni bir tek sütunlu satır ekleyin.

Görüntü modülünü eklemeden önce satır ayarlarını yapın.

boyutlandırma

İlk önce boyutu ayarlayın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

görünürlük

Ardından, görünürlük.

• Yatay ve Dikey Taşma: Görünür

Resim Modülü Ekle

Bir görüntü modülü ekleyin ve meyve suları görüntüsünü yükleyin.

boyutlandırma

Resmi tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

Satır Aralığı

Son dokunuşun zamanı geldi. Satır 1 ayarlarını tekrar açın ve biraz üst ve alt kenar boşluğu ekleyin.

• Üst Marj: 7vw
• Alt Kenar Boşluğu:
  • Masaüstü: -24vw
  • Tablet: -31vw
  • Telefon: -35vw

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Bu bir Sargı!

Bu gönderide, size iki farklı görüntü işaretleyici tasarımının nasıl oluşturulacağını gösterdik. Metin sütunlarını ve ayırıcıları bir arada tutmak için sütun seçeneklerini kullandık. Bu tasarımların, kendi görüntü işaretleyici tasarımlarınızı yaratmanız için size ilham vereceğini umuyoruz. Her görüntü işaretçisini daha iyi kontrol etmek için sütunların içindeki dönüştürme çevirme seçeneklerini kullanmayı unutmayın. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!