Mengatur Desain Komponen Website

Setelah anda menambahkan komponen ke dalam halaman dan menyesuiakan isi komponen tersebut dengan data yang ingin anda tampilkan, sekarang saatnya mendesain komponen tersebut. Ada beberapa cara untuk melakukannya: 

Mengatur Desain Website seperti Desainer Profesional

Setiap komponen mempunyai tombol setting desain. Arahkan mouse ke komponen yang akan anda rubah untuk melihat tool editing.

  • Klik pada icon untuk membuka setting komponen.
  • Dialog desain komponen akan muncul. Di sini, anda akan mendapatkan banyak pilihan setting desain:
  • Layout Background, untuk mengatur desain background komponen website
  • Container. Container adalah kotak yang membungkus semua bagian dalam komponen desain.
  • Text, berguna untuk mengatur semua teks dalam komponen website.
  • Title, untuk mengatur tampilan judul komponen.
  • Subtitle,untuk mengatur tampilan sub judul komponen.
  • Description,untuk mengatur tampilan deskripsi komponen
  • Divider, memberikan opsi untuk menambahkan devider atau garis pembagi antara judul dan deksripsi
  • Image, mengatur tampilan gambar.
  • Video, untuk mengatur tampilan video.
  • Top Mask dan Bottom Mask, untuk menambahkan mask ke komponen sehingga komponen satu dengan komponen di atasnya atau di bawahnya tidak hanya dipisahkan oleh garis lurus saja.
  • Custom Style. Jika anda paham tentang CSS, maka bisa menggunakan ini untuk mengatur komponen lebih jauh lagi dengan kode CSS yang anda tulis sendiri.

Anda bisa mengatur desain komponen seperti profesional, dengan memilih tampilan desain dari opsi yang tersedia.

Mengatur Desain Website seperti Desainer Profesional

AutoDesign - Kecerdasan Buatan yang Membantu Anda Mendesain Komponen Website

AutoDesign membantu anda mengatur desain komponen website dengan mudah dan cepat. Program AutoDesign akan mengatur layout, warna dan tipografi komponen secara otomatis.  Klik icon  untuk membuka pilihan AutoDesign.

  1. Klik Ganti Tipografi untuk mengganti ukuran huruf pada judul, sub judul dan deskripsi
  2. Klik Ganti Warna untuk mengganti warna background dan teks
  3. Klik Ganti Semua Desain untuk mengganti warna, ukuran huruf dan layout secara bersamaan
  4. Klik Ganti Layout untuk mengganti layout komponen, seperti posisi dan lebar teks atau gambar 
  5. Klik pada gambar desain yang telah anda simpan, atau telah disediakan oleh BuatSitusWeb. Desain komponen anda akan menyesuaikan dengan pilihan anda.
AutoDesign - Kecerdasan Buatan yang Membantu Anda Mendesain Komponen Website

Copy + Paste Style Desain dari Komponen Lain

Cara lain untuk mendesain komponen website adalah dengan melakukan copy + paste dari komponen yang sudah ada. Caranya adalah:

  • Pada komponen yang desain-nya ingin anda copy, klik  untuk melihat semua menu editing yang tersedia.
  • Klik menu Copy Style.
  • Lalu pindah ke komponen yang ingin diatur desain-nya.
  • Klik  pada komponen tersebut.
  • Lalu klik Paste Style.

Fitur ini memberikan dua manfaat yaitu:

  • Memudahkan untuk mendesain website
  • Menghasilkan desain yang konsisten pada website
Copy + Paste Style Desain dari Komponen Lain

Copy + Paste Komponen Website

Jika di atas anda hanya melakukan copy + paste style desain saja, di bagian ini anda bisa melakukan copy + paste komponen beserta isi dan desain-nya sekaligus. Setelah komponen tersalin di halaman, anda bisa dengan mudah mengubah isi dari komponen yang baru tersebut.

Caranya adalah:

  • Pada komponen yang ingin anda copy, klik  untuk melihat semua menu editing yang tersedia.
  • Klik menu Copy Komponen.
  • Lalu klik icon . Komponen telah tersalin di halaman website.

Anda bisa copy komponen dari halaman satu, kemudian di paste ke halaman kedua.

Duplikat Komponen Website

Untuk mempercepat proses copy + paste komponen, BuatSitusWeb juga menyediakan fitur duplikat komponen.

Caranya adalah:

  • Pada komponen yang ingin anda duplikat, klik  untuk melihat semua menu editing yang tersedia.
  • Klik menu Duplikat Komponen.
  • Komponen telah tersalin di halaman website.

Beda antara proses duplikat dengan copy + paste komponen adalah duplikat hanya bisa dilakukan di halaman yang sama sedangkan copy + paste bisa di halaman yang berbeda.

Administrator

  05 Mar 2020

Artikel yang berhubungan dengan Mengatur Desain Komponen