Fikrinizden ayrıntılı sayfa tasarımına
Twicart Page Builder, tasarım fikrinizi bölüm bölüm hayata geçirmeniz için geniş bir tasarım özgürlüğü sunar. Sade bir tanıtım sayfasından görsel ağırlıklı bir ana sayfaya, ürün sunumundan çok kolonlu içerik düzenine kadar farklı tasarımları aynı editörde oluşturabilirsiniz.
Yerleşimi section ve kolonlarla kurun; komponentlerle içeriği ekleyin; renk, görsel, animasyon ve etkileşimlerle ayrıntıları tamamlayın. Hazır tasarımlar, manuel düzenleme, AI ile tasarım ve Pro paketlerdeki Kod modu farklı ihtiyaçlar için birlikte sunulur. Tasarımın hem görünümünü hem de ziyaretçinin sayfayı nasıl kullanacağını düşünerek ilerleyebilirsiniz.
Nerelerde kullanılır?
Page Builder ile mağazanızın farklı alanlarını aynı section, kolon ve komponent mantığıyla tasarlayabilirsiniz.
Markanızın hikâyesini bir sayfada anlatabilir, ana sayfanızdaki ürün sunumunu düzenleyebilir veya footer’ın yerleşimini oluşturabilirsiniz.
İlk kurulumda hangi alanların hazırlandığını Twi AI rehberinde inceleyin.
Ürününüze özel vitrin, kategorinize özel deneyim
Her ürünün anlatacak farklı bir hikâyesi vardır. Bir tasarım koltuğu geniş görsellerle tanıtmak, teknik bir ürünü ayrıntılı özelliklerle anlatmak veya bir koleksiyonu etkileyici bir giriş alanıyla sunmak isteyebilirsiniz. Twicart Page Builder ile ürün ve kategori sayfalarını bu farklı ihtiyaçlara göre tasarlayabilirsiniz.
| Paket | Ürün ve kategori sayfası tasarımı |
|---|---|
| Basic | Ürün sayfasında temanın hazır tasarımı kullanılır. Basic pakette özel ürün sayfası tasarımı bulunmaz. |
| Standart | Ürün sayfası ve kategori sayfası tasarlama imkânı sunulur. Bu sayfaların görünümünü Page Builder ile oluşturabilirsiniz. |
| Pro | Birden fazla ürün sayfası ve birden fazla kategori sayfası tasarımı oluşturabilirsiniz. Hazırladığınız tasarımları ürünlere veya kategorilere atayarak farklı sunumlar kullanabilirsiniz. |
Pro: birden fazla tasarım, ürün ve kategori bazında atama
Pro’da farklı ürünler için farklı ürün sayfası tasarımları, farklı kategoriler için farklı kategori sayfası tasarımları hazırlayabilirsiniz. Tasarımı oluşturduktan sonra ilgili ürün veya kategoriye atayın. Böylece kataloğunuzun her bölümüne, içeriğine ve hedeflediğiniz alışveriş deneyimine uygun bir sunum kazandırabilirsiniz.
Bir mobilya ürünü için görselleri ve marka hikâyesini öne çıkaran bir ürün sayfası; teknik bir ürün için açıklamaları ve özellikler tablosunu öne çıkaran başka bir ürün sayfası hazırlayın. Kategorilerde ise yeni koleksiyon için görsel ağırlıklı, teknik ürün grubu için açıklayıcı içeriği öne çıkaran farklı tasarımlar oluşturun. Pro’da bu tasarımları ilgili ürün ve kategorilere atayabilirsiniz.
SEO odaklı tasarım: her sayfada doğru içeriği öne çıkarın
Tasarım özgürlüğü, SEO çalışmalarınız için içeriği daha bilinçli sunmanıza da alan açar. Ürüne özel açıklamalar, anlaşılır başlıklar, özellikler ve ilgili sayfalara yönlendirmelerle ürünün aranan bilgisini görünür hale getirin. Kategori sayfalarında kategoriye özgü tanıtımları ve ürün gruplarını anlatan içerikleri tasarımın bir parçası yapın.
Twicart’ın SEO odaklı yaklaşımında sayfa tasarımı ile SEO alanları birbirini tamamlar. Page Builder içeriğin nasıl sunulacağını belirlemenizi sağlar; ürün ve kategori yönetimi ise o sayfanın açıklamalarını ve meta bilgilerini düzenlediğiniz yerdir. Ürünlerde index ve follow kontrollerini de ayrıca yönetebilirsiniz. Pro’daki farklı tasarımlarla bu içerik yaklaşımını ürün ve kategori bazında özelleştirebilirsiniz.
Üç tasarım yöntemi
Manuel: yerleştirin ve düzenleyin.
Section, kolon ve komponentleri kendiniz ekleyin. Öğeleri sürükle-bırak ile taşıyın ve düzenleme kontrollerinden ayarlayın.
AI ile: tarif edin, AI tasarlasın.
Nasıl bir sayfa istediğinizi yapay zekâya anlatın. Tasarımınızı talimatlarla oluşturun.
Tarif ederek ve işaretleyerek düzenleme için Hızlı Rötuş’u tanıyın.
Twicart’ın kendi kodlama diliyle tasarımınızı kod üzerinden ifade edin. Bu mod özel tasarımlarını kodla oluşturmak isteyenlere sunulur.
Twicart Code Editör alt rehberini okuyun.
Sayfanın yapısı
Sayfanız üç temel yapıdan oluşur: section, kolon ve komponent. Section sayfanın bölümünü, kolon o bölümün yerleşimini, komponent ise ziyaretçinin göreceği içeriği oluşturur.
Section içine kolon ekleyebilirsiniz. Kolonların içine komponentlerin yanında yeni kolonlar da yerleştirebilirsiniz. Böylece aynı bölümde farklı içerik grupları oluşturabilirsiniz.
Kodla tasarım seçeneğini Twicart Code Editör rehberinde keşfedin.
Sürükle-bırak ve düzenleme
Section, kolon ve komponentleri sürükle-bırak ile taşıyabilirsiniz. Her öğenin tepesindeki kalem işareti düzenleme işlemlerini açar; sil işareti öğeyi tasarımdan kaldırır.
Üst çubukta Masaüstü ve ortak Mobil ve Tablet görünüm seçenekleri bulunur. Tasarımınızı farklı ekran görünümlerinde inceleyebilirsiniz. Aynı üst çubuktan Manuel, AI ile Tasarım ve Kod modları arasında seçim yapabilir; tasarımınız hazır olduğunda Yayınla düğmesini kullanabilirsiniz.
AI ile çalışırken canlı önizlemenin nasıl kullanıldığını öğrenin.
Twicart, mobil ve tabletten gelen ziyaretçilerin alışveriş deneyimine özel önem verir. Kullanıcıların günlük yaşamda bu cihazlara yoğun biçimde yönelmesi, Page Builder’ın tasarım yaklaşımının önemli bir parçasıdır. Mobil ve tablette okunabilir içerikler, kolay takip edilen yerleşimler ve rahat kullanılabilen sayfalar oluşturabilmeniz için bu deneyime odaklanıyoruz. Tasarımınızı ortak Mobil ve Tablet görünümünde inceleyerek ziyaretçinin ürünleri keşfetmesini, bilgileri okumasını ve sayfa içindeki yönlendirmeleri kullanmasını düşünerek düzenleyebilirsiniz.
Section ve kolonlarda arka plan ve animasyon
Arka planı yalnızca sayfanın tamamı için düşünmeniz gerekmez. Section ve kolonlara ayrı ayrı arka plan rengi, arka plan görseli veya animasyon ekleyerek her bölüme kendi görünümünü verebilirsiniz. Düzenlemek istediğiniz öğenin kalem simgesinden ilgili ayarları açın.
| Kontrol | Tasarımda kullanımı |
|---|---|
| Arka plan rengi | Bir section’u markanızın rengiyle öne çıkarın veya bir kolonu diğer içerikten görsel olarak ayırın. |
| Arka plan görseli | Bir bölümün ya da kolonun arkasına görsel yerleştirerek kampanya, marka hikâyesi veya ürün tanıtımına uygun bir atmosfer oluşturun. |
| Animasyon | Section ve kolonlara hareket ekleyerek tasarımınızı canlandırın. Hareketli alanları metin ve görsellerle aynı düzen içinde kullanın. |
Bir section içine iki kolon ekleyin. İlk kolonda düz bir arka plan üzerinde başlık ve açıklama kullanın; ikinci kolonda arka plan görseliyle ürünü öne çıkarın. İlgili section veya kolona animasyon ekleyerek hareketi de tasarımın parçası yapabilirsiniz.
Kaydırırken görünür kalan sticky kolonlar
Kolonları sticky olarak ayarlayabilirsiniz. Böylece ziyaretçi sayfayı kaydırırken seçtiğiniz kolon, yerleşimi içindeki kaydırma davranışına göre görünür kalabilir. Uzun içeriklerin yanında önemli bilgileri takip etmeyi kolaylaştıran düzenler hazırlayabilirsiniz.
- Uzun bir açıklamanın yanında kısa bir ürün özeti sunun.
- Bir içerik kolonunun yanında iletişim veya yönlendirme alanını görünür tutan bir düzen hazırlayın.
- Sticky kolonun davranışını Masaüstü ve Mobil ve Tablet görünümlerinde inceleyin.
Tasarımınızdan modal çağırın
Page Builder tasarımınızdan modal çağırabilirsiniz. Böylece ziyaretçiye aynı sayfa üzerinde ek bir içerik alanı sunan etkileşimler hazırlayabilirsiniz. Modalın içeriğini de Page Builder ile tasarlayarak sayfanızın görsel diliyle uyumlu hale getirebilirsiniz.
Örneğin ürün hakkında ek bilgi, bir iletişim formu veya kampanyaya ait açıklama için modal tasarlayabilirsiniz. Modalın tasarımını hazırlamak ve onu sayfa içinden çağırmak, aynı deneyimin iki parçasıdır: önce gösterilecek içeriği düzenleyin, ardından tasarımınızda ilgili modal çağrısını ayarlayın.
Komponent kütüphanesi
Paneldeki isimleriyle listelenen komponentlerden içeriğinize uygun olanı seçin.
Ürün ve kategori sunumu
Metin ve temel içerik
Görsel ve hareketli içerik
İletişim ve ziyaretçi etkileşimi
Ek tasarım bileşenleri
Magic Design ve Hero Banner ile hazır tasarımlar
Page Builder’da yalnızca tek tek temel öğelerle çalışmazsınız. Magic Design ve Hero Banner gibi komponentler içinde birçok hazır tasarım seçeneği bulunur. İhtiyacınıza uygun sunumu seçerek başlayabilir, içerikleri ve tasarım ayarlarını markanıza göre düzenleyebilirsiniz.
| Kontrol | Tasarımda kullanımı |
|---|---|
| Magic Design | Hazır tasarım seçeneklerinden yararlanarak farklı içerik sunumları oluşturun. Seçtiğiniz düzeni kendi metin ve görsellerinizle kişiselleştirin. |
| Hero Banner | Sayfanın dikkat çeken giriş alanını hazır tasarımlarla hazırlayın. Marka mesajınızı, kampanyanızı veya ürün tanıtımınızı bu alanda sunun. |
Komponent içindeki hazır tasarım seçenekleri, hazır section ve tam sayfa içe aktarma seçeneklerini tamamlar. İsterseniz tek bir alan için hazır komponent tasarımı seçin, isterseniz daha büyük bir başlangıç düzeni için hazır section veya sayfa kullanın.
Hazır tasarımlar ve arşiv
Hazır section veya sayfa içe aktarın.
Twicart’ın hazır section’larını sayfanıza ekleyebilir veya hazır bir sayfayı bütünüyle içe aktarabilirsiniz. İçe aktardığınız tasarım, kendi sayfanız için başlangıç noktası olur.
Kendi tasarımınızı arşivleyin.
Hazırladığınız sayfayı editörün en altındaki arşivleme alanından arşivleyebilir, daha sonra yeniden kullanabilirsiniz. Böylece aynı düzeni tekrar oluşturmanız gerekmez.
Ön yüzde tarayıcı dostu HTML çıktısı
Page Builder’da oluşturduğunuz tasarım, sitenizin ön yüzünde tarayıcının görüntüleyebileceği HTML olarak render edilir. Başlıklar, metinler, görseller ve etkileşimler sayfanın gerçek içeriğini oluşturur. Editörde kurduğunuz section, kolon ve komponent yapısı, ziyaretçiye sunulan web sayfasına dönüşür.
Bu yaklaşım, görsel tasarım özgürlüğünü web sayfasının içerik yapısıyla birleştirir. Tasarımınızı oluştururken başlıklarınızı, açıklamalarınızı ve yönlendirmelerinizi de düzenleyebilirsiniz. Ürün ve kategori sayfalarında kullanılacak ürün bilgileri ile SEO alanlarını ise ilgili yönetim ekranlarından tamamlayabilirsiniz.
Ürün bazında SEO kontrollerini keşfedin
Örnek sayfa akışı
Manuel modda bir Hakkımızda sayfası oluşturmak için temel adımlar:
- Bir section ve içine iki kolon ekleyin.
- İlk kolona Heading ve Text Area ekleyerek markanızın hikâyesini anlatın.
- Diğer kolona Image komponentiyle görsel yerleştirin.
- Section veya kolonlara arka plan rengi, görsel ve ihtiyacınıza göre animasyon ekleyin.
- Uzun bir içerik düzeninde uygun kolonu sticky olarak ayarlayın; ek içerik gerekiyorsa bir modal hazırlayıp tasarımınızdan çağırın.
- Öğeleri sürükle-bırak ile taşıyın, kalem işaretinden düzenleyin. Masaüstü ve Mobil ve Tablet görünümlerini inceleyin.
- Tekrar kullanmak isterseniz arşivleyin. Hazır olduğunuzda Yayınla düğmesini kullanın.
Bu tür sayfa işlemlerinin ilk kurulumdan sonra nasıl ayrıldığını inceleyin.
Sık sorulan sorular
Kod yazmadan tasarım yapabilir miyim?
Evet. Manuel modda sürükle-bırak ile çalışabilir veya AI ile modunda tasarımınızı tarif edebilirsiniz.
Bir kolonun içine kolon ekleyebilir miyim?
Evet. Kolonlar hem komponentleri hem de başka kolonları içerebilir.
Tasarımlarımı yeniden kullanabilir miyim?
Evet. Sayfayı editörün en altından arşivleyip daha sonra kullanabilirsiniz. Hazır section ve sayfaları da içe aktarabilirsiniz.
Kod modu hangi paketlerde var?
Twicart’ın kendi kodlama dilini kullanan Kod modu yalnızca Pro paketlerde sunulur.
Section ve kolonlara arka plan ekleyebilir miyim?
Section ve kolonlara arka plan rengi, arka plan görseli ve animasyon ekleyebilirsiniz.
Hazır tasarımlar nerede bulunur?
Magic Design ve Hero Banner gibi komponentlerin içinde hazır tasarımlar bulunur. Hazır section ve tam sayfaları da içe aktarabilirsiniz.
Kolonları sticky yapabilir ve modal çağırabilir miyim?
Evet. Kolonları sticky olarak ayarlayabilir ve tasarımınızdan modal çağırabilirsiniz. Modal içeriğini de Page Builder ile tasarlayabilirsiniz.
Tasarım ön yüzde nasıl gösterilir?
Tasarımınız ön yüzde tarayıcı dostu HTML olarak render edilir. Editörde oluşturduğunuz içerik ve yerleşim, ziyaretçinin gördüğü web sayfasına dönüşür.
Birden fazla ürün ve kategori sayfası tasarımı oluşturabilir miyim?
Pro pakette birden fazla ürün sayfası ve kategori sayfası tasarımı oluşturabilir, bu tasarımları ürünlere veya kategorilere atayabilirsiniz.
Basic ve Standart paketlerde ürün sayfası tasarımı nasıl çalışır?
Basic, ürün sayfasında temanın tasarımını kullanır; özel ürün sayfası tasarımı sunmaz. Standart’ta ürün ve kategori sayfası tasarlayabilirsiniz. Birden fazla tasarım oluşturup ürünlere ve kategorilere atama Pro paket özelliğidir.