Membangun Website Semudah Menyusun Lego dengan Froala Design Blocks

Membangun Website Semudah Menyusun Lego dengan Froala Design Blocks

Untuk membuat sebuah website perlu dilakukan pengkodean atau ngoding. Nah, pada artikel kali ini saya akan memberitahukan kepada teman-teman tentang Froala Design Blocks.

Apa itu Froala Design Blocks

Froala Design Blocks adalah website yang menyediakan lebih dari 170 desain blok responsif yang siap pakai. Semua desain blok nya berbasis Bootstrap 4, dan ini adalah project Open Source.

Froala Design Blocks Homepage

Setiap desain blok diorganisasikan berdasarkan kategori, seperti call to action, features, headers, contents, footers, dan lain sebagainya. Dengan menggunakan ini, kamu bisa membangun website seperti sedang menyusun lego.

Website Builder

Froala Design Blocks juga memiliki Builder, sehingga kamu dapat membangun sebuah website statis tanpa harus memiliki keahlian ngoding. Kamu bisa mengekspor hasilnya menjadi file HTML.

Developer dan Designer

Froala Design Blocks dibuat untuk developer dan designer. Froala Design Blocks ini bisa diimplementasikan ke Angular, React, Vue.JS, Photoshop, dan juga SketchApp.

Lisensi

Froala Design Blocks merupakan sebuah project open source. Kamu diizinkan membuat website untuk client, tetapi tidak diizinkan membuat template untuk dijual.

Cara Menggunakan Froala Design Blocks

Kamu bisa menggunakan struktur template HTML berikut ini untuk memulai.

<!DOCTYPE html><html>  <head>    <title>Froala Design Blocks - Skeleton</title>    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.0/css/froala_blocks.min.css">  </head>  <body>    <!-- Masukkan kode HTML untuk Design Blocks disini. -->  </body></html>

Jika kamu sudah membuat struktur HTML seperti ini, kamu bisa langsung menjelajahi Froala Design Blocks yang kamu ingin gunakan dan hanya tinggal copy/paste kode HTMLnya. Mudah bukan?

Jika kamu tidak ingin ngoding seperti ini, kamu bisa coba design builder nya.

Demikianlah artikel yang singkat ini, semoga bermanfaat.

Komentar