Dasar-dasar Tata Letak

Struktur halaman web slidde

Slidde.co menggunakan struktur empat lapis yang sederhana:

• userCompName.Page (Gaya Global)
• userCompName.Slide (Segmentasi Konten)
• userCompName.Container (Lebar Responsif, Beberapa kolom)
• Elemen Inline (Konten Spesifik)

userCompName.Page

Lapisan userCompName.Page berada di bagian atas dan digunakan untuk mengatur gaya global seperti font, warna, dan gaya tautan, karena properti CSS dapat diwariskan.

Opsional, Anda dapat menggunakan variabel CSS untuk membuat template Anda lebih ramah pengguna.

Jika Anda tidak dapat memilih elemen userCompName.Page secara langsung, gunakan opsi userCompOption.Select page di toolbar.

Fitur userCompOption.hashSection dapat mensimulasikan situs web multi-halaman. Lihat demo ini: Demo Link

userCompName.Slide

Sebuah userCompName.Slide adalah elemen tingkat pertama di bawah userCompName.Page, digunakan untuk segmentasi konten.

• Halaman sederhana, seperti halaman "tautan di bio", mungkin hanya memiliki satu Slide.
• Halaman arahan yang kompleks mungkin mencakup beberapa bagian seperti #header, #hero, #works, #contact, #footer.

Sebuah userCompOption.htmlId pada dasarnya adalah ID HTML. Namai mereka berdasarkan konten dalam userCompName.Slide untuk navigasi mudah menggunakan tautan seperti “#ID”. Pelajari lebih lanjut tentang tautan lewati.

Untuk menyembunyikan userCompName.Slide dari situs web akhir tetapi tetap menyimpannya, periksa atribut userCompOption.hidden. Ini mirip dengan slide tersembunyi di PowerPoint dan juga dapat digunakan untuk tutorial.

Fitur userCompOption.sticky digunakan untuk bilah navigasi mengambang atau elemen lainnya. Lihat contohnya di sini: Sticky Demo

userCompName.Container

userCompName.Container mengelola lebar responsif dan tampilan multi-kolom.

• Lebar untuk perangkat mobile dan desktop biasanya berbeda. Gunakan atribut userCompOption.width dalam userCompName.Container untuk lebar adaptif di berbagai perangkat.
• Kolom menentukan berapa banyak kolom yang ada dalam sebuah container. Anda dapat mengatur lebar seperti x/12 (misalnya, dua kolom 6/12 untuk lebar masing-masing 50%).

Setiap kolom juga dapat memiliki pengaturan perataan horizontal dan vertikal.

Lainnya

Elemen lainnya adalah elemen inline, yang dapat diposisikan di dalam container.

Dengan mengikuti pendekatan terstruktur ini, Anda dapat dengan mudah membuat halaman web yang menarik secara visual dan responsif menggunakan Slidde.co.