Plasmic

Montar páginas en Plasmic

Por dónde empezar cuando montas una página y qué componente elegir en cada situación. No hace falta saber programar: cada componente tiene además su propia ayuda dentro del editor.

Índice

1. Conceptos en un minuto

2. La regla de oro: qué componente elegir

3. Quiero X → usa Y

4. Montar una página nueva

5. Editar un componente ya colocado

6. Errores frecuentes

7. Dónde mirar más

1. Conceptos en un minuto

• Página — cada URL del sitio (la portada, "Contacto", "Servicios"…). En Plasmic, una página es una pila de componentes de arriba abajo.

• Componente — cada bloque que arrastras a la página: un header, una cabecera con foto, una rejilla de propiedades… Los nuestros aparecen en el panel de inserción con nombre propio, como GenericHero o GenericContainer.

• Componentes de configuración ("Config. …") — componentes invisibles: no pintan nada, pero activan cosas en todo el sitio (idiomas, monedas, Google Reviews, textos legales…). No los borres: si desaparecen, deja de funcionar lo que gobiernan.

• Configuración de la agencia vs. página — algunos contenidos no se guardan en la página sino en la configuración compartida de la agencia. Por eso, cambiar el menú del header o los textos del Hero de portada desde una página lo cambia en todas. Cada componente avisa de esto en su documentación.

• Clave de página — algunos componentes (como GenericHero) piden una "clave" al colocarlos: el nombre interno con el que se guardan sus textos y su fondo, para que cada página tenga los suyos sin pisarse con las demás.

2. La regla de oro: qué componente elegir

Cuando vayas a añadir un bloque, sigue este orden. Cuanto más arriba elijas, menos trabajo tendrás después y más consistente quedará el sitio.

1º

¿Existe un componente hecho para esa sección?

Si la sección ya tiene componente propio, úsalo: trae el contenido, el diseño y las traducciones resueltas.

Ejemplos: HeroAboutUs para "Quiénes somos", HeroBlogPost para el blog, ComercialSection para "Nuestro equipo", FeaturedPropertiesSection para propiedades destacadas, TestimonialSection para reseñas, ServicesContainer para servicios.

2º

Si no, usa un componente genérico nuestro

Son las piezas pensadas para montar bloques nuevos:

ComponenteQué hace GenericHeroCabecera con fondo, título y subtítulo propios de cada página (por clave de página). GenericContainerRejilla de datos reales: propiedades, promociones, zonas, testimonios, equipo, FAQs… GenericContainerSlideLo mismo pero en carrusel deslizante. TitleSectionTítulo y subtítulo de sección con el estilo del sitio. StyledBackgroundContenedor de fondo (color del tema, imagen…) para envolver lo que montes a mano. TextInternationalizableTexto libre que se traduce según el idioma del visitante. ImageImagen gestionada desde el CMS, guardada por clave.

3º

Los elementos básicos de Plasmic, solo para rematar

Los box, text e image de Plasmic sirven para espaciar, agrupar o decorar. No los uses para contenido real:

• Un text de Plasmic no se traduce: se ve igual en todos los idiomas. Para textos visibles usa TextInternationalizable (salvo nombres propios o teléfonos, que no cambian).

• Un box con color a mano no sigue la paleta del sitio: si mañana cambia el diseño, ese bloque se queda descolgado. Usa StyledBackground, que toma los colores del tema.

• Una image de Plasmic no se puede cambiar desde el CMS. Con nuestro componente Image, sí.

3. Quiero X → usa Y

Quiero…Usa… Cabecera de portada con buscadorHero Cabecera de una página interior (contacto, servicios…)GenericHero Cabecera de "Quiénes somos" / del blogHeroAboutUs / HeroBlogPost Rejilla de propiedades, zonas, equipo, FAQs…GenericContainer Carrusel de propiedades, testimonios, equipo…GenericContainerSlide Título de sección con el estilo del sitioTitleSection Un párrafo o texto suelto traducibleTextInternationalizable Fondo de color o imagen para un bloque propioStyledBackground Una imagen editable desde el CMSImage Incrustar un widget externo (mapa, reseñas de terceros…)RenderHTML Formulario de contacto con imagenForm with Image Preguntas frecuentesFAQAcordion Botón flotante de WhatsAppWhatsApp Widget

¿No encuentras lo que buscas? El índice completo de componentes (hay más de ochenta) está en la guía de componentes, dentro del propio editor.

4. Montar una página nueva

No necesitas a nadie del equipo técnico: todo se hace desde el editor de Plasmic.

1

Crea la página

1. Pulsa el selector de páginas (arriba a la izquierda, junto al nombre de la página actual).

2. Pulsa "Nuevo" y elige "Nueva página".

3. Escribe un nombre y pulsa "Crear página".

2

Revisa la Ruta URL

Con la página abierta, ve al panel derecho, pestaña "Datos de página". Ahí está la Ruta URL (por ejemplo /test-page):

• Es la dirección real con la que se verá la página en la web.

• Es la ruta que usarás en el paso 4 para enlazarla desde el menú.

Elige una ruta corta, en minúsculas y descriptiva (/servicios, /contacto…). Puedes cambiarla en ese mismo campo.

3

Monta el contenido

El esqueleto recomendado de cualquier página es:

1. Header como primer elemento (uno solo por página).

2. Una cabecera: GenericHero con su clave de página en las interiores; Hero solo en la portada.

3. Las secciones de contenido, siguiendo la regla de oro.

4. Footer como último elemento.

4

Enlázala en el menú del header

Para que los visitantes lleguen a la página nueva, añádela al menú de navegación:

1. Ve a la página HomePage y selecciona el componente Header.

2. En el panel derecho, abre "Enlace de header y logo" y pulsa editar.

3. Añade una ruta nueva con:

   • Ruta: exactamente la Ruta URL del paso 2 (por ejemplo /test-page).

   • Texto por idioma: el nombre del enlace en cada idioma del sitio. Un enlace sin traducción en ningún idioma visible no se muestra.

   • Orden y visibilidad: posición en el menú y si se ve o no.

4. Guarda el modal.

⚠️ El menú es único para todo el sitio. Aunque lo edites desde la HomePage, el enlace nuevo aparece en el header de todas las páginas — no hace falta repetirlo en cada una. Y ojo: el modal no guarda si falta la Ruta inicial (a dónde lleva el logo; normalmente /).

5

Publica

Pulsa "Publish" (arriba a la derecha) para que la página y el menú se vean en la web real. Hasta entonces, los cambios solo existen en el editor.

Dos consejos

• Copia antes que crear de cero. Si ya existe una página parecida, duplícala y cambia el contenido: heredas estructura y ajustes que ya funcionan.

• Mira la página cambiando de idioma. Antes de darla por buena, cámbiala de idioma en la vista previa: los textos que no cambien están puestos con texto plano y hay que pasarlos a TextInternationalizable.

5. Editar un componente ya colocado

Al hacer clic sobre una sección en el lienzo, muchas veces no se selecciona el componente de verdad, sino el contenedor visual que lo envuelve (una "pila"). El panel derecho muestra entonces opciones de diseño genéricas y no aparecen las propiedades del componente (Tipo de datos, Columnas, filtros…).

Para llegar a las propiedades reales, usa el árbol de capas (Outline):

1. Abre Outline en la barra lateral izquierda (icono de lista, arriba).

2. En el árbol, busca la sección que quieres editar (por ejemplo "Latest Properties").

3. Despliégala y entra en Slot: "children".

4. Dentro, despliega la pila (por ejemplo "pila vertical").

5. Haz clic en el componente (por ejemplo GenericContainer).

Ahora el panel derecho muestra sus propiedades de verdad — y su botón Docs → "Ver" con la ayuda del componente.

💡 Vale para cualquier componente anidado. Containers, tarjetas dentro de un carrusel, etc. Si el panel derecho no muestra las opciones que esperas, casi siempre tienes seleccionado el envoltorio y no el componente: míralo en Outline.

6. Errores frecuentes

SíntomaCausa y solución Hacer clic en una sección y no encontrar sus opciones.Tienes seleccionado el envoltorio, no el componente. Búscalo en Outline. Escribir textos con el text normal de Plasmic.No se traducen. Usa TextInternationalizable. Editar el Hero de portada (o el menú del header) creyendo que solo cambia esa página.Esos contenidos viven en la configuración de la agencia: el cambio afecta a todo el sitio. Colocar un GenericHero y no ver ninguna opción.El panel está bloqueado hasta rellenar la Clave de página (el primer campo). Ponle un nombre y se desbloquea el resto. Reutilizar una clave de página que ya usa otra página.Las dos páginas compartirán título y fondo, y se pisarán al editarlas. Cada página, su clave. Cambiar el título de un TitleSection sin saber que es compartido.Los títulos de sección se guardan por sección, no por página: todas las páginas que muestren esa sección lo heredan. Borrar un componente "Config. …" porque "no se ve nada".Son invisibles a propósito; borrarlos rompe lo que configuran (idiomas, monedas, reseñas…). Poner colores a mano.Un color elegido a dedo no cambiará cuando cambie la paleta del sitio. Usa los componentes del tema (StyledBackground, variantes de diseño). Dos Header o dos Footer en la misma página.Uno de cada, al principio y al final.

7. Dónde mirar más

• Dentro del editor: cada componente documentado tiene arriba una propiedad Documentación con el botón "📖 Ver documentación", que abre su página de ayuda con todas las propiedades explicadas.

• Guía de componentes: índice completo con la descripción de cada componente, accesible desde ese mismo botón.

• Si algo no funciona como esperas, puede ser un problema conocido: pregunta al equipo antes de rehacer el bloque.