WordPress·5 dkokuma

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 […]

A2A Dijital EkibiWeb tasarım, reklam ve SEO
Tasarımcı monitörde bulanık sayfa bloklarını sürükleyip bırakıyor – Elementor ile Ana Sayfa Düzenleme
Bu yazıda

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…

A2A Dijital Ekibi

Kayseri'den 17+ ülkeye web tasarım, e-ticaret, reklam ve SEO hizmeti veren ekibimiz; sahada test ettiği yöntemleri burada paylaşıyor.

Bunları da okuyun

Tüm yazılar
Web Tasarım7 dk

Claude AI ile WordPress Tasarımı Nasıl Yapılır?

Yapay zeka araçları kodlama bariyerlerini ortadan kaldırırken, üretilen statik kodları dinamik sistemlere entegre etmek yeni bir teknik zorluk yaratıyor. Birçok kullanıcı, Claude AI arayüzünde kusursuz çalışan bir yapıyı kendi sitesine kopyaladığında bozuk düzenler ve çalışmayan fonksiyonlarla karşılaşıyor. Bu rehberde, WordPress’te Claude AI tasarımı kullanmanın teknik temellerini, kod çakışmalarını önleme stratejilerini ve statik HTML/CSS çıktılarının WordPress […]

Dijital Pazarlama7 dk

Claude AI ile Web Tasarım: 50 Farklı UI Stili ve WordPress Entegrasyonu

Modern web tasarımında en büyük vakit kaybı, müşterinin ne istediğini tam olarak anlayana kadar yüzlerce farklı tema veya UI (Kullanıcı Arayüzü) taslağı arasında kaybolmaktır. Yapay zeka bu süreci kökünden değiştiriyor. Sadece kod yazmakla kalmayan, aynı zamanda bir sanat yönetmeni gibi çalışan Claude AI, girdiğiniz referansları veya kendi marka kimliğinizi analiz ederek saniyeler içinde onlarca farklı […]

Web Tasarım7 dk

WordPress 7.0 ve Yapay Zeka: Web Tasarımda Devrim

Uzun süredir beklenen ve çıkışı sürekli ertelenen WordPress 7.0 sürümü nihayet beta aşamasına ulaştı ve sektördeki birçok dengeyi değiştirecek yeniliklerle geliyor. Bugüne kadar sayısız eklenti ile çözmeye çalıştığımız yapay zeka entegrasyonu artık sistemin tam merkezine yerleşiyor. Bu devasa güncelleme sadece bir sürüm atlaması değil aynı zamanda dijital dünyadaki web tasarım süreçlerinin geleceğini kökünden değiştirecek radikal […]

Ücretsiz ön görüşme

Bu konuda destek ister misiniz?

Okuduklarınızı sizin işinize nasıl uygularız, 15 dakikalık bir görüşmede birlikte konuşalım.