Divi verimlilik özelliklerini kullanarak yeni tasarım stilleri diğer sayfalara nasıl aktarılır
Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Divi Mobilya Mağazası Düzeni paketini kullanarak yeni tasarım stillerinin diğer sayfalara nasıl aktarılacağını göstereceğiz. Çıkan tüm yeni düzen paketleriyle, yeni düzen paketi stilini kullanarak mevcut sayfa stilini değiştirmek isteyebilirsiniz. Tüm sayfaları değiştirmek yerine, divi verimlilik özelliklerini kullanarak tasarım stillerini de aktarabilirsiniz. Visual Builder’da yer alan en son seçeneklerden biri, Salin özellikleri ve sayfaların sayfalarıdır. Bu, tasarım öğelerinin ayarlarına dokunmadan düzen boyunca birçok değişiklik yapmanızı sağlar.
Ancak elbette, her benzersiz düzen, yani bazı manuel değişiklikler uygulamanız gerektiği anlamına gelir. İyi haber şu ki, manuel ayarları sayfadaki benzer öğelere tek bir tıklamayla genişletebilirsiniz. Bu yazının tasarım stillerini aktarırken belirli yapıları takip etmenize yardımcı olması bekleniyor. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, önce sonuçları görelim.
Bölüm 1: Yanımızda iki sayfa açmak yanında iki sayfa açarak başlayacaktır. Mevcut sayfalar ve uygulamak istediğimiz tasarım stillerini içeren yeni sayfalar. Mobilya mağazası düzeni paketini (mevcut sayfaya uygulamak istediğimiz tasarım stilini) ve barındırma şirketi düzeni paketi sayfasını (değiştirmek istediğimiz sayfa) alacağız. Bölüm 2: İkinci parçanın belirli parçalarının ayarlarını sıfırlayın Bazı parçaların ayarlarını yeniden düzenlemekle ilgilidir. Yeniden düzenlemeniz gereken ayarlar, düzenden düzene değişir, ancak genellikle arka plan ayarlarını ve bölücü ayarlarını içerir. Bölüm 3: Salin özelliklerini kullanma ve kahraman bölümü için divi sayfalarını genişletme, çapraz patlama özelliği divi sayfası sayfasını kullanmaya başlayabiliriz birçok şeyi değiştirmeye başlamak için. Yapılacak doğal şey kahramanla başlamaktır. Yeni tasarım stili ayarlarını kopyalayıp mevcut sayfalara yapıştırarak kahramandaki her tasarım öğesini yeni tasarım stiline değiştireceğiz. Bunu yaptıktan sonra, bu stili sayfadaki benzer bir öğeye genişleteceğiz. Bölüm 4: Manuel değişiklikler yapın (düzene göre) ve verimlilik özelliklerini kullanın
Daha önce de belirtildiği gibi, her düzen benzersizdir. Bu nedenle mevcut sayfalarda manuel değişiklikler yapmak da gereklidir. Bazı değişiklikler yapıldıktan sonra, sayfadaki benzer öğelere uygulanmasını sağlamak için stili genişletebilir veya bul ve değiştirebilirsiniz. Bölüm 5: Son fakat en az değil, tasarım özelliklerini ekleyin, mevcut sayfalara belirli tasarım özellikleri de ekleyebilirsiniz. Bölüm 1: Mobilya Mağazası Düzeni Paketi Paket Paket Sayfalarını kullanarak Düzeni kullanarak Yeni Bir Sayfanın Yanında İki Sayfayı Açma Şimdi bu yazının yaklaşım bölümünden geçtik, divi kullanmaya başlayalım! Mobilya Mağazası Düzeni Paketi sayfasını kullanarak yeni bir sayfa ekleyin. Şirketin barındırma düzeni paketi sayfalarını kullanarak şirketin barındırma düzeni paketi sayfalarını kullanarak yeni bir sayfa oluşturun. Mobilya mağazası düzeni sayfalarının tasarımıyla bu düzenin tasarım stilini değiştireceğiz.
Bölüm 2: Belirli parçaların ayarlarını sıfırlayın Barındırma şirketi yönlendirme bölümünün özel ayarlarını yeniden yazın Her iki mizanpajınızdan sonra kahraman bölümünü açın, şirketin barındırma şirketi yön sayfasından kahramanların ayarlarını açarak devam edin. Bölümün arka planını yeniden yazın ve tüm parçalara genişletin Arka plan ayarlarını açın ve sağ tıklayarak ve arka planı geri tıklayarak seçeneği sıfırlayın. Bittiğinde, sayfanızda arka plan öğeleri içeren hiçbir parça olmadığından emin olmak için bu arka plan stilini sayfadaki tüm parçalara genişletebilirsiniz. Bölgeyi sıfırlayın ve tüm parçalara genişletin, sayfadaki tüm bölücülerin kaybolduğundan emin olmak için bölücü bölümü için de aynısını yapın. Bölüm 3: Kopyalama özelliklerini kullanarak ve kahramanların Kahraman Bölümü için divi sayfalarını genişletin. Kahraman. Çapraz sayfa kopya seçeneğini kullanmaya başlamanın zamanı geldi! Kahramandaki her tasarım öğesini değiştireceğiz. Mobilya dükkanı yön bahçesinde kahramanın stilini kopyalayarak başlayın. Ardından, Hosting Company Directive sayfasına geri dönün ve kopyalanan parçanın parçalarını yapıştırın. Çizgi ayarları çizgi için de aynısını yapar. Metin Modülü Başlık Metin Modülünün başlığından kopya stili modülü ve barındırma şirketi yön sayfasının başlığı için bunları geçerli hale getirin. Gövde Metin Modülü Bir sonraki metin modülünün açık açıklaması ve metin stilini kopyalayın. Bunu yaptıktan sonra, barındırma şirketi sayfasındaki metin modülü için geçerli hale getirin. Yeni metin stilini uyguladıktan sonra stili genişletin, devam edin ve bu stili tüm modüllere genişletin. Metin yönünü, sol metnin yönünün sayfalardaki tüm tasarım öğelerine uygulanacağını görmeniz gereken merkeze değiştirin. Bu şekilde kalabilir veya metin yönünü manuel olarak değiştirebilirsiniz. Yeni modül stilini uygulamanız gereken kahramanlarda son modül düğmesini ayarlamak Düğme modülüdür. Modül düğmesinin tüm stilini genişletmek yerine düğmeyi ayarlamak için stili genişletin, belirli düğmelerin ayarlarını genişleteceğiz. Uzay düzenlemeleri ile birlikte kuvveti uzaya genişletin. Kutunun gölgesi ve kutunun gölge ayarının stilini de genişletin. Kalan öğeleri kopyalayın + bölücü stilini genişletin Ayırma modülü stilini kopyalayıp eklememiz ve şirketin barındırma sayfalarındaki böceklere uygulanmasını sağlamamız gerekir. Uzun bir şekilde stil bir kez daha, bu modülün kuvvetini tüm sayfalarda genişletin. Bölüm 4: Manuel bir değişiklik yapın (düzene göre) ve Düzen Bulgularındaki Özel Değişikliklerin Verimlilik özelliğini kullanın ve yazı tipi başlığı zaman bazı manuel değişiklikler yapmaya başlar! Yapacağımız ilk şey yazı tipini eşleştirmek. Sayfadaki metin modülünü açın ve tüm sayfalarda kullanılan Rubik yazı tipini bulun. Ardından, Bul ve Değiştir’i tıklayın ve yazı tiplerini Montserrat ile değiştirin. Yazı tipi ağırlığı bul ve değiştir başlık, yazı tipi ağırlığı için de aynısını yapın. Bir ortam kullanmak yerine ışık seçin. Yuvarlak Açıları Bul ve Değiştirme Ayrıca, tüm sayfanın her köşesine ‘0px’ Bul ve Değiştir ve uygulayarak sayfalar boyunca yuvarlak köşe sınırlarını sileriz. CTA arka plan ayarlarını sıfırlayın ve sayfada hareket etmek için davet modülünü bularak ve ilk modülün arka plan ayarlarını yeniden düzenleyerek devam eden stili devam ettirin. Ardından, bu stili o bölümde hareket etmek için tüm davetiyelere genişletin. Bul ve Değiştir CTA arka plan rengini Yaptıktan sonra, varsayılan arka plan rengi görünür. Bu rengi bulun ve değiştirin ve tüm parçalarda ‘#1A2545’ olarak değiştirin. Metindeki CTA metin renklerini bul ve değiştir renkte tüm parçalarda ‘ışık’ ile değiştirin. Fiyat tablosunun ayarlarını değiştirin, ardından sayfadaki fiyat tablosunu açın ve düğmenin ayarlarını değiştirin: Arka Plan Renk Düğmesi: #EF6F49 Düğmenin sınır genişliği: 8px Düğme Sınır Rengi: #EF6F49RADIUS Sınır Düğmesi: 0px Hareketin Mesafesi Düğmesi: 2px (varsayılan), 1px (Hover)
Yazı tipi düğmesi: Montserrat
Mektup Ağırlığı: Yarı Kalınlık
Yazı tipi stili: büyük harf
Düğmenin Aydınlanması: Sol
Fiyat Tablo ve Modül CTA Stilini Genişletin Yeni düğme ayarlarını tüm sayfalarda hareket eden tüm fiyat tablolarına ve davet modüllerine genişletin.
Bölüm 5: Arka planın tasarım özelliklerini ekleyin Bölüm #1 Bu öğreticinin son bölümünde, bazı tasarım özellikleri manuel olarak ekleyeceğiz. Bu, arka plan ayarlarını içerir, ancak bunlarla sınırlı değildir. Aşağıdaki baskı ekranında işaretlenen parçayı açın ve arka plan rengini değiştirin.
Arka plan rengi: #f7f3ec
Arka plan rengi Bölüm #2, aşağıdaki bölüm için de aynısını yapın.
Arka plan rengi: #f7f3ec Gradyan Arka Plan Bölümü #1 Ardından, aşağıdaki basılı ekrandaki parçayı bulun ve gradyanın arka planını ekleyin. Renk 1: #ffffff
Renk 2: #1A2545 Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 55 Son pozisyon:% 55
Gradyan Arka Plan Bölümü #2 Aşağıdaki bölüm için başka bir gradyan arka plan kullanın:
Renk 1: RGBA (210,218,228.0.38)
Renk 2: #ffffff
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 45 Son pozisyon:% 45
Gradyan #3’ün arka plan kısmı son fakat en az değil, doğrusal gradyanın arka planını sayfanın son kısmına da ekleyin.
Renk 1: #ffffff
Renk 2: #F7F3EC
Başlangıç Pozisyonu:% 40
Son pozisyon:% 40 Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım.
