Elementor ile Ana Sayfa Düzenleme

Merhaba Güzel İnsan!

Bu yazımızda sana lcwakiki.com’un ana sayfasını Shoptimizer temasını yüklediğimiz, video ve yazılarımızın daha etkili olması için Elementor sayfa inşa edici aracı ile oluşturduğumuz beyense.com sitemize uyguladık. LCW ana sayfasındaki bannerlar ve yerleşimi Elementor Sayfa inşa edici aracını kullanarak kendi e-ticaret sitemize nasıl uyguladığımızı merak ettin değil mi? Haydi gel başlayalım!

Konuyu paylaştığımız videoyu aşağıdaki bağlantıdan izleyebilir, aklına takılan her şeyi sorabilirsin.

Sitemizin ana sayfasını LC Wakiki ana sayfasına benzer hale getirmek için öncelikle LCW anasayfasını inceleyelim;

Görmüş olduğun gibi en üst tarafta bir gif bulunmakta, tekli bannerlar üçlü ve dörtlü bannerlardan oluşuyor.

Haydi inşa etmeye başlayalım;

Ana Sayfa Nasıl Düzenlenir?

Beyense.com ana sayfamızı temizleyerek, yeni bir ana sayfa inşa etme durumuna hazırlamış oluyoruz. Sonrasında artı sekmesine basarak yeni bir section ekliyoruz;

Artıya bastıktan sonra karşımıza nasıl bir section istediğimize dair seçenekler gelecektir. Buradan biz tek sütunluk bir section tercih ediyoruz.

Ardından bu tek sütunluk sectionın içine sol taraftan bir image sürükleyip bırakıyoruz. Burada sağ tıklayarak edit section diyoruz böylece resmin boyutunu düzenliyoruz. Content Width’i full with diyerek tüm ekrana sığması komutunu veriyoruz. İşlem burada tamamlanmazsa stretch section kısmını açık duruma getiriyoruz.

Eğer yine de istenilen gibi tam ekran yapamadıysan bu sefer edit image diyerek image size’ı full duruma getirerek görsel boyutunu tüm ekrana sığacak şekilde düzenlemiş olursun. Bu şekilde ilk kısmı tamamlamış olduk.

İkinci kısmımızda 4 sütunluk bir section ekleyerek işe başlıyoruz. Bu dörtlü sectionun içinde ayrı ayrı 4 farklı yuvarlak banner mevcut olacak;

Dörtlü sectionu seçtikten sonra içlerine sol taraftaki elementor sütunundan image sürükleyip bırakıyoruz.

Üçüncü kısım için 3 farklı tek sütunluk banner kullanacağız.

Yine aynı şekilde artı işaretine basıp tek sütunluk bir section ekledikten sonra sol taraftaki elementor aramasına image yazıp bu görseli sectionun içine sürükleyip bırakıyoruz. Yine tam ekran olmasını istediğimiz için boyutunu full duruma getirip hemen altındaki stretch section’ı açarak tüm ekrana görselimizi yerleştirdik.

Sonraki iki bölüm de yine tek sütunluk sectionlar olduğu için aynı şekilde işlem yapmak yerine bu sefer sectionın ortasındaki 6 noktalı sekmeye tıklayarak duplicate ediyoruz yani bölümü olduğu gibi kopyalıyoruz. Bu işlerimi hızlı ve pratik şekilde yapmamızda büyük rol oynayacaktır.

Daha sonra yalnızca görsellerini değiştirerek diğer 2 bannerımızı da hazır hale getiriyoruz.

Dördüncü işlemimiz için üçlü section ekliyoruz. Artık senin için de pratik oldu değil mi? Artı işaretine bastıktan sonra üç sütunlu bir section sectikten sonra içlerine birer image sürükleyip bırakıyoruz. Böylece bu adımı da tamamlamış hale geliyoruz.

Beşinci adımımızda yine dört sütünlü bir section içinde bannerlar olduğunu görüyoruz. Bu sefer biraz önceki adımıza oluşturduğumuz sectionu duplicate ederek daha pratik yoldan işlemimizi tamamlayacağız.

Sonda bulunan bannerın hemen üst kısmında bir pencere gibi düzenleme işareti göreceksin buraya basıp duplicate ettiğin vakit artık dörtlü bir bannera ulaşmış olacaksın;

Daha sonra bu oluşturduğumuz dörtlü bannerın içerisindeki görselleri değiştirerek hazır hale getirmiş oluyoruz.

Son olarak üçlü sütun ekleyip içlerinde birer görsel ekleyeceğiz. Bura da da pratik yollar mevcut dilersen üçlü bölümü duplicate edip buraya taşıyabilirsin ya da bir önceki dörtlü bölümü duplicate edip sondaki bir bannerı silerek de üçlü bölüm oluşturabilirsin hangisi senin için daha pratikse onu tercih edebilirsin.

Böylece LC Wakiki’nin ana sayfasını kendi e-ticaret proje sayfamıza eklemiş olduk. Burada en önemli nokta görsellerin ve içeriklerin hazır bulunması! Biz daha hızlı ilerleyebilmek için görselleri indirmiştik. O yüzden direkt olarak ortamdan mevcut görselleri seçerek hızlı bir şekilde ilerledik.

Sen de ilham aldığın sitelere kendi sitene benzeterek pratik şekilde artık ana sayfa oluşturabilirsin. Anlattıklarımız umarız faydalı olmuştur. Daha fazla içeriğe ulaşmak için Youtube hesabımızı takip edebilir, aklınıza takılan her şeyi sorabilirsin. Yeni yazı ve videolarımızda görüşmek üzere sevgiyle kalın…

Sohbet aç.
💬 Yardımcı olmamızı ister misiniz?
👋 Merhaba,
Elementor ile Ana Sayfa Düzenleme ile ilgili bilgi almak ister misiniz?