Elementor'da tuval içeriği nasıl oluşturulur: Bir kılavuz

Kullanıcıları karıştırmadan küçük bir web alanında çok fazla içerik sunmak, web tasarımcıları için bir zorluktur. Kapalı tuval içeriği, bu bağlamda size yardımcı olabilecek modaya uygun, yeni ve akıllı bir çözümdür.

Elementor Page Builder eklentisiyle, web sitenizde kolayca Canvas dışı menüler, promosyon pankartları, kenar çubukları ve daha fazlasını oluşturabilirsiniz. Bu sadece içerik sunumunda size yardımcı olmakla kalmaz, aynı zamanda navigasyonu basitleştirmek, okunabilirliği geliştirmek ve kullanıcıları dönüştürmek.

Siteniz Elementor ile oluşturulmuşsa, siteniz için tuval içeriği oluşturmak sadece birkaç dakika sürecektir. Bu blog yazısında, Elementor'daki tuval içeriğini adım adım kılavuzla nasıl ekleyeceğiniz konusunda size rehberlik edeceğiz. Başlayalım!

Tuval içeriği nedir?

Off Canvas içeriği, kullanıcı etkileşimi tarafından tetiklenene kadar içeriği ekrandan gizli tutan bir Elementor Widget'tır. Genellikle, bu widget ekrandaki bir düğme ile bağlanır. Kullanıcılar düğmeye her tıkladığında, Canvas dışı içerik anında kayar ve ek bilgileri sergiler.

Yukarıda belirtildiği gibi, Canvas dışı içerik widget'ı menüler, promosyon pankartları, kenar çubukları, giriş ve kayıt panelleri, alışveriş sepetleri, içerik filtreleri ve hızlı görüntüleme seçenekleri gibi içeriği kapsar. Gerektiğinde erişilmesi kolay olan temiz ve organize bir düzenin korunmasına yardımcı olur.

Elementor'da tuval içeriği nasıl oluşturulur

Şimdi, bu bölümde, Elementor'da tuval içeriğinin nasıl oluşturulacağını adım adım kılavuzla tartışacağız. Ancak öğreticiye atlamadan önce, sitenizde yüklü ve etkinleştirilmiş aşağıdaki eklentiler olduğundan emin olun.

• Element
• Happyaddons
• HappyAddons Pro

Sitenize hazır olduklarında, aşağıda açıklanan öğreticiyi takip etmeye başlayın.

Adım 01: Off Canvas İçerik Widget'ı Elementor Canvas'a ekleyin

Elementor Canvas ile bir gönderi veya sayfa açın. Elementor panelinin arama kutusuna adını yazarak widget'ı bulun. Widget'ı gördükten sonra tuval içine sürükleyin ve bırakın.

Tuval'e bir düğme veya simge eklenir. Tıklayarak tuval bölümünü açabilirsiniz. Aşağıda ekli video klipine bir göz atabilirsiniz.

Adım 02: Canvas Widget'ı web sayfanıza ekleyin

Yukarıda, widget'ı boş bir tuval üzerine yerleştirdik. Ancak web sayfanızın herhangi bir kısmına ekleyebilirsiniz. Bunu açıklamak için dekore edilmiş bir web sayfası açtık. Ardından, widget'ı kahraman bölümünün üzerine yerleştirin

Widget'ın web sayfasının başlık bölümüne eklendiğini görebilirsiniz.

Elementor ile WordPress'te yerel SEO'nun nasıl geliştirileceğini kontrol edin.

Adım 03: Kapalı tuval widget'ı için özel içerik türünü seçin

İçerik> OffCanvas içeriğine gidin. İçerik Türü seçeneğinin yanındaki açılır listeyi tıklayın .

Görüntülemek istediğiniz içerik türüne göre widget için açılır listeden uygun bir içerik türü seçmelisiniz.

Bu öğretici için özel içerik türünü seçtik.

WordPress'te bir bilgi tabanının nasıl tasarlanacağına dair bu kılavuzu keşfedin.

Adım 04: Widget'a bilgi ekleyin

Bu kutuları kullanarak istediğiniz içeriği widget'a ekleyin. Kutuları tıklamak onları genişletir ve bilgi eklemenize izin vermek için boşluklar oluşturur.

Bir kutuya genişleterek içerik eklediğimizi görebilirsiniz. İlgili seçenekleri tıklayarak metin ve medya dosyaları ekleyebilirsiniz.

Elementor'da çarpıcı infografik web sayfaları oluşturmayı öğrenin.

Adım 05: Bir geçiş kaynağı seçin

Geçiş bölümünden, geçiş kaynak türünü, konumunu, animasyonunu ve etiketini değiştirebilirsiniz.

Dokunma Kaynak seçeneğinin yanındaki açılır listeyi açın . İstediğiniz geçiş türünü seçin. Bu öğretici için geçiş türü olarak düğmeyi seçtik.

Ardından, düğme kopyasını düğme metni seçeneğinden değiştirin. Bir düğme simgesi bile ekleyebilirsiniz. Tuval üzerindeki düğmedeki tüm değişiklikleri kontrol edin.

Adım 06: Kapat çubuğu simgesini özelleştirin

Kapalı tuval bölümü sağ üst köşede bir çapraz simge (x) ile birlikte gelir. Özelleştirmek için Elementor panelindeki kapatma bölümünü genişletin.

Oradan ilgili seçenekleri kullanarak simgeyi devre dışı bırakabilir, hizalamayı değiştirebilir, simge türünü, simge başlığını ve daha fazlasını değiştirebilirsiniz. Umarım bunları kendin yapabilirsiniz.

WordPress'te bir etkinlik takvimi nasıl oluşturulacağına dair bir öğretici.

Adım 07: Widget için ayarları değiştirin

Ayarlar bölümünü genişletin. Yön seçeneğinden , tuval widget'ının konumunu değiştirebilirsiniz. Sol, sağ, üst veya altta konumlandırabilirsiniz.

Ardından, bir içerik geçiş efekti seçebilirsiniz . Web sayfasına bir animasyon efekti ekler ve düğmeye tıklandığında gösterilir.

Örneğin, İçerik Geçiş Türü olarak Reveal'ı seçtik. Şimdi, aşağıda eklenen video klibine bakın. Düğme tıklandıktan sonra, sayfa kapalı tuval bölümü ile birlikte hareket eder.

Aynı şekilde, diğer seçenekleri yapılandırın.

Adım 08: Kapalı tuval widget'ını stilize et

Stil sekmesine gelin ve OffCanvas içeriğini genişletin.

Buradan, tuval boyutunu değiştirebilir, bir sınır tipi ekleyebilir, sınır genişliğini artırabilir, bir sınır rengini değiştirebilir ve bir sınır yarıçapı ayarlayabilirsiniz. Umarım yaptığımız gibi kendiniz yapabilirsiniz.

İçerik bölümünü genişletin. Kapalı tuval widget'ıyla içerik için içerik hizalamasını, arka plan rengini, sınır türünü, kenarlık genişliğini, sınır rengi ve sınır yarıçapını özelleştirme seçenekleri alacaksınız.

Aynı şekilde, tipografi, yazı tipi boyutu ve metin rengini değiştirebilirsiniz.

WordPress'te 360 ​​dönen ürün fotoğrafçılığının nasıl görüntüleneceğine dair basit bir rehber.

Adım 09: Geçiş düğmesini stilize et

Aynı şekilde, geçiş bölümünü genişletin. Bu , düğme hizalamasını, tipografiyi, metin rengi, sınır yarıçapını, düğmeyi arka planını vb. Özelleştirmenizi sağlayacaktır.

10. Adım: Kapat Çubuk simgesini özelleştirin

Yakın çubuk bölümünü genişleterek, kapanış simgesinin rengini, boyutunu ve daha fazlasını özelleştirebilirsiniz.

Adım 11: Kapalı Tuval Widget Mobile Duyarlı Olun

Web öğelerinizin her biri mobil cihazlar için optimize edilmelidir, böylece tüm cihaz türlerinde iyi görüntülenir. Aksi takdirde, çoğu web sitesindeki tüm trafiğin yaklaşık% 50'si mobil kullanıcılardan geldiğinden, büyük trafik potansiyelini kaçırabilirsiniz.

Mobil optimizasyon için Elementor panelinin altındaki Duyarlı Mod simgesini tıklayın. Farklı ekran boyutları arasında geçiş yapmanıza izin veren seçeneklerle bir topBar görünecektir.

Şimdi, farklı ekran boyutları arasında geçiş yapın ve tasarımların ilgili cihazlar için uygun olup olmadığını kontrol edin. Herhangi bir sorun varsa, yazı tipi boyutunu, düğme boyutunu, tuval genişliğini, yüksekliği ve diğer seçenekleri gerektiği gibi değiştirebilirsiniz.

Değişiklikler, diğerlerini etkilemeden yalnızca söz konusu ekran boyutu için kaydedilecektir. Böylece, tuval widget mobiline duyarlı hale getirebilirsiniz.

Adım 12: Kapalı Tuval İçerik Widget'ı önizleyin

Şimdi, web sayfasının önizleme seçeneğine gidin ve widget'ın iyi çalışıp çalışmadığını kontrol edin. Görebilirsiniz, sonumuzda iyi çalışıyor.

Kapalı tuval içerik widget'ını kullanırken dikkate alınması gereken şeyler

Widget'ı en iyi şekilde kullanmak için, tuval içerik widget'ını kullanırken dikkatlice dikkate almanız gereken birkaç nokta vardır. Aşağıdaki onlara bir göz atın.

• Pürüzsüz kullanıcı deneyimi

Canvas dışı içerik, kullanıcıların deneyimlerini rahatsız etmek yerine sitede gezinmelerini desteklemelidir. Widget'ın iyi koordine edilmiş animasyonlarla sorunsuz çalıştığından emin olun. Bununla birlikte, özellikle cep telefonlarında performansı bozabilecek ağır hareket efektlerini en aza indirin.

• Cep telefonu için optimize et

Yukarıda belirtildiği gibi, bugün önemli sayıda web ziyaretçisi genellikle mobil cihaz kullanıcılarından gelir, web sitelerinizi tüm cihaz türleri için iyi optimize etmelisiniz. Aksi takdirde, mobil merkezli kullanıcılar ciddi olumsuz bir deneyime sahip olacaklar.

• Kolay Kapanış

Kapalı tuval içerik widget'ı basit bir kapanış seçeneği içermelidir. Bulması zorsa, kullanıcılar kesinlikle sinirli hissedeceklerdir. Bu nedenle, kapanış simgesini gezinmeyi kolaylaştıracak şekilde unutmayın.

• İçerik alaka düzeyi

Canvas dışı içeriğin, navigasyon araçları veya promosyon afişleri gibi belirli işlevleri yerine getirmek için kısa kalması ve odaklanması gerekir. Aşırı bilgilerin veya alakasız unsurların dahil edilmesi, odaklanmış ve kesintisiz bir kullanıcı deneyimi sunma amacını zayıflatır.

Son sözler!

Kapalı tuval içerik widget'ı, kullanıcıları etkileşim kurmak ve nasıl kullanacağınızı bildiğinizde dönüşümleri artırmak için güçlü bir yol olabilir. Widget üzerinde temel bir öğreticiyi kapsamaya çalıştık. Çünkü widget'ın tüm özelliklerini ve bunların nasıl kullanılacağını tartışmak gerçekten zor.

Bu nedenle, bu öğreticinin ötesinde, widget ile başka ne yapabileceğiniz hakkında daha fazla fikre sahip olmak istiyorsanız, Elementor Off Canvas İçerik Demo sayfamızı ziyaret edebilirsiniz. Sitenize doğrudan kopyalayıp yapıştırabileceğiniz iyi bir Canvas dışı tasarım koleksiyonu alacaksınız.

Daha fazla cevaplanmamış sorunuz varsa, aşağıdaki yorum kutusundan bize bildirin. Yararlı cevaplarla çok yakında size geri döneceğiz.