Divi dönüşüm seçenekleriyle görüntü işaretleyicileri nasıl eklenir
Görüntü işaretleyicileri özel ürün özelliklerini görüntülemenin iyi bir yoludur. Bu yazıda, bir metin ve dikey bölücü modülü kullanarak bir görüntü işaretleyicisinin nasıl yapılacağını göstereceğiz. Sütundaki dönüşüm ayarları sayesinde, görüntü işaretleyicileri ihtiyacınız olan yere yerleştirilebilir. Bu tekniğin nasıl olduğunu göstermek için size iki farklı tasarım örneği göstereceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Örnek 1 Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
Bir Örnek #1 Yapın İlk tasarım örneğini yeniden başlatalım!
Yeni bir parça ekleyin, üzerinde çalıştığınız sayfaya yeni bir parça ekleyin. Satır eklemeden önce, önce parçanın ayarlarını ayarlayın. Arka Plan Gradyan ekleyin ve ardından ekran karışımı modu ile çizin. Arka plan: gradyan + görüntü
Gradyan rengi 1: beyaz #ffffff
Gradyan Renk 2: Orta Gri #666666
Gradient’in başlangıç konumu:% 22
Arka Plan Görüntü Karışımı: Ekran
Varsayılan dolgunun üst ve altını bir sonraki bölümden çıkarın. Üst ve alt dolgu: 0VW
Görünürlük Parçanın güçlü yönlerini gizleyerek ayarları tamamlayın. Dikey ve Yatay Taşma: Gizli
Hat #1 ekleyin Şimdi, üç sütunlu yeni bir satır ekleyin. Herhangi bir modül eklemeden önce satır ayarlarını ayarlayın. İlk yapıştırıcı, hattın boyutunu ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Özel CSS Daha sonra, hattın ana öğesine bir satır CSS kodu ekleyin. Bu, sütunun daha küçük ekran boyutunda da yan yana görünmesine izin verecektir. Ana Element CSS: Ekran: Esnek;
Ekran: Flex;
Sütun 1 Değişikliği Çevirisi Özel dönüşüm dönüşümünün etkisini sütunu yeniden konumlandıran ilk sütuna uygulayın. Görüntü işaretleyici modülünü daha sonra yazıda ekledikten sonra bu adım anlamlı olacaktır. Bu tekniği başka bir tasarımda kullanırsanız, bu değeri değiştirmelisiniz. Dönüşüm Çeviri: Eksen x 2VW, Eksen y 16VW
Dizin Z Görünürlük sekmesine daha yüksek bir Z dizin değeri ekleyin. Z: 10 Dizin Sütun 2 Değişikliği Çevirisi Dönüşüm çevirisi efektini ikinci sütuna uygulayın.
Dönüşüm Çeviri: Eksen X -11VW, Eksen Y 6VW Dizin z, dizin değerini artar.
Dizin Z: 10 Sütun 3 Çeviri Değiştir Çeviri Çeviri Değerlerini Üçüncü sütundan.
Dönüşüm Çeviri: Eksen X -11VW, Eksen Y 8VW Dizin Z ve Değişiklik Dizin Değeri Z.
Dizin Z: 10 İlk satıra herhangi bir modül eklemeden önce 2 numaralı satır ekleyin, yeni bir sütun satırı ekleyin. Tasarım yaparken ekranda neler olduğunu görebilmeniz için bir görüntü işaretleyicisi eklemeden önce bunu yapın.
Yapışkan Değişiklik Satır Boyut Ayarları. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Görüntü modülünü ekleyin Bir sonraki görüntü modülünü ekleyin.
Tasarımın tüm ekran boyutlarında duyarlı kalmasını sağlamak için görüntü modülünde tam genişlik yapıştırıcısı. Tam geniş zorla: Evet Mesafe Ardından, görüntüyü küçültmek için biraz sol ve sağ dolgu ekleyin.
Sol ve sağ dolgu: 10vw Şimdi 3 metin modülü ekleyin, ilk 3 sütun satırına dönün ve 3 metin modülü ekleyin. Daha kolay erişim için çerçeve görüntü ekranını kullanın. Metin modülünü ilk sütuna, iki kez klona ekleyin ve yinelenen başka bir sütuna sürükleyin.
Metin modülünü Sütun 1’de değiştirmeye başlayın. İstediğiniz içeriklerden bazılarını girin ve ayarları aşağıdaki gibi değiştirin. Arka Plan siyah arka plan ekleyin. Arka plan rengi: Siyah #000000 Metin metni metin.
Metin yazı tipi: Aldrich Metin Rengi: Beyaz #ffffff
Metnin Hizalanması: Merkezli
Yazı Boyutu:
Masaüstü: 1.2vw
Tablet: 2VW
Telefon: 2.4vw
Başlık Mektubu Ağırlığı: Kalınlık
Yapışkan Metin modülünün boyutunu ayarlayın. Genişlik:
Masaüstü: 17VW Tablet: 23VW
Telefon: 30VW
Modül hizalaması: merkez
Mesafe Üst ve alt yatakları ekleyin.
Üst ve Alt Dolgu: 0.9vw
Sınır Değişimi Sınır Ayarları. Yuvarlak açı: Her açıda 14 piksel
Alt Kuvvet: Alt Sınır Alt sınır genişliği: 4px
Alt Sınır Rengi: Kırmızı #E02B20
Kutunun gölgesi kutunun gölgesini uygular.
Gölge Kutusu: Üçüncü Seçenek
Metin stilini genişletin Zaman kazanmak için, o bölümdeki diğer metin modüllerini düzenlemek için stil uzantısı seçeneğini kullanın. İlk olarak, metin modülünün sağ kenarındaki üç noktayı tıklayın ve “Metin Stilini Uzatın” ı seçin.
Ardından, açılır kutuda, menü düştüğünde “Boyunca” ve “Bu Bölüm” i seçin. Her metin modülündeki içeriği değiştirin.
3 bölücü modülü ekleyin Metin modülünün altına Sütun 1’deki bölücü ekleyin. Daha sonra iki kez klonlayın ve başka bir sütuna sürükleyin.
Sütun 1’de bölücü modülünü açın ve bazı değişiklikler yapın.
Bariyer çizgisi siyah olur. Çizgi Rengi: Siyah #000000 Yapıştırıcı bölücünün kalınlığını ayarlar.
Bölücü ağırlığı: 3px
Genişlik: 20VW Modül hizalaması: merkez
Mesafe üst kenar boşluğunu ayarlama.
Üst Marj: 7VW
Dikey böcek yapmak için dönüşüm döner etkisinin etkisini değiştirme. Dönüşüm Dönüşü: 90deg’deki ilk seçenek
Zamana ait bölücü ayarlarını genişletin ve stil uzantısı seçeneğini kullanın. İlk olarak, bölücü modülünün sağ tarafındaki üç noktaya tıklayın ve “Bölücü stilini genişletin” seçeneğini seçin.
Ardından, Sembulan kutusunda, “Boyunca” yı tıklayın ve aşağı indirme menüsünde “Bu Bölüm” i seçin. Tasarım şimdi şöyle görünecek:
Satır #3 Ekle Aşağıdaki sütun yapısını kullanarak üçüncü satırı bölüme ekleyin:
Şimdi, herhangi bir modül eklemeden önce uygun satır ayarlarını ayarlayın. Yapışkan Değişiklik Boyut Ayarları. Özel oluklar kullanın: Evet Talang genişliği: 1 Genişlik:% 100 Maksimum genişlik:% 100
Sütun 1, dönüşüm çevirisinin etkisini ilk sütuna değiştirir.
Dönüşüm Çeviri: Eksen Y -8VW
Dizin Z, Z dizin değerini de ayarlar.
Dizin Z: 10 Sütun 2, bazı özel dönüşüm çeviri ayarlarını kullanarak ikinci sütunun konumunu değiştirir.
Dönüşüm Çeviri: Eksen X -17VW, Eksen Y -14VW
Bölme kuvvetini genişletin Bölücüyü ekledikten sonra, yeni kuvveti genişletmek için bölücüyü önceden kullanın. İlk olarak, yukarıdaki ilk satırdaki bölücü modülünde üç noktayı tıklayın ve “Bölücü stilini genişletin” seçeneğini seçin.
Ardından, Sembulan’da “Bu sayfa boyunca” seçin. Şimdi, üçüncü satırımızın ilk sütununda bölücüde bazı değişiklikler yapacağız. Yapıştırıcı kenar boşluğunu silin. Üst Marj: Varsayılan
Dizin Z ayrıca Z’yi değiştirin Z.
Dizin Z: -2 2 metin modülü ekle Her sütuna metin modülünü ekleyin.
Yeni bir metin modülü ekledikten sonra metin stilini genişletin, metin kuvvetini ilk satırdaki metin modülünden genişletin. İlk olarak, üst sıra ilk metin modülündeki üç noktaya tıklayın ve “Metin Stilini Uzatın” ı seçin.
Ardından, Sembulan’da “Bu sayfa boyunca” seçin. Şimdi, metni tasarıma uyacak şekilde değiştirin. Ardından, üçüncü sıradaki her iki metin modülüne de bazı üst kenar boşlukları ekleyin. Mesafe Üst Marj: 7VW
Bir Örnek #2’yi yeniden oluşturun Bir sonraki örneğe devam edin!
Yeni bir parça ekleyin, üzerinde çalıştığınız sayfaya yeni bir parça ekleyin. Satır eklemeden önce bölümün ayarlarını ayarlayın. Görünürlük Görünürlük ortamında güçlü yönleri gizle. Yatay ve dikey disapantlar: Gizli Şimdi 1 numaralı satır ekleyin, beş sütunlu bir satır ekleyin. Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi ayarlayın. İlk yapıştırıcı, boyut ayarlarını değiştirin.
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Genişlik:% 100
Maksimum genişlik:% 100 Mesafe daha sonra mesafeyi ayarlayın.
Sol ve sağ dolgu: 19.5vw
Özel CSS, hattın ana öğesine bir satır CSS kodu ekleyerek sütunun yan yana görünmesine izin verir.
Ana Element CSS: Ekran: Esnek;
Ekran: Flex; Tüm sütun ayarları daha sonra, her sütunda bazı değişiklikler yapar. Özel CSS
Ana unsur: genişlik:%20! Önemli; Genişlik:%20! Önemli;
Dizin Z, Z dizin değerini de ayarlar.
Dizin Z: 10 5 Metin Modülü Ekle Her sütuna metin modülünü ekleyin.
İçerik kutusuna bazı alakalı içerik ekleyin ve metin modülünün ayarlarını metin modülünden Sütun 1’deki değiştirerek devam edin. Arka Plan Arka plan rengini ekleyin.
Arka Plan Rengi: Yeşil #2F7713 İçerik stili metni aşağıdaki gibi.
Metin Yazı Tipi: Altter Hizalama Metni: Orta Metin Rengi: Beyaz #ffffff
Yazı Boyutu: Masaüstü: 1.3vw
Tablet: 2VW
Telefon: 2.4vw
Yüksek çizgi metin: 2.9em
Yapıştırıcı boyutu ayarlar.
Geniş:
Masaüstü: 6VW
Tablet: 8VW
Telefon: 9VW Modül hizalaması: merkez
Mesafe Modülü kare olarak değiştirmek için mesafeyi ayarlayın.
Alt marj: -2vw
Üst ve alt dolgu: 1VW
Sol ve sağ dolgu: 1VW
Sınır Metin modülünü sınır ayarlarındaki bir daire olarak değiştirin. Kutunun gölgesi kutunun gölgesini de seçin.
Gölge Kutusu: Üçüncü Seçenek
Metin Stili Genişletme Satırdaki tüm metin modüllerinin ayarlarını ayarlamak için Stil Uzantısı seçeneğini kullanın.
İlk olarak, metin modülünün sağındaki noktaları tıklayın ve “Metin Stilini Uzatın” ı seçin. Ardından, açılır pencerede “Boyunca “‘yı 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ünecek.
Metin Modülü 2 İkinci daireyi sarı yapın. Arka plan rengi: sarı #f2e200
Metin Modülü 3 Üçüncü bir daire turuncu oluşturun.
Arka Plan Rengi: Turuncu #F2B100
Metin Modülü 4 Dördüncü daire turuncu-kırmızı oluşturun. Arka plan rengi: turuncu kırmızı Metin Modülü 5 Beşinci Mor Modül oluşturun.
Arka plan rengi: Mor #8E008C Şimdi her metin modülünün altına 5 bölücü modülü ekleyin, bölücü modülünü ekleyin.
Ayarları ilk bölücüye ayarlayın. Bölücü üzerindeki renk çizgisini verin. Çizgi Rengi: Yeşil #2F7713
Yapıştırıcı genişliği ayarlar. Bölücü genişliği: 4px
Genişlik: 13vw Mesafe Üst kenar değerini ekleyin. Üst sınır:
Masaüstü: 7VW Tablet + Telefon: 5VW
Dikey hale getirmek için bölücüyü değiştirin.
Dönüşüm Döndür: İlk seçenekte 90 derece Bölücü ayarlarını genişletme Kuvveti diğer bölücüye vermek için stil uzantısı seçeneğini kullanın.
İlk olarak, bölücü modülünün sağındaki noktayı tıklayın ve “Bölücü stilini uzatın” ı seçin.
Ardından, Sembulan’da “Boyunca “‘yı tıklayın ve” Bu Bölüm “i seçin.
İkinci bölücü sarı için bölücü 2’nin rengini eşleştirin. Çizgi Rengi: Sarı #F2E200
Turuncu üçüncü bariyer için bölücü 3. Çizgi rengi: Turuncu #F2B100 Kırmızı turuncu dördüncü bölücü için 4 bölücü.
Çizgi Rengi: Kırmızı Turuncu #EF4A21
Beşinci bölücü için bölücü 5 mor olur. Çizgi Rengi: Mor #8E008C
2 numaralı satır ekleyin Yeni bir sütun satırı ekleyin. Bir görüntü modülü eklemeden önce satır ayarlarını ayarlayın. İlk yapıştırıcı, boyutu ayarlayın.
Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100 Maksimum genişlik:% 100
Görünürlük Daha sonra, görünürlük. Yatay ve dikey taşma: görünür Görüntü modülünü ekleyin Görüntü modülünü ekleyin ve meyve suyu görüntüsünü yükleyin.
Resimde tam genişlik zorla yapıştırıcı.
Tam geniş zorla: Evet
Sıra alanı son dokunuş zamanıdır. #1 satır ayarlarını açın ve bazı üst ve alt kenar boşlukları ekleyin.
Üst Marj: 7VW Alt marj:
Masaüstü: -24vw Tablet: -31vw Telefon: -35vw
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Örnek 1 Masaüstü Hücresel
Örnek #2 masaüstü
Hücresel
Bu bir sargı! Bu yazıda, iki farklı görüntü işaretleyici tasarımının nasıl yapılacağını gösterdik. Metin ve bölücü sütunu birleştirmek için sütun seçeneğini kullanıyoruz. Bu tasarımın kendi görüntü işaretleyici tasarımınızı oluşturmanız için size ilham vereceğini umuyoruz. Her görüntü işaretleyicisinden daha iyi kontrol için sütundaki Dönüşüm seçeneğini kullanmayı unutmayın. Bir sorunuz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
Bir Örnek #1 Yapın İlk tasarım örneğini yeniden başlatalım!
Yeni bir parça ekleyin, üzerinde çalıştığınız sayfaya yeni bir parça ekleyin. Satır eklemeden önce, önce parçanın ayarlarını ayarlayın. Arka Plan Gradyan ekleyin ve ardından ekran karışımı modu ile çizin. Arka plan: gradyan + görüntü
Gradyan rengi 1: beyaz #ffffff
Gradyan Renk 2: Orta Gri #666666
Gradient’in başlangıç konumu:% 22
Arka Plan Görüntü Karışımı: Ekran
Varsayılan dolgunun üst ve altını bir sonraki bölümden çıkarın. Üst ve alt dolgu: 0VW
Görünürlük Parçanın güçlü yönlerini gizleyerek ayarları tamamlayın. Dikey ve Yatay Taşma: Gizli
Hat #1 ekleyin Şimdi, üç sütunlu yeni bir satır ekleyin. Herhangi bir modül eklemeden önce satır ayarlarını ayarlayın. İlk yapıştırıcı, hattın boyutunu ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Özel CSS Daha sonra, hattın ana öğesine bir satır CSS kodu ekleyin. Bu, sütunun daha küçük ekran boyutunda da yan yana görünmesine izin verecektir. Ana Element CSS: Ekran: Esnek;
Ekran: Flex;
Sütun 1 Değişikliği Çevirisi Özel dönüşüm dönüşümünün etkisini sütunu yeniden konumlandıran ilk sütuna uygulayın. Görüntü işaretleyici modülünü daha sonra yazıda ekledikten sonra bu adım anlamlı olacaktır. Bu tekniği başka bir tasarımda kullanırsanız, bu değeri değiştirmelisiniz. Dönüşüm Çeviri: Eksen x 2VW, Eksen y 16VW
Dizin Z Görünürlük sekmesine daha yüksek bir Z dizin değeri ekleyin. Z: 10 Dizin Sütun 2 Değişikliği Çevirisi Dönüşüm çevirisi efektini ikinci sütuna uygulayın.
Dönüşüm Çeviri: Eksen X -11VW, Eksen Y 6VW Dizin z, dizin değerini artar.
Dizin Z: 10 Sütun 3 Çeviri Değiştir Çeviri Çeviri Değerlerini Üçüncü sütundan.
Dönüşüm Çeviri: Eksen X -11VW, Eksen Y 8VW Dizin Z ve Değişiklik Dizin Değeri Z.
Dizin Z: 10 İlk satıra herhangi bir modül eklemeden önce 2 numaralı satır ekleyin, yeni bir sütun satırı ekleyin. Tasarım yaparken ekranda neler olduğunu görebilmeniz için bir görüntü işaretleyicisi eklemeden önce bunu yapın.
Yapışkan Değişiklik Satır Boyut Ayarları. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Görüntü modülünü ekleyin Bir sonraki görüntü modülünü ekleyin.
Tasarımın tüm ekran boyutlarında duyarlı kalmasını sağlamak için görüntü modülünde tam genişlik yapıştırıcısı. Tam geniş zorla: Evet Mesafe Ardından, görüntüyü küçültmek için biraz sol ve sağ dolgu ekleyin.
Sol ve sağ dolgu: 10vw Şimdi 3 metin modülü ekleyin, ilk 3 sütun satırına dönün ve 3 metin modülü ekleyin. Daha kolay erişim için çerçeve görüntü ekranını kullanın. Metin modülünü ilk sütuna, iki kez klona ekleyin ve yinelenen başka bir sütuna sürükleyin.
Metin modülünü Sütun 1’de değiştirmeye başlayın. İstediğiniz içeriklerden bazılarını girin ve ayarları aşağıdaki gibi değiştirin. Arka Plan siyah arka plan ekleyin. Arka plan rengi: Siyah #000000 Metin metni metin.
Metin yazı tipi: Aldrich Metin Rengi: Beyaz #ffffff
Metnin Hizalanması: Merkezli
Yazı Boyutu:
Masaüstü: 1.2vw
Tablet: 2VW
Telefon: 2.4vw
Başlık Mektubu Ağırlığı: Kalınlık
Yapışkan Metin modülünün boyutunu ayarlayın. Genişlik:
Masaüstü: 17VW Tablet: 23VW
Telefon: 30VW
Modül hizalaması: merkez
Mesafe Üst ve alt yatakları ekleyin.
Üst ve Alt Dolgu: 0.9vw
Sınır Değişimi Sınır Ayarları. Yuvarlak açı: Her açıda 14 piksel
Alt Kuvvet: Alt Sınır Alt sınır genişliği: 4px
Alt Sınır Rengi: Kırmızı #E02B20
Kutunun gölgesi kutunun gölgesini uygular.
Gölge Kutusu: Üçüncü Seçenek
Metin stilini genişletin Zaman kazanmak için, o bölümdeki diğer metin modüllerini düzenlemek için stil uzantısı seçeneğini kullanın. İlk olarak, metin modülünün sağ kenarındaki üç noktayı tıklayın ve “Metin Stilini Uzatın” ı seçin.
Ardından, açılır kutuda, menü düştüğünde “Boyunca” ve “Bu Bölüm” i seçin. Her metin modülündeki içeriği değiştirin.
3 bölücü modülü ekleyin Metin modülünün altına Sütun 1’deki bölücü ekleyin. Daha sonra iki kez klonlayın ve başka bir sütuna sürükleyin.
Sütun 1’de bölücü modülünü açın ve bazı değişiklikler yapın.
Bariyer çizgisi siyah olur. Çizgi Rengi: Siyah #000000 Yapıştırıcı bölücünün kalınlığını ayarlar.
Bölücü ağırlığı: 3px
Genişlik: 20VW Modül hizalaması: merkez
Mesafe üst kenar boşluğunu ayarlama.
Üst Marj: 7VW
Dikey böcek yapmak için dönüşüm döner etkisinin etkisini değiştirme. Dönüşüm Dönüşü: 90deg’deki ilk seçenek
Zamana ait bölücü ayarlarını genişletin ve stil uzantısı seçeneğini kullanın. İlk olarak, bölücü modülünün sağ tarafındaki üç noktaya tıklayın ve “Bölücü stilini genişletin” seçeneğini seçin.
Ardından, Sembulan kutusunda, “Boyunca” yı tıklayın ve aşağı indirme menüsünde “Bu Bölüm” i seçin. Tasarım şimdi şöyle görünecek:
Satır #3 Ekle Aşağıdaki sütun yapısını kullanarak üçüncü satırı bölüme ekleyin:
Şimdi, herhangi bir modül eklemeden önce uygun satır ayarlarını ayarlayın. Yapışkan Değişiklik Boyut Ayarları. Özel oluklar kullanın: Evet Talang genişliği: 1 Genişlik:% 100 Maksimum genişlik:% 100
Sütun 1, dönüşüm çevirisinin etkisini ilk sütuna değiştirir.
Dönüşüm Çeviri: Eksen Y -8VW
Dizin Z, Z dizin değerini de ayarlar.
Dizin Z: 10 Sütun 2, bazı özel dönüşüm çeviri ayarlarını kullanarak ikinci sütunun konumunu değiştirir.
Dönüşüm Çeviri: Eksen X -17VW, Eksen Y -14VW
Dizin Z Z indexinin değerini ayarlayın.
Dizin Z: 10
Bölme kuvvetini genişletin Bölücüyü ekledikten sonra, yeni kuvveti genişletmek için bölücüyü önceden kullanın. İlk olarak, yukarıdaki ilk satırdaki bölücü modülünde üç noktayı tıklayın ve “Bölücü stilini genişletin” seçeneğini seçin.
Ardından, Sembulan’da “Bu sayfa boyunca” seçin. Şimdi, üçüncü satırımızın ilk sütununda bölücüde bazı değişiklikler yapacağız. Yapıştırıcı kenar boşluğunu silin. Üst Marj: Varsayılan
Dizin Z ayrıca Z’yi değiştirin Z.
Dizin Z: -2 2 metin modülü ekle Her sütuna metin modülünü ekleyin.
Yeni bir metin modülü ekledikten sonra metin stilini genişletin, metin kuvvetini ilk satırdaki metin modülünden genişletin. İlk olarak, üst sıra ilk metin modülündeki üç noktaya tıklayın ve “Metin Stilini Uzatın” ı seçin.
Ardından, Sembulan’da “Bu sayfa boyunca” seçin. Şimdi, metni tasarıma uyacak şekilde değiştirin. Ardından, üçüncü sıradaki her iki metin modülüne de bazı üst kenar boşlukları ekleyin. Mesafe Üst Marj: 7VW
Bir Örnek #2’yi yeniden oluşturun Bir sonraki örneğe devam edin!
Yeni bir parça ekleyin, üzerinde çalıştığınız sayfaya yeni bir parça ekleyin. Satır eklemeden önce bölümün ayarlarını ayarlayın. Görünürlük Görünürlük ortamında güçlü yönleri gizle. Yatay ve dikey disapantlar: Gizli Şimdi 1 numaralı satır ekleyin, beş sütunlu bir satır ekleyin. Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi ayarlayın. İlk yapıştırıcı, boyut ayarlarını değiştirin.
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Genişlik:% 100
Maksimum genişlik:% 100 Mesafe daha sonra mesafeyi ayarlayın.
Sol ve sağ dolgu: 19.5vw
Özel CSS, hattın ana öğesine bir satır CSS kodu ekleyerek sütunun yan yana görünmesine izin verir.
Ana Element CSS: Ekran: Esnek;
Ekran: Flex; Tüm sütun ayarları daha sonra, her sütunda bazı değişiklikler yapar. Özel CSS
Ana unsur: genişlik:%20! Önemli; Genişlik:%20! Önemli;
Dizin Z, Z dizin değerini de ayarlar.
Dizin Z: 10 5 Metin Modülü Ekle Her sütuna metin modülünü ekleyin.
İçerik kutusuna bazı alakalı içerik ekleyin ve metin modülünün ayarlarını metin modülünden Sütun 1’deki değiştirerek devam edin. Arka Plan Arka plan rengini ekleyin.
Arka Plan Rengi: Yeşil #2F7713 İçerik stili metni aşağıdaki gibi.
Metin Yazı Tipi: Altter Hizalama Metni: Orta Metin Rengi: Beyaz #ffffff
Yazı Boyutu: Masaüstü: 1.3vw
Tablet: 2VW
Telefon: 2.4vw
Yüksek çizgi metin: 2.9em
Yapıştırıcı boyutu ayarlar.
Geniş:
Masaüstü: 6VW
Tablet: 8VW
Telefon: 9VW Modül hizalaması: merkez
Mesafe Modülü kare olarak değiştirmek için mesafeyi ayarlayın.
Alt marj: -2vw
Üst ve alt dolgu: 1VW
Sol ve sağ dolgu: 1VW
Sınır Metin modülünü sınır ayarlarındaki bir daire olarak değiştirin. Kutunun gölgesi kutunun gölgesini de seçin.
Gölge Kutusu: Üçüncü Seçenek
Metin Stili Genişletme Satırdaki tüm metin modüllerinin ayarlarını ayarlamak için Stil Uzantısı seçeneğini kullanın.
İlk olarak, metin modülünün sağındaki noktaları tıklayın ve “Metin Stilini Uzatın” ı seçin. Ardından, açılır pencerede “Boyunca “‘yı 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ünecek.
Metin Modülü 2 İkinci daireyi sarı yapın. Arka plan rengi: sarı #f2e200
Metin Modülü 3 Üçüncü bir daire turuncu oluşturun.
Arka Plan Rengi: Turuncu #F2B100
Metin Modülü 4 Dördüncü daire turuncu-kırmızı oluşturun. Arka plan rengi: turuncu kırmızı Metin Modülü 5 Beşinci Mor Modül oluşturun.
Arka plan rengi: Mor #8E008C Şimdi her metin modülünün altına 5 bölücü modülü ekleyin, bölücü modülünü ekleyin.
Ayarları ilk bölücüye ayarlayın. Bölücü üzerindeki renk çizgisini verin. Çizgi Rengi: Yeşil #2F7713
Yapıştırıcı genişliği ayarlar. Bölücü genişliği: 4px
Genişlik: 13vw Mesafe Üst kenar değerini ekleyin. Üst sınır:
Masaüstü: 7VW Tablet + Telefon: 5VW
Dikey hale getirmek için bölücüyü değiştirin.
Dönüşüm Döndür: İlk seçenekte 90 derece Bölücü ayarlarını genişletme Kuvveti diğer bölücüye vermek için stil uzantısı seçeneğini kullanın.
İlk olarak, bölücü modülünün sağındaki noktayı tıklayın ve “Bölücü stilini uzatın” ı seçin.
Ardından, Sembulan’da “Boyunca “‘yı tıklayın ve” Bu Bölüm “i seçin.
İkinci bölücü sarı için bölücü 2’nin rengini eşleştirin. Çizgi Rengi: Sarı #F2E200
Turuncu üçüncü bariyer için bölücü 3. Çizgi rengi: Turuncu #F2B100 Kırmızı turuncu dördüncü bölücü için 4 bölücü.
Çizgi Rengi: Kırmızı Turuncu #EF4A21
Beşinci bölücü için bölücü 5 mor olur. Çizgi Rengi: Mor #8E008C
2 numaralı satır ekleyin Yeni bir sütun satırı ekleyin. Bir görüntü modülü eklemeden önce satır ayarlarını ayarlayın. İlk yapıştırıcı, boyutu ayarlayın.
Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100 Maksimum genişlik:% 100
Görünürlük Daha sonra, görünürlük. Yatay ve dikey taşma: görünür Görüntü modülünü ekleyin Görüntü modülünü ekleyin ve meyve suyu görüntüsünü yükleyin.
Resimde tam genişlik zorla yapıştırıcı.
Tam geniş zorla: Evet
Sıra alanı son dokunuş zamanıdır. #1 satır ayarlarını açın ve bazı üst ve alt kenar boşlukları ekleyin.
Üst Marj: 7VW Alt marj:
Masaüstü: -24vw Tablet: -31vw Telefon: -35vw
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Örnek 1 Masaüstü Hücresel
Örnek #2 masaüstü
Hücresel
Bu bir sargı! Bu yazıda, iki farklı görüntü işaretleyici tasarımının nasıl yapılacağını gösterdik. Metin ve bölücü sütunu birleştirmek için sütun seçeneğini kullanıyoruz. Bu tasarımın kendi görüntü işaretleyici tasarımınızı oluşturmanız için size ilham vereceğini umuyoruz. Her görüntü işaretleyicisinden daha iyi kontrol için sütundaki Dönüşüm seçeneğini kullanmayı unutmayın. Bir sorunuz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin!
