New Froala Editor v5.0.0 is here – Learn More
Get Started
There are several ways to start using the Froala Design Blocks. The easiest and non-tech one is using the Design Blocks Builder tool. If you want to get your hand dirty, here is the alternative:
Skeleton
You can use the following HTML layout as a starting point for a webpage:
<!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>
<!-- Insert HTML for Design Blocks. -->
</body>
</html>
Once you have the Froala Design Blocks basic HTML structure in place, start browsing the design blocks that you want to use and copy/paste the HTML for them.
Browse blocks
Choose your favorite way to browse the Froala Design blocks. You can use any of the following ways.
- Download the archive for the latest release and browse the code in the downloaded archive.
- Check code in the Github repo.
- Browse designs on our homepage and click them to see the HTML code.
