20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Pricing
Get Started
Skip to content
Star

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.

  1. Download the archive for the latest release and browse the code in the downloaded archive.
  2. Check code in the Github repo.
  3. Browse designs on our homepage and click them to see the HTML code.