WordPress'i görsel bir inşaat haline getirme

Sep 10, 2025
Nasıl Yapılır
(Resim Kredi: Element / Joseph Ford)

Görsel inşaatçılar, WordPress için uzun süre varmışlardır, ancak her zaman kullanımlarıyla bölünmeye neden olmuştur. Çoğu sayfa hızı ve ürettikleri kod açısından önemli dezavantajları vardı ve düzenleme ekranındaki sürükle ve bırak blokları değil, sonucun gerçekçi bir gösterimi değildi. Öte yandan, bazen sadece kod yazmak zorunda kalmadan hızlı bir şekilde tasarlayabilmek ve prototip tasarlamak istersiniz.

PageBuilder eklentisini kullanarak doğru kurulum ile, WordPress minimalist bir görsel olarak dönüştürülebilir Web Sitesi Oluşturucu , neredeyse temadan bağımsız olarak, bir dizi ayar oluşturur, bu da kolaylıkla karmaşık tasarımlar oluşturmanıza olanak sağlar.

Yirmi on dokuz varsayılanın kullanılması Wordpress teması , prototip hazırlamak veya üretime hazır hale getirmek için kullanılabilecek kullanıma hazır bir tuval oluşturabilirsiniz. Wordpress web siteleri . Bu tuval ile iki bölüm ve bir iletişim formu ile basit bir sayfa yapacağız.

Web sayfasını mobil dostu yapacağız ve iki eklenti kullanacağız, görsel bir üretici kullanımı ile ana endişeyi ele alacağız ve sayfanın zaten minimum yükleme süresini en aza indireceğiz. Alternatif olarak, bkz. WordPress Öğreticiler Becerilerinizi daha da ilerletmek için.

Büyütmek için her görüntünün sağ üstündeki simgeyi kullanın.

  • 2019'daki En İyi WordPress Hosting Hizmetleri

01. WordPress'in bir kopyasını kurun

Bir şeyleri atmak için, kullandığınız sisteme bir WordPress'in bir kopyasını kurun. Makinemde bir örnek oluşturmak için hızlı bir yükleme seçeneği sunan Laragon adlı bir program kullanıyoruz.

02. İhtiyacınız olmayan parçaları kaldırın

Give yourself a clutter-free page to work with

Kendine çalışmak için dağınık bir sayfa ver (Resim Kredi: Element / Joseph Ford)

Eklentilere gidin ve WordPress ile birlikte gelen her şeyi silin. Yazma sırasında, yeni devre dışı bırakmak için 'Klasik Editör' eklentisini kurma çabalarımızı kolaylaştıracak. Gutenburg editörü . Dağınıklığı azaltmak için, görünüşe ve GT'ye de gitmeliyiz; Widget'lar ve tüm widget'ları kaldırın.

03. Bir başlık ve altbilgi ile bir tema seçin

Kullandığımız temanın tek kısmı başlık ve altbilgidir - her şey geri soyulacak. Varsayılan yirmi on dokuz temayı kullanacağız ve size keskin görünmesini sağlamak için size hızlı değişiklikler göstereceğiz. Element kullanırken, tema ne kadar az olur.

04. Element'i kurun ve bir sayfa oluşturun

You'll find Elementor in the WordPress plugins library

WordPress Eklentileri Kütüphanesinde Element bulacaksınız. (Resim Kredi: Element / Joseph Ford)

Bulabilmek için WordPress eklentisi aramasını kullanın. Element ve yükleyin. Kurulduktan ve etkinleştirildikten sonra, yeni bir sayfa oluşturun. Yeni sayfanın 'evini' adlandırın ve veritabanında bulunması için taslak olarak kaydedin. 'Element'de Düzenle'yi tıklayın. Bu, Element Visual Builder'ı yükleyecektir.

05. Tam genişlik sayfa

Sayfaya bakarak, temamızın kutulu düzeni için sınırlandırılmıştır. Bunu devre dışı bırakmak için, Element Editörün sol altındaki COG'u tıklatın ve 'Sayfa Düzenini' 'Element Tam Genişliğine' olarak değiştirin. Çok sayıda sayfa olmadan bir web sitesi yapıyorsanız, başlığı ve altbilgiyi de kaldıran 'ElementCor Canvas' seçeneğini düşünebilirsiniz.

06. Bazı içerik ekleyin

Give yourself some content to work with

Çalışmak için kendinize biraz içerik verin (Resim Kredi: Element / Joseph Ford)

Şimdi boş bir sayfamız var, kendimize çalışmak için bir şeyler vermeliyiz. Mevcut tüm öğeleri görmek için editörün sağ üstündeki Element Grid simgesine tıklayın. Bunları sayfanın ortasına sürükleyerek bir başlık bloğu ve metin bloğu eklenir. Bu iki unsur, tipografimizi tarzamıza yardımcı olacaktır.

07. Başlık çizgilerini kaldırın

Tüm başlıkların üstünde bir çizginin oluşturulduğu yirmi on dokuz temayı kullanırken fark edebilirsiniz. WordPress Özelleştir aracını kullanarak kaldıralım. Biz buradayken, site kimlik ayarlarında ve bazı menü öğelerinde bir logo ekleyeceğim. 

 H1: Daha önce, H2: önce {
görüntü yok;
}

08. İçerik genişliğini düzeltin

Ensure the content lines up with the header

İçeriğin başlık ile kapandığından emin olun (Resim Kredi: Element / Joseph Ford)

İçerik bölümümüz başlık ile tam olarak sıraya girmiyor. Bunun nedeni, yirmi on dokuz, başlık ve altbilginin genişliğini ayarlamak için hesaplanmış bir marj kullanmasıdır. Bunu bazı CSS ile tutarlılık için temel bölümlerimizde çoğaltabiliriz.

Ayrıca Ana Eleman Ayarları sayfasındaki içerik genişliğini de artırmalıyız. 

 @Media sadece ekran ve (min-genişlik: 768px) {
.Elementor-top-section.Elementor-Section-
kutulu & gt; .elementor-container {
Marj: 0 Calc (% 10 + 60px);
}
}

09. Bir açılış bölümü yapın

Drag in the elements you want to include

Eklemek istediğiniz öğeleri sürükleyin (Resim Kredi: Element / Joseph Ford)

Sayfanın üst kısmıyla başlayacağız, bu da az miktarda metin ve bir görüntü içerecektir. Bölümümüzü daha önce silin ve Kırmızı Artı'yı tıklatarak yeni bir iki sütun bölümüyle değiştirin. Bir başlığa, bir metin editörü ve sol sütuna bir düğmeyi sürükleyin. Sağda bir resme sürükleyeceğiz.

10. Bir arka plan ekleyin

Üst üste gelerek bölümü seçin ve Blue Sekmesini tıklatın veya Navigator'u Eleman düğmelerinin sağ alt köşesinde kullanın. Üç sekme göreceksiniz - düzen, stil ve gelişmiş.

Düzen sekmesini kullanarak, bölümümüzü 80VH yükseklikte verin. Seçenekleri bulmak için stil seçin ve # 0073AA bir arka plan ayarlamak için arka plan seçeneğini kullanın.

11. Metin tarzı

You can change the font for your whole document in one go

Tüm dokümanınızın yazı tipini tek seferde değiştirebilirsiniz (Resim Kredi: Element / Joseph Ford)

Tüm belgemiz için yazı tipini değiştirmek için, Eleman çubuğunun üstündeki Hamburger menüsünde 'Varsayılan Yazı Tipleri'nı tıklayabiliriz. Bireysel metin öğelerinize de tıklayabilir ve renk ve diğer seçenekleri değiştirmek için stil sekmesini kullanın.

12. Arka Plan Yerleşimi Etkisi kullanın

Harika bir ek, Bölüm Stili sekmesinden arka plan bindirmeleri hızlı bir şekilde ekleme yeteneğidir. Bölümümüzü seçin ve arka plan sekmesine gidin. Arka plana doku vermek için bir resim verin, daha sonra 'arka plan kaplaması', aşağıdaki açılan ve bir degrade arka plan yerleşimi seçin.

13. Eylem için bir arama oluşturun

Sayfamızın ikinci bölümü, Eylem bölümüne çağrı olacak. İletişim formu 7'ye gömüleceğiz, ancak bir kısa kod oluşturabilecek her şey işe yarayacaktır. İki sütunla yeni bir bölüm yapın veya son bölümümüze sağ tıklayın ve çoğaltın.

Kişi Form eklentinizi takın ve formunuz için kısa kodu oluşturun. Sağ sütunda, bir kısa kod widget'ını sürükleyin ve kısa kodu kutuya yapıştırın.

14. Mobil Dostu

Don't forget to tweak your design for mobile

Mobil için tasarımınızı tweak etmeyi unutma (Resim Kredi: Element / Joseph Ford)

Sayfamız için mobil seçeneklere erişmek için, temel panelin altındaki 'duyarlı seçenekleri' açmanız gerekir. 'Mobil' modunu seçerek, bölümlerimizin biraz dolguya ihtiyacı olduğunu görebiliriz.

Her ayarın yanında mavi bir simge olduğundan emin olarak kontrol edebileceğiniz mobil seçeneği kullanarak, seçimlerimiz ana masaüstü görünümünü etkilemez. Ancak, bu modda yapılan herhangi bir yerleşim değişiklikleri masaüstü görünümünü etkileyecektir.

15. Görüntüleri optimize edin

Sayfa yükleme hız kaygılarını en aza indirmek için, bir görüntü sıkıştırma yapmalıyız. Bu bir eklenti veya web sunucunuz aracılığıyla yapılabilir. Şimdilik, görüntülerimiz için maksimum kalite ve genişlik belirlemek için popüler bir eklenti, EWWW image optisizatörü kullanalım ve ardından bir optimizasyon çalıştırın.

16. Performansı artırmak için önbellek sayfaları

Make your site lightning-fast with help from a cache plugin

Sitenizi yıldırım-hızlı bir önbellek eklentisinden yardım ile yapın (Resim Kredi: Element / Joseph Ford)

Son olarak, sayfamız için yük sürelerini en üst düzeye çıkarmak için bir önbellek eklentisi kuracağız. Orada birçok önbellek eklentisi var, ancak şu anda, Önbellek Etkinleştiri Düşük profildir ve bu kurulumla iyi çalışır.

Önbellek etkinken, web sitesi hızlı bir şekilde yüklenir. Ayrıca arka planda tamamen işlevsel bir görsel oluşturucu var. Tasarlamak için sizin için mükemmel hızlı çalışan boş tuval.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Görüntü Kredi: Gelecek)

26 Eylül'de bize katılın Css oluşturmak , Web tasarımcıları için ısmarlama bir konferans yaratıcı bloq, net ve web tasarımcısı tarafından getirildi . 15 Ağustos 2019'dan önce rezervasyon yaparken erken bir kuş biletiyle £ 50 kazanın.

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı satın al 287 veya abone ol .

Daha fazla oku:

  • 40 parlak WordPress öğreticileri
  • WordPress'i başsız bir CMS olarak kullanın
  • Wordpress 5.0'da Yenilikler Neler?

Nasıl Yapılır - En Popüler Makaleler

Maya'da retikolojiyi hızlandırma

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Antony Ward) Maya'da retikoloji yapabilme yeteneği yararlı bir beceridir. Retikoloji, sadece oyu..

CSS'de hafif veya koyu modlar nasıl uygulanır

Nasıl Yapılır Sep 10, 2025

CSS şartnamesi hiç gelişmektedir. CSS'de yeni özelliklerin uygulanması için işlem karmaşıktır, ancak basitleştirilmiş..

Express.js ile başlayın

Nasıl Yapılır Sep 10, 2025

NODE.JS ile tarayıcı yüzü oluşturma uygulamaları sıkıcı olur. Express.js bir Javascript çerçeve..

Jump Start'ı Expo ile Yerel Reaksiyona Girdi

Nasıl Yapılır Sep 10, 2025

Yerel tepki JavaScript kullanarak yerel mobil uygulamalar oluşturmanıza olanak sağlayan bir platformdur. İsminin ..

Suluboya köpüklü bir gece gökyüzüne üç adım

Nasıl Yapılır Sep 10, 2025

Suluboya, sağa doğru olan inanılmaz bir ortamdır. Sanat Teknikleri En büyülü ve benzersiz görüntüleri ya..

Van Gogh gibi bir portre boya

Nasıl Yapılır Sep 10, 2025

Hollanda İzlenim Görevlisi Pansiyon Vincent Van Gogh (1853-1890) kariyerinde birçok kendi portre yarattı - bazıları bu kada..

Kullanılabilirlik testine giriş

Nasıl Yapılır Sep 10, 2025

Başarılı bir web ürünü, sadece kuruluşunuzun ihtiyaçlarını değil, aynı zamanda kullanıcılarınızın ihtiyaçlarını karşılamaktadır. Kullanılabilirlik testi - erken ve sı..

Oyun tasarımı için bir uzay gemisi modelleme

Nasıl Yapılır Sep 10, 2025

İle Kırık alan Nedir? - Oynanması için ücretsiz bir takım savaş oyunu - Gemiler ve yetenekleri gösterinin..

Kategoriler