Yönlendirme Nasıl Yapılır Boyut ayarları & amp;Divi’nin yeni taşması
Sürüklenebilen yeni bir Divi boyutu seçeneği kullanmak, sadece çok duyarlı bir web sitesi oluşturmanıza yardımcı olmakla kalmaz, aynı zamanda benzersiz etkileşimler oluşturmada da çok yardımcı olabilir. Bu seçenekle oynayarak, oluşturduğunuz web sitelerini ayarlayabilir ve geçerli tasarım trendlerini karşılamak için sayfanızın yapısını ayarlayabilirsiniz. Bu öğreticide, özellikle size Divi ile nasıl bir seri üretileceğinizi göstereceğiz. Yeni bir sayfa oluşturacağız ve tüm bölüm başlıklarının görüntülenmesine izin vereceğiz, ancak her bölüm yalnızca imleci (masaüstü) veya tıklandığında (hücresel) yönlendirilirken açılacaktır. Başka bir parçayı açar açmaz, daha önce açtığınız kısım otomatik olarak kapatılacaktır. Genel yaklaşımı açıklayarak ve baştan aşağıda görebileceğiniz örnekleri yeniden oluşturarak devam edeceğiz. Umarız bu öğretici de kendi gelişim tasarımınızı yaratmanızı teşvik eder!
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Gerçek öğreticiye girmeden önce yaklaşarak, Hakkında Bölüm yapmak için kullanılan teknikleri tartışacağız. Bu tekniği, herhangi bir tasarım stiliyle oluşturduğunuz her türlü web sitesine uygulayabilirsiniz.
1. Sayfanıza ilk bölümü ekleyin, yeni bir sayfada yeni bir tasarım başlattığınızı varsayalım. Yapmanız gereken ilk şey, yeni bir düzenli parça eklemektir. 2. Bölümün başlığını içeren yeni bir satır ekleyin Daha sonra, bölüm başlığınızı içeren bir metin modülüne sahip yeni bir satır ekleyerek devam edebilirsiniz. Ayrıca bir bölücü modülü ve satırın yönlendirildiğinde veya dokunulduğunda uzandığını gösteren bir şey de ekleyebilirsiniz (bu yayının önizlemesinde örneğe bakın). İçeriğin diğer kısmının başlığının başlığını ayırmak çok önemlidir, bu nedenle başlıklar ve bir sonraki adım arasında yeterli alan bıraktığınızdan emin olun.
3. Kalan bölüm içeriğini mükemmelleştirin (istediğiniz kadar çok satır ve modül ekleyin) Bölümün başlığını tamamen size kadar takip eden tasarım öğelerini. İstediğiniz uzun veya kısa bölümü yapabilir ve herhangi bir tasarım stilini kullanabilirsiniz. 4. Varsayılanlığı değiştirin ve parçanın maksimum yüksekliğini işaret edin. Parçanızın varsayılan yüksekliği yalnızca bölümün başlığında eşleşmesi amaçlanmıştır. İmleci yönlendirirken, bölüm başlangıç boyutunu geri alacaktır. 5. Taşma Dikeyini Gizle Bu tekniğin bir başka önemli kısmı dikey taşmaları gizlemektir. Varsayılanın maksimum yüksekliğini, parçanın başlangıç yüksekliğinden daha küçük olan parçanıza ayarladıktan sonra, taşma yapılacaktır. Taşmanın görünmediğinden emin olmak için, taşmanın bölümün görünürlük ayarlarında gizlendiğinden emin olmalısınız. 5. Sayfadaki tüm parçalar için adımları tekrarlayın, ziyaretçileriniz tarafından değer verilecek net bir kullanıcı deneyimi oluşturmak için sayfanızdaki tüm parçalar için aynı adımları tekrarlayın. YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Varsayılan arka plan renginin yeni bir bölümünü ekleyin Şimdi bu yazı yaklaşımından geçtik, bir şeyi harekete geçirmeye başlamanın zamanı geldi! İlk normal bölümü WordPress sitenizdeki yeni bir sayfaya ekleyin ve bölümün ayarlarını açın. Varsayılan parçanızın arka plan rengini seçtiğiniz şekilde değiştirin.
Arka plan rengi: #000000
Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #ffffff Sıra #1 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak bölümünüze ilk satırı ekleyerek devam edin: Metin modülünü ekle H2 içeriği Ekle Metin modülünü bir sonraki yeni satırınıza ekleyin. H2’nin birkaç kopyasını ekleyin, bir sonraki bir şey gösteren ‘▼’ sembolü ile birlikte.
H2 Metin Ayarları Modül Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Trebuchet
Başlık 2 Renk Metni: #FF0F3B
Başlık 2 Metin Boyutu: 100px (masaüstü), 80px (tablet), 60px (telefon)
Başlık alanı 2 harf: -5px
Bu satırda ihtiyacımız olan ikinci ve son görünürlük bölücü modülünü ekleyin. Görünürlük ayarlarında ‘Ekran göster’ seçeneğini etkinleştirdiğinizden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesine devam edin ve bölücünün rengini değiştirin. Renk: #FF0F3B
Yapıştırıcı değişimi de modül boyutunu ayarlayın. Bölücü ağırlığı: 2px
Genişlik:% 14 Bir sonraki satıra satırlar #2 sütun yapısı ekleyin! Burası, imleci (masaüstü) veya tıkladıktan (tablet ve hücresel) yönlendirdikten sonra görüntülemek istediğiniz tüm içeriği yerleştirmeniz gereken yerdir. Aşağıdaki sütun yapısını kullanıyoruz, ancak istediğiniz kadar satır ve modül ekleyebileceğinizi ve ihtiyaçlarınıza göre düzenleyebileceğinizi unutmayın:
Metin modülünü sütun 1’e ekleyin, içeriği ekleyin, metin modülünü istediğiniz içerikle ilk sütuna yerleştirin.
Metin Ayarları Metin Modülü Tasarım Sekmesi’ni açın ve metin oryantasyonunu değiştirin. Metin Oryantasyonu: haklı çıkar Metin modülünü Sütun 2’ye ekleyin Dolgu ekleyin, metin modülünü ikinci sütuna ve istediğiniz içerikten bazılarına ekleyin. Metin Ayarları Bir kez daha, metin ayarlarındaki metin yönünü değiştirin.
Boyut ayarını varsayılan boyut bölümüne ekleyin Parçanızı bitirdikten sonra, sarkma efekti oluşma zamanı. Ayarları açın ve çeşitli ekran boyutlarında maksimum yüksekliği değiştirin: Maksimum Yükseklik: 300 piksel (masaüstü), 280px (tablet), 260 piksel (cep telefonu) Boyutu Doğrudan Bir maksimum yükseklikte Hover seçeneğini etkinleştirin ve çeşitli ekran boyutlarındaki tüm öğeleri kapsayacak kadar yüksek bir değer ekleyin. Bu değer, tüm öğelerinizin kabın başlangıç boyutunu aşmadan görünmesini sağlar.
Maksimum Yükseklik: 5000 piksel Dikey taşma sonra, bölümün devam eden sekmesini açın ve dikey taşmayı değiştirin. Bu, bölümün kabını aşan tüm içeriği gizleyecektir.
Dikey taşma: gizli Geçiş Düzgün bir geçiş yapmak için, Gelişmiş sekmesindeki geçiş ayarlarını da değiştiririz.
Geçiş süresi: 800ms Geçiş gecikmesi: 500ms
İlk vurguyu yapmayı bitirdikten sonra tüm bölümlerin klonları, istediğiniz kadar klon yapabilirsiniz. Parçanın başlığını değiştirin, elbette, yinelenen bölümün başlığını değiştirmek istersiniz.
H2 metninin rengini değiştirin Tasarımda bazı varyasyonlar yapmak için, aşağıdaki basılı ekranda vurgulanan modülün metninin metnini de değiştireceğiz.
Başlık 2 Renk Metni: #C4C4C4 Bölücü rengini metin modülüne eşlik eden bölücü rengi ile birlikte değiştirin. Renk: #c4c4c4 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Gerçek öğreticiye girmeden önce yaklaşarak, Hakkında Bölüm yapmak için kullanılan teknikleri tartışacağız. Bu tekniği, herhangi bir tasarım stiliyle oluşturduğunuz her türlü web sitesine uygulayabilirsiniz.
1. Sayfanıza ilk bölümü ekleyin, yeni bir sayfada yeni bir tasarım başlattığınızı varsayalım. Yapmanız gereken ilk şey, yeni bir düzenli parça eklemektir. 2. Bölümün başlığını içeren yeni bir satır ekleyin Daha sonra, bölüm başlığınızı içeren bir metin modülüne sahip yeni bir satır ekleyerek devam edebilirsiniz. Ayrıca bir bölücü modülü ve satırın yönlendirildiğinde veya dokunulduğunda uzandığını gösteren bir şey de ekleyebilirsiniz (bu yayının önizlemesinde örneğe bakın). İçeriğin diğer kısmının başlığının başlığını ayırmak çok önemlidir, bu nedenle başlıklar ve bir sonraki adım arasında yeterli alan bıraktığınızdan emin olun.
3. Kalan bölüm içeriğini mükemmelleştirin (istediğiniz kadar çok satır ve modül ekleyin) Bölümün başlığını tamamen size kadar takip eden tasarım öğelerini. İstediğiniz uzun veya kısa bölümü yapabilir ve herhangi bir tasarım stilini kullanabilirsiniz. 4. Varsayılanlığı değiştirin ve parçanın maksimum yüksekliğini işaret edin. Parçanızın varsayılan yüksekliği yalnızca bölümün başlığında eşleşmesi amaçlanmıştır. İmleci yönlendirirken, bölüm başlangıç boyutunu geri alacaktır. 5. Taşma Dikeyini Gizle Bu tekniğin bir başka önemli kısmı dikey taşmaları gizlemektir. Varsayılanın maksimum yüksekliğini, parçanın başlangıç yüksekliğinden daha küçük olan parçanıza ayarladıktan sonra, taşma yapılacaktır. Taşmanın görünmediğinden emin olmak için, taşmanın bölümün görünürlük ayarlarında gizlendiğinden emin olmalısınız. 5. Sayfadaki tüm parçalar için adımları tekrarlayın, ziyaretçileriniz tarafından değer verilecek net bir kullanıcı deneyimi oluşturmak için sayfanızdaki tüm parçalar için aynı adımları tekrarlayın. YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Varsayılan arka plan renginin yeni bir bölümünü ekleyin Şimdi bu yazı yaklaşımından geçtik, bir şeyi harekete geçirmeye başlamanın zamanı geldi! İlk normal bölümü WordPress sitenizdeki yeni bir sayfaya ekleyin ve bölümün ayarlarını açın. Varsayılan parçanızın arka plan rengini seçtiğiniz şekilde değiştirin.
Arka plan rengi: #000000
Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #ffffff Sıra #1 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak bölümünüze ilk satırı ekleyerek devam edin: Metin modülünü ekle H2 içeriği Ekle Metin modülünü bir sonraki yeni satırınıza ekleyin. H2’nin birkaç kopyasını ekleyin, bir sonraki bir şey gösteren ‘▼’ sembolü ile birlikte.
H2 Metin Ayarları Modül Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Trebuchet
Başlık 2 Font Ağırlığı: Ultra Kalın
Başlık 2 Metin Seviyesi: SolBaşlık 2 Renk Metni: #FF0F3B
Başlık 2 Metin Boyutu: 100px (masaüstü), 80px (tablet), 60px (telefon)
Başlık alanı 2 harf: -5px
Bu satırda ihtiyacımız olan ikinci ve son görünürlük bölücü modülünü ekleyin. Görünürlük ayarlarında ‘Ekran göster’ seçeneğini etkinleştirdiğinizden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesine devam edin ve bölücünün rengini değiştirin. Renk: #FF0F3B
Yapıştırıcı değişimi de modül boyutunu ayarlayın. Bölücü ağırlığı: 2px
Genişlik:% 14 Bir sonraki satıra satırlar #2 sütun yapısı ekleyin! Burası, imleci (masaüstü) veya tıkladıktan (tablet ve hücresel) yönlendirdikten sonra görüntülemek istediğiniz tüm içeriği yerleştirmeniz gereken yerdir. Aşağıdaki sütun yapısını kullanıyoruz, ancak istediğiniz kadar satır ve modül ekleyebileceğinizi ve ihtiyaçlarınıza göre düzenleyebileceğinizi unutmayın:
Metin modülünü sütun 1’e ekleyin, içeriği ekleyin, metin modülünü istediğiniz içerikle ilk sütuna yerleştirin.
Metin Ayarları Metin Modülü Tasarım Sekmesi’ni açın ve metin oryantasyonunu değiştirin. Metin Oryantasyonu: haklı çıkar Metin modülünü Sütun 2’ye ekleyin Dolgu ekleyin, metin modülünü ikinci sütuna ve istediğiniz içerikten bazılarına ekleyin. Metin Ayarları Bir kez daha, metin ayarlarındaki metin yönünü değiştirin.
Boyut ayarını varsayılan boyut bölümüne ekleyin Parçanızı bitirdikten sonra, sarkma efekti oluşma zamanı. Ayarları açın ve çeşitli ekran boyutlarında maksimum yüksekliği değiştirin: Maksimum Yükseklik: 300 piksel (masaüstü), 280px (tablet), 260 piksel (cep telefonu) Boyutu Doğrudan Bir maksimum yükseklikte Hover seçeneğini etkinleştirin ve çeşitli ekran boyutlarındaki tüm öğeleri kapsayacak kadar yüksek bir değer ekleyin. Bu değer, tüm öğelerinizin kabın başlangıç boyutunu aşmadan görünmesini sağlar.
Maksimum Yükseklik: 5000 piksel Dikey taşma sonra, bölümün devam eden sekmesini açın ve dikey taşmayı değiştirin. Bu, bölümün kabını aşan tüm içeriği gizleyecektir.
Dikey taşma: gizli Geçiş Düzgün bir geçiş yapmak için, Gelişmiş sekmesindeki geçiş ayarlarını da değiştiririz.
Geçiş süresi: 800ms Geçiş gecikmesi: 500ms
İlk vurguyu yapmayı bitirdikten sonra tüm bölümlerin klonları, istediğiniz kadar klon yapabilirsiniz. Parçanın başlığını değiştirin, elbette, yinelenen bölümün başlığını değiştirmek istersiniz.
H2 metninin rengini değiştirin Tasarımda bazı varyasyonlar yapmak için, aşağıdaki basılı ekranda vurgulanan modülün metninin metnini de değiştireceğiz.
Başlık 2 Renk Metni: #C4C4C4 Bölücü rengini metin modülüne eşlik eden bölücü rengi ile birlikte değiştirin. Renk: #c4c4c4 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
