Divi Dönüşüm seçeneği ile bir Polaroid Kahraman Oluşturun
Yaratıcı Kahraman bölümü unutulmaz ve özel bir web sitesi yapar. Bu Polaroid Kahraman Bölümünün tasarımı, vintage bir dolaşım duygusu uyandırıyor. Sütun dönüşüm seçeneklerini kullanarak, polaroid, sanki masaya dağılmış gibi istediğiniz şekilde düzenlenebilir. Bu polaroid kahramanın tasarımını kendi kare görüntüsünüzle yeniden yaratabilirsiniz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Ön izleme
Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
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
Yaratıcı başlayalım, yeni bir parça ekleyelim, üzerinde çalıştığınız sayfaya yeni bir parça ekleyerek başlayalım. Alt bölücü nane yeşili alt bölücü ekleyin.
Bölücünün yerleştirilmesi: aşağıda
Bölücü stili: #12
Renk Renk: Nane Yeşil #D2F2D0
Bölme Yüksekliği: 23VW
Mesafe Parçanın mesafesini ayarlayın. Üst Marj: 7VW
Alt kenar boşluğu: 0px
Üst ve alt dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Kendi tarafınıza yeni bir satır ekleyerek devam edin. Aşağıdaki sütun yapısını seçin: Yapıştırıcı Şimdi, çizginin boyutunu ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik: 90VW
Maksimum genişlik:% 100
Bir sonraki mesafe, uzay ayarlarında üst ve alt dolguyu ayarlayın. Üst ve alt dolgu: 0px
Sütunu yan yana tutmak için satırın ana öğesine bir satır CSS kodu ekleyin. CSS Custom – Ana Eleman: Ekran: Esnek;
Ekran: Flex;
Resim Modülünü Sütun 1’e Ekle Kare Görüntü Yükle Görüntü modülünü Sütun 1’e ekleyin ve kare bir görüntü yükleyin. Akım hizalama, modülün pürüzsüzlüğünü ayarlayın. Modül hizalaması: merkez
Yapıştırıcı daha sonra, tam genişlik modülü yapın. Tam geniş zorla: Evet
Metin modülünü sütun 1’e ekleyin, içerikleri ekleyin, metin modülünü ekleyin ve bazı içerik girin. “Polaroid” kelimesini kullanacağız. Metin yazı tipi stili metin. Metin yazı tipi: Advent Pro
Hizalama Metni: Orta
Metin rengi: Çok koyu gri #474747
Yazı Boyutu:
Masaüstü: 1VW
Tablet + Telefon: 2VW
Uzay metin mektubu: 0.1vw
Yüksek çizgi metin: 1.8em
Boyut ayarlarında genişlik için ‘%100’ yapışkan kullanımı. Genişlik:% 100
Şimdi mesafe mesafeyi ayarlayın. Üst Marj: 1VW
Klon modülü iki kez ve kalan sütuna kopya yerleştirin Yinelenen Görüntüyü Değiştir ve Kopyala Her yinelenen görüntü modülündeki görüntüyü değiştirin. Tasarımınızın ihtiyacı varsa, metin içeriğini de değiştirin. Ayarlar Sütun 1 Arka Plan Sütun 1 satır ayarlarını açarak devam edin. Polaroid bir etki yaratmak için arka planı beyaza ayarlayın. Arka plan rengi: beyaz #ffffff
Mesafe Daha geniş bir alt polaroid limiti yapmak için birkaç alt ped ekleyin. Dolgu Alt: 2VW
Polaroid görselleri tamamlamak için sınır sınırlar ekler. Sınır Genişliği 4 Side: 1VW
Üst sınır genişliği: 2VW
Sağ sınır genişliği: 2VW
Alt sınır genişliği: 1VW
Sol sınır genişliği: 2VW
Sınır rengi: beyaz #ffffff
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek sütun 1 ayarını tamamlar. Kutu Gölgesi: #1
Sütun Ayarlarını Genişlet 1 Sütun ayarlarını genişletmek için Kuvvet Uzatma seçeneğini kullanın. Ana Satır Ayarları penceresine dönün ve ilk sütun sekmesinin sağındaki üç noktayı tıklayın.
‘Öğe Stilini Uzatın’ ve ‘Bu Çizgi boyunca’ seçin.
Sütun 1 Geçerli stili değiştirir, ilk sütundaki dönüşüm ayarlarını ayarlar. Dönüşüm Çeviri: Eksen X -11VW, Eksen Y -6VW
Dönüşüm Dönüş: 341 Derece, İlk Seçenek
Sütun 2 bir sonraki kuvveti değiştirir, ikinci sütun için dönüşüm ayarlarını ayarlayın.
Dönüşüm Çeviri: Eksen X -46W, Eksen y 12vwtransform Döndürme: 31 derece, ilk seçenek
Arka planın yeni bir kısmını ekleyin Yeni bir parça ekleyin ve nane yeşili arka planı o bölüme uygulayın.
Arka Plan Rengi: Yeşil Nane #D2F2D0 Alt bölücü, alt bölücünün bir kısmını verir.
Bölücünün yerleştirilmesi: aşağıda Bölücü stili: #12
Renk Renk: Beyaz #ffffff
Bölme Yüksekliği: 23VW
Varsayılan yatağın mesafesini kaldırın.
Üst dolgu: 0px Sütun yapısının yeni bir satırı ekleyin. 3 sütunlu yeni bir satır ekleyerek devam edin.
Çerçeveyi kullanarak satır stilini kopyalayıp yapıştırın, satırı ilk bölümden kopyalayıp yapıştırın İlk olarak, ilk bölümde satır menüsünün sağındaki üç noktaya tıklayın. ‘Satır Stili Kopyala’ seçeneğini seçin. Ardından, ikinci bölümde satır menüsünün sağındaki üç noktaya tıklayın. ‘Stick Row Style’ı seçin.
Geçerli sütun ayarlarını kopyalayıp yapıştırın, sütun ayarlarını ilk satırdaki kopyalayın ve yeni satırlarda sütun 1 ve 2’ye yapıştırın.
İlk olarak, satır ayarlarını ilk satırda açın. İkincisi, ilk sütun sekmesinin sağ tarafındaki üç noktayı tıklayın ve ‘Öğe Kuvvetini Kopyala’ seçeneğini seçin.
Ardından, yeni satıra gidin ve Ayarlar sekmesini açın.
Son olarak, ilk sütunun sağ tarafındaki üç noktayı tıklayın ve ‘Öğe Stilleri Yapıştır’ ı seçin.
Sütun 1 Geçerli kuvveti değiştirir, Sütun 1’deki dönüşüm kuvvetini ayarlayın.
Dönüşüm Ölçeği:% 75 ikinci eksen Dönüşüm Çeviri: Eksen X -8W, Eksen Y -14VW
Dönüşüm Döndür: 35 Derece İlk seçenek
Sütun 2 daha sonra kuvveti değiştirir, sütun 2’deki dönüşüm kuvvetini değiştirin.
Dönüşüm Çeviri: Eksen x -17w, y Eksen 2VW Dönüşüm Döndür: 346 Derece İlk Seçenek
Tambahkan Modul Gambar Duplikat dan Seret Modul Gambar Sekarang, kembali ke tampilan wireframe untuk menduplikasi dan menyeret dua modul gambar.Pertama, duplikat modul gambar pertama di bagian pertama dua kali.
Kemudian, seret ke kolom pertama dan kedua di bagian kedua. Ubah gambar di setiap modul untuk gambar persegi baru.
Tambahkan Modul Teks Duplikat dan Seret Modul Teks Setelah gambar, lakukan hal yang sama dengan modul teks. Gandakan dari bagian pertama dan seret ke bagian kedua.
Dalam tampilan gambar rangka, duplikat modul teks dari kolom pertama di bagian pertama dua kali.
Sekarang, seret modul teks baru ke kolom 1 dan 2 di bagian kedua. Jika Anda ingin mengubah konten, lakukan sekarang.
Tambahkan Modul Teks ke Kolom 3 Tambah isi Klik pada simbol plus di kolom ketiga dan tambahkan modul teks. Masukkan beberapa konten H2 dan paragraf.
Teks Gaya teks sebagai berikut.
Metin yazı tipi: Advent Pro Hizalama Metni: Orta Warna Teks: Abu-abu Gelap #848484
Yazı Boyutu:
Masaüstü: 1VW
Tablet + Telepon: 1.9vw
Uzay metin mektubu: 0.1vw
Tinggi Baris Teks:
Desktop: 1.2em
Tablet + Telepon: 1.3em
Teks Judul Sekarang, gaya teks H2.
Başlık: H2
Huruf H2: Adamina Berat Huruf H2: Tebal
Warna Huruf H2: Abu-abu Sangat Gelap #444444
Ukuran Huruf H2:
Masaüstü: 2VW
Tablet + Telepon: 3vw
Spasi Huruf H2: 4px
H2 hat yüksekliği:
Desktop: 1.7vw
Tablet + Telepon: 1.5vw
Perekat Kemudian, sesuaikan ukurannya.
Geniş:
Desktop: 60% Tablet: 91%
Telepon: 100%
Modül hizalaması: merkez
Jarak Terakhir, sesuaikan jarak.
Margin Atas: -12vw
Tambahkan Modul Tombol ke Kolom 3 Tambahkan Salinan Klik pada simbol plus di bawah teks dan tambahkan modul tombol. Tambahkan beberapa salinan ke tombol. Penyelarasan Ubah perataan tombol.
Deneyim: Pusatgaya Özel Düğmesi Uygun düğme. Metin Boyutu Düğmesi: Masaüstü: 1VW
Tablet: 2.4vw Telefon: 2.3vw
Düğmenin sınır genişliği: 0px
Metin Renk Düğmesi: Siyah #000000
Mektup Mesafe Düğmesi: 4px
Yazı tipi düğmesi: Advent Pro
Mektup Ağırlığı Düğmesi: Kalın
Mesafe Üst kenar değerini uygular.
Üst Marj: 2VW
Bölücü modülünü düğmenin altındaki sütun 3 görünürlüğüne ekleyin, bölücüyü ve kuvveti aşağıdaki gibi ekleyin.
Görünürlük: Evet Çizgi parlak yeşil renk bölücü verir.
Çizgi rengi: #55F252 Yapıştırıcı bölücü boyutunun boyutunu değiştirin ve tamamlayın!
Ağır bölücü Masaüstü: 7 piksel
Tablet + Telefon: 4px Geniş:
Masaüstü:% 10
Tablet + Telefon:% 30
Modül hizalaması: merkez
Geriye bakalım, çeşitli ekran boyutlarında tamamlanan Polaroid Kahraman’ın tasarımına bakalım. Masaüstü
Hücresel
Bu bir sargı! Bu yazıda, Divi Dönüşüm seçeneğini kullanarak bir Polaroid kahramanı nasıl yeniden oluşturacağınızı gösteriyoruz. Bu, sayfanızın kahramanlarında birçok görüntü görüntülemenin iyi bir yoludur. Bu tasarımın kendi yaratıcı kahramanlarınızın tasarımına ilham vereceğini umuyoruz! Bir sorunuz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.
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
Yaratıcı başlayalım, yeni bir parça ekleyelim, üzerinde çalıştığınız sayfaya yeni bir parça ekleyerek başlayalım. Alt bölücü nane yeşili alt bölücü ekleyin.
Bölücünün yerleştirilmesi: aşağıda
Bölücü stili: #12
Renk Renk: Nane Yeşil #D2F2D0
Bölme Yüksekliği: 23VW
Mesafe Parçanın mesafesini ayarlayın. Üst Marj: 7VW
Alt kenar boşluğu: 0px
Üst ve alt dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Kendi tarafınıza yeni bir satır ekleyerek devam edin. Aşağıdaki sütun yapısını seçin: Yapıştırıcı Şimdi, çizginin boyutunu ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik: 90VW
Maksimum genişlik:% 100
Bir sonraki mesafe, uzay ayarlarında üst ve alt dolguyu ayarlayın. Üst ve alt dolgu: 0px
Sütunu yan yana tutmak için satırın ana öğesine bir satır CSS kodu ekleyin. CSS Custom – Ana Eleman: Ekran: Esnek;
Ekran: Flex;
Resim Modülünü Sütun 1’e Ekle Kare Görüntü Yükle Görüntü modülünü Sütun 1’e ekleyin ve kare bir görüntü yükleyin. Akım hizalama, modülün pürüzsüzlüğünü ayarlayın. Modül hizalaması: merkez
Yapıştırıcı daha sonra, tam genişlik modülü yapın. Tam geniş zorla: Evet
Metin modülünü sütun 1’e ekleyin, içerikleri ekleyin, metin modülünü ekleyin ve bazı içerik girin. “Polaroid” kelimesini kullanacağız. Metin yazı tipi stili metin. Metin yazı tipi: Advent Pro
Hizalama Metni: Orta
Metin rengi: Çok koyu gri #474747
Yazı Boyutu:
Masaüstü: 1VW
Tablet + Telefon: 2VW
Uzay metin mektubu: 0.1vw
Yüksek çizgi metin: 1.8em
Boyut ayarlarında genişlik için ‘%100’ yapışkan kullanımı. Genişlik:% 100
Şimdi mesafe mesafeyi ayarlayın. Üst Marj: 1VW
Klon modülü iki kez ve kalan sütuna kopya yerleştirin Yinelenen Görüntüyü Değiştir ve Kopyala Her yinelenen görüntü modülündeki görüntüyü değiştirin. Tasarımınızın ihtiyacı varsa, metin içeriğini de değiştirin. Ayarlar Sütun 1 Arka Plan Sütun 1 satır ayarlarını açarak devam edin. Polaroid bir etki yaratmak için arka planı beyaza ayarlayın. Arka plan rengi: beyaz #ffffff
Mesafe Daha geniş bir alt polaroid limiti yapmak için birkaç alt ped ekleyin. Dolgu Alt: 2VW
Polaroid görselleri tamamlamak için sınır sınırlar ekler. Sınır Genişliği 4 Side: 1VW
Üst sınır genişliği: 2VW
Sağ sınır genişliği: 2VW
Alt sınır genişliği: 1VW
Sol sınır genişliği: 2VW
Sınır rengi: beyaz #ffffff
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek sütun 1 ayarını tamamlar. Kutu Gölgesi: #1
Sütun Ayarlarını Genişlet 1 Sütun ayarlarını genişletmek için Kuvvet Uzatma seçeneğini kullanın. Ana Satır Ayarları penceresine dönün ve ilk sütun sekmesinin sağındaki üç noktayı tıklayın.
‘Öğe Stilini Uzatın’ ve ‘Bu Çizgi boyunca’ seçin.
Sütun 1 Geçerli stili değiştirir, ilk sütundaki dönüşüm ayarlarını ayarlar. Dönüşüm Çeviri: Eksen X -11VW, Eksen Y -6VW
Dönüşüm Dönüş: 341 Derece, İlk Seçenek
Sütun 2 bir sonraki kuvveti değiştirir, ikinci sütun için dönüşüm ayarlarını ayarlayın.
Dönüşüm Çeviri: Eksen X -22W, Eksen Y 0VW
Dönüşüm Döndür: 10 Derece, İlk Seçenek
Sütun 3 son kuvveti değiştirir, üçüncü sütun için dönüşüm ayarlarını ayarlayın.
Dönüşüm Çeviri: Eksen X -46W, Eksen y 12vwtransform Döndürme: 31 derece, ilk seçenek
Arka planın yeni bir kısmını ekleyin Yeni bir parça ekleyin ve nane yeşili arka planı o bölüme uygulayın.
Arka Plan Rengi: Yeşil Nane #D2F2D0 Alt bölücü, alt bölücünün bir kısmını verir.
Bölücünün yerleştirilmesi: aşağıda Bölücü stili: #12
Renk Renk: Beyaz #ffffff
Bölme Yüksekliği: 23VW
Varsayılan yatağın mesafesini kaldırın.
Üst dolgu: 0px Sütun yapısının yeni bir satırı ekleyin. 3 sütunlu yeni bir satır ekleyerek devam edin.
Çerçeveyi kullanarak satır stilini kopyalayıp yapıştırın, satırı ilk bölümden kopyalayıp yapıştırın İlk olarak, ilk bölümde satır menüsünün sağındaki üç noktaya tıklayın. ‘Satır Stili Kopyala’ seçeneğini seçin. Ardından, ikinci bölümde satır menüsünün sağındaki üç noktaya tıklayın. ‘Stick Row Style’ı seçin.
Geçerli sütun ayarlarını kopyalayıp yapıştırın, sütun ayarlarını ilk satırdaki kopyalayın ve yeni satırlarda sütun 1 ve 2’ye yapıştırın.
İlk olarak, satır ayarlarını ilk satırda açın. İkincisi, ilk sütun sekmesinin sağ tarafındaki üç noktayı tıklayın ve ‘Öğe Kuvvetini Kopyala’ seçeneğini seçin.
Ardından, yeni satıra gidin ve Ayarlar sekmesini açın.
Son olarak, ilk sütunun sağ tarafındaki üç noktayı tıklayın ve ‘Öğe Stilleri Yapıştır’ ı seçin.
Sütun 1 Geçerli kuvveti değiştirir, Sütun 1’deki dönüşüm kuvvetini ayarlayın.
Dönüşüm Ölçeği:% 75 ikinci eksen Dönüşüm Çeviri: Eksen X -8W, Eksen Y -14VW
Dönüşüm Döndür: 35 Derece İlk seçenek
Sütun 2 daha sonra kuvveti değiştirir, sütun 2’deki dönüşüm kuvvetini değiştirin.
Dönüşüm Çeviri: Eksen x -17w, y Eksen 2VW Dönüşüm Döndür: 346 Derece İlk Seçenek
Tambahkan Modul Gambar Duplikat dan Seret Modul Gambar Sekarang, kembali ke tampilan wireframe untuk menduplikasi dan menyeret dua modul gambar.Pertama, duplikat modul gambar pertama di bagian pertama dua kali.
Kemudian, seret ke kolom pertama dan kedua di bagian kedua. Ubah gambar di setiap modul untuk gambar persegi baru.
Tambahkan Modul Teks Duplikat dan Seret Modul Teks Setelah gambar, lakukan hal yang sama dengan modul teks. Gandakan dari bagian pertama dan seret ke bagian kedua.
Dalam tampilan gambar rangka, duplikat modul teks dari kolom pertama di bagian pertama dua kali.
Sekarang, seret modul teks baru ke kolom 1 dan 2 di bagian kedua. Jika Anda ingin mengubah konten, lakukan sekarang.
Tambahkan Modul Teks ke Kolom 3 Tambah isi Klik pada simbol plus di kolom ketiga dan tambahkan modul teks. Masukkan beberapa konten H2 dan paragraf.
Teks Gaya teks sebagai berikut.
Metin yazı tipi: Advent Pro Hizalama Metni: Orta Warna Teks: Abu-abu Gelap #848484
Yazı Boyutu:
Masaüstü: 1VW
Tablet + Telepon: 1.9vw
Uzay metin mektubu: 0.1vw
Tinggi Baris Teks:
Desktop: 1.2em
Tablet + Telepon: 1.3em
Teks Judul Sekarang, gaya teks H2.
Başlık: H2
Huruf H2: Adamina Berat Huruf H2: Tebal
Warna Huruf H2: Abu-abu Sangat Gelap #444444
Ukuran Huruf H2:
Masaüstü: 2VW
Tablet + Telepon: 3vw
Spasi Huruf H2: 4px
H2 hat yüksekliği:
Desktop: 1.7vw
Tablet + Telepon: 1.5vw
Perekat Kemudian, sesuaikan ukurannya.
Geniş:
Desktop: 60% Tablet: 91%
Telepon: 100%
Modül hizalaması: merkez
Jarak Terakhir, sesuaikan jarak.
Margin Atas: -12vw
Tambahkan Modul Tombol ke Kolom 3 Tambahkan Salinan Klik pada simbol plus di bawah teks dan tambahkan modul tombol. Tambahkan beberapa salinan ke tombol. Penyelarasan Ubah perataan tombol.
Deneyim: Pusatgaya Özel Düğmesi Uygun düğme. Metin Boyutu Düğmesi: Masaüstü: 1VW
Tablet: 2.4vw Telefon: 2.3vw
Düğmenin sınır genişliği: 0px
Metin Renk Düğmesi: Siyah #000000
Mektup Mesafe Düğmesi: 4px
Yazı tipi düğmesi: Advent Pro
Mektup Ağırlığı Düğmesi: Kalın
Mesafe Üst kenar değerini uygular.
Üst Marj: 2VW
Bölücü modülünü düğmenin altındaki sütun 3 görünürlüğüne ekleyin, bölücüyü ve kuvveti aşağıdaki gibi ekleyin.
Görünürlük: Evet Çizgi parlak yeşil renk bölücü verir.
Çizgi rengi: #55F252 Yapıştırıcı bölücü boyutunun boyutunu değiştirin ve tamamlayın!
Ağır bölücü Masaüstü: 7 piksel
Tablet + Telefon: 4px Geniş:
Masaüstü:% 10
Tablet + Telefon:% 30
Modül hizalaması: merkez
Geriye bakalım, çeşitli ekran boyutlarında tamamlanan Polaroid Kahraman’ın tasarımına bakalım. Masaüstü
Hücresel
Bu bir sargı! Bu yazıda, Divi Dönüşüm seçeneğini kullanarak bir Polaroid kahramanı nasıl yeniden oluşturacağınızı gösteriyoruz. Bu, sayfanızın kahramanlarında birçok görüntü görüntülemenin iyi bir yoludur. Bu tasarımın kendi yaratıcı kahramanlarınızın tasarımına ilham vereceğini umuyoruz! Bir sorunuz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.
