Özel Site Oluşturmak için Divi Builder Nasıl Kullanılır (Adım Adım)

Web sitenizin düzenini oluşturmak için Divi Builder eklentisini kullanmak ister misiniz?

Divi, web siteleriniz için güzel düzenler oluşturmanızı ve özelleştirmenizi kolaylaştıran en popüler sayfa oluşturucu eklentilerinden biridir. Bu makalede, mizanpajlarınızı oluşturmak için Divi Builder'ı tam olarak nasıl kullanacağınızı anlatacağız.

Ama ondan önce Divi Builder eklentisinin ne olduğuna hızlıca bir göz atalım.

Divi Oluşturucu Nedir?

Divi Builder eklentisi, tek bir kod satırı yazmadan web sitenizin mizanpajlarını oluşturmanıza, özelleştirmenize ve düzenlemenize olanak tanıyan bir WordPress sayfa oluşturucusudur. Bu sayfa oluşturucuyu kullanmanın avantajlarından biri, tamamen benzersiz, tamamen özelleştirilmiş tasarımlar oluşturmanıza izin vermesidir.

Ayrıca, üzerinde çalışırken yaptığınız değişiklikleri önizleyebilirsiniz. Bu, geleneksel WordPress metin düzenleyicisiyle çalışmanın aksine Divi'yi kullanmanın ilerlemenizi kontrol etmek için sürekli sekme değiştirmeyi gerektirmediği anlamına gelir. Gerçek anlamda bir WYSIWYG (ne görürsen onu alırsın) editörüdür.

Divi Builder, Divi temasıyla harika çalışır, ancak siz kullanmasanız bile
bunları birlikte kullanın, seçtiğiniz diğer herhangi bir WordPress temasıyla iyi çalışır.

Satır içi metin ve duyarlı düzenleme açısından büyük esneklik sunar. Ayrıca 40 web sitesi öğesi, 800'den fazla önceden oluşturulmuş tasarım, 100'den fazla tam web sitesi paketi, çeşitli şekil bölücüler ve çok daha fazlasını kullanabilirsiniz. Ayrıca, gelişmiş stil seçenekleri istiyorsanız kendi kodunuzu bile ekleyebilirsiniz.

Divi hakkında daha fazla bilgi edinmek için buradaki ayrıntılı incelememizi okuyun.

Aşağıdaki adımlarda, tasarımlarınızı oluşturmak için Divi'yi nasıl kullanacağınızı göstereceğiz.

1. Adım: Divi Builder'a Başlarken

Divi Builder'ı kullanmaya başlamak için önce eklentiyi web sitenize yüklemeniz ve etkinleştirmeniz gerekir. Bunu nasıl yapacağınızı bilmiyorsanız, bir eklentinin nasıl kurulacağı ve etkinleştirileceği ile ilgili bu makaleyi okuyun.

Eklenti yüklenip etkinleştirildikten sonra, düzenlerinizi oluşturmak için kullanmaya başlayabilirsiniz. Divi ile yeni bir sayfa oluşturalım.

2. Adım: Divi Builder ile İlk Sayfanızı Oluşturun

Divi ile ilk sayfanızı oluşturmak için WordPress panonuza gidin ve Sayfalar » Yeni Ekle'yi tıklayın. Divi Builder'ı Kullan düğmesi ile ekranınızda şimdi yeni bir sayfa görünecektir. Bu düğmeye tıklayın:

Ardından Divi Builder'ı Kullan düğmesine tıklayın:

Bu sizi 3 seçeneğiniz olacak yeni bir ekrana götürecektir. Tasarımınızı herhangi bir önceden oluşturulmuş düzen kullanmadan sıfırdan oluşturmak istiyorsanız, 1. seçeneği seçin. Önceden oluşturulmuş bir düzen kullanmak istiyorsanız 2. seçeneği seçin. 2. seçeneği seçerek hemen başlayabilirsiniz çünkü her şey zaten sizin için inşa edilmiştir.

3. seçenek, mevcut bir tasarımı yeniden kullanmanızı sağlar.

Hangisinin sizin için en iyi seçenek olduğunu düşünüyorsanız onu seçebilirsiniz.

3. Adım: Önceden Oluşturulmuş Düzeni/Demo Sitesini İçe Aktarma

Web sitenizi sıfırdan oluşturmak istemiyorsanız, önceden hazırlanmış bir düzen seçebilirsiniz. Bunun için, Hazır Düzen Seç seçeneğini seçmeniz yeterlidir . Bu, sizin için önceden oluşturulmuş düzen kitaplığını görüntüler:

Web sitenizin nişine bağlı olarak, belirli bir kategorideki düzenleri aramak isteyebilirsiniz. Bunu yapmak için solunuzda bir kategori seçebilir veya bir kategori aramak için arama alanını kullanabilirsiniz. Divi, gereksinimlerinize uyan tüm düzenleri gösterecektir.

Daha sonra beğendiğiniz düzeni seçebilirsiniz. Bu size 2 farklı seçenekle düzenin bir önizlemesini gösterecektir.

• Canlı demoyu görüntüle
• Bu düzeni kullan

Bu düzeni kullan seçeneğini seçin. Bu, eklentinin kimliğini doğrulamanızı isteyecektir. Kimlik doğrulaması için kullanıcı adınızı ve API'nizi kullanın:

Bundan sonra, düzeninizi özelleştirmeye başlayabilirsiniz. Bununla birlikte, bu eğitimin iyiliği için, her şeyi sıfırdan inşa etmemize izin verecek olan 1. seçenek olan İnşaya Başla'yı seçeceğiz.

Adım 4: Satırlarınızı ve Modüllerinizi Ekleme

1. seçeneği seçtiğinizde, eklemek istediğiniz satır sayısını seçebileceğiniz yeni bir sayfaya yönlendirileceksiniz.

Burada çeşitli seçenekler göreceksiniz. İhtiyaçlarınıza göre sayfanıza eklemek istediğiniz satırları seçin. Üç sıralı seçeneği seçelim.

Şimdi eklenebilecek tüm modülleri gösteren bir açılır pencere göreceksiniz. Üzerine tıklayarak istediğiniz modülü seçin. Bir ses klibi, harekete geçirici mesaj, düğmeler, iletişim formları ve daha fazlası olabilir.

Aklınızda belirli seçenekler varsa, bir modül bulmak için arama kutusunu kullanabilirsiniz.

Burada üç farklı satırda metin, resim ve buton modülleri ekledik. Şimdi sayfamız şuna benziyor:

İşte bunu nasıl yaptığımızın kısa bir özeti:

Daha fazla satır eklemek için mevcut satırınızın altındaki '+' simgesini kullanabilirsiniz.

Adım 5: Satırları ve Modülleri Özelleştirme

Artık satırlar ve modüller eklendiğine göre, bunları özelleştirmenin zamanı geldi. İlk olarak, metin modülü üzerinde çalışacağız.

Metni düzenlemek için metin modülüne çift tıklayın ve ayarlar simgesine tıklayın. Farklı özelleştirme seçenekleriyle birlikte küçük bir açılır pencere göreceksiniz.

Metninizin nasıl görünmesini istediğiniz üzerinde çalışmak için bunları kullanabilirsiniz. Burada 3 sekmeniz olacak:

• İçerik
• Tasarım
• ileri

İçerik sekmesinde metin üzerinde çalışabilir, metninize bağlantılar ekleyebilir, arka planı değiştirebilir ve daha fazlasını yapabilirsiniz. Tasarım sekmesinde, modülünüzün göründüğü şekilde çalışabilirsiniz.

Burada başlıkları değiştirme, boşluk ekleme, kenarlıklar, animasyonlar ve daha fazlası üzerinde çalışabilirsiniz.

Daha fazla ayar seçeneğine ihtiyacınız varsa, Gelişmiş sekmesini de kullanabilirsiniz.

Görseller için üzerine tıklayarak modülü seçiniz. Şimdi Ayar simgesine tıklayın. Ekranınızda yeni bir açılır pencere göreceksiniz. Resim alanına tıklayın ve bilgisayarınızdan bir resim yükleyin. Medya Kitaplığınızdan birini de kullanabilirsiniz.

Resim eklendikten sonra, aşağı kaydırarak resme bir bağlantı ekleyebilirsiniz. Diğer seçeneklerin yanı sıra resim bağlantısını yeni bir sekmede açmak, resim bağlantısını bir ışık kutusunda açmak gibi diğer seçenekleri de göreceksiniz.

Ayrıca, hemen yanındaki bağlantıdan resminize bir arka plan rengi de ekleyebilirsiniz.

Tasarım seçenekleri için Tasarım sekmesine tıklayın. Burada animasyonlar, boşluklar, filtreler ve daha fazlasını eklemek için seçenekleriniz var. Gelişmiş sekmesi, kendi CSS Kimliğinizi ve Sınıflarınızı ve ayrıca özel CSS'nizi eklemenizi sağlar. Bu seçenek, kendi kodunu eklemek isteyen ileri düzey kullanıcılar içindir.

Ancak kodlayıcı değilseniz, bu sekmeyi tamamen atlayabilirsiniz.

Ayarlarınızı kaydetmek için yeşil onay işaretine tıklamayı unutmayın.

Düğmeleri özelleştirmek, metin ve resim eklemekle aynı şekilde çalışır. Sadece üzerine tıklayarak düğme modülünü seçin. Ardından ekranınızdaki açılır pencerede görünen seçenekleri kullanarak özelleştirmeye başlayın.

Ardından ayarlarınızı kaydetmek için yeşil onay işaretine basın. Bunu eklemek ve özelleştirmek istediğiniz herhangi bir modül için yapabilirsiniz.

6. Adım: Sayfa Ayarları

Artık satırlarınızı ve modüllerinizi nasıl ekleyeceğinizi ve özelleştireceğinizi bildiğinize göre, sayfa ayarlarınızda nasıl çalışacağınıza bakalım. Sayfa ayarlarını değiştirmek için sayfanızın alt kısmında bulunan 3 adet mor noktaya tıklamanız gerekmektedir.

Bu, ayarlar çubuğunu çeşitli seçeneklerle genişletecektir. Dişli (ayar) simgesine tıklayın:

3 sekmeli bir ayarlar sayfası açılır penceresi göreceksiniz:

• İçerik
• Tasarım
• ileri

İçerik sekmesinde, sayfa başlığı üzerinde çalışabilir, öne çıkan bir resim ekleyebilir, sayfanıza bir arka plan ekleyebilir ve ayrıca sayfanızın ne kadar iyi performans gösterdiğini görmek için bir bölme testi yapabilirsiniz:

Öne çıkan bir görsel eklemek için '+' işaretini tıklayın ve medya kitaplığınızdan bir görsel ekleyin veya bilgisayarınızdan yeni bir görsel yükleyin.

Sonraki, Tasarım sekmesidir. Burada renk düzeni, sayfanızın aralığı ve metninizin rengi üzerinde çalışabilirsiniz. Üzerinde çalışmak istediğiniz seçeneğe tıklayın ve değişiklikleri yapın:

Son olarak, Gelişmiş sekmeniz var. Bu sekmede, özel CSS'nizi ekleyebilir ve statik CSS dosyası oluşturma seçeneğini etkinleştirebilirsiniz. Sayfanızın kullanıcılarınız için nasıl görünmesini istediğinizi de seçebilirsiniz.

Değişiklikler yapıldıktan sonra, değişikliklerinizi kaydetmek için aşağıdaki yeşil onay işaretine tıklayın. Ayrıca mor düğmeyi kullanarak değişikliklerinizi geri alabilir ve yeşil onay işaretinin yanındaki mavi düğmeyi kullanarak değişikliklerinizi yeniden yapabilirsiniz.

7. Adım: Gelecek İçin Kendi Düzeninizi Kaydetme

Kendi düzeninizi oluşturduktan sonra, bunları ileride kullanmak üzere kaydedebilirsiniz. Bu, Divi kitaplığına kaydedilecektir. Bu düzeni bir daha kullanmak istediğinizde, onu seçip metninizi hemen ekleyebilirsiniz.

Düzeninizi kaydetmek için sayfanızın üzerine gelin ve sayfa ayarları çubuğundaki kitaplık simgesine tıklayın. Düzeninize bir ad ekleyebileceğiniz bir açılır pencere görünecektir. Ayrıca bir kategori ekleme seçeneğiniz de vardır:

Ardından Kitaplığa Kaydet seçeneğine tıklayın . Artık düzeniniz ileride kullanılmak üzere kaydedilecektir. Kitaplığa bir öğe eklendiğinde, yeni Divi düzenleri, bölümleri, satırları ve modülleri eklenirken Kitaplıktan Ekle sekmesinde görünecektir.

Aynı işlemi izleyerek belirli bir modülü de kaydedebilirsiniz. Kitaplığa kaydet düğmesini bulmak için öğenin üzerine geldiğinizden emin olun.

8. Adım: Divi Düzeni Duyarlılığını Kontrol Etme

Düzenlerinizi oluşturduktan sonra Divi, farklı ekran boyutlarında nasıl görüneceğini kontrol etmenizi sağlar. Düzeninizin yanıt verebilirliğini kontrol etmek için ekranınızın sol alt tarafındaki ekran simgelerine tıklayın:

1. simge, yerleşiminizin tel kafes görünümünü gösterir. Yanındaki büyüteç simgesi, bir kullanıcı yakınlaştırma görünümüne sahip olmak isterse mizanpajınızın nasıl görüneceğini kontrol etmenizi sağlar.

Sonraki simge, düzeninizin masaüstü görünümünü, ardından bir tablet ve mobil ekran görünümünü sunar. Düzeninizin yeterince duyarlı olup olmadığını görmek için bu simgelerin her birine tıklayabilirsiniz.

9. Adım: Divi Düzeninizi Yayınlama

Her şey hazır olduğunda ve oluşturduğunuz düzen ile sayfanızı yayınlamak istediğinizden eminseniz, ekranınızın sağ alt köşesindeki Yayınla düğmesine tıklayın:

Yayınla düğmesine basar basmaz sayfanız yayında olacaktır.

Mizanpajlarınızı oluşturmak için Divi Builder'ı kullanmak işte bu kadar basit.

Bu makaleyi beğeneceğinizi umuyoruz. Divi'yi kullanıp kullanmama konusunda hala emin değilseniz, WordPress siteniz için diğer sayfa oluşturuculara bakıyor olabilirsiniz.

Başka bir popüler sayfa oluşturucu eklentisi olan Beaver Builder eklentisinin bu incelemesine göz atın.