Divi'de CSS Şekillerinin Nasıl Oluşturulacağını ve Canlandırılacağını Keşfetmek

Web tasarımında CSS kullanarak şekiller oluşturmak hiç de yeni bir kavram değil. Aslında, klasik CSS şekilleri oluşturma yöntemi, Canvas ve SVG gibi diğer HTML grafik çözümleri tarafından büyük ölçüde gölgede bırakıldı. Bununla birlikte, CSS şekilleri (en azından temel olanları) oluşturmak çok daha kolaydır ve yine de web tasarımında önemli bir rol oynayabilir. Ayrıca bu şekillere kaydırma animasyonu eklediğinizde yepyeni bir tasarım öğesi ortaya çıkabilir.

Bu eğitimde, Divi'de CSS şekillerinin nasıl oluşturulacağını ve canlandırılacağını keşfedeceğiz. Divi'nin yerleşik seçeneklerini kullanarak birkaç şeklin nasıl oluşturulacağının temel konseptini anladıktan sonra, web siteniz için benzersiz kaydırma animasyonu tasarımları oluşturmak için bu şekilleri canlandırabilirsiniz. Ne kadar yapabileceğinize şaşıracaksınız!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma 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.

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:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “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 Animasyonlu CSS Şekilleri Oluşturmayı Keşfetmek

Satır ve Sütun Yapısı

İlk olarak, bölüme üçte bir üçte iki sütun satırı ekleyin.

Başka bir şey yapmadan önce, satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: EVET
• Genişlik: %95
• Maksimum Genişlik: 900 piksel

NOT: Bu ayarlar, tasarımımızın kurulumu için çok önemlidir. Örneğin, herhangi bir kenar boşluğu olmadan maksimum 900 piksel genişliğe sahip bir satırla birleştirilmiş üçte bir üçte ikilik sütun yapısı (oluk genişliği 1), sol sütunun tam olarak 300 piksel genişliğinde olacağını bize bildirin. Ayrıca, tasarımımı bu 300 piksel genişliğindeki sütunda tutarsam, tablet ve mobil cihazlarda da iyi görüneceğinden emin olabilirim.

Bölücü Modül Ara Parçasını Ekleme

Ardından, CSS şekillerimizi içerecek sütun için gereken boşluğu oluşturmak için bir ayırıcı ekleyin.

Bu noktada, Divi Builder'ın ayarlar menüsünde bulunan katmanları/modülleri yönetmek için katman görünümü modunu açmalısınız.

Ayırıcı ayarlarını açın ve ayırıcının yüksekliğini aşağıdaki gibi güncelleyin:

• Bölücüyü Göster: HAYIR
• Yükseklik: 150 piksel

CSS Şekillerimiz mutlak olarak konumlandırılacağından, sütun alanının gerçek aralığı, bölücünün yüksekliği ayarlanarak kolayca ayarlanabilir. Şahsen, bunu sütunun yüksekliğini veya aralığını değiştirmeye çalışmaktan daha kolay buldum. Ayrıca, ayırıcıyı ek bir tasarım öğesi (veya şekil) olarak şekillendirme avantajını da size verir. Şimdilik bunu gelecekteki CSS Shape tasarımlarınız için bir tuval olarak düşünebilirsiniz.

Kenarlık Seçeneklerini Kullanarak İlk CSS Şeklini Oluşturma

CSS Şeklimizi oluşturmak için bir bölücü modül kullanacağız. Teknik olarak, modül alanını değil, yalnızca modülü çevreleyen sınırları kullanıyoruz. (Böylece metin modülleri veya kod modülleri gibi diğer modülleri de kullanabilirsiniz).

CSS Şekli oluşturmak için, önceden oluşturulmuş olan bölücü modülü çoğaltın.

Ardından, aşağıdaki gibi her birini 0 piksele ayarlayarak ayırıcı modülün yüksekliğini ve genişliğini çıkarın:

• Genişlik: 0 piksel
• Yükseklik: 0 piksel

İlk şekil için, sağ üst tarafı gösteren bir dik üçgen oluşturacağız. Bunu yapmak için ayırıcı kenarlık stillerini aşağıdaki gibi güncelleyin:

• Kenar Rengi: rgba(245,44,143,0.5)
• Üst Kenar Genişliği: 150 piksel
• Sol Kenar Genişliği: 150px
• Sol Kenarlık Rengi: şeffaf

Not: Kenar rengine yarı saydamlık vermek, ek bir tasarım öğesi için üst üste binen şekillerin ortaya çıkmasına yardımcı olacaktır.

Daha sonra kolay tanımlama için bu yeni ayırıcıyı "şekil 1" olarak etiketlemek de iyi bir fikirdir.

Oluşturacağımız ek şekillere kaydırma animasyonu ekleyeceğimiz için, bu şekle (ve bu sütundaki ek şekillere) mutlak bir konum vermek önemlidir, böylece birbirlerinin üzerine yığılırlar. animasyon için aynı başlangıç ​​noktası.

Gelişmiş sekmesi altında, konumu mutlak olarak değiştirin ve varsayılan konum konumunu sağ üst olarak ayarlayın:

• Pozisyon: Mutlak
• Görev Konumu: Sağ Üst (varsayılan)

NOT: Konum konumunu sağ üstte tutmak önemlidir, çünkü ortalanmış bir konum ekleyen (üst orta veya ortalanmış gibi) diğer konumlar daha sonra CSS Şekillerine ekleyeceğimiz dönüştürme seçenekleriyle çakışacaktır.

Bir CSS Üçgeni oluşturduğunuz için tebrikler! Bu kendi başına o kadar etkileyici olmasa da, daha iyi oluyor. Animasyonla hareket ettirdikten sonra her türlü yeni tasarımı oluşturmak için bu üçgeni çoğaltabiliriz.

Kaydırma Animasyonu ile Şekil 2 Oluşturma

Sonraki şekli (veya bu durumda üçgeni) oluşturmak için, doğrudan önceki üçgen şeklinin üzerine oturan özdeş bir üst sağ üçgen eklemek için önceki bölücü modülü (şekil 1) çoğaltın.

Ardından "şekil 2" olarak etiketleyin.

"Şekil 2" bölücünün ayarlarını açın ve aşağıdaki dönen dönüştürme efektini ekleyin:

• Kaydırma Dönüştürme Efektleri: Döndürme
• Döndürmeyi Etkinleştir: EVET
• Başlangıç ​​Dönüşü: 0° (%30'da)
• Orta Dönüş: 45° (%45'te)
• Bitiş Dönüşü: 90° (%60'ta)

Kaydırma Animasyonu ile Şekil 3 Oluşturma

"Şekil 2" ayırıcı modülünü çoğaltın ve yinelenen "şekil 3"ü etiketleyin.

Ardından dönüştürme döndürme ayarlarını aşağıdaki gibi güncelleyin:

• Orta Dönüş: 90°
• Bitiş Dönüşü: 180°

Son (dördüncü) şekli oluşturmak için şekil 3 bölücü modülünü çoğaltın ve “şekil 4” olarak etiketleyin.

Ardından dönüştürme döndürme ayarlarını aşağıdaki gibi güncelleyin:

• Orta Dönüş: 180°
• Bitiş Dönüşü: 270°

Bu noktada, üst üste binen ve şimdi döndürülen üçgenlerin oluşturduğu bir kare şekli görmelisiniz.

Kaydırma Animasyonunu Test Etme

Bu şekillerin kaydırma animasyonunu test etmek için, bölümün üstüne ve altına bazı geçici kenar boşlukları ekleyelim. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Marj: 80vh üst, 80vh alt

Sayfayı yukarı ve aşağı kaydırırken nasıl görünmesi gerektiği aşağıda açıklanmıştır.

Bu şekil animasyonlarını özelleştirmenin yeni yollarını keşfetmeye başlamadan önce, tasarımımızı sağ sütunda sahte bir başlıkla tamamlayacağız. Şekil tasarımlarına devam etmek istiyorsanız bu adımı atlamaktan çekinmeyin.

Sağ Sütuna Sahte Başlık Ekleme (Opsiyonel)

Bu hareketli şekil tasarımlarını bir sayfada nasıl kullanabileceğiniz konusunda size bir fikir vermek için, sağ sütuna sahte bir başlık eklemenin iyi bir fikir olacağını düşündüm. Bu, CSS şekillerini kullanarak çarpıcı bir tasarım animasyonuyla sayfa bölüm başlıklarınızı nasıl tamamlayacağınıza dair harika bir örnek olacaktır.

Sütun Özel CSS

Başlığı eklemeden önce, display flex özelliğini kullanarak metnin sütun içinde dikey olarak ortalandığından emin olabiliriz. 2. sütun için ayarları açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex;
flex-direction:column;
align-items:center;

CSS sütunu yerleştirildikten sonra 2. sütuna yeni bir metin modülü ekleyin.

Ardından metin ayarlarını açın ve gövde içeriğini aşağıdaki gibi bir h2 başlığıyla güncelleyin:

<h2>elegant design</h2>

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Metin Hizalama: varsayılan (masaüstü), merkez (tablet ve telefon)
• Başlık 2 Metin Boyutu: 55px (masaüstü), 45px (tablet), 35px (telefon)
• Genişlik: %100

Hazır buradayken, devam edin ve metne aşağıdaki kaydırma dönüşümü “yatay hareket” efektini aşağıdaki gibi ekleyin:

• Kaydırma Dönüştürme Efektleri: Yatay Hareket
• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 2 (%20'de)
• Orta Ofset: 1 (%35'te)
• Bitiş Ofseti: -0.6

Ardından duyarlı sekmeleri açın ve bitiş uzaklığını aşağıdaki gibi güncelleyin:

• Bitiş Ofseti (tablet ve telefon): 0

Sağ Üst Üçgen Şekil Animasyonlarını Keşfetme

Başlık metnimizi eklemeden önce kaldığımız yerden devam ederek, şimdi mevcut Sağ Üst Üçgen şekli için tasarım/animasyon olanaklarını keşfedebiliriz.

Bunu yapmanın kolay bir yolu, dört CSS şeklinin tümünü (bölücü modüllerle oluşturulmuş) seçmek için çoklu seçim kullanmaktır.

Ardından, sonuçları görsel olarak görebilmeniz için dört modülün tümünün tasarımını aynı anda güncelleyecek olan öğe ayarları modunu getirmek için şekillerden birinin ayarlarını açın.

Ardından tasarım sekmesini seçin ve dönüştürme kaynağı sekmesini açın. Divi Builder'da değişiklikleri görsel olarak görebilmeniz için katman görünüm modunu ve öğe ayarları modunu sola konumlandırın.

Yukarı Doğru Üçgen CSS Şekil Tasarım Animasyonlarını Keşfetme

Artık kurulumu tamamladığınıza göre, yeni şekiller oluşturmayı keşfedebilir ve mevcut kaydırma animasyonları yerindeyken nasıl göründüklerini görebilirsiniz.

Bu sonraki örnek için, bir Yukarı Üçgen (teknik olarak bir İkizkenar Üçgen) CSS şekli oluşturacağız.

Bunu yapmak için, tüm şekilleri çoklu seçtiğinizden ve her biri için kenarlık stillerini aşağıdaki gibi güncellediğinizden emin olun:

• Sağ Kenar Genişliği: 100px
• Sağ Kenar Rengi: şeffaf
• Alt Kenar Genişliği: 100px
• Alt Kenar Rengi: rgba(245,44,143,0.5)
• Sol Kenar Genişliği: 100px
• Sol Kenarlık Rengi: şeffaf

Yeni Kaydırma Animasyon Tasarımlarını Keşfetmek için Transform Origin'i Güncelleyin

Artık biraz yeni bir şekle/üçgene sahip olduğumuza göre, sonuçta ortaya çıkan döndürme animasyonu da farklı olacaktır. Farklı kaydırma animasyonu tasarım olanaklarını keşfetmek için, çoklu seçimi kullanarak dört şeklin tümünü seçtiğinizden emin olun ve ardından sonuçları görüntülemek için dönüştürme orijinini ayarlayın.

Teardrop CSS Şekil Tasarım Animasyonlarını Keşfetme

Şimdiye kadar, bu sürecin nasıl çalıştığına hakim olmalısınız. Bu sonraki tasarım için, kenar yarıçaplı bir sağ alt üçgen oluşturarak yapılabilecek bir gözyaşı şekli oluşturacağız.

Bunu yapmak için, tüm şekilleri çoklu seçtiğinizden ve her biri için kenarlık stillerini aşağıdaki gibi güncellediğinizden emin olun:

• Yuvarlatılmış Köşeler: 0px sağ üst, %50 sağ üst, %50 sağ alt, %50 sol alt
• Alt Kenar Genişliği: 150px
• Alt Kenar Rengi: rgba(245,44,143,0.5)
• Sol Kenar Genişliği: 150px
• Sol Kenarlık Rengi: şeffaf

Ardından, gözyaşı damlası için kaydırma animasyonu tasarımlarını keşfetmek için transform Origin değerini ayarlayın.

Sektörü Keşfetme (veya Pizza Dilim) CSS Şekil Tasarım Animasyonları

Şimdiye kadar, bu sürecin nasıl çalıştığına hakim olmalısınız. Bu sonraki tasarım için, kenar yarıçaplı bir sağ alt üçgen oluşturarak yapılabilecek bir sektör şekli oluşturacağız.

Bunu yapmak için, tüm şekilleri çoklu seçtiğinizden ve her biri için kenarlık stillerini aşağıdaki gibi güncellediğinizden emin olun:

• Yuvarlatılmış Köşeler: 0px sağ üst, 0px sağ üst, %50 sağ alt, %50 sol alt
• Sağ Kenar Genişliği: 75px
• Sağ Kenar Rengi: şeffaf
• Alt Kenar Genişliği: 75px
• Alt Kenar Rengi: rgba(245,44,143,0.5)
• Sol Kenar Genişliği: 75px
• Sol Kenarlık Rengi: şeffaf

Ardından, farklı kaydırma animasyon tasarımlarını keşfetmek için dönüşümün kaynağını ayarlayın.

Yamuk CSS Şekil Tasarım Animasyonlarını Keşfetmek

Son CSS şekil tasarımımız için, yukarıya (veya İkizkenar) üçgene biraz ek genişlik ekleyebilecek bir yamuk CSS şekli oluşturacağız.

Bunu yapmak için, tüm şekilleri çoklu seçtiğinizden ve her biri için kenarlık stillerini aşağıdaki gibi güncellediğinizden emin olun:

• Yuvarlatılmış Köşeler: 0px
• Sağ Kenar Genişliği: 100px
• Sağ Kenar Rengi: şeffaf
• Alt Kenar Genişliği: 100px
• Alt Kenar Rengi: rgba(245,44,143,0.5)
• Sol Kenar Genişliği: 100px
• Sol Kenarlık Rengi: şeffaf

Ardından şekillerin/modüllerin genişliğini aşağıdaki gibi güncelleyin:

• Genişlik: 100 piksel

Yamuk şekli yerindeyken, yeni kaydırma animasyonu tasarımlarını keşfetmek için her biri için dönüşüm kaynağını güncellemeyi bir kez daha kullanabilirsiniz.

Nihai sonuçlar

Bu öğreticiyi kullanarak mümkün olan en sevdiğim tasarımlardan birkaçına son bir göz atalım.

Son düşünceler

Divi'de CSS şekillerinin nasıl oluşturulacağını ve canlandırılacağını keşfetmek, Divi'nin yerleşik tasarım yeteneklerinin gücüne ilişkin bakış açınızı genişletirken bu yaratıcı akışları elde etmenin harika bir yolu olabilir. İşin püf noktası, farklı şekiller oluşturmak için sınırların nasıl kullanılacağını anlamaktır. Ardından, bu şekillere kaydırma animasyonu ekleyebilirsiniz. Ancak, bu animasyonların her bir şekli konumlandırma şeklini değiştiren transform Origin'in gücünü unutmayın. Bu, elbette, web siteniz için sonsuz yaratıcı tasarımlar oluşturmak için birleştirebileceğiniz tüm farklı şekil ve animasyonları düşündüğünüzde buzdağının görünen kısmıdır.

Umarım bu, kendi sitenize mükemmel CSS Shape animasyonunu nasıl ekleyeceğiniz konusunda size birkaç fikir verecektir.

Yorumlarda sizden haber bekliyorum.

Şerefe!