Metin görüntünün etrafına nasıl sarılır Divi (3 yol)
Metin görüntünün etrafına sarılması, dergiler ve gazeteler gibi yazılı medyada bulunan en yaygın genel tasarım tekniğidir. Ancak bunu web’de, özellikle blog yayınları için de bulabilirsiniz. Metni gerçek görüntünün etrafına sarmak, WYSIWYG düzenleyicisinde basit seviyelendirmeyi ayarlamayı içeren WordPress’in standart kısmıdır. Tek sorunun, varsayılan WordPress düzenleyicisini kullanarak sayfa stilinizi ayarlamak zordur. Divi’nin yardımcı olabileceği yer burası! Bu öğreticide, metni görüntünün etrafına sarmak için divi kullanmanın 3 yolunu göstereceğim. Bu, tasarım konusunda size yardımcı olmak için Divi mukavemetine sahip klasik bir çıktı düzeni oluşturmanızı sağlayacaktır. Tartışacağımız şey bu:
WYSIWYG Düzenleyicisi ile Metin Modülüne Görüntünün (ve Engelli Alıntı) etrafına metin nasıl sarılır
Divi’deki metin modülünün yanındaki kayan bir görüntü modülü ile metni görüntünün etrafına nasıl sarılır
İki benzersiz sütunun düzeni için metin merkezi görüntünün etrafına nasıl sarılır
Bu öğretici görüntüye konsantre olsa da, metni Divi’deki herhangi bir modülün etrafına sarmak için aynı işlemi kullanabilirsiniz. Aşağıdaki gizlice göz atma, bugün yapacağımız ana tasarımdan gizlice bir bakış.
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 ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için ihtiyacınız olan şey, ihtiyacınız olan tek şey divi ve bazı resimler.
Divi – Divi temasının yüklü ve etkin olduğundan emin olun. Tasarımızı baştan ön tarafta (görsel yapımcı) kullanarak yapacağız.
Resim – Ayrıca, öğreticide kullanmak için en az bir 400 piksel boyut 250 piksel görüntüye sahip olduğunuzdan emin olun.
Hazır olduğunuzda, WordPress kontrol panelinizi açın ve sayfa> Yeni Ekle’ye gidin. Yeni sayfa başlığınızı verin ve ön tarafta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın!
WYSIWYG WordPress düzenleyicisi ile metin modülündeki görüntünün ve metin modülündeki tırnakların etrafına metin nasıl sarılır. Divi metin modülü aynı WordPress WYSIWYG düzenleyicisine sahip olduğundan, WordPress kullanıcılarının metni görüntünün etrafına sarmak için her zaman kullandıkları yöntemi kullanabiliriz. İşte nasıl yapılacağı. Bir sütun satırı ile normal bir bölüm oluşturun, ardından metin modülünü satıra ekleyin.
Metin modülünün içeriğini kopyanızla güncelleyin. Şimdilik Lorem Ipsum’un birkaç paragrafı kullanıyorum. Şimdi yapmadıysanız, içerik düzenleyicisindeki Visual sekmesini seçin. Ardından, bir resim eklemek istediğiniz içerik alanının üstüne tıkladığınızdan ve Medya Ekle düğmesine tıkladığınızdan emin olun. Medya Kütüphanesi açılır penceresinde kullanmak istediğiniz resmi seçin. Ekran ayarlarının altında, seviye alma seçenekleri için sol veya sağ seçin. Bu örnek için resmi sola konumlandırmak istiyorum. WordPress, resminizi sola çekecek olan görüntünüze (“Alignleft” olarak adlandırılır) bir sınıf ekleyecektir. Eklenen şamandıra özelliği, metnin görüntüyü sarmasına izin verecektir. WordPress ayrıca görüntü ve çevre metin arasında biraz mesafe sağlamak için bir marj kullanarak görüntünün etrafına bir tampon ekleyecektir. Ve elbette, doğru tesviye görüntüsünü verirseniz, görüntü metnin görüntüyü sarmasına izin vererek sağa doğru yüzer. Metni metin modülündeki Blockquote’un etrafına sarmak için benzer teknikler de kullanabilirsiniz. Bunu yapmak için, içerik düzenleyicisini kullanarak bir blokquote oluşturun. Ardından Blockquote Style Blockquote için varsayılan metin modülü ayarlarını kullanır. Ardından içerik düzenleyicisine dönün ve metin sekmesine geçin. Ardından bloke ettiği bazı boşluklar yapmak için bloke etiketine bazı çizgiler ekleyin ve sola sıkın. HTML Blockquote böyle görüneceksiniz. Bu bir
blokequote Şimdi metin Blockquote’u saracaktır.
Metni Divi’deki metin modülünün yanındaki kayan bir görüntü modülü ile görüntünün etrafına nasıl sarılır Metni görüntü modülünün etrafına sarmak için metin modülünün yanındaki tüm görüntü modülünü yakalayabiliriz. Bu, yukarıdaki WordPress düzenleyicisini kullanmak için tercih edilen bir yöntem olabilir, çünkü görüntü etiketine bir harici stil satır eklemek yerine Divi Maker ayarlarını kullanarak görüntünüzün tam stilini kontrol etmenizi sağlar. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından, seçtiğiniz görüntü ile görüntü modülünü satıra ekleyin. Kullandığım resim hayır kurumu düzeni paketinden geliyor ve 400 piksel 250 piksel ölçüyor. Ardından, bazı yapay metin içeriğiyle görüntü modülünün altına metin modülünü ekleyin.
Şimdi iki modül yerine, metin modülünün solundaki görüntüyü yakalamamız gerekiyor. Bunu yapmak için, görüntü modülü ayarlarını açın ve ana öğelere aşağıdaki özel CSS ekleyin: şamandıra: sol; Ardından, tamponu yapmak için özel görüntü marjını güncelleyin Metni resmin etrafına sarmamız gerekiyor: Özel Marj:% 2 üst,% 2 daha düşük,% 2 sağ Sonuç bu. Ve görüntüyü sağa göstermek istiyorsanız, görüntü modülü ayarlarını açın ve CSS’yi aşağıdakilerle değiştirin: şamandıra: doğru;
Bu örnekte, ortadaki görüntü modülünün etrafına iki metin sütunun nasıl sarılacağınızı göstereceğim. Bu, benzersiz bir dergi veya gazete tarzı düzeni oluşturmanızı sağlar. Ancak, “şamandıra: merkez” CSS özelliği olmadığından, bu tasarımın çalışması için düzen ile biraz yaratıcı olmalıyız. İşte nasıl yapılacağı. Başlamak için merkezi bir görüntü ile üst sıra içeriğini oluşturma, bir satır sütunla yeni bir normal parça oluşturun. Ardından görüntü modülünü satırınıza ekleyin. 400 piksel kez 250 piksel ölçen resimler yükleyin. Bu tasarım için boyut doğru olmalıdır. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Maks: 400 piksel (masaüstü),% 100 (tablet) Modül Hizalama: Orta Dolma Özel:% 2 üst,% 2 daha düşük,% 2 sol,% 2 sağ ayarlarınızı kaydedin ve satırı açın Ayarlar. Alt yatak sırasını çıkarın. Pilding Custom: 0px aşağıda Görüntüler içeren satırın altında iki metin sütunu oluşturun, iki sütunlu yeni bir satır oluşturun. Sütun 1’e, birkaç yapay içeriğe sahip bir metin modülü ekleyin. Ardından metin modülünü kopyalayın ve ikinci metin sütunu için 2 sütuna yapıştırın. Resimler için ihtiyacımız olan alanı yapmak için yüzen bölücü ile boş bir alan oluşturma, bölücü modülünü kullanabiliriz. Sol sütunda, görüntünün yarı boyutlu bir bölücü modülü yapacağız ve metin modülümüzün bölücüyü sarması için sağa doğru sıkacağız. Sonra sağ sütunda resimden başka bir yarı boyutlu bariyer yapacağız ve sola sıkacağız. Bunu yapmak için, bir bölücü modülü oluşturun ve metin modülünün hemen üzerine yerleştirin. Daha sonra kompozisyon modülü ayarlarını aşağıdaki gibi güncelleyin: Divisor göster: geniş değil: 200 piksel yükseklik: 250 piksel yüksekliğin yüksekliğe eşit olduğundan emin olun Daha önce yaptığınız görüntü ve resmin genişliğinin genişliği. Hücresel için, tabletler ve cep telefonlarında bölücüyü devre dışı bırakmak istiyoruz. Bunu yapmak için, tabletlerin ve cep telefonlarının görünümünü devre dışı bırakmak için görünürlük ayarlarını güncelleyin. Artık ilk bölücümüzün yapıldığına göre, bölücüyü kopyalayın ve metin modülünün üzerindeki modülünü sütun 2’deki yapıştırın. Dahası, bölücümüzü yüzmemiz gerekiyor. Bunu yapmak için, Sütun 1’deki bölücü ayarlarını açın ve ana öğelere aşağıdaki özel CSS ekleyin: şamandıra: doğru; Ardından, sütun 2’deki bölücü modülü ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: şamandıra: sol; Görüntüleri özel bir marjla yerleştirmek için harekete geçirmemiz gerektiğine göre, görüntülerimizi ilk sırada düşürmektir, böylece bölücümüzle yaptığımız alana sığar. Görüntü modülü ayarlarını açın ve aşağıdaki özel marjı ekleyin: Özel marj: -250 piksel alt (masaüstü), 20 piksel (tablet) Bu şimdiye kadar sonuçtur. Başlığı son adımın bu bölümüne ekleyin isteğe bağlıdır, ancak başlığı bölüme eklemek istiyorsanız, bir metin modülü oluşturun ve resmin üzerine yerleştirin. Ardından metin modülüne aşağıdaki içeriği ekleyin:
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için ihtiyacınız olan şey, ihtiyacınız olan tek şey divi ve bazı resimler.
Divi – Divi temasının yüklü ve etkin olduğundan emin olun. Tasarımızı baştan ön tarafta (görsel yapımcı) kullanarak yapacağız.
Resim – Ayrıca, öğreticide kullanmak için en az bir 400 piksel boyut 250 piksel görüntüye sahip olduğunuzdan emin olun.
Hazır olduğunuzda, WordPress kontrol panelinizi açın ve sayfa> Yeni Ekle’ye gidin. Yeni sayfa başlığınızı verin ve ön tarafta Divi Builder kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın!
WYSIWYG WordPress düzenleyicisi ile metin modülündeki görüntünün ve metin modülündeki tırnakların etrafına metin nasıl sarılır. Divi metin modülü aynı WordPress WYSIWYG düzenleyicisine sahip olduğundan, WordPress kullanıcılarının metni görüntünün etrafına sarmak için her zaman kullandıkları yöntemi kullanabiliriz. İşte nasıl yapılacağı. Bir sütun satırı ile normal bir bölüm oluşturun, ardından metin modülünü satıra ekleyin.
Metin modülünün içeriğini kopyanızla güncelleyin. Şimdilik Lorem Ipsum’un birkaç paragrafı kullanıyorum. Şimdi yapmadıysanız, içerik düzenleyicisindeki Visual sekmesini seçin. Ardından, bir resim eklemek istediğiniz içerik alanının üstüne tıkladığınızdan ve Medya Ekle düğmesine tıkladığınızdan emin olun. Medya Kütüphanesi açılır penceresinde kullanmak istediğiniz resmi seçin. Ekran ayarlarının altında, seviye alma seçenekleri için sol veya sağ seçin. Bu örnek için resmi sola konumlandırmak istiyorum. WordPress, resminizi sola çekecek olan görüntünüze (“Alignleft” olarak adlandırılır) bir sınıf ekleyecektir. Eklenen şamandıra özelliği, metnin görüntüyü sarmasına izin verecektir. WordPress ayrıca görüntü ve çevre metin arasında biraz mesafe sağlamak için bir marj kullanarak görüntünün etrafına bir tampon ekleyecektir. Ve elbette, doğru tesviye görüntüsünü verirseniz, görüntü metnin görüntüyü sarmasına izin vererek sağa doğru yüzer. Metni metin modülündeki Blockquote’un etrafına sarmak için benzer teknikler de kullanabilirsiniz. Bunu yapmak için, içerik düzenleyicisini kullanarak bir blokquote oluşturun. Ardından Blockquote Style Blockquote için varsayılan metin modülü ayarlarını kullanır. Ardından içerik düzenleyicisine dönün ve metin sekmesine geçin. Ardından bloke ettiği bazı boşluklar yapmak için bloke etiketine bazı çizgiler ekleyin ve sola sıkın. HTML Blockquote böyle görüneceksiniz. Bu bir
blokequote Şimdi metin Blockquote’u saracaktır.
Metni Divi’deki metin modülünün yanındaki kayan bir görüntü modülü ile görüntünün etrafına nasıl sarılır Metni görüntü modülünün etrafına sarmak için metin modülünün yanındaki tüm görüntü modülünü yakalayabiliriz. Bu, yukarıdaki WordPress düzenleyicisini kullanmak için tercih edilen bir yöntem olabilir, çünkü görüntü etiketine bir harici stil satır eklemek yerine Divi Maker ayarlarını kullanarak görüntünüzün tam stilini kontrol etmenizi sağlar. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından, seçtiğiniz görüntü ile görüntü modülünü satıra ekleyin. Kullandığım resim hayır kurumu düzeni paketinden geliyor ve 400 piksel 250 piksel ölçüyor. Ardından, bazı yapay metin içeriğiyle görüntü modülünün altına metin modülünü ekleyin.
Şimdi iki modül yerine, metin modülünün solundaki görüntüyü yakalamamız gerekiyor. Bunu yapmak için, görüntü modülü ayarlarını açın ve ana öğelere aşağıdaki özel CSS ekleyin: şamandıra: sol; Ardından, tamponu yapmak için özel görüntü marjını güncelleyin Metni resmin etrafına sarmamız gerekiyor: Özel Marj:% 2 üst,% 2 daha düşük,% 2 sağ Sonuç bu. Ve görüntüyü sağa göstermek istiyorsanız, görüntü modülü ayarlarını açın ve CSS’yi aşağıdakilerle değiştirin: şamandıra: doğru;
Ve marj mesafesini aşağıdakilere güncelleyin: Özel kenar:% 2 üst, 2 $ altında,% 2 kaldı
Sonuç bu. Bu tasarımı birkaç sütun halinde kullanarak, hizmetlerinizi görüntülemek için bir metin ambalaj tasarımı oluşturmak için bu ayarı birkaç sütun halinde de kullanabilirsiniz. Bunu yapmak için, satır sütununuzun düzenini iki sütuna değiştirin. Ardından, tarayıcının farklı genişliğine yanıt vermek için görüntüdeki maksimum genişlik yüzdesinin değerini verin. Maksimum genişlik:% 33.33 (masaüstü),% 100 (cep telefonu) Görüntüleri ve metin modüllerini ilk sütundan kopyalayın ve sütun 2’ye yapıştırın. Ardından içeriği ve resimleri gerektiği gibi güncelleyin. İşte burada. Sonuç bu. İki benzersiz sütunun düzeni için metin görüntü veya merkezi modülün etrafına nasıl sarılırBu örnekte, ortadaki görüntü modülünün etrafına iki metin sütunun nasıl sarılacağınızı göstereceğim. Bu, benzersiz bir dergi veya gazete tarzı düzeni oluşturmanızı sağlar. Ancak, “şamandıra: merkez” CSS özelliği olmadığından, bu tasarımın çalışması için düzen ile biraz yaratıcı olmalıyız. İşte nasıl yapılacağı. Başlamak için merkezi bir görüntü ile üst sıra içeriğini oluşturma, bir satır sütunla yeni bir normal parça oluşturun. Ardından görüntü modülünü satırınıza ekleyin. 400 piksel kez 250 piksel ölçen resimler yükleyin. Bu tasarım için boyut doğru olmalıdır. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Maks: 400 piksel (masaüstü),% 100 (tablet) Modül Hizalama: Orta Dolma Özel:% 2 üst,% 2 daha düşük,% 2 sol,% 2 sağ ayarlarınızı kaydedin ve satırı açın Ayarlar. Alt yatak sırasını çıkarın. Pilding Custom: 0px aşağıda Görüntüler içeren satırın altında iki metin sütunu oluşturun, iki sütunlu yeni bir satır oluşturun. Sütun 1’e, birkaç yapay içeriğe sahip bir metin modülü ekleyin. Ardından metin modülünü kopyalayın ve ikinci metin sütunu için 2 sütuna yapıştırın. Resimler için ihtiyacımız olan alanı yapmak için yüzen bölücü ile boş bir alan oluşturma, bölücü modülünü kullanabiliriz. Sol sütunda, görüntünün yarı boyutlu bir bölücü modülü yapacağız ve metin modülümüzün bölücüyü sarması için sağa doğru sıkacağız. Sonra sağ sütunda resimden başka bir yarı boyutlu bariyer yapacağız ve sola sıkacağız. Bunu yapmak için, bir bölücü modülü oluşturun ve metin modülünün hemen üzerine yerleştirin. Daha sonra kompozisyon modülü ayarlarını aşağıdaki gibi güncelleyin: Divisor göster: geniş değil: 200 piksel yükseklik: 250 piksel yüksekliğin yüksekliğe eşit olduğundan emin olun Daha önce yaptığınız görüntü ve resmin genişliğinin genişliği. Hücresel için, tabletler ve cep telefonlarında bölücüyü devre dışı bırakmak istiyoruz. Bunu yapmak için, tabletlerin ve cep telefonlarının görünümünü devre dışı bırakmak için görünürlük ayarlarını güncelleyin. Artık ilk bölücümüzün yapıldığına göre, bölücüyü kopyalayın ve metin modülünün üzerindeki modülünü sütun 2’deki yapıştırın. Dahası, bölücümüzü yüzmemiz gerekiyor. Bunu yapmak için, Sütun 1’deki bölücü ayarlarını açın ve ana öğelere aşağıdaki özel CSS ekleyin: şamandıra: doğru; Ardından, sütun 2’deki bölücü modülü ayarlarını açın ve ana öğeye aşağıdaki özel CSS ekleyin: şamandıra: sol; Görüntüleri özel bir marjla yerleştirmek için harekete geçirmemiz gerektiğine göre, görüntülerimizi ilk sırada düşürmektir, böylece bölücümüzle yaptığımız alana sığar. Görüntü modülü ayarlarını açın ve aşağıdaki özel marjı ekleyin: Özel marj: -250 piksel alt (masaüstü), 20 piksel (tablet) Bu şimdiye kadar sonuçtur. Başlığı son adımın bu bölümüne ekleyin isteğe bağlıdır, ancak başlığı bölüme eklemek istiyorsanız, bir metin modülü oluşturun ve resmin üzerine yerleştirin. Ardından metin modülüne aşağıdaki içeriği ekleyin:
Nasıl verileceği hakkında daha fazla bilgi edinin
Daha sonra metin ayarlarını aşağıdaki gibi güncelleyin: #000000 Başlık 2 Yazı Tipi: Playfair Ekran Başlık 2 Metin: Orta Başlık 2 Renk Metin: #FFFFFF POS 2 Yüksek Satır: 2Mjusty Metin Görüntünün etrafına metin sararken, özellikle metin bu şekilde ortasındaysa, çevredeki metnin gerekçesini kullanmak her zaman iyi bir fikirdir. Bu durumda, tek yapmamız gereken metin içeriğimizi içeren iki metin modülünü haklı çıkarmak için metnin yönünü değiştirmek.
Buradaki nihai sonuç nihai sonuçtur. Ve burada tablet ve cep telefonu ekranında. Son zihin, metnin görüntünün etrafına nasıl sarılacağını bilir, içeriğinizin gerçekten profesyonel ve okunması kolay görünmesini sağlar. Konsept oldukça düz. Tek yapmanız gereken görüntünüzü sağa veya sola göstermek ve sonra arabellek için görüntünün etrafında özel bir alan kullanmaktır. Ve sevdiğim şey, metni Divi’deki tüm içerik türlerine sarmak için herhangi bir modül (sadece resimler değil) tutabilmenizdir. Umarım bu size bir sonraki projeniz için biraz ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!