Bir Web Sitesini Sıfırdan Kodlama (Başlangıç ​​Kılavuzu)

bir wordpress sitesi nasıl kodlanır


Bir web sitesini sıfırdan kodlamak ister misiniz? Bunun için, göründüğü kadar iyi çalışan bir site tasarlamak için sıkıcı kodlama dillerine hakim olma düşüncesinden korkabilirsiniz.

Neyse ki, WordPress harika görünen, güçlü özelliklere sahip ve karmaşık kodlama bilgisi gerektirmeyen bir web sitesi oluşturmak isteyen herkese çok fazla esneklik sunuyor..

Dolayısıyla, bir web sitesini sıfırdan kodlamak istiyorsanız ancak kodlama konusunda usta değilseniz, bu yayın tam size göre. Çünkü bu öğreticiyi okuduktan sonra bir günden kısa bir sürede bir profesyonel gibi bir web sitesini nasıl tasarlayacağınızı bileceksiniz..

Ve bu kılavuz size sadece bir web sitesi tasarlamanın en kolay yolunu öğretmekle kalmayacak, aynı zamanda size zaman, enerji ve baş ağrısı da kazandıracaktır..

Ancak, bir web sitesini sıfırdan kodlamanın veya WordPress ile bir site oluşturmanın daha iyi olup olmadığından hala emin değilseniz, kararınızı vermenize yardımcı olacak bazı noktalar.

Bir Web Sitesini Gerçekten Kodlamalısınız?

Tam bir web sitesini kodlamak yeni başlayanlar için zor bir görev olabilir. Bir web sitesi oluşturmaya çalışırken yeni kodlayıcıların karşılaştığı birkaç sorun:

  • Yeni Diller Öğrenmek Zaman alıcıdır: Web sitenizi oluşturmak için öğrenmeniz gerekebilecek birkaç programlama dili vardır. HTML ve CSS kesinlikle göz ardı edemeyeceğiniz iki temel öğedir. Gelişmiş seçenekler istiyorsanız, listenize jQuery, JavaScript ve PHP gibi daha fazla dil ekleyebilirsiniz. Bu, nihai ürününüzü ortaya çıkarmak için birkaç dilde uzmanlaşmanız gerektiği anlamına gelir. Kemerinizin altında çok fazla kodlama bilgisi yoksa, web sitenizin oluşturulması günlerden çok aylar sürebilir.
  • Doğru Kaynakları Bulmak Zor: Daha da zor olan şey, internetin bilgi yüklü olmasıdır. Bu, yeni kodlama dillerini öğrenmeye çalışırken daha karışık olma şansınızı artırır. Bu, bazı yeni kodlayıcıların pahalı olabilen rehberli kurslara kaydolmasına neden olur..
  • Beklenmedik Sorunların Planlanması İmkansız: Tüm bu zorlukların üstesinden gelip nihayet güzel bir web sitesi oluştursanız bile, zamanla daha fazla zorluk ortaya çıkabilir. Örneğin, sitenize bir kenar çubuğu eklemek veya sitenizin belirli sayfalar için arka planını değiştirmek isterseniz, çözümü öğrenmeye zaman ayırıp zaman harcayabilirsiniz..

Üstesinden gelinmesi gereken birçok engelle, bir siteyi sıfırdan kodlamak isteyip istemediğinize yalnızca siz karar verebilirsiniz. Birçok web sitesi oluşturucusuysanız, diğer seçenekleri de düşünebilirsiniz..

Kolay bir alternatif nedir?

En iyi cevap, bir web sitesini bir WordPress web sitesi oluşturucu ile kodlamaktır.

Web Sitesi Oluşturucu Nedir?

WordPress’te bir web sitesi oluşturucu, sürükle ve bırak arayüzünü kullanarak bir web sitesi oluşturmanıza izin veren görsel bir düzenleyicidir. Saf kodlamanın aksine, görsel oluşturucuya eklenen tüm unsurlara sahipsiniz. Ardından, sitenizi oluşturmak için kullanmak istediğiniz öğeleri sürükleyip bırakmanız yeterlidir. En iyi şey, üzerinde çalışırken tasarımınızın gerçek zamanlı bir önizlemesine sahip olmanızdır.

WordPress, iyi bir web sitesi oluşturucu seçmeniz için birkaç harika seçeneğe sahiptir. İşte kontrol edebileceğiniz bazı iyi sayfa oluşturucular. Ancak bu öğretici adına, web sitenizi oluşturmak için Beaver Builder ve Constant Contact’ın Web Sitesi Oluşturucu’yu kullanacağız.

Beaver Builder ile başlayalım.

Yöntem 1: Bir Web Sitesini WordPress + Beaver Builder ile Kodlama

kunduz-oluşturucu-özelleştir-wordpress

Adım 1. Beaver Builder’ı Yükleme ve Etkinleştirme

Bir web sitesini Beaver Builder ile kodlamak için önce WordPress’i yüklemeniz gerekir. Ardından WordPress kontrol panelinizden Beaver Builder eklentisini yükleyin ve etkinleştirin. Bunu yaptıktan sonra web sitenizi tasarlamak için kullanmaya başlayabilirsiniz..

Bunun nasıl çalıştığı aşağıda açıklanmıştır:

Geri dönmek Sayfalar »Yeni Ekle WordPress kontrol panelinizde. Şimdi Gutenberg düzenleyicisinin size Beaver Builder eklentisini başlatma seçeneği sunduğunu göreceksiniz.

Kunduz Oluşturucu

Tıklamak Builder Beaver’ı Başlat.

Bu, tasarımınız üzerinde çalışabileceğiniz Beaver Builder görsel düzenleyicisini başlatır. Sağınızda, satır, modül ve şablon ekleme seçeneklerini göreceksiniz. Ayrıca adlı bir sekme var Kayıtlı burada önceden kaydedilmiş tüm şablonlarınızı görebilirsiniz.

Beaver Builder, bir web sitesi nasıl kodlanır

2. Adım: Web Siteniz için Şablon Seçme

Bir sonraki adım, tasarımınız için bir şablon oluşturmaktır. Şuraya tıklayarak bir şablon seçebilirsiniz: Şablonlar sağdaki sekme.

kunduz oluşturucu şablonları, bir web sitesi nasıl kodlanır

Burada, önceden oluşturulmuş çeşitli şablonların görüntülendiğini göreceksiniz. Daha özel bir görünüm oluşturmak için kullanabileceğiniz boş bir şablon seçeneğiniz de olacak.

Ayrıca, Builder Beaver, açılış sayfaları için ayrı seçenekler sunar. Önceden oluşturulmuş bu şablonlardan birini seçerek hemen başlayabilirsiniz. Metin, logo, kısa açıklama vb.Gibi farklı öğeleri özelleştirmek yalnızca birkaç değişiklik yapar.

3. Adım: Mizanpajınıza Satırlar ve Modüller Ekleme

Tasarımınızı sıfırdan oluşturmak istiyorsanız bu adım önemlidir. Veya önceden oluşturulmuş bir şablona da satır ve sütun ekleyebilirsiniz.

Tasarımınıza satır eklemek için Satırlar sekmesini tıklayın ve eklemek istediğiniz satır sayısını seçin. Şimdi satırlarınızı sürükleyin ve sola bırakın. Görünümlerini özelleştirmek için bu sekmelerin her birini tıklayabilirsiniz.

Kunduz Oluşturucu Düzeni satırları

Bu özelleştirme seçeneklerini kullanarak sütunlarınızı kolayca taşıyabilir, çoğaltabilir, satır genişliğini ayarlayabilir veya her sütun üzerinde ayrı ayrı çalışabilirsiniz. Sütunlarınızı düzenlemek için, değişiklik yapmak istediğiniz sütunu tıklayın. Sonra tıklayın Sütunu Düzenle simgesini tıklayın. Şimdi göreceksiniz Sütun Ayarları seçenek.

Sütun ayarları kunduz oluşturucu

Burada sütunlarınıza metin, bağlantılar, arka plan renkleri, kenarlıklar, animasyon ve daha birçok öğe ekleyebilirsiniz. Artık satırlar eklendiğine göre, modüllerinizi ekleme zamanı.

Modül eklemek, satırlarınızı eklemek kadar basittir. Sadece Modüller sekmesinde, istediğiniz modülü sağdan sürükleyin ve sol tarafınıza bırakın.

kunduz oluşturucuya Modüller ekleme

Ayrıca bu modüllerin her birini özelleştirebilirsiniz. Örneğin, başlığınız üzerinde çalışmak istiyorsanız, tek yapmanız gereken başlık modülünüzü tıklamaktır. Ekranınızda 3 farklı sekmeyle bir pop-up göreceksiniz.

  1. Genel
  2. stil
  3. ileri

İçinde Genel sekmesinde, metninizi düzenleyebilir, başlık etiketi ekleyebilir, bağlantı ekleyebilir, “nofollow” etiketi ekleyebilir veya isterseniz bağlantılarınızın yeni bir pencerede açılmasını sağlayabilirsiniz.

Başlığınızı özelleştirme

stil sekmesi renk, yazı tipi, stil üzerinde çalışmanıza olanak tanır & boşluk bırakma ve daha fazlası.

Beaver Builder özelleştirmesi

Sonunda, ileri sekmesi. Bu sekmenin altında boşluk ekleyebilir, görünürlüğü özelleştirebilir, animasyonlar ekleyebilir, HTML öğeleri ekleyebilir ve düzeninizi dışa veya içe aktarabilirsiniz.

Kunduz oluşturucu stil seçenekleri

Sadece üzerine tıklamayı unutmayın Kayıt etmek ayarlarınızı kaybetmek istemiyorsanız düğmesine basın..

Web sitenizin her yönünü özelleştirebilmeniz için web sitenize eklenen tüm modüller ile işlemi tekrarlayabilirsiniz. Beaver Builder ile sayfanıza kenar çubukları, fiyatlandırma tabloları ve diğer öğeler de ekleyebilirsiniz.

Sonra geriye sadece sitenizi yayınlamak.

4. Adım: Web Sitenizi Yayınlama

Her şey düzgün bir şekilde eklendikten ve özelleştirildikten sonra, Yayınla senin siten. Bunun için, Yayınla ekranınızın sağ üst köşesindeki düğmesine basın.

kunduz oluşturucu düzeni yayınlama

Ve bu kadar! Artık Beaver Builder ile pahalı kodlama kursları veya kodlayıcı forumlarında elenen uzun uykusuz geceler gerektirmeyen özel bir site oluşturdunuz.

Beaver Builder ile neler yapabileceğinizin temellerini inceledik, ancak daha derine dalmak isteyebilirsiniz. Öyleyse, bu makaleyi Beaver Builder ile özel bir düzen oluşturma konusunda yararlı bulacaksınız.

Şimdi ilk yöntemimizi ele aldığımıza göre, kullanabileceğiniz başka bir WordPress site oluşturucusuna göz atalım: Constant Contact web sitesi oluşturucu.

Yöntem 2: Bir Web Sitesi Sabit İletişim Oluşturucu ile Kodlama

Bir sonraki yöntem, web sitenizi Constant Contact’ın web sitesi oluşturucusuyla kodlamaktır.

Sürekli İletişim, e-posta pazarlama stratejilerinizi kolaylaştıran bir e-posta pazarlama hizmeti sağlayıcısıdır.

Ancak, tek bir kod satırı kullanmadan işletmeniz için profesyonel web siteleri oluşturmanıza olanak tanıyan bir web sitesi oluşturucu da sunar. Sitenizi oluşturmak için bu oluşturucuyu nasıl kullanacağınızı kontrol edelim.

İşleme başlamak için resmi Constant Contact web sitesi oluşturucu sayfasına gidin ve Ücretsiz sitenizi oluşturun ekranınızdaki sekme.

Sürekli iletişim web sitesi oluşturucu

Artık web sitenizi bir kategoriye atamanızın isteneceği yeni bir ekranda olacaksınız.

Sabit Kontak oluşturucu

Bunu yaptığınızda, web sitenizi oluşturmaya başlayabileceğiniz oluşturucuda olursunuz. Solunuzda, web sitenizin adını eklemek için bir alan görürsünüz. Sağınızda, web sitenizin nasıl görüneceğinin gerçek görünümünü göreceksiniz.

Sürekli iletişim web sitesi oluşturucu

Aşağı kaydırırsanız, sitenin genel bir görünümünü alırsınız. Web sitenizin adını ekleyebilir ve Devam et düğmesini tıklayın. O zaman site tasarımınızın en önemli özelliklerinden biri: arka plan resmi seçme zamanı.

Sürekli İletişim, sitenizin kategorisine göre ücretsiz olarak kullanabileceğiniz birkaç stok fotoğraf seçeneğini görüntüler. Bir stok fotoğrafı kullanmak istemiyorsanız, Yükleme düğmesine basarak kendi resminizi ekleyin.

Sürekli temas arka plan resmi

Arka plan resminizi seçtikten sonra, Devam et logonuzu yükleyebileceğiniz bir sonraki adıma geçmek için.

Seçeneğini gördüğünüz boş alanı tıklayın resminizi yüklemek için tıklayın ve logonuzu masaüstünüzden yükleyin.

Sabit Kontak oluşturucu logosu

Sonra Devam et düğmesine basarak sonraki adıma geçin. Şimdi sitenizin renk şemasını seçeceksiniz. Hepsi 2 tema ile başlayan birkaç seçeneğiniz var: Açık ve Koyu. Web siteniz ve markanız için hangisinin en iyi olacağını düşündüğünüzü seçebilirsiniz.

Sabit Temas renkleri

Yine, Devam et düğmesine basarak sonraki adıma geçin. Ardından navigasyon stilinizi ve yazı tipinizi seçebilirsiniz. Seçildikten sonra, sonraki adımda iletişim bilgilerinizi güncelleyebilirsiniz.

İletişim bilgileri, sürekli iletişim demosu

Şimdi tıklayın Bitiş düğmesini tıklayın. Genel görünümden memnun kaldığınızı doğrulamak için ana sayfanızın, galerinizin ve diğer sayfalarınızın genel bir görünümünü görürsünüz. Her şey iyi görünüyorsa, devam edip Yayınla ekranınızın sağ üst köşesindeki düğmesine basın.

Sabit Kişi sitesi önizlemesi

Ve bu kadar. Geriye kalan tek şey Constant Contact web sitesi oluşturucu ayarlarınızı tanımak.

Sabit Kişi Web Sitesi Oluşturucu Ayarları

Sitenizde herhangi bir değişiklik yapmanız gerekirse, bunu yapmak için birçok basit seçeneğiniz vardır. Web sitesi oluşturucu düzenleyicinizin üst kısmındaki sekmeleri kullanarak temanızı değiştirebilir veya diğer ayarlarda da çalışabilirsiniz.

Sabit Kişi sitesi önizlemesi

Örneğin, Ayarlar simgesi, sitenizin performansının farklı yönlerini iyileştirmek için çeşitli seçenekler görürsünüz

Sabit Kişi ayarları

Bu ayar seçenekleriyle adınızı ve alan adınızı, logonuzu, favicon’unuzu değiştirebilir ve hatta sitenizin SEO’sunda çalışabilirsiniz. Ayrıca iletişim bilgilerinizi Benim işim soldaki sekme.

Sosyal bağlantılarınızı eklemek istiyorsanız, Sosyal Hesaplar çıkıntı.

Sürekli İletişim sosyal

Bu, sosyal medya hesabı bağlantılarınızı sitenizin altbilgisinde görüntülenecek şekilde gömmenizi sağlar. Ayrıca, web sitenizin performansını Takip & analitik sekmesi. Tek yapmanız gereken Google Analytics izleme kimliğinizi eklemektir.

Henüz Google Analytics hesabınızı ayarlamadıysanız yararlı bir makale.

Sonunda, altında Yasal sekmesine, şartlarınızı ve hizmetlerinizi ekleyebilirsiniz. Ayrıca özel HTML HTML yerleştirme sekmesi, ancak bu yeni başlayan site oluşturucular için daha az önemlidir.

İşte buyur! Artık bir web sitesi oluşturucu ile özel bir web sitesi oluşturmanın ne kadar kolay olduğunu görüyorsunuz. En iyi şey, herhangi bir kod yazmayı veya öğrenmeyi içermemesi.

Site oluşturucu kullanmak, aynı sonucu zamanın çok kısa sürede elde etmenizi sağlar.

Beaver Builder veya Constant Contact’ın web sitesi üreticisi tarafından ikna olmadınız mı? Endişelenme. Web sitenizi tasarlama sürecini basitleştirebilecek daha fazla web sitesi oluşturucu önerimiz var.

Ancak yine de sitenizi sıfırdan kodlamaya karar verdiyseniz, ancak nasıl başlayacağınızı bilmiyorsanız, bunun için de çözümümüz var. Denemek Codecademy. Zaman geçiren ve adım adım rehberli bir kursla kodlamayı öğrenmek isteyen herkes için en iyi başlangıç ​​yeridir..

Kod yazmayı öğrendikten ve ilk web sitenizi oluşturmaya hazır olduğunuzda, bir alan adı seçmeniz ve sitenizi barındırabileceğiniz iyi bir web barındırma seçmeniz gerekir.

Okuduğunuz için teşekkür ederiz. Umarız bu makaleden hoşlanırsınız. Eğer öyleyse, neden bir arkadaşınla paylaşmıyorsun??

Site oluşturucularla çalışmak için harika önerileriniz var mı??

Aşağıdaki yorumlar bölümünde bize bildirin. Etkileşimli okuyucularımızdan duymayı seviyoruz!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map