Divi'de bir organizasyon şeması oluşturmak ister misiniz?
Bir akış şeması düzeninin nasıl oluşturulacağını bilin Divi süreçleri ve fikirleri iletmek için birçok fırsat sunar. Site Web. Bazı durumlarda, çok sayıda öğe içeren son derece karmaşık fikirleri açıklamak için akış şemaları kullanılabilir.
Üzerinde Site Webancak, özellikle duyarlı olmasını istiyorsanız, bu daha karmaşık akış şemalarını elde etmek zor olabilir.
Bu eğitimde size, cihazınızda kullanabileceğiniz kullanışlı bir akış şeması düzenini nasıl oluşturacağınızı göstereceğiz. Site Web, basit, etkili ve duyarlı.
Ayrıca, bunu oluşturmak için yalnızca Divi'nin yerleşik seçeneklerini kullanacağız, böylece özel kod veya eklenti ekleme konusunda endişelenmenize gerek kalmayacak.
Başlayalım!
anket
İşte bu eğitimde oluşturacağımız akış şeması tasarımına hızlı bir bakış.
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Akış Şeması Düzeni Nasıl Oluşturulur
1. Adım: Ortalanmış tanıtım yazısı içeren bir satır oluşturun
Divi'de akış şeması düzeni oluşturmaya başlamak için, ortalanmış tanıtım yazısı içeren bir satır oluşturarak başlayacağız. Bu, akış şemasının ilk öğesi olacaktır.
Bölüm Dolgusu
İlk olarak, varsayılan bölüm için bölüm ayarlarını açın ve alt dolguyu 0px olarak ayarlayın.
- Dolgu (Alt): 0px
Hat
Bölümün içinde, bir sütuna bir satır ekleyin.
Hat ayarlarını açın ve aşağıdaki tasarım ayarlarını güncelleyin:
- Oluk genişliği: 1
- Dolgu (Üst ve Alt): 0 piksel
Blurb Mod Tasarımı
İlk akış şeması elemanımızı oluşturmak için bir Blurb modülü kullanacağız.
Satır içi bir Blurb modülü ekleyin.
Modül ayarları
Blurb modülü ayarlarını açın. sekmenin altında içerik, varsayılan başlığı ve gövde metnini koruyabilirsiniz.
Ardından görüntüyü küçük bir simge görüntüsüyle güncelleyin veya yerleşik Divi simgelerinden birini kullanın. Bu eğitim için, aşağıdaki simgelerden yararlanıyoruz: Kitle Fonlaması Düzen Paketi .
Ardından modüle bir arka plan rengi verin:
- Arkaplan: #f8f8f8
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Metin Hizalama: Ortalanmış
- Maksimum Genişlik: 400 piksel (Masaüstü ve Tablet), %90 (Telefon)
- Hizalama Modülü: Merkez
- Dolgu: %6 (Üst ve Alt), %3 (Sol ve Sağ)
Ardından, Blurb Modülüne aşağıdaki gibi bir kenarlık verin:
- Kenar Genişliği: 2px
Adım 2: Dikey bir çizgi ve bir ok ile bağlantı hattının oluşturulması
Akış şeması düzenimizin bir sonraki bölümünde, ortada dikey bir çizgi ve ok bulunan bir dizi bağlayıcı oluşturacağız. Bu hat hatları birbirine bağlamak için kullanılacaktır. içindekiler sayfanın altına doğru devam etmesi gereken organizasyon şeması.
Bu durumda, Blurbn modülü ortalanmış olarak bir önceki satırın altına bir satır ve bir ok ekleyerek akış şemasına başlamak istiyoruz.
Yeni bir satır oluşturun ve stilleri önceki satırdan kopyalayın/yapıştırın
Bunu yapmak için önceki satırın altındaki bir sütuna yeni bir satır ekleyin.
Kullanmak " Diğer Modül Ayarları (veya seçeneklere sağ tıklayın), yukarıdaki önceki satırdaki stilleri kopyalayın ve yeni satıra yapıştırın.
Dikey çizgi ayırıcı oluşturma
Dikey çizgi ayırıcıyı oluşturmak için çizgiye yeni bir Bölücü modülü ekleyin.
Ayırıcı ayarları altında tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Çizgi Rengi: #333333
- Çizgi Konumu: Alt
- Bölücü Ağırlığı: 150px
- Genişlik: 2 piksel
- Hizalama Modülü: Merkez
- Kenar Boşluğu: -1px(Alt)
Sekmenin altında gelişmiş, taşmayı aşağıdaki gibi gizleyin:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Blurb modülüyle bir ok oluşturun
Ardından, bir sunum modülü kullanarak bölme çizgisinin üzerine oturacak bir ok simgesi oluşturacağız.
Oku oluşturmak için bölücünün altına yeni bir Blurb modülü ekleyin.
Bulanıklık Modu Ayarları
Modül ayarları altında, varsayılan başlığı ve gövde metnini kaldırın ve Simgeyi Kullan, ardından ok simgesini seçin (ekran görüntüsüne bakın).
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Simge Rengi: #bbbbbb
- Görüntü/Simge Hizalama: orta
- Simge Yazı Tipi Boyutunu Kullan: EVET
- Simge Yazı Tipi Boyutu: 50px (Masaüstü), 40px (Tablet ve Telefon)
- Maksimum Genişlik: %50
- Hizalama modülü: merkez
- Yükseklik: 50px (Masaüstü), 40px (Tablet ve Telefon)
Sekmenin altında gelişmiş, aşağıdaki CSS'yi ekleyin Bulanık Görüntü :
margin-bottom: 0px;
background: #ffffff;
Oku satırın üzerine yerleştirmek için aşağıdakileri güncelleyin:
- Pozisyon: Mutlak
- Yer: Merkez
- Z İndeksi: 10
Adım 3: Akış şemasının bitişik bölümleri için bir çizgi oluşturma
Bağlayıcı sırası tamamlandığında, akış şeması tasarımına devam etmek için birkaç bitişik Blurb modülünden oluşan başka bir sıra ekleyeceğiz.
Çizgiyi eklemek için, ilk satırı (düzenin üstünde oluşturduğumuz ortalanmış tanıtım yazısı olan çizgi) bağlayıcı çizginin altına kopyalayıp yapıştırmanız yeterlidir.
Hat Ayarları'nı açın ve aşağıdakileri güncelleyin:
- Maksimum Genişlik: %50
- Kenar genişliği: 2 piksel
Akış şemasının sol tarafı
Artık kenarlığımız çizgiye eklendiğine göre, Blurb modülünü sol kenar çizgisinin üzerine konumlandıracağız.
Bunu yapmak için aşağıdaki tasarım parametrelerini güncelleyin:
- Hizalama modülü: sol
- Kenar Boşluğu: 70px(Üst ve Alt)
- Dönüştür X eksenini çevir: -%50
Bu, Blurb modülünün sınır çizgisinin üzerinde yatay olarak ortalanması için anahtardır.
Akış şemasının sağ tarafı
Sağ kenar çizgisine başka bir Blurb Modülü eklemek için mevcut tanıtıcıyı çoğaltın.
Tanıtıcıyı sağ kenar çizgisine yerleştirmek için sekmeye gidin gelişmiş ve ona mutlak bir konum verin:
- Pozisyon: Mutlak
- Konum: Merkez sağ
Ardından, aşağıdaki seçenekleri güncelleyin:
- Kenar boşlukları: yok
- Dönüştür Y eksenini çevir: -%50
- Dönüştür X eksenini çevir: %50
Her sınır çizgisinin köşelerine oklar eklendi
Akış şemasını satırların ilerlediği yön hakkında daha net hale getirmek için satır kenarlık satırlarına ek ok simgeleri ekleyeceğiz.
Sol üst ok
Sol üst kenarlık satırına ok eklemek için bağlayıcı satırında oluşturduğumuz ok Blurb modülünü çoğaltın ve bitişik Blurb modüllerini içeren satırın içine sürükleyin.
Duplicate Arrow Blurb modülünü açın ve simgeyi sola dönük bir okla değiştirin.
Ardından, modül konumunun konumunu güncelleyin:
- Konum: Sol üst
Son olarak, transform translate seçeneğini aşağıdaki gibi güncelleyin:
- Dönüştür Y eksenini çevir: -%50
Sağ üst ok
Sağ üst kenar çizgisine oturan bir ok oluşturmak için oku çoğaltın " sol üst köşede sadece yarattığımız. Ardından ayarları açın ve konum konumunu değiştirin:
- Konum: Sağ üst
Ayrıca ok simgesini sağa dönük bir okla güncelleyin.
Sol aşağı ok
Sol alt kenar çizgisine oturan bir ok oluşturmak için oku çoğaltın " sağ üst sadece yarattığımız.
Ardından ayarları açın ve konum konumunu değiştirin:
- Konum: sol alt
Ardından, Çevirmeyi Dönüştür seçeneğini güncelleyin:
- Dönüştür Y eksenini çevir: %50
Sağ aşağı ok
Sağ alt kenar çizgisine oturan bir ok oluşturmak için oku çoğaltın " sol altta sadece yarattığımız.
Ardından ayarları açın ve konum konumunu değiştirin:
- Yer: Sağ alt
Ayrıca ok simgesini sola dönük bir okla güncelleyin.
Tüm oklar yerleştirildikten sonra, her biri için etiketleri güncelleyebilirsiniz. katman görünümü .
Adım 4: Başka bir bağlayıcı hattı ekleme
Akış şemasının iki bitişik kısmı ve tüm oklarla çizgiyi tamamladıktan sonra, başka bir bağlayıcı çizgi ekleyerek akış şemasına devam edebiliriz.
Bunu yapmak için, yukarıda oluşturduğumuz bağlayıcı çizgiyi çoğaltın ve akış şemasının bitişik kısmından Blurb modüllerini içeren satırın altına yapıştırın.
Adım 5: Düz Kenarlı Çizgi Bağlayıcı ile Akışı Özelleştirme
Mevcut akış şeması tasarımında, akış en üstteki elemanla başlar, sonra sağ ve sol komşu elemanlara dallanır, sonra ortaya döner ve bir sonraki orta elemana gider.
Akışı özelleştirmek için, akış şemasını soldaki bitişik sunum öğelerinde duracak ve sağdaki sunum öğesinden devam edecek şekilde özelleştirebilmemiz için bölümü çoğaltacağız.
Yinelenen bölüm
Bunu yapmak için önce akış şemasını içeren bölümün tamamını çoğaltın.
Başka Bir Sol Blurb Modülü Ekleyin
Yinelenen bölümde (altta), iki bitişik modülü içeren satırdaki sol Blurb modülünü bulun. Ardından, doğrudan aşağıda yeni bir tane oluşturmak için soldaki tanıtıcıyı çoğaltın.
Alt okları ve kenarlığı kaldırın
Ardından, sol alt oku ve sağ alt oku silin.
Birden çok tanıtım yazısı içeren satır için satır ayarlarını açın ve alt kenarlığı kaldırın:
- Alt Kenar Genişliği: 0px
Düz sınır çizgisi bağlayıcısıyla bir çizgi oluşturun
Şimdi akış şeması tasarımını, çizginin sağ sınır çizgisini aşağıdaki bağlantı çizgisine bağlayacak bir sağ sınır çizgisi konektörü ile özelleştirmek istiyoruz.
Bunu yapmak için başka bir çizgi oluşturacağız ve sağ tarafa özel bir ayırıcı çizgi ve bir anahat oku ekleyeceğiz.
Üç düzen ile mevcut satırın bir sütun altına yeni bir satır ekleyin.
Sekmesi altında satır ayarlarını aşağıdaki gibi güncelleyin Dizayn :
- Oluk Genişliği: 1
- Maksimum Genişlik: %50
- Dolgu: 0px (Üst ve Alt)
Ardından, çizgiye düz bir kenarlık ekleyin.
- Sağ Kenar Genişliği: 2px
Ardından satıra bir Bölücü modülü ekleyin.
Ayırıcı ayarlarını aşağıdaki gibi güncelleyin:
- Çizgi Rengi: #333333
- Çizgi Konumu: Alt
- Bölücü Ağırlığı: 2px
- Genişlik: %50
- Kenar Boşluğu: -2px(Alt)
Gelişmiş sekmesi altında, ayırıcının konumunu güncelleyin:
- Pozisyon: Mutlak
- Yer: Sağ alt
Ayırıcı yerindeyken, ilk bölümün üçüncü satırının sağ alt okundan Blurb modülünü kopyalayın ve sağ ayırıcı çizgi ile sıraya yapıştırın.
Az önce çoğalttığınız ve taşıdığınız okun Blurb modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Pozisyon: Varsayılan
- Hizalama modülü: sağ
Sol sınır çizgisi akış durdurma
Şu anda, sol sınırın bir kısmı, sol alt taraftaki tanıtım yazısının altında gösteriliyor. Gizlemek için bu alt tanıtım yazısının alt kenar boşluğunu kaldırmanız yeterlidir.
Adım 6: Çizgiyi bir sol kenar çizgi konektörüyle güncelleme
Akış çizelgeniz ayrıca bir sol sınır çizgisi bağlayıcısına ihtiyaç duyabilir. Bunu oluşturmak için, sağ sınır çizgisi konektörü ile çizgiyi aşağıdaki gibi güncelleyebiliriz:
- Sol Boprder Genişliği: 2px
- Sağ Kenar Genişliği: 0
Satır içindeki ayırıcıyı yeni bir konumla güncelleyin:
- Konum: sol alt
Ardından, ok hizalamasını güncelleyin:
- Hizalama modülü: sol
Ve simgeyi sağ okla değiştirin.
Nihai sonuç
Son sonucu kontrol edin.
DIVI'yı şimdi indirin!!!
Sonuç
Bu öğreticide, süreci ve fikirleri başkalarına iletmek için herkesin kullanabileceği kullanışlı bir akış şeması düzeni oluşturduk. ziyaretçi çarpıcı bir duyarlı tasarım ile.
Hizmetleri veya tasarım sürecini sergilemek, bir infografik oluşturmak veya müşterilere süreç boyunca rehberlik etmek için bunu kullanın. içindekiler yeni bir şekilde.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
