Divi'de Akış Şeması Düzeni Nasıl Oluşturulur
Yayınlanan: 2021-07-14Divi'de bir akış şeması düzeninin nasıl oluşturulacağını bilmek, bir web sitesinde süreçleri ve fikirleri iletmek için birçok fırsat sunar. Bazı durumlarda, çok sayıda öğe içeren son derece karmaşık fikirleri açıklamak için akış şemaları kullanılabilir. Bununla birlikte, bir web sitesinde, özellikle duyarlı olmasını istiyorsanız, bu daha karmaşık akış çizelgelerini elde etmek zor olabilir.
Bu eğitici yazıda, web sitenizde kullanabileceğiniz basit, etkili ve duyarlı bir pratik akış şeması düzeninin nasıl oluşturulacağını göstereceğiz. Temel olarak, kendi ihtiyaçlarınıza göre kolayca özelleştirebileceğiniz bir akış şeması düzeni oluşturmak için Divi kenarlıkları, ayırıcılar, tanıtım yazıları ve dönüştürme seçenekleriyle yaratıcı olacağız. Ayrıca, onu oluşturmak için yalnızca Divi'nin yerleşik seçeneklerini kullanacağız, bu nedenle özel kod veya eklenti ekleme konusunda endişelenmenize gerek yok.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız akış şeması tasarımına hızlı bir bakış.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Akış Şeması Düzeni Nasıl Oluşturulur
Adım 1: Ortalanmış Bir Bulanıklıkla Bir Satır Oluşturma
Divi'de akış şeması düzeni oluşturmaya başlamak için, ortalanmış bir tanıtım yazısı içeren bir satır oluşturmaya başlayacağız. Bu, akış şemasındaki ilk öğe 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.
Sıra
Bölümün içine tek sütunlu bir satır ekleyin.
Satır ayarlarını açın ve aşağıdaki tasarım ayarlarını güncelleyin:
- Oluk Genişliği: 1
- Dolgu: 0 piksel üst, 0 piksel alt
Modüller ve satırlar arasında fazladan boşluk eklenmediğinden emin olmak için bu iki tasarım ayarı, bu akış şeması düzenindeki tüm satırlar için kullanılacaktır.
Blurb Modülü Tasarımı
İlk akış şeması öğemizi oluşturmak için bir tanıtıcı modül kullanacağız.
Satıra yeni bir tanıtım yazısı modülü ekleyin.
Bulanıklık Ayarları
Bulanıklaştırma ayarlarını açın. İçerik sekmesi altında, varsayılan Başlık 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 Crowdfunding Layout Pack'teki simgeleri kullanacağım.
Ardından tanıtım yazısına bir arka plan rengi verin:
- Arka Plan Rengi: #f8f8f8
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Metin Hizalama: Merkez
- Maksimum Genişlik: 400 piksel (masaüstü ve tablet), %90 (telefon)
- Modül Hizalaması: Merkez
- Dolgu: %6 üst, %6 alt, %3 sol, %3 sağ
NOT: Bu tanıtım yazısı boyutu, akış şeması düzenindeki tüm tanıtım yazıları tarafından paylaşılacaktır. Bu boyut, bu düzen için işe yarar çünkü akış şemasında hiçbir zaman ikiden fazla bitişik (yan yana) tanıtım yazısı olmayacaktır. Bu, tasarımı duyarlı tutmamıza ve tablet ve telefonda da harika görünmemize olanak tanır.
Ardından, tanıtım yazısına aşağıdaki gibi bir kenarlık verin:
- Kenar Genişliği: 2px
Adım 2: Dikey Çizgi ve Ok ile Bağlayıcı Satırını Oluşturma
Akış şeması düzenimizin bir sonraki kısmı için, ortalanmış bir dikey çizgi ve ok içeren bir bağlayıcı satırı oluşturacağız. Bu satır, sayfada devam etmesi gereken akış şeması içeriği satırlarını bağlamak için kullanılacaktır.
Bu durumda, ortalanmış tanıtım modülü ile bir önceki satırın altına bir çizgi ve ok ekleyerek akış şemasına başlamak istiyoruz.
Yeni Satır Oluştur ve Önceki Satırdan Satır Stillerini Kopyala/Yapıştır
Bunu yapmak için önceki satırın altına yeni bir tek sütunlu satır ekleyin.
"Diğer seçenekler" menüsünü (veya sağ tıklama seçeneklerini) kullanarak, yukarıdaki önceki satırdan satır stillerini kopyalayın ve bunları yeni satıra yapıştırın.
Dikey Çizgi Bölücü Oluşturma
Dikey çizgi bölücü oluşturmak için satıra 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
- Modül Hizalaması: Merkez
- Marj: -1px alt
Gelişmiş sekmesi altında, taşmayı aşağıdaki gibi gizleyin:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Blurb Modülü ile Ok Oluşturma
Daha sonra, bir tanıtıcı modül kullanarak ayırıcı çizginin üstüne oturmak için bir ok simgesi oluşturacağız.
Oku oluşturmak için ayırıcının altına yeni bir tanıtım yazısı modülü ekleyin.
Ok Bulanıklığı Ayarları
Tanımlama ayarları altında, varsayılan başlığı ve gövde metnini çıkarın ve alttaki ok simgesini kullanmak için tıklayın (ekran görüntüsüne bakın).
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Simge Rengi: #bbbbbb
- Görüntü/Simge Hizalama: orta
- Simge Yazı Tipi Boyutu: 50px (masaüstü), 40px (tablet ve telefon)
- Maksimum Genişlik: %50
- Modül Hizalaması: merkez
- Yükseklik: 50px (masaüstü), 40px (tablet ve telefon)
Gelişmiş sekmesi altında, Blurb Image'a aşağıdaki CSS'yi ekleyin:
margin-bottom: 0px; background: #ffffff;
Bu, simgeyi satırın üstüne yerleştirdiğimizde, simge ile satır arasında boşluk görünümü oluşturmak için tanıtım yazısının varsayılan kenar boşluğunu çıkaracak ve beyaz bir arka plan ekleyecektir.
Oku satırın üstüne yerleştirmek için aşağıdakileri güncelleyin:
- Pozisyon: Mutlak
- Yer: Merkez
- Z İndeksi: 10
3. Adım: Bitişik Akış Şeması Bulanıklıkları ve Oklarla Bir Satır Oluşturma
Bağlayıcı satırı tamamlandıktan sonra, akış şeması tasarımına devam etmek için başka bir çok sayıda bitişik tanıtıcı satır ekleyeceğiz.
Satırı eklemek için, ilk satırı (düzenin üstünde oluşturduğumuz ortalanmış bir tanıtım yazısı olan satır) bağlayıcı satırının altına kopyalayıp yapıştırmanız yeterlidir.
Satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Maksimum Genişlik: %50
- Kenar Genişliği: 2px
%50 maksimum genişlik, mizanpajın duyarlı bir şekilde çalışması için önemlidir. Satırın sağına ve soluna taşan tanıtım yazılarının tarayıcı genişliğini aşmamasını sağlar.
Sol Kenar Çizgisinde Akış Şeması Bulanıklığı Oluşturma
Artık kenarlığımız satıra eklendiğine göre, tanıtım yazısını sol kenar çizgisinin üstüne konumlandıracağız.
Bunu yapmak için aşağıdaki tasarım ayarlarını güncelleyin:
- Modül Hizalama: Sol
- Kenar boşluğu: 70 piksel üst, 70 piksel alt
- Dönüştürme X Eksenini Çevir: -%50
Bu, tanıtım yazısının sınır çizgisinin üstünde yatay olarak ortalanmasını sağlamanın anahtarıdır.
Sağ Kenar Çizgisinde Bitişik Bir Akış Şeması Bulanıklığı Oluşturma
Sağ kenar çizgisine başka bir tanıtım yazısı eklemek için mevcut tanıtım yazısının kopyasını oluşturun.
Açıklamayı sağ kenar çizgisine yerleştirmek için gelişmiş sekmeye gidin ve ona mutlak bir konum verin:
- Pozisyon: Mutlak
- Konum: Sağ Merkez
Ardından kenar boşluğunu güncelleyin ve çeviri seçeneklerini aşağıdaki gibi dönüştürün:
- Marj: yok
- Dönüştür Y eksenini çevir: -%50
- Dönüştür X eksenini çevir: %50
Her Kenar Çizgisindeki Köşelere Ok Bulanıklıkları Ekleme
Akış şemasını çizgilerin ilerlediği yön hakkında daha net hale getirmek için satırın kenar çizgilerine ek ok simgeleri ekleyeceğiz.
Sol Üst Ok
Sol üst kenar çizgisine bir ok eklemek için, bağlayıcı satırında oluşturduğumuz ok tanıtıcısını çoğaltın ve bitişik tanıtıcı öğeleri içeren satıra sürükleyin.
Yinelenen ok açıklamasını açın ve simgeyi sol okla değiştirin.
Ardından ok açıklamasının konum 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 az önce oluşturduğumuz “sol üst” oku çoğaltın. Ardından ayarları açın ve konum konumunu değiştirin:
- Konum: Sağ Üst
Ayrıca, ok simgesini sağ okla güncelleyin.
Sol Alt Ok
Sol alt kenar çizgisine oturan bir ok oluşturmak için az önce oluşturduğumuz “sağ üst” oku çoğaltın.
Ardından ayarları açın ve konum konumunu değiştirin:
- Konum: Sol Alt
Ardından, dönüştürme çevirisi seçeneğini güncelleyin:
- Dönüştür Y eksenini çevir: %50
Sağ Alt Ok
Sağ alt kenar çizgisine oturan bir ok oluşturmak için, az önce oluşturduğumuz “sol alt” oku çoğaltın.
Ardından ayarları açın ve konum konumunu değiştirin:
- Konum: Sağ Alt
Ayrıca, ok simgesini sol okla güncelleyin.
Tüm oklar yerleştirildikten sonra, katmanlar görünümünü kullanarak her birinin etiketlerini güncelleyebilirsiniz.
Adım 4: Başka Bir Bağlayıcı Satırı Ekleme
Bitişik iki akış şeması tanıtım yazısı ve tüm oklarla satırı tamamladıktan sonra, başka bir bağlayıcı satırı ekleyerek akış şemasına devam edebiliriz.
Bunu yapmak için, yukarıda oluşturduğumuz bağlayıcı satırını çoğaltın ve bitişik akış şeması tanıtımlarını içeren satırın altına yapıştırın.
Adım 5: Sağ Kenar Çizgisi Bağlayıcı ile Akışı Özelleştirme
Mevcut akış şeması tasarımında, akış en üstteki öğeyle başlar ve daha sonra sağ ve sol bitişik öğelere dallanır ve daha sonra ortaya geri döner ve bir sonraki ortalanmış öğeye ilerler. Akışı özelleştirmek için bölümü çoğaltacağız, böylece akış şemasını sol bitişik tanıtıcı öğe(ler)de duracak ve sağ tanıtıcı öğeden devam edecek şekilde özelleştirebiliriz.
Yinelenen Bölüm
Bunu yapmak için önce akış şeması içeriğinin tüm bölümünü çoğaltın.
Başka Bir Sol Blurb Öğesi Ekle
Kopya (alt) bölümünde, iki bitişik tanıtıcıyı içeren satırda sol tanıtıcıyı bulun. Ardından, doğrudan altında yeni bir tane oluşturmak için sol tanıtıcıyı çoğaltın.
Alt Okları ve Kenarlığı Sil
Ardından, sol alt oku ve sağ alt ok tanıtım yazılarını silin.
Birden çok tanıtım yazısı içeren satırın satır ayarlarını açın ve alt kenarlığı çıkarın:
- Alt Kenar Genişliği: 0px
Sağ Kenar Çizgisi Bağlayıcısı ile Bir Satır Oluşturun
Şimdi, satırın sağ sınır çizgisini aşağıdaki bağlayıcı satırına bağlayacak bir sağ sınır çizgisi bağlayıcısı ile akış şemasının tasarımını özelleştirmek istiyoruz.
Bunu yapmak için, başka bir satır oluşturacağız ve sağ tarafa özelleştirilmiş bir ayırıcı çizgi ve ok açıklaması ekleyeceğiz.
Üç tanıtım yazısı ile mevcut satırın altına yeni bir tek sütunlu satır ekleyin.
Satırın tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Oluk Genişliği: 1
- Maksimum Genişlik: %50
- Dolgu: 0 piksel üst, 0 piksel alt
Ardından, satıra bir sağ kenarlık ekleyin.
- Sağ Kenar Genişliği: 2px
Ardından satıra bir ayırı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, bölücü konumunu güncelleyin:
- Pozisyon: Mutlak
- Konum: Sağ Alt
Ayırıcı yerleştirildikten sonra, ilk bölümdeki üçüncü satırdan sağ alt ok tanıtıcısını kopyalayın ve sağ ayırıcı çizgi ile satıra yapıştırın.
Az önce çoğalttığınız ve taşıdığınız ok açıklamasının ayarlarını açın ve aşağıdakileri güncelleyin:
- pozisyon: varsayılan
- Modül Hizalama: sağ
Sol Sınır Çizgisinin Akışını Durdurma
Şu anda, sol alt tanıtım yazısının altında görünen sol sınır çizgisinin bir kısmı var. Gizlemek için, o alt tanıtım yazısının alt kenar boşluğunu çıkarmanız yeterlidir.
Adım 6: Satırın Sol Kenar Çizgisi Bağlayıcı ile Güncellenmesi
Akış Şemanızda ayrıca bir sol sınır çizgisi bağlayıcısı olması gerekebilir. Bunu oluşturmak için, sağ sınır çizgisi bağlayıcısı ile satırı aşağıdaki gibi güncelleyebiliriz:
- Sol Kenar 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 açıklamasının hizalamasını güncelleyin:
- Modül Hizalama: Sol
Ve simgeyi sağ okla değiştirin.
Son sonuç
Nihai sonucu kontrol edin. Devam ettim ve ikinci bölümü çoğalttım ve her ikisini de görebilmeniz için sol sınır çizgisi konektörünü ekledim.
Son düşünceler
Bu eğitimde, herkesin süreci ve fikirleri ziyaretçilere çarpıcı bir duyarlı tasarımla iletmek için kullanabileceği kullanışlı bir akış şeması düzeni oluşturduk. Hizmet veya tasarım sürecini sergilemek, bir infografik oluşturmak veya içerik aracılığıyla müşterilere yeni bir yol göstermek için kullanın. Umarım, bir sonraki projeniz için kullanışlı olacaktır.
Yorumlarda sizden haber bekliyorum.
Şerefe!