Elementor'da Simplio3D WordPress Eklentisi Nasıl Kullanılır

Simplio3D WordPress eklentisinin ayrı Elementor bileşenleri yoktur ve bunlara ihtiyaç da duymaz. Her Simplio3D bloğu aynı zamanda bir kısa koddur ve her blok için bir bileşen olacak şekilde Elementor’un kendi Shortcode bileşeniyle yerleştirilir. Kısa kod, bloğun gösterdiğiyle tamamen aynı çıktıyı verir; dolayısıyla Elementor’daki bir ürün yapılandırıcısı, WordPress blok düzenleyicisinde oluşturulanla aynı şekilde çalışır: tüm bileşenlerin paylaştığı tek bir canlı yapılandırma, 3D araç çubuğu, ölçüler, AR, canlı fiyat, özet, teklif talepleri ve WooCommerce sepeti.

Bu kılavuz kısa yolu ele alır: kimliklerinizi bulun, düzeni oluşturun, sepete ekleyin ve yaygın hataları düzeltin. Eklenti sürümü 2.0.3 için hazırlanmıştır ve Elementor’un ücretsiz sürümüyle çalışır.

Başlamadan önce

• WordPress.org eklenti dizininden edinilen ve Simplio3D v3 modunda çalışan Simplio3D eklentisi, sürüm 2.0.3 veya sonrası. Yeni kurulumlar bu modda başlar. 1.x sürümünden güncellenen bir site, Simplio3D → Migration bölümünden geçiş yapana kadar Legacy modunda kalır.
• Simplio3D hesabınızın bağlı olması: WordPress içinde Simplio3D → Log in to Simplio3D yolunu izleyin.
• Yayınlanmış bir proje: Simplio3D içinde Share bölümünü açın, paylaşım bağlantısını etkinleştirin ve parola olmadan bırakın. Gömme alan adlarını kısıtlıyorsanız sitenizin alan adını ekleyin.
• Elementor. Ücretsiz sürüm yeterlidir.
• Sepete Ekle için: WooCommerce ve fiyatı olan basit bir ürün.

WooCommerce ile Sepete Ekleme

Blok düzenleyicide Sepete Ekle bloğunda bir ürün seçmek, ürünü projenize bağlar. Bir kısa kod bunu yapamaz; bu nedenle önce ürünü kendiniz bağlayın:

1. Ürünler bölümünde normal fiyatı olan basit bir ürünü düzenleyin.
2. Ürün verileri → Simplio3D bölümünü açın, Simplio3D projesi alanını projenize ve Sepet fiyatı alanını Simplio3D hesaplanan fiyatı (sunucu tarafında doğrulanır) olarak ya da ürünün kendi WooCommerce fiyatı olarak ayarlayın. Güncelle’ye tıklayın.
3. Ürün kimliğini not edin: Ürünler listesindeki ürünün üzerine gelin veya düzenleme ekranının adres çubuğundaki post=123 değerini okuyun.
4. Gönder bileşenini [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"] ile değiştirin. Müşterilerin adet seçebilmesi için quantity_mode="selector" ekleyin; onları sepete yönlendirmek için de after_add="cart" ekleyin.

Ardından sepet, ödeme sayfası, sipariş e-postaları ve WooCommerce → Orders yapılandırmayı, yapılandırmanın görselini ve doğrulanmış fiyatı gösterir.

Simplio3D fiyatıyla bağlanan bir ürün yalnızca yapılandırıcı üzerinden satın alınabilir; bu nedenle WooCommerce’nin ürün sayfasındaki normal Sepete ekle düğmesi, müşterilerden önce ürünü yapılandırmalarını ister. Ücretsiz Elementor ile yapılandırıcıyı ayrı bir sayfada tutun ve örneğin kısa açıklamaya “Sizinkini yapılandırın” bağlantısı ekleyerek ürün sayfasından bu sayfaya yönlendirin. Elementor Pro ile Elementor’un Sepete Ekle bileşeni yerine Simplio3D Shortcode bileşenlerini kullanan bir Tek Ürün şablonu oluşturabilirsiniz; yayına almadan önce bu kurulumu önizleyin.

En sık kullanacağınız ayarlar

Ayarları, düz tırnak işaretleri ve alt çizgiler kullanarak kısa kodun içine ekleyin. Word, Google Docs veya Slack’ten kopyalama tırnak işaretlerini kıvrımlı hâle getirebilir; bu durumda WordPress ayarı yok sayar.

• Görüntüleyicideki height="620px" mobile_height="400px", masaüstünde ve 781 px genişliğe kadar olan ekranlarda yüksekliği belirler.
• Sayfanın üst kısmındaki bir Görüntüleyicide kullanılan loading="eager", görünüm alanına kaydırıldığında yüklemek yerine hemen yüklenmesini sağlar.
• Seçenekler bileşenindeki layout="dropdown", seçimleri açılır listeye dönüştürür. Seçenek türüne bağlı olarak grid, list ve buttons de çalışır.
• columns="4" thumbnails="small", her satıra daha fazla seçim sığdırır.
• Fiyat üzerindeki prefix="From" tax_display="exclude", önüne metin ekler ve fiyatı vergi hariç gösterir; bu, WooCommerce sepetiyle uyumludur.
• Özetteki summary_mode="compact" hide_defaults="yes", her seçeneği tek satırda gösterir ve varsayılan değerinde bırakılanları atlar.
• Görüntüleyicideki display="hosted", seçenekler dâhil tam Simplio3D yapılandırıcısını tek bir bileşende gösterir; seçenek kimliklerine gerek yoktur.
• Bir grubun her bileşeninde kullanılan instance="oak", aynı sayfadaki iki yapılandırıcıyı birbirinden ayırır. Aynı örneğe sahip bileşenler tek bir yapılandırmayı paylaşır.

Elementor tasarımınızla uyumlu hâle getirin

• Her Shortcode bileşeninin Advanced sekmesi; kenar boşluğu, iç boşluk, arka plan, kenarlık ve duyarlı görünürlüğü yönetir. Görüntüleyici sütununu doldurur; bu nedenle onu genişletmek veya daraltmak için sütun ya da kapsayıcı genişliğini ayarlayın.
• Bloklar yazı tipini ve metin rengini sayfadan alır. Vurgu rengi (seçili seçenek, odak halkası ve düğmeler), Hello Elementor gibi klasik temalarda siyaha yakın bir renge geri döner; bu nedenle Görünüm → Özelleştir → Ek CSS bölümünde Elementor vurgu renginize ayarlayın: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Diğer özellikler arasında köşeler için --s3d-radius, küçük görsel boyutu için --s3d-thumb ve düğme için --s3d-button-bg bulunur. Yalnızca bir bileşeni biçimlendirmek için kısa koduna class="my-finish" ekleyin ve CSS’nizde .my-finish öğesini hedefleyin.