Sıfır blok

Bu makalede, özel tasarımlara sahip web siteleri oluşturmak için sıfır blokların nasıl kullanılacağını inceleyeceğiz. Blok düzenleyicinin nasıl çalıştığını ele alacak ve öğeleri nasıl ekleyip düzenleyeceğinizi göstereceğiz.

Bir web sitesi oluşturmak için Zero Block alanına Mavibot oluşturucusu, herhangi bir programlama bilgisi olmadan profesyonel bir web sitesi kurmanın hızlı ve kullanışlı bir yoludur. Denemekten, tasarımı özelleştirmekten ve web sitenizi benzersiz ve başarılı kılmak için içerik eklemekten çekinmeyin.

Düğmenin Zero Block tamamen özelleştirilebilir bir web tasarım düzenleyicisidir Mavibot. Tek tek bloklar ya da tüm site için herhangi bir kısıtlama olmadan benzersiz tasarımlar oluşturmanıza olanak tanır.

Bloğu nasıl eklenir

Eklemek için Zero Block sayfaya, düzenleme araç çubuğundaki "+" düğmesine tıklayın.

"+" düğmesine tıkladıktan sonra, sağ tarafta "Yeni bir blok ekle" menüsü görünecektir.

Seçin "Zero Block" ve düzenlemeye devam edin.

Bir blok ayarları menüsü vardır.

İçerik yüksekliği

Bu alanı blok boyutunu değiştirmek için kullanabilirsiniz. Varsayılan değer 550 pikseldir.

Izgara alanını ölçeklendirme

Web sitesi tasarımını farklı ekran boyutlarına uyarlamak için kullanılır.

Varsayılan olarak devre dışıdır, ancak "pencere genişliğine göre otomatik ölçekle" seçeneğini de seçebilirsiniz.

Arka plan ayarları

Geniş renk paleti kullanarak arka plan rengini seçebilirsiniz. Kaydırıcıyı istediğiniz tona getirin, daireye tıklayın ve istediğiniz rengi seçin. Ton kodunu da girebilirsiniz.

SVG, PNG, JPG veya GIF formatlarında bir arka plan dosyası ekleyebilirsiniz. Dosya boyutu 30 MB'ı geçmemelidir.

Örnek 1. JPG dosyası ekleme.

Varsayılan görsel hizalaması Merkez Merkez olarak ayarlanmıştır. Listeden farklı bir konum seçebilir veya sağdaki simgeye tıklayarak konumu kendiniz belirleyebilirsiniz.

Örnek 1. Görselin varsayılan olarak Merkez Merkez konumunda gösterimi.

Örnek 2. Görselin Sol Üst konumunda gösterimi. "Davranış" için varsayılan konum "scroll" olarak ayarlanmıştır, "fixed" konumunu seçebilirsiniz. Konumu değiştirdiğinizde arka plan kayar.

Ögeler ekleme

Soldaki "Öğe ekle" düğmesine tıklayın. Düğmenin altında katmanlar vardır ve bir öğeyi diğerinin üzerine bindirerek bunları birbirleriyle değiştirebilirsiniz.

Öğe Ekle düğmesi, seçilen öğeyle yeni bir katman oluşturur:

Her öğe kendi ayarlar menüsünü açar.

Öğeyi ayarladıktan sonra "Kaydet" düğmesine tıklayın.

Metin

Metin içeriği olan bir öğe ekleyebilirsiniz.

Bir bloğa metin ekleme örneği

Standart yazı tiplerini kullanabilir veya kendi yazı tipinizi seçebilirsiniz. Ayrıca metnin rengini, satır aralığını, harflerin boyutunu ve birbirlerine olan uzaklığını, metnin blok üzerindeki konumunu değiştirebilir, metnin büyük/küçük harf ayarlarını yapabilir ve daha fazlasını yapabilirsiniz:

Görsel

İstediğiniz görseli eklemek için dosyayı sistemden yükleyin. Bunun için indirme simgesine tıklayın. Ayrıca ilgili alana görsele ait bir bağlantı ekleyerek de görsel ekleyebilirsiniz. İstediğiniz görselin URL'sini yapıştırın ve nasıl açılacağını seçin: yeni bir pencerede veya yeni bir sayfada.

Görseli ekledikten sonra sayfadaki konumunu ayarlayabilirsiniz. Sol veya sağ kenara göre nasıl hizalanacağını seçin ya da ortada konumlandırın. Ayrıca görselin saydamlığını ve bulanıklaştırma veya yuvarlama gibi diğer görüntü ayarlarını da düzenleyebilirsiniz.

Bir bloğa görsel ekleme örneği

Arka plan her zaman değiştirilebilir.

Şekil

Bloğa bir şekil ekleyebilirsiniz (varsayılan olarak bir dikdörtgendir). Ayarlarda başka bir şekil seçebilirsiniz: daire veya çizgi. Ayrıca şekli istediğiniz gibi özelleştirebilirsiniz: hizalayın, efektler ekleyin, renk, arka plan, stil vb. değiştirin.

Şekil ayarları:

Bir bloğa şekil ekleme örneği

Buton

Bir düğme eklemek için "Öğe ekle"ye tıklayın ve "Düğme"yi seçin:

Ayarlar bölümünde, düğmenin görünümünü zevkinize göre özelleştirebilirsiniz. Bir stil, renk, arka plan, bulanıklık seviyesi ve diğer seçenekleri seçin. Ayrıca düğmedeki metnin yazı tipini, rengini ve boyutunu da değiştirebilirsiniz.

Düğmenin aktif olması için, Düğme bölümündeki öğe ayarlarında ihtiyaç duyduğunuz sayfaya bir bağlantı eklemeniz gerekir. Düğmeye tıkladığınızda bağlantı açılır.

Düğmenin çalışıp çalışmadığını görmek için değişiklikleri kaydetmeniz, blok ayarlarını kapatmanız ve site önizlemesine gitmeniz gerekir.

Video

Bu aracı herhangi bir videoyu eklemek ve blok içindeki gösterimini yapılandırmak için kullanabilirsiniz.

Zero Block'a çeşitli kaynaklardan video ekleyebilirsiniz:

Bunun için videonun bulunduğu yeri (Youtube, Vimeo veya MP4) seçin ve ardından URL'yi bağlantılar alanına yapıştırın.

Videoları dosya deposundan da ekleyebilirsiniz. Bunun için video bağlantısını dosya deposundan kopyalayın:

Ardından "Video" öğesinin ayarlarında MP4 video türünü seçin:

ve dosya deposundaki video bağlantısını yapıştırın.

İpucu

Bu öğe, herhangi bir içerikle bir açılır ipucu eklemenize olanak tanır. Öğeyi ayarlarda istediğiniz gibi düzenleyebilirsiniz.

İpucunu yarı saydam yapabilir ve metnin, arka planın veya görselin üzerine yerleştirebilirsiniz:

İpucunun üzerine geldiğinizde (site sayfasında, düzenleme modunda DEĞİL), bazı metinler görüntülenecektir:

Tamamlanan işlemleri ayarlarda "Kaydet" işlevini kullanarak kaydetmeyi unutmayın.

Galeri

Öncekilerde olduğu gibi Zero Block'a yeni bir öğe ekleyebilirsiniz:

Mavibot varsayılan olarak iki görsel ekler. Ancak galeri için ihtiyaç duyduğunuz görselleri kendiniz de yükleyebilirsiniz. Bunun için galeri katmanına gidin (katman düğmesi ekranın sol tarafındadır veya doğrudan görsele tıklayın).

Öğe ayarlarında, mevcut işlevleri kullanarak gerektiğinde galeriyi sol veya sağ kenara göre ya da merkeze hizalayabilirsiniz. Ayrıca sol fare düğmesini basılı tutup öğenin üzerine tıklayarak öğeyi taşıyabilirsiniz.

Ayrıca, galerinin blok içinde daha ilginç görünmesi için görsellerin saydamlığını, döndürülmesini ve diğer efektleri de ayarlayabilirsiniz.

Galeride iki görsel boyutu seçeneği vardır: "cover" — görselin tüm genişliği ve "contain" — kenarlıklı.

Örnek 1. Görsel boyutu - "cover"

Örnek 2. Görsel boyutu - "contain".

Döngü özelliği, önceki görseller arasında kaydırma yapmadan galerideki son görselden ilk görsele otomatik olarak geçmenizi sağlar. Döngü özelliği devre dışıysa, ilk görsele dönmek için ok tuşlarını manuel olarak kullanmamız gerekir.

Ayrıca görsellerin kaydırma hızını ve galeriyi otomatik kaydırmak için otomatik oynatmayı da seçebilirsiniz.

Galeri düğmelerinin ayarlarında renklerini, şekillerini (üçgen veya ok biçiminde yapabilirsiniz), konumlarını, boyutlarını ve diğer parametreleri değiştirebilirsiniz.

Ayarlar bölümünde ayrıca galeri çerçevesini, stilini, yuvarlaklığını ayarlayabilir, gölgeler ve diğer efektler ekleyebilirsiniz.

Akordiyon

Evrensel Akordiyon blok öğesi, açılır öğeler içeren metin notları listesinden oluşan bir web sitesi için kullanışlı bir grafik çözümdür:

Akordiyon, web sitenize kolayca entegre edilir ve ihtiyaçlarınıza göre özelleştirilebilir: her türlü gereksinime uyarlanabilir.

Bloğa bir öğe eklemek için evrensel blok ayarlarını açın. Mevcut öğeler listesinde "Akordiyon"u göreceksiniz.

Bir öğeye istediğiniz stil parametrelerini uygulamak için üzerine tıklamanız gerekir. Bundan sonra, diğer Zero Block öğelerinde olduğu gibi sağ tarafta "Akordiyon" parametre oluşturucusu görünecektir.

Ok üzerine tıkladığınızda, ekranda bilgi içeren bir açılır pencere görünecektir; örneğin, bir sorunun cevabı gibi:

Bir öğenin metninde değişiklik yapmak için, oluşturulan şablondaki mevcut bir öğeye çift sol tıklayın. Açılır listedeki metni de aynı şekilde değiştirebilirsiniz.

Düzenlenecek metni seçtikten sonra, ekranın üst kısmında herhangi bir metin düzenleyicide kullanılanlara benzer metin ayarları görünecektir.

Bu ek metin menüsünde, kalınlık, eğim, yükseklik ve diğerleri gibi yazı tipi ayarlarını değiştirebilirsiniz.

Şimdi öğenin temel ayarlarının sağ menüsüne geçelim. Burada da yazı tipini değiştirebilirsiniz: renk, doygunluk, büyük/küçük harf, saydamlık seçin ve kendi yazı tipinizi ve diğer seçenekleri ekleyin.

Akordiyon ayarlarında daha fazla sorunuz, cevabınız vb. ekleyebilirsiniz. Ekle'ye tıklamanız gerekir:

Ayrıca soru ve cevabın tasarımını değiştirebilir, onları daha yuvarlak hale getirebilir, arka planı saydam yapabilir, soru veya cevap üzerine gelindiğinde arka plan değişimini ayarlayabilir, çerçeveyi belirli bir stilde düzenleyebilir ve diğer parametreleri değiştirebilirsiniz — her şey hayal gücünüze ve tercihlerinize bağlıdır.

Zero Block'ta benzersiz ve akılda kalıcı bir web sitesi stili oluşturmak için çeşitli öğeleri birleştirebilirsiniz. Bu, müşterilerinizi özgün tasarım çözümleriyle etkilemenizi sağlayacaktır.

Sayfa üzerindeki çalışmayı tamamladıktan sonra, onu farklı ekran boyutlarına uyarlamanız gerekir.

Form

Zero Block öğesi "Form", başvuru toplama formunu gerçekten ihtiyaç duyulduğu yerde kullanmanıza olanak tanır. Kullanıcının en çok etkileşimde bulunduğu noktada, bunu ayrı bir formda göstermenize gerek kalmadan, doğrudan başvuruları ve iletişim bilgilerini toplayabileceksiniz.

Zero Block'a bir form eklemek için "+Öğe ekle"ye tıklayın ve açılan açılır listeden "Form"u seçin.

"Form" bloğu, sorular ekleyebileceğiniz ve düğmeleri değiştirebileceğiniz mesajlaşma uygulamalarındaki düğmeler olarak görünecektir:

Forma soru eklemek için, örneğin "E-posta girin", "Sorunuzu açıklayın" gibi, sağ ayarlar menüsündeki "Soruları ayarla" düğmesine tıklamanız gerekir:

Ardından sorularınızı formda oluşturun:

Sonuç şu şekilde olabilir:

"Kişisel veri işleme politikasını kabul ediyorum" onay kutusunu ekleyebilirsiniz:

Sosyal medya düğmelerini de düzenleyebilirsiniz:

Ve formun başlığını ve alt başlığını özelleştirebilirsiniz.

Metin alanına çift tıklayın; ardından gerekli metni girebilir, ayrıca yazı tipini, kalınlığı, metin rengini vb. değiştirebilirsiniz:

Soru alanlarının türleri hakkında daha fazla bilgi için "Forum Cevapları".

reCAPTCHA

reCAPTCHA'yı kurmak için, sitenin genel ayarlarında bir anahtar çifti (genel ve gizli anahtarlar) belirtmeniz ve veri toplama formundaki Zero Block'ta recaptcha doğrulamasını etkinleştirmeniz gerekir.

Captcha kullanarak web sitesi koruması sağlayan herhangi bir hizmeti seçebilirsiniz. Bu bölümde, Google captcha'nın nasıl kurulacağını inceleyeceğiz.

1. Adım. Anahtarları alma

Öncelikle, anahtarları almak için temel bilgileri doldurmanız gerekir: captcha türlerini seçin; korumayı kurmayı planladığınız sitenin alan adını ekleyin. Ardından "Gönder"e tıklayın.

2. Adım. Anahtarların girilmesi

Ardından, MaviBot'taki web sitesi sayfasının ayarlarına kopyalayıp yapıştırmanız gereken bir anahtar çifti göreceksiniz. Bunun için:

1) Üst panelde site sayfası ayarları düğmesini bulun:

2) Temel bilgi ayarlarına gidin:

3) Temel bilgi ayarlarında, daha önce aldığınız anahtar çiftinin değerlerini girin:

3. Adım. Zero Block'ta reCAPTCHA'yı etkinleştirme.

Veri toplama formunun kurulu olduğu Zero Block'a veya bir reCAPTCHA formu oluşturmayı planladığınız Zero Block'a gidin:

Sağ menü çubuğunu açmak için Zero Block'taki "Form" öğesine tıklayın.

Bir veri toplama formunun nasıl oluşturulacağını ve düzenleneceğini yukarıda "Form" bölümünde anlattık.

Sonraki adımda, reCAPTCHA'yı etkinleştirme düğmelerini bulun:

reCAPTCHA'yı etkinleştirin (gerekirse İngilizce uyarıları etkinleştirebilirsiniz):

Ardından ayarları kaydedin.

Tamamlandı! Artık Zero Block'ta reCAPTCHA'yı nasıl etkinleştireceğinizi biliyorsunuz.

Zero Block'ta sayfanın nasıl uyarlanacağı aynı adlı makalede anlatılmıştı.