Landinker

Edit components

When you select a component in the editor, its properties appear in the right panel. Instead of writing values manually, most fields feature visual controls. Each field shows a type icon on the left indicating what it is (a T for text, a palette for color, a ruler for dimension, etc.).

Color (group palette)

The color field lets you choose between:

• The group palette colors (primary, secondary, accent, background, text), displayed with their actual color.
• A custom color (hex) using the picker.
• None (no color).

When using a palette color, if you change the group palette, the component updates automatically.

The group palette is chosen in Group settings → Color palette: you can use one of the presets or create a custom one with your own colors (with a live preview). It applies to the dashboard as well as your published landings and products.

Section background color

Several section modules (Testimonials, Pricing table, Team, Tabs, in addition to Hero, CTA, and others) include Section background color and Text color. Choosing a background automatically adds internal spacing and rounded corners so the content doesn't press against the edge of the color. Without a background, the module appears as usual.

Image (URL or multimedia)

Image fields (Hero image, avatars, logos, post cover…) display a preview of the loaded asset and allow you to:

• Paste a URL of any image, as usual.
• Choose from multimedia: opens your file library with a search bar, and with one click it is applied to the field. From there you can also upload and use a new image without leaving the editor: using the Upload and use button or by dragging the file into the window.
• Drag an image into the field: if dropped directly onto the field, it uploads and applies without opening the modal. If you drop several, the first is taken (the field takes a single image); to upload multiple files at once, use the Multimedia section.

The library button appears if your plan includes multimedia (Basic and above) and you have permission to view it. See Multimedia.

Spacing (margin and padding)

The spacing field uses a dropdown with presets — None, Small, Medium, Large — that apply to all four sides simultaneously. With Custom you can adjust each side (top, right, bottom, left) independently. You also have tabs by device (desktop, tablet, mobile) for distinct spacing on each.

Dimensions (height and width)

Instead of typing 100vh manually, the dimension field provides a dropdown with clear options (Auto, Half screen, Full screen, or Custom) and a slider with the value on the right, editable if you need an exact measurement (e.g. 420px).

Icons

Icon fields open a search picker with preview: type the name and pick the icon from the grid, without needing to know the complete list.

Dynamic variables ({{…}})

In text and link fields, typing {{ opens a menu with the available variables. Selecting one inserts the token; on the published page it is replaced with the real value.

Typical variables:

• User: {{USER_NAME}}, {{USER_EMAIL}}
• Group: {{GROUP_NAME}}, {{GROUP_DESCRIPTION}}, and palette colors
• Route: {{CURRENT_PATH}} and each dynamic parameter of the path (e.g. a /blog/:nota path enables {{NOTA}})
• Route product: {{PRODUCT_TITLE}}, {{PRODUCT_DESCRIPTION}}, {{PRODUCT_PRICE}}, {{PRODUCT_CATEGORY}}, {{PRODUCT_IMAGE}}
• Route post: {{BLOG_TITLE}}, {{BLOG_EXCERPT}}, {{BLOG_AUTHOR}}, {{BLOG_TAGS}}, {{BLOG_COVER}}, {{BLOG_DATE}}

Fallback value: if a variable might not have a value, add a fallback using |. For example, {{USER_NAME|Guest}} displays the user's name or, if unavailable, "Guest". Without a fallback, if the variable has no value, the literal token remains as {{USER_NAME}}.

Route product or post variables

Variables {{PRODUCT_*}} and {{BLOG_*}} are populated with the entity referenced by that URL. On a landing with a product (or post) component bound to a path parameter — for example, a /producto/:id path and a "Full product" component with ID set to {{ID}} —, each address resolves variables with its product.

This is what allows a single landing to serve the entire catalog without repeating copy. Two details:

• The price renders with the same format shown by the Price component, and the description enters as plain text (without formatting asterisks or dashes), which is suitable for search engine reading.
• If the landing does not bind any entity, or the product does not exist, the variable does not resolve (remaining as the token, or whichever fallback you set with |), just like {{USER_NAME}} for an anonymous visitor.

Title and description for search engines (SEO)

The SEO Title, SEO Description, Keywords, and Social share image (OG) fields in Landing settings accept the same variables. In the three text fields you have the same autocomplete as in the editor: type {{ to open the list, browse with arrow keys, and insert with Enter. Parameters for routes you typed above also appear, even if not yet saved. This prevents the classic dynamic route issue: dozens of URLs with the same title and description, which search engines flag as duplicate content.

For example, with the title {{PRODUCT_TITLE}} | My Store, each product is shared and indexed under its own name.

If something doesn't resolve, the token is not published. When the product doesn't exist, was deleted, or the field is empty, the entire field is discarded and your group's default text is used. You will never see a literal {{PRODUCT_TITLE}} on Google or in a WhatsApp preview.

In listing links (product grid, blog index), the menu also includes a per-card variable replaced by each card's item: {{CARD_PRODUCT_ID}} and {{CARD_BLOG_ID}}. Both give the item's address: its identifier and name (6770…-zapatillas-running). For example, a link /blog/{{CARD_BLOG_ID}} makes each card navigate to that post's detail.

Links to a section on the same page

In any link field, typing # as the first character brings up a list of component IDs from that landing to pick the target. Selecting one turns the field into #precios, which jumps to that section upon click.

For a component to appear in that list, enter a value in its ID (optional) field. If none has an ID yet, the dropdown will notify you.

Other editor helpers

• Component search: the left panel features a search box that filters components in real time as you type.
• Desktop preview: the previewer defaults to desktop (full width); you can switch to tablet or mobile from the top bar to test responsive behavior.