Deskripsi
rapkan langkah di atas, kalau masih ada kendala, kasih tahu aku ya! 🔥
You said:
ChatGPT said:
Oke, kalau kamu ingin Product Tabs sejajar dari kiri ke kanan di bawah gambar produk dan deskripsi singkat, kamu bisa atur dengan langkah berikut di Elementor:
🔧 Cara Atur Product Tabs Agar Sejajar Lebar Layar
1. Edit Single Product di Elementor
1️⃣ Buka Elementor → Theme Builder → Single Product.
2️⃣ Buat 1 Section baru (Full Width) di bawah produk.
3️⃣ Dalam section ini, tambahkan Inner Section (Dua Kolom):
- Kolom 1 → Untuk Gambar Produk
- Kolom 2 → Untuk Judul, Harga, Deskripsi Singkat, dan Tombol Beli
2. Tambahkan Product Tabs di Bawah Produk
4️⃣ Tambahkan section baru di bawah Inner Section tadi.
5️⃣ Tarik widget Product Data Tabs ke dalam section ini.
6️⃣ Ubah lebar section menjadi Full Width agar sejajar dengan layar.
3. Atur Posisi & Lebar di Advanced Settings
7️⃣ Klik Section yang berisi Product Tabs → Tab Advanced.
8️⃣ Masukkan Custom CSS berikut untuk memastikan lebarnya penuh:
.woocommerce-tabs {
width: 100%;
max-width: 1200px; /* Sesuaikan dengan layout */
margin: 0 auto;
}
9️⃣ Klik Update dan cek hasilnya di browser.
✅ Hasil Akhir yang Diharapkan
✔ Gambar produk di kiri, deskripsi singkat di kanan.
✔ Product Tabs berada di bawah, melebar dari kiri ke kanan.
✔ Tampilan tetap responsif dan rapi.
Kalau masih ada kendala, bisa share screenshot atau detail tambahan biar aku bantu lebih spesifik! 🔥
You said:
ChatGPT said:
Oke, kalau Product Tabs malah masuk ke kolom 1, kemungkinan section yang kamu buat masih di dalam Inner Section. Jadi, kita perlu memastikan Product Tabs ada di section terpisah agar melebar penuh.
🔧 Solusi: Pastikan Product Tabs di Section Terpisah
1️⃣ Buka Single Product Template di Elementor
2️⃣ Cek struktur layout di Navigator (klik ikon ☰ di bawah tombol “Update”)
3️⃣ Pindahkan Product Tabs ke luar Inner Section, caranya:
- Pilih Product Data Tabs di dalam Navigator
- Tarik keluar dari Inner Section, letakkan di
Ulasan
Belum ada ulasan.