Build with Pieces

How a page is made

• Sections are pages inside your page, each at its own address, such as yourname.carya.page/menu. Every page starts with one, its home.
• Blocks are the bands down a section, one under another. Each has its own layout, background and padding.
• Pieces are what you add to a block: words, pictures, buttons, a form. Every Piece comes in your page’s own look.

Click or tap once to select a Piece, twice to type in it. Esc steps out to what holds it: from a button to its box, from a Piece to its block. Select a Piece and its bar offers Duplicate and Delete, and you can drag it into a box, a column or another block. Undo and Redo sit at the top of the Editor.

Add a Piece

1. 1Select a Piece on the page. The new one lands right after it. With a whole block selected, it lands at the block’s end.
2. 2Open Add and pick a Piece, or search for it by name. To add one between two Pieces, point at the space between them and select the + that shows there.
3. 3A new heading or text opens for typing with its sample words selected: type over them.

A video or a song shows a cover with a play button, and nothing loads from its service until a visitor taps it. Price and Offer read their product from Products, beside the page: see Take orders.

Write on the page

Type straight into a heading or a text. While you type, a toolbar over the words has bold, italic, strikethrough, highlight, a colour, align and Link.

For an invitation, select words and mark them Guest’s name. When someone opens your page from a link such as yourname.carya.page/?to=Budi, those words read Budi. The name only shows on their screen: Carya doesn’t keep it. A name with numbers in it, or one that looks like a web address, isn’t shown, and your own words stay.

Set how a Piece looks

Select a Piece and its settings open in the control panel beside the page, or in the sheet at the bottom on a phone. Each setting starts from your page’s look and offers named presets first, with your own value one tap away under Custom. A dot marks a value you set, and its reset button takes it back.

• Type: its face (headings’, words’ or labels’), size from 10 to 160 pixels, weight from 100 to 900, letter spacing, line height, capitals or small letters, and align.
• Colour: your page’s ink at three strengths, its accent and muted colours, or any colour by its hex code or from a picker. Carya tells you when a colour is hard to read on your page.
• Boxes and buttons: fill, edge and its width, corners, shadow, padding, a tilt and a tape frame. A button is Primary, Secondary or Quiet, at three sizes.
• Pictures: crop to square, portrait, landscape or wide, or keep the picture as taken; a circle, a tape frame and a tilt. Set a picture’s Focus on its subject and every crop keeps it in view.
• On phones: show a Piece, or hide it on phones only.

Where tapping goes

Words, a picture, a button or a box can go somewhere when it’s tapped. Set it under Goes to:

• A website, a block on this page or another section of it.
• WhatsApp, with a message typed in for the visitor, or your WhatsApp catalogue.
• LINE, a Kakao Channel, or a social profile picked from a list, by its handle or a pasted link.
• An email, or a phone call.
• Buy a product, through Carya checkout.
• Save a contact: a contact card, with a name and a number or an email, that a phone opens in its Contacts.
• Copy a code, on a button or a box: a discount code or an account number, copied for the visitor.
• Open the picture full size, on a picture.

Blocks and the grid

Select a block by clicking its space around the Pieces, or press Esc from a Piece in it. Pick its layout: Stack, Columns, Grid, Row, Cards, Track, a row that slides sideways, or Sticky, where its first Piece stays put while the rest scroll by. Then set its background (one of your page’s colours, your own colour or a picture), its padding, its height (fits its Pieces, a screen, or tall), whether it runs edge to edge, and a rule above or below it. To make another block, duplicate one.

Columns come two, three or four to a block, even or one wider, and stack on phones or stay side by side. On a grid, each Piece spans 1 to 12 columns and can start where you choose: drag its edge, or pick its span. On phones it takes the full width, a half, a third or a quarter.

Page look

Open Page look beside the page, or on a phone select nothing, to set what every Piece starts from:

• Colours: paper, ink, muted, accent, the words on accent, surface and line, each any colour you like.
• Fonts: one for headings, one for words and one for labels, from about 1,950 open-source families. Carya copies them onto your page when you publish, so visitors never load them from anywhere else.
• Shape and space: corners, spacing and text size.
• Buttons: how Primary, Secondary and Quiet buttons look, set once for the whole page.
• Header and menu: no header, one at the top, one that sticks as visitors scroll, or one over the first block; where the menu goes; a footer; and the phone bar’s button.

Sections

Use the section switcher at the top of the Editor to go from one section to another. Add a section names it and gives it an address, and it starts blank or as a copy of the one you’re on. Each section’s menu has Rename or change address, Duplicate, Show in menu and Delete. Your home section keeps your page’s own address: rename it, but it can’t be deleted.

• A page holds up to 20 sections, on every plan, and they never count toward your live pages.
• Every section goes live with the page, at its own address, and its name shows in the menu and on the browser tab.
• Change a section’s address and the old one keeps working, sending visitors on to the new one. Delete a section and its address sends visitors to your home section.
• Sections and your Issue posts share your page’s addresses, so a section can’t take one a post has.
• When you add your second section and the page has no menu yet, Carya adds a Menu to your header, listing your sections. In Page look, put the menu in the header, in a phone bar at the bottom of phones, or turn it off. The phone bar holds four tabs, or three and More when there are more sections.

Effects

Select a Piece or a block, or nothing for the whole page, and open Effects in the control panel to give it an effect. There are 88, in ten kinds: Entrance, Scroll, Hover, Always, Type, Cursor, Backdrop, Gallery, Marquee and Playful, each with named steps such as its speed. A thing takes one effect of each kind, up to 3 on a Piece, 4 on a block and 6 on the page, and a page takes 3 Always effects at most.

The canvas holds effects still while you edit: select Play effects to see them. On your published page an effect is plain CSS, or a small script loaded only by the page that uses it. Visitors who ask their device for less motion see effects at rest, and entrances as a plain fade. A page with an effect that keeps moving gets a control to pause it.

Stickers, cut-outs and drawing

Open Add and switch to Overlay to put things on top of your page: hand-made stickers and icons in your page’s ink, or Your pictures as cut-outs. Tap one to put it on the selected Piece, or drag it where you want it. Each holds on to what it’s on and moves with it on every screen. Drag a sticker to move it, turn it with its round handle and size it S, M or L with its square one; on a phone, hold it to drag, and pinch and twist it with two fingers. A cut-out is decoration until you describe it under Describe it.

Stickers stay off your words. One dropped on words or a button slides to the nearest clear spot. If one would cover words or run off the page on a phone, Carya hides it on phones and says so, and Publish names it, so you can move it.

Select Draw beside the page, Draw on the page under Add › Overlay, or press D, to draw on the page itself with a pencil, a marker, a highlighter, a circle, a box or an arrow, in your page’s inks at three weights. A drawing holds on to the words, Piece or block you drew it on. Select Done when you’ve finished. See Sketch and Marks.

On a phone

The Editor works on a phone. Your page fills the screen, with the section switcher, Publish and Add in the bar at the top and the settings in a sheet at the bottom: swipe its handle up for every setting. While you type, the formatting row sits just above the keyboard. Hold a Piece to drag it, and a long page zooms out while it moves. In Draw, one finger draws and two scroll the page.

On a computer, switch the Editor between Computer and Phone to see your page as a phone shows it. The panels beside the page stretch, fold away and swap sides, and the Editor remembers how you left them.

Templates

New page lets you start blank or from one of 18 templates, each in its own colours and fonts, some with several sections. With a page built from Pieces open, Templates in the side menu starts a new page from one too, and leaves the page you have as it is.

Limits

• Up to 20 sections on a page, 30 blocks in a section, and 24 Pieces in a block or a box. Boxes go 4 deep.
• Up to 60 products on a page.
• Up to 3 stickers and cut-outs on a block (phones show 2), 12 in a section and 120 on a page, and up to 60 drawings on a page.
• A page holds only so much in all. Carya tells you when a page is too big to save.