Plasmic

Building pages in Plasmic

Where to start when building a page and which component to choose in each situation. No programming knowledge is needed: each component also has its own help within the editor.

Index

1. Concepts in a minute

2. The golden rule: which component to choose

3. I want X → use Y

4. Building a new page

5. Editing an already placed component

6. Common mistakes

7. Where to look further

1. Concepts in a minute

• Page — each URL of the site (the homepage, "Contact", "Services"…). In Plasmic, a page is a stack of components from top to bottom.

• Component — each block you drag onto the page: a header, a header with photo, a grid of properties… Ours appear in the insertion panel with their own name, like GenericHero or GenericContainer.

• Configuration components ("Config. …") — invisible components: they don’t render anything, but activate things throughout the site (languages, currencies, Google Reviews, legal texts…). Don’t delete them: if they disappear, what they govern stops working.

• Agency configuration vs. page — some content is not saved on the page but in the shared agency configuration. Therefore, changing the header menu or the texts of the Hero on the homepage from a page changes it everywhere. Each component warns about this in its documentation.

• Page key — some components (like GenericHero) require a "key" when placed: the internal name under which their texts and background are saved, so each page has its own without overwriting others.

2. The golden rule: which component to choose

When adding a block, follow this order. The higher you choose, the less work you’ll have later and the more consistent the site will be.

1st

Is there a component made for that section?

If the section already has its own component, use it: it brings the content, design, and translations solved.

Examples: HeroAboutUs for "Who we are", HeroBlogPost for the blog, ComercialSection for "Our team", FeaturedPropertiesSection for featured properties, TestimonialSection for reviews, ServicesContainer for services.

2nd

If not, use one of our generic components

These are the pieces designed to build new blocks:

ComponentWhat it does GenericHeroHeader with background, title, and subtitle specific to each page (by page key). GenericContainerGrid of real data: properties, promotions, zones, testimonials, team, FAQs… GenericContainerSlideThe same but in a sliding carousel. TitleSectionSection title and subtitle with site style. StyledBackgroundBackground container (theme color, image…) to wrap what you build manually. TextInternationalizableFree text that translates according to the visitor’s language. ImageImage managed from the CMS, saved by key.

3rd

Basic Plasmic elements, only to finish

Plasmic’s box, text, and image serve to space, group, or decorate. Don’t use them for real content:

• A Plasmic text doesn’t translate: it looks the same in all languages. For visible texts use TextInternationalizable (except proper names or phone numbers, which don’t change).

• A box with manually chosen color doesn’t follow the site palette: if the design changes tomorrow, that block will be out of place. Use StyledBackground, which takes colors from the theme.

• A Plasmic image can’t be changed from the CMS. With our Image component, yes.

3. I want X → use Y

I want…Use… Homepage header with searchHero Inner page header (contact, services…)GenericHero "Who we are" / blog headerHeroAboutUs / HeroBlogPost Grid of properties, zones, team, FAQs…GenericContainer Carousel of properties, testimonials, team…GenericContainerSlide Section title with site styleTitleSection A paragraph or loose translatable textTextInternationalizable Colored or image background for a custom blockStyledBackground An image editable from the CMSImage Embed an external widget (map, third-party reviews…)RenderHTML Contact form with imageForm with Image Frequently asked questionsFAQAcordion Floating WhatsApp buttonWhatsApp Widget

Can’t find what you’re looking for? The complete index of components (there are more than eighty) is in the components guide, inside the editor itself.

4. Building a new page

You don’t need anyone from the technical team: everything is done from the Plasmic editor.

1

Create the page

1. Click the page selector (top left, next to the current page name).

2. Click "New" and choose "New page".

3. Type a name and click "Create page".

2

Check the URL Path

With the page open, go to the right panel, "Page Data" tab. There is the URL Path (for example /test-page):

• It’s the real address where the page will be seen on the web.

• It’s the path you’ll use in step 4 to link it from the menu.

Choose a short, lowercase, and descriptive path (/services, /contact…). You can change it in that same field.

3

Build the content

The recommended skeleton of any page is:

1. Header as the first element (only one per page).

2. A header: GenericHero with its page key on inner pages; Hero only on the homepage.

3. The content sections, following the golden rule.

4. Footer as the last element.

4

Link it in the header menu

For visitors to reach the new page, add it to the navigation menu:

1. Go to the HomePage and select the Header component.

2. In the right panel, open "Header and logo link" and click edit.

3. Add a new path with:

   • Path: exactly the URL Path from step 2 (for example /test-page).

   • Text per language: the link name in each site language. A link without translation in any visible language is not shown.

   • Order and visibility: position in the menu and whether it is visible.

4. Save the modal.

⚠️ The menu is unique for the whole site. Even if you edit it from the HomePage, the new link appears in the header of all pages — no need to repeat it on each one. And watch out: the modal doesn’t save if the initial Path is missing (where the logo leads; usually /).

5

Publish

Click "Publish" (top right) so the page and menu are visible on the real website. Until then, changes only exist in the editor.

Two tips

• Copy before creating from scratch. If a similar page already exists, duplicate it and change the content: you inherit structure and settings that already work.

• Check the page by changing language. Before approving it, change its language in preview: texts that don’t change are set as plain text and must be converted to TextInternationalizable.

5. Editing an already placed component

When clicking on a section on the canvas, often the real component is not selected, but the visual container that wraps it (a "stack"). The right panel then shows generic design options and the component properties (Data type, Columns, filters…) don’t appear.

To reach the real properties, use the layer tree (Outline):

1. Open Outline in the left sidebar (list icon, top).

2. In the tree, find the section you want to edit (for example "Latest Properties").

3. Expand it and enter the Slot: "children".

4. Inside, expand the stack (for example "vertical stack").

5. Click on the component (for example GenericContainer).

Now the right panel shows its real properties — and its Docs button → "View" with the component help.

💡 Works for any nested component. Containers, cards inside a carousel, etc. If the right panel doesn’t show the options you expect, you almost always have the wrapper selected and not the component: check it in Outline.

6. Common mistakes

SymptomCause and solution Clicking on a section and not finding its options.You have the wrapper selected, not the component. Find it in Outline. Writing texts with the normal Plasmic text.They don’t translate. Use TextInternationalizable. Editing the homepage Hero (or the header menu) thinking it only changes that page.That content lives in the agency configuration: the change affects the whole site. Placing a GenericHero and seeing no options.The panel is locked until you fill the Page key (the first field). Give it a name and the rest unlocks. Reusing a page key already used by another page.Both pages will share title and background, and overwrite each other when edited. Each page its key. Changing the title of a TitleSection without knowing it is shared.Section titles are saved per section, not per page: all pages showing that section inherit it. Deleting a "Config. …" component because "nothing shows".They are invisible on purpose; deleting them breaks what they configure (languages, currencies, reviews…). Manually setting colors.A manually chosen color won’t change when the site palette changes. Use theme components (StyledBackground, design variants). Two Header or two Footer on the same page.One of each, at the start and end.

7. Where to look further

• Inside the editor: each documented component has a Documentation property at the top with the button "📖 View documentation", which opens its help page with all properties explained.

• Components guide: complete index with description of each component, accessible from that same button.

• If something doesn’t work as expected, it might be a known issue: ask the team before redoing the block.