Export to Bricks

Pick a section on any website and paste it into Bricks Builder as native elements, styled with global classes and with tablet and phone values already set.

Where to click ToolbarExportBricksCopy for Bricks
Pick the section, wait for the elements, Copy for Bricks.

Steps

  1. 1

    Click Export in the toolbar, then Bricks.

  2. 2

    Hover the section you want and click it.

  3. 3

    Wait a moment: the file row reads Building elements…, then how many elements and classes it made.

  4. 4

    Click Copy for Bricks.

  5. 5

    Open your page in the Bricks builder.

  6. 6

    Click an element (or the canvas) and press Ctrl+V (⌘V on a Mac). Or right-click and choose Paste.

    The first time, your browser asks to allow clipboard access: allow it. Bricks needs your site on https for this.

What you get

  • Native Bricks elements: Div, Heading, Basic Text, Button, Text Link and Image, in the same structure as the original.
  • One global class per look, shared by elements that look the same (three identical cards use one class). Edit the class once and every card follows.
  • Styles in Bricks' own controls (spacing, typography, background, border, layout), with tablet portrait, mobile landscape and mobile portrait values where the original changes.
  • Hover styles on the class's :hover state.

Or import it as a template

  1. 1

    In the PocketUI panel, click Download. You get a .json file.

  2. 2

    In WordPress, go to Bricks → Templates and click Import.

  3. 3

    Choose the file. It arrives as a section template, with its global classes.

Good to know

  • Custom CSS: anything Bricks has no control for (a layered shadow, a gradient, grid placement) is written in the class's Custom CSS, so it still looks right.
  • Icons: SVG icons arrive as images, so they render without signing code. Replace one with a Bricks icon if you want to recolour it.
  • Forms, tables, video: kept as small HTML elements in place, styled by one PocketUI styles element at the top.
  • Images still load from the original site. Swap them from your Media Library to host them yourself.
  • Fonts: Google Fonts load on their own. Any other font needs adding under Bricks → Custom fonts.
  • Breakpoints: the values match Bricks' default breakpoints (991, 767 and 478px). If you changed yours, check them in each breakpoint.

Tips

  • Class names start with the section name and a short code (like hero-1a2b-heading), so a paste never collides with classes you already have.
  • Export to the same place every day? Right-click its petal in the Export fan and choose Pin to front. It then sits in the toolbar row, one click away.