Divi Sitenizi Daha Keyifli Hale Getirecek 6 Mikro Etkileşim (Eğitim + Ücretsiz İndirme)
Yayınlanan: 2019-02-14Mikro etkileşimler, sitenizle etkileşime girerken kullanıcı deneyimini geliştirmenin harika bir yoludur. Simgelerin, düğmelerin veya resimlerin hafif animasyonları, kullanıcıyı eğlenceli ve amaca yönelik bir şekilde harekete geçmeye yönlendirebilir. Sitenize ekleyebileceğiniz sayısız mikro etkileşim vardır, ancak bunları "mikro" tutmak iyi bir kuraldır. Aşırıya kaçmak istemezsin.
Bugün size Divi Builder ve Özel CSS (jquery olmadan) kullanarak Divi web sitenize ekleyebileceğiniz bazı basit mikro etkileşimler göstereceğim. Kullanıcıların normalde etkileşimde bulunduğu öğelere odaklanacağım – düğmeler, simgeler, resimler.
Başlayalım.
Gizlice Bakış
İşte bu eğitimde oluşturacağımız mikro etkileşimlere hızlı bir bakış.
1. Hover'da Görüntüleri Ölçeklendirme
1 Numaralı Mikro Etkileşimi Oluşturmaya Başlayın
#2 Zıplayan Aşağı Kaydırma Simgesi
Mikroetkileşim #2 Oluşturmaya Başlayın
#3 Hover'da Dönen Blurb ve Düğme Simgeleri
Mikroetkileşim #3 Oluşturmaya Başlayın
#4 Düğme Metnini Göstermek ve Gizlemek için Kayan Düğme Simgeleri
Mikroetkileşim #4 Oluşturmaya Başlayın
#5 3D Görüntü Perspektif Döndürme
Mikroetkileşim #5 Oluşturmaya Başlayın
#6 Düğme Kaydırıcı Mikroetkileşimi
Mikroetkileşim #6 Oluşturmaya Başlayın
Youtube Kanalımıza Abone Olun
Başlamak için Gerekenler
Başlamak için gerçekten ihtiyacınız olan tek şey Divi. Ön uçta Divi Builder'ı kullanarak sıfırdan örneklerimiz olacağız.
Kolay Erişim için Dosyaları İndirin
Bu mikro etkileşimlerin çalışan bir örneğini web sitenizde hızlı ve kolay bir şekilde çalıştırmak isteyenler için bu makalenin altına bir indirme ekledim. Bu şekilde, öğretici ile birlikte takip ettiğinizde çalışan bir örneğe sahip olabilirsiniz.
İndirmek
1. Hover'da Görüntüleri Ölçeklendirme
Ölçekleme, bir öğenin boyutunu ayarlamayı ifade eder. Bu nedenle, fareyle üzerine gelindiğinde bir resmi büyütmek istiyorsak (örneğin), resmimizi belirli bir yüzdeyle ölçeklendirmek için tek yapmamız gereken küçük bir CSS parçacığı eklemek. Bu, bir kullanıcı bir görüntünün üzerine geldiğinde küçük ama etkili bir mikro etkileşim oluşturmamızı sağlar. Bunu, görüntüleri kullanan üç popüler Divi modülüne nasıl uygulayabileceğinizi göstereyim - görüntü modülü, tanıtım modülü ve kişi modülü.
Devam edin ve örneklerimizin her birini her sütuna ekleyebilmemiz için üç sütunlu bir satır içeren yeni bir bölüm oluşturun.
Görüntü Modülünü Kullanarak Fareyle Üzerine Geldiğinde Görüntüyü Ölçekleme
Görüntü modülünü kullanarak bir görüntüye ölçekleme görüntüsü mikro etkileşimi eklemek için önce ilk sütuna bir görüntü modülü ekleyin.
Ardından, seçtiğiniz modüle bir resim ekleyin.
Ardından, görüntü ayarlarınızdaki gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:
CSS sınıfı: ölçek-görüntü
Bu, sayfa ayarlarına özel CSS'mizi eklerken bu belirli modülü hedeflememizi sağlar. Resmi ölçeklendirmek için gereken CSS'yi eklemek için sayfa ayarlarını açın ve aşağıdaki özel CSS'yi ekleyin:
/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
overflow:hidden;
}
.scale-image img{
transition: all 0.2s;
}
.scale-image:hover img {
transform: scale(1.3)
}
Şimdi sonucu kontrol edin.
Bir Bulanıklık Modülü Görüntüsünü Hover'da Ölçekleme
Aynı efekti bir tanıtım yazısı modülündeki bir görüntüye eklemek için önce ikinci sütuna bir tanıtım yazısı modülü ekleyin.
Ardından, tanıtım yazısı modülüne seçtiğiniz bir resmi ekleyin.
Ardından aşağıdaki CSS sınıfını blurb modülüne ekleyin.
CSS Sınıfı: ölçek bulanık görüntü
Bu CSS sınıfı ile artık, tanıtıcı resmi hedefleyen özel CSS'mizi ekleyebiliriz. Sayfa ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin:
/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/
.scale-blurb-image .et_pb_main_blurb_image {
overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
transform: scale(1.3);
}
İşte sonuç.
Hover'da Bir Kişi Modülü Görüntüsünü Ölçekleme
Fareyle üzerine gelindiğinde bir kişi modülü görüntüsünü ölçeklendirmek için üçüncü sütuna bir kişi modülü ekleyin ve modüle seçtiğiniz bir resmi yükleyin.
Ardından aşağıdaki CSS Sınıfını kişi modülüne ekleyin.
CSS Sınıfı: ölçek-kişi-görüntü
Şimdi sayfa ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin.
/**This scales the image in the person module with the CSS class "scale-person-image" **/
.scale-person-image .et_pb_team_member_image {
overflow:hidden;
}
.scale-person-image img {
transition: all 0.2s;
}
.scale-person-image img:hover {
transform: scale(1.3);
}
Ölçekleme görüntüsü mikro etkileşimli üç modülün hepsinin sonucunu kontrol edin.
#2 Zıplayan Aşağı Kaydırma Simgesi
Bu sonraki mikro etkileşim, tam genişlikli başlık modülünde yerleşik olarak bulunan aşağı kaydırma simgesine sıçrayan bir animasyon ekler. Bu, ziyaretçiyi sayfanın aşağısında daha fazla bilgi olduğu konusunda daha fazla bilgilendirmenin ince bir yolu. Ve bu zıplama efektinin varsayılan olarak veya üzerine gelindiğinde olmasını seçebilirsiniz.
İşte nasıl yapılacağı.
İlk önce tam genişlikte başlık modülüyle yeni bir tam genişlik bölümü ekleyin.
Ardından aşağıdakileri güncelleyin:
Metin ve Logo Yönü: Orta
Aşağı Kaydır Düğmesini Göster: EVET
Simge: [seçtiğiniz simgeyi seçin]
Ardından aşağıdaki CSS Sınıfını ekleyin:
CSS Sınıfı: sıçrama-kaydırma-simgesi
Bu sınıf, sayfa yüklendiğinde simgeyi varsayılan olarak canlandırmak için kaydırma simgesini css ile hedeflememize izin verecektir.
Ardından tam genişlikli başlık modülünü çoğaltın ve CSS Sınıfını aşağıdaki şekilde güncelleyin:
CSS Sınıfı: sıçrama-kaydırma-simgesi-vurgusu
Bu sınıf, fareyle üzerine gelindiğinde simgeyi canlandırmak için kaydırma simgesini css ile hedeflememize izin verecektir.
Ardından sayfa ayarlarını açın ve iki örneğimiz için zıplama animasyonunu etkinleştirmek için aşağıdaki Özel CSS'yi ekleyin.
.bounce-scroll-icon-hover .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
animation-name: none;
}
@keyframes bounce {
0% {top: -10px; opacity: 1;}
50% {top: 15px; opacity:0;}
100% {top: -10px;opacity:1;}
}
İki örneğin sonucunu kontrol edin. Üst başlık kaydırma simgesi varsayılan olarak hareket edecek ve alt başlık kaydırma simgesi fareyle üzerine gelindiğinde canlandırılacaktır.
#3 Hover'da Dönen Simgeler
Bir simgeye hafif bir döndürme eklemek, kullanıcıların bir öğeyi tıklamasını sağlamak için etkili bir mikro etkileşim olabilir. Yerleşik simgelere sahip en popüler iki Divi modülü, düğme modülü ve tanıtıcı modül olduğundan, fareyle üzerine gelindiğinde bu simgelere nasıl döndürme ekleneceğini size göstereceğimi düşündüm.
Fareyle Üzerine Geldiğinde Bir Düğme Simgesini Döndürme
Divi, varsayılan olarak düğme simgeleri için yararlı bir mikro etkileşimle birlikte gelir. Düğmenin üzerine geldiğinizde düğme simgesi belirir ve sağa doğru hareket ederek düğmeye tıkladığınızda başka bir sayfaya yönlendirileceğinizi belirtir. Ancak, biraz daha yaratıcı olmak istiyorsanız, tamamen yeni bir mikro etkileşim için simgeyi döndürebilirsiniz.
Fareyle üzerine gelindiğinde bir düğme simgesini döndürmek için önce tek sütunlu bir satıra sahip yeni bir bölüm ekleyin. Ardından satıra bir düğme modülü ekleyin.
Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:
Düğme için Özel Stilleri kullanın: EVET
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Düğme Simgesi: [seçtiğiniz simgeyi seçin]
Ardından aşağıdaki CSS Sınıfını ekleyin:
CSS Sınıfı: döndürme düğmesi simgesi
Simgemiz ve CSS Sınıfımız yerindeyken, tek yapmamız gereken aşağıdaki özel CSS'yi sayfa ayarlarına eklemek:
/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}
.rotate-button-icon:hover:after {
transform: rotate(0deg);
}
Bu, simgeyi başlangıçta saat yönünün tersine 90 derece döndürür ve ardından fareyle üzerine gelindiğinde 0 dereceye geri döner.
İşte sonuç.
Bir Blurb Modülü Simgesini Döndürme
Bir tanıtıcı modül simgesini döndürmek için önce üç sütunlu bir satırla yeni bir bölüm oluşturalım. Ardından, 1. sütuna bir tanıtım yazısı modülü ekleyin ve aşağıdaki tanıtım yazısı ayarlarını güncelleyin.
Simgeyi Kullan: EVET
Simge: [seçilen simgeyi ekleyin]
Metin Yönü: orta
CSS Sınıfı: döndürme bulanıklığı simgesi
Şimdi sayfa ayarlarına aşağıdaki Özel CSS'yi ekleyin:
/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/
.rotate-blurb-icon .et-pb-icon {
transition: 0.2s ease-out;
transform: rotateZ(-90deg);
}
.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
transform: rotateZ(0deg);
}
İşte sonuç.
Bu, başlığın soluna yerleştirilen simgeyle de çalışır. Tek yapmanız gereken, tanıtıcı ayarlarını aşağıdaki gibi güncellemektir:
Resim/Simge Yerleşimi: Sol
Başlık Satırı Yüksekliği: 1.7em
Sonucu kontrol edin.
#4 Düğme Metnini Göstermek ve Gizlemek için Kayan Düğme Simgeleri
Fareyle Üzerine Geldiğinde Simgeye Düğme Metni
Bu mikro etkileşim, varsayılan olarak bir simgeyle düğme metnini görüntüler ve ardından, fareyle üzerine gelindiğinde metni kapsayacak şekilde simgeyi hareket ettirir.
İşte nasıl yapılacağı.
Tek sütunlu bir satırla yeni bir bölüm ekleyin. Ardından satıra bir düğme modülü ekleyin ve aşağıdaki düğme ayarlarını güncelleyin:
Düğme için Özel Stilleri Kullan: EVET
Düğme Arka Plan Rengi: #0c71c3
Düğme kenarlık genişliği: 0px
Düğme Simge Rengi: #ffffff
CSS Sınıfı: düğmeden metine simge
Şimdi sayfa ayarlarına aşağıdaki özel CSS'yi ekleyin:
/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-text-to-icon:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
}
body #page-container .et_pb_button.button-text-to-icon:hover:after {
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button:hover:after {
color: #ffffff;
margin-left: 0px;
left: 0;
width: 100%;
text-align: center;
transform: scale(1.5);
}
Şimdi sonucu kontrol edin.
Fareyle Üzerine Geldiğinde Metne Düğme Simgesi
Ayrıca, başlangıçta düğme Simgesini göstermenin ve ardından düğme metnini ortaya çıkarmak için simgeyi kaydırmanın zıt efektini de oluşturabilirsiniz. Bunu yapmak için düğme modülünü çoğaltın ve aşağıdaki düğme ayarlarını güncelleyin:
Düğme Metin Rengi (varsayılan): #0c71c3
Düğme Metin Rengi(fareyle üzerine gelin): #ffffff
Ardından CSS Sınıfını aşağıdakiyle değiştirin:
CSS Sınıfı: düğmeden simgeye metin
Ardından sayfa ayarlarına aşağıdaki özel CSS'yi ekleyin:
/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-icon-to-text:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button.button-icon-to-text:hover:after {
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
transform: scale(1);
}
Şimdi sonucu kontrol edin.
#5 3D Görüntü Perspektif Döndürme
Bu mikro etkileşim, varsayılan olarak 3B görüntü perspektifi ve döndürme ile biçimlendirilmiş bir görüntü modülü görüntüsüyle başlar. Ardından, üzerine gelindiğinde görüntü, görüntünün normal bir görüntüsüne başvurur.
İşte nasıl yapılacağı.
İlk önce, üç sütunlu bir satırla yeni bir bölüm oluşturun. Ardından sütun 1'e bir görüntü modülü ekleyin ve seçtiğiniz görüntü modülüne bir görüntü ekleyin.
Bu etki için Özel CSS'mizi doğrudan modüle ekleyebiliriz. Gelişmiş sekmesine gidin ve Ana Öğe altına aşağıdaki Özel CSS'yi ekleyin:
Ana Öğe CSS (varsayılan):
transform: perspective(700px) rotateY(45deg); transition: all .2s;
Bu css, Transform CSS Özelliğini kullanarak resmimize iki şey yapıyor. İlk olarak, sayfaya bakarken görüntü ile kullanıcının bakış açısı arasındaki mesafe miktarı olan 700 piksellik bir perspektif ekler. CSS ayrıca görüntüye döndürme ekler. döndürmeY(45deg), görüntüyü Y ekseninde 45 derece (saat yönünde) döndürür. Ve perspektif yerinde olduğunda, görüntü artık üç boyutlu bir görünüme sahip.
Ana Öğe CSS (fareyle üzerine gelin):
transform: perspective(700px) rotateY(0deg);
Bu, kullanıcıların görüntüye daha iyi bakabilmeleri için normal görünmesi için fareyle üzerine gelindiğinde görüntünün dönüşünü ortadan kaldırır.
Şimdi sonucu kontrol edelim.
Bu mikro etkileşimin birkaç örneğini daha yapalım. Devam edin ve görüntü modülünü kopyalayın ve 2. sütuna ve 3. sütuna yapıştırın. 2. sütundaki yinelenen görüntü modülünde, özel CSS'yi aşağıdaki gibi güncelleyin:
Ana Öğe CSS (varsayılan):
transform: perspective(700px) rotateX(45deg); transition: all .2s;
Ana Öğe CSS (fareyle üzerine gelin):
transform: perspective(700px) rotateX(0deg);
Buradaki tek farkın, "döndür"den sonraki "X" harfi olduğuna dikkat edin. Bu, görüntünün x ekseninde 45 derece dönmesini söyler. Ardından, normale döndürmek için fareyle üzerine gelindiğinde derece değerini 0 olarak ayarlıyoruz.
İşte sonuç.
3. sütundaki yinelenen görüntü modülünde, Özel CSS'yi aşağıdaki gibi güncelleyin:
Ana Öğe CSS (varsayılan):
transform: perspective(700px) rotateY(-45deg); transition: all .2s;
Ana Öğe CSS (fareyle üzerine gelin):
transform: perspective(700px) rotateY(0deg);
Bu CSS ile sütun 1'deki resimde kullanılan CSS arasındaki tek farkın “-45deg” değeri olduğuna dikkat edin. Bu, görüntüyü Y ekseninde saat yönünün tersine döndürür.
İşte perspektif ve döndürme kullanan üç görüntü mikro etkileşiminin nihai sonucu.
Görüntü modülünün yerleşik ayarını kullanarak daha fazla yerleşik vurgulu efekt ve tasarım eklemeyi unutmayın. Örneğin, bu, kutu gölge efekti eklemek için de harika bir yer olacaktır.
#6 Düğme Kaydırıcı Mikroetkileşimi
Bu son mikro etkileşim için, üzerine gelindiğinde ek bilgileri (aslında tamamen yeni bir düğme) gösteren bir düğme kaydırıcısı oluşturacağız. Temel fikir, sütununuza özel bir yükseklik vermek ve ardından sütunun içine iki düğme modülü yığmaktır. En üstteki düğme, varsayılan olarak kullanıcının gördüğü düğme olacaktır, ancak ikinci düğme, kullanıcının düğmenin üzerine geldiğinde göreceği "ek bilgi" içeren düğme olacaktır.
İşte nasıl oluşturulacağı.
Bu düğme, satır sütununun tüm genişliğini kapsayacaktır, bu nedenle düğmenizi çok geniş olmayan bir sütuna sahip bir satıra eklerseniz en iyi sonucu verir. Bu örnek için, tek sütunlu bir satır kullanacağım ve ardından büyük tarayıcılarda düğmenin çok geniş olmaması için satırıma bir maksimum genişlik ayarlayacağım.
Tek sütunlu bir satırla yeni bir bölüm oluşturun. Ardından satıra bir düğme modülü ekleyin ve aşağıdaki düğme ayarlarını güncelleyin:
Düğme Metni: “İndir”
Düğme Hizalama: merkez
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #0c71c3
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 0px
Düğme Simgesi: ekran görüntüsüne bakın
Düğme Simge Rengi: #ffffff
Düğme Simge Yerleşimi: Sol
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Özel Kenar Boşluğu: 0 piksel alt
Ardından, yeni oluşturduğunuz düğmeyi çoğaltın, böylece yinelenen yığınlar az önce oluşturduğunuz düğmenin hemen altında toplanır. Ardından, yinelenen düğme ayarlarını aşağıdaki gibi güncelleyin:
Düğme Metni: MP3(3,5 mb)
Düğme Metin Rengi: #0c71c3
Düğme Arka Plan Rengi: #ffffff
Düğme Simgesi: ekran görüntüsüne bakın
Düğme Simge Rengi: #0c71c3
Satırımızın stiline geçmeden önce, üstteki düğmeye bir CSS sınıfı eklememiz gerekiyor. Üst düğme ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin:
CSS Sınıfı: üst düğme
Artık her iki düğme de yerinde olduğuna göre, satır ayarlarını, düğmelerimizin maksimum genişliği olarak hizmet edecek özel bir genişlik ve sayfa ayarlarına ekleyeceğimiz Özel CSS'miz için bir sütun CSS sınıfı ile güncelleyelim. Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Özel Genişlik: 200 piksel
Sütun CSS Sınıfı: kaydırma düğmesi
Satıra değil, sütuna CSS sınıfını eklediğinizden emin olun.
Artık özel CSS'yi eklemeye hazırız. Sayfa ayarlarını açın ve aşağıdaki CSS'yi ekleyin:
/** This styles the slider button **/
.slider-button {
height: 50px;
overflow:hidden;
border:2px solid #0c71c3;
}
.slider-button .et_pb_button {
display:block;
margin: 0 !important;
}
.slider-button:hover .top-button {
margin-top: -48px !important;
}
Bu CSS, yalnızca varsayılan boyuttaki düğmeyle çalışır. Bunun nedeni, ikinci düğmeyi üzerine gelene kadar gizlemek için sütuna sabit bir yükseklik vermemiz gerektiğidir. Şu anda sütun yüksekliğine ("kaydırıcı düğme" sınıfıyla birlikte) 50 piksellik bir yükseklik verilmiştir. Bu, sütuna verilen 2px sınırını da hesaba katar. Fareyle üzerine gelindiğinde, üst düğme ("top-button" sınıfıyla birlikte -48 piksellik bir üst kenar boşluğuyla (düğmenin yüksekliği eksi 2 piksel kenarlıklarından biri çıkarılarak) görünüm dışına taşınır. Ancak, yazı tipini değiştirirseniz- düğmelerin boyutu veya dolgusu, buna göre üst düğme kenar boşluğu ile birlikte kaydırıcı düğme sınıfının yüksekliğini ayarlamanız gerekecektir.
İşte nihai sonuç.
Butonları kendi kullanımınız için farklı metin/bilgi ve simgelerle şekillendirebileceğinizi unutmayın. Benzersiz bir harekete geçirici mesajla kullanıcıları ek bilgilerle eğitmenin harika bir yoludur.
ÜCRETSİZ İndirin: Bu Eğitim için Hazır Düzen ve CSS dosyasını edinin
Bu mikro etkileşimlerin web sitenizde nasıl görüneceğine hızlı bir başlangıç yapmak istiyorsanız, aşağıdaki zip dosyasını indirebilirsiniz. Zip dosyasını indirdikten sonra, dosyayı sabit sürücünüzde bulun. “Microinteraction-examples.zip” olarak adlandırılacaktır. Dosyayı açtığınızda, iki dosya göreceksiniz. “microinteraction-examples.json” adlı dosya Divi düzenidir. Divi Kitaplığınıza yüklenmesi gerekecektir. Bunu, Divi > Divi Kitaplığı'na giderek ve ardından sayfanın üst kısmındaki içe aktar düğmesini tıklayarak WordPress Panonuzdan yapabilirsiniz. "microinteractions.css" adlı dosya, öğreticide kullanılan Özel CSS'yi içerir. Bu CSS'nin sayfa ayarları özel CSS'sine veya Tema Özelleştirici Ek CSS kutusuna kopyalanması gerekir. Mizanpajınız yüklendikten sonra microinteractions.css dosyasını doğrudan Divi Builder'a sürüklemek için Divi'nin sürükle ve bırak özelliğini de kullanabilirsiniz. Bu, css'yi otomatik olarak sayfa ayarlarınıza ekleyecektir.
Ü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!
Son düşünceler
Umarım bu mikro etkileşimleri faydalı bulursunuz. Sitenizde Divi ile (yalnızca CSS kullanarak) kullanımı kolaydır. Zaman ve basitlik adına, temel varsayılan modül stillerini kullandım, ancak daha yaratıcı stiller için tasarım seçeneklerini gerektiği gibi ayarlamaktan çekinmeyin. Ayrıca, bu örnekler için CSS'yi ihtiyaçlarınıza uyacak şekilde ayarlamaktan veya tamamen yeni bir şey bulmaktan çekinmeyin.
Yorumlarda sizden haber bekliyorum.
Şerefe!