Crear un theme en Stronglify: plantillas, bloques y parámetros

Cómo se compone un diseño en Stronglify, cómo crearlo paso a paso y cómo nombrar sus parámetros para que el equipo entienda tu trabajo seis meses después.

Cómo se compone un diseño

Un diseño no es un archivo: es un árbol de contención. Cada nivel envuelve al siguiente y decide qué puede cambiar dentro de él.

Antes de tocar nada conviene tener claro el modelo, porque todo lo demás se deduce de él. Un diseño contiene plantillas y bloques. Una plantilla arma la estructura de un tipo de página y puede incluir bloques. Un bloque es una sección reutilizable. Y en cualquiera de esos tres niveles viven parámetros, que son los huecos editables del contenido.

• Diseño — la identidad visual: tipografías, color, tratamiento de imagen. Sus parámetros aplican a todo el sitio (logo, menu, footer_description).
  • Plantilla — la estructura de un tipo de página: index, article, product. Sus parámetros cambian en cada página (titulo, contenido, imagen_principal).
    • Bloque — una sección reutilizable: hero, testimonios, CTA, FAQ. Sus parámetros se repiten con la sección (cta_titulo, cta_boton_url).

Los bloques pertenecen al diseño, no a la plantilla: se crean una vez y se incluyen en las plantillas que los necesiten. Arriba aparecen anidados para mostrar dónde se ven, no dónde viven.

El diseño

NOTA DE VOCABULARIO. En la aplicación esto se llama Diseño, no «tema». Si buscas la palabra «tema» en la interfaz no la vas a encontrar: el menú dice Diseños y el botón dice Crear diseño. En documentación técnica y en la API sigue apareciendo como theme.

Un diseño define la identidad visual y estética general de un sitio: estilo gráfico, tipografías, colores, tratamiento de imágenes, espaciados. Establece cómo debe verse y sentirse el sitio.

Un mismo diseño puede contener múltiples plantillas, todas bajo esa identidad. Por ejemplo, un diseño llamado Salvaje podría usar fotografía de naturaleza, una combinación tipográfica concreta y una paleta específica; dentro de él conviven plantillas distintas para cada tipo de página. El diseño define la estética; las plantillas definen la estructura.

Qué configuras a nivel de diseño

• Nombre — obligatorio. Es como lo identificará tu equipo en la lista de diseños.
• Miniatura — opcional. Una URL de imagen que se muestra en la tarjeta del diseño. Puedes previsualizarla antes de guardar.
• URL de vista previa — opcional. Un enlace a un sitio de referencia que muestra el diseño en funcionamiento.
• Aplicar normalize CSS — activado por defecto. Neutraliza los estilos por defecto del navegador antes de aplicar los tuyos. Desactívalo sólo si tu CSS ya incluye su propio reset.
• Tipo de diseño — Privado o Nativo. Sólo visible para personal de Stronglify; los diseños que creas quedan como Privados.
• Miembros — comparte el diseño con otras personas. Disponible según tu plan.

LÍMITE DE PLAN. La cantidad de diseños que puedes crear depende de tu membresía. Cuando llegas al tope, el botón Crear diseño se deshabilita y aparece el aviso con tu máximo. Clonar un diseño existente también consume cupo.

Plantillas

Una plantilla define la estructura y la disposición de un tipo específico de página dentro de un diseño. Nombres habituales: index, article, collection, product, page.

Cada plantilla determina cómo se organizan los elementos de ese tipo de página. Dos plantillas del mismo diseño pueden tener estructuras completamente distintas, pero comparten la identidad visual. Una plantilla puede incluir bloques, aunque no está obligada a construirse sólo con ellos.

Normal o Especial

Al crear una plantilla eliges su tipo, y la diferencia es concreta:

• Normal — el caso por defecto. Sirve para artículos, listados, páginas de contenido.
• Especial — habilita la sección Configuración avanzada en las páginas que la usan, donde puedes definir el canonical y marcar una página como página de inicio del sitio.

YA TIENES UNA. Al crear un diseño se genera automáticamente una plantilla llamada Index, de tipo Especial, con contenido de ejemplo. Es tu punto de partida: ábrela y reemplaza su contenido en lugar de crear otra desde cero.

Bloques

Un bloque es una sección o componente reutilizable. Los bloques permiten dividir una plantilla en partes independientes que puedes reordenar y reutilizar entre plantillas.

Ejemplos típicos: hero, galería, lista de artículos, características, testimonios, preguntas frecuentes, CTA, footer. Una plantilla index podría componerse de hero, categorías destacadas, artículos recientes, CTA y footer.

DÓNDE VIVE UN BLOQUE. Los bloques pertenecen al diseño, no a una plantilla. Se crean una vez desde la carpeta Bloques y después se incluyen y ordenan dentro de las plantillas que los necesiten. Si creas el mismo bloque dos veces para dos plantillas, estás duplicando trabajo.

Cada bloque puede tener sus propios parámetros, que permiten cambiar su contenido sin tocar su estructura. Esto tiene una consecuencia práctica importante: los parámetros de un bloque se convierten en columnas del CSV de edición masiva. Un bloque bien parametrizado se puede llenar para cientos de páginas desde una hoja de cálculo; uno mal parametrizado obliga a editar página por página.

Parámetros

Un parámetro es un valor configurable dentro de un diseño, una plantilla o un bloque. Permite cambiar contenido sin tocar el HTML.

Los parámetros son la frontera entre quien construye el diseño y quien administra el contenido. Todo lo que quieras que alguien pueda editar sin abrir el editor de código tiene que ser un parámetro.

Los cuatro ámbitos

Lo primero que decides sobre un parámetro no es su tipo, sino a quién pertenece:

• Diseño — compartido por todo el sitio. Cambia una vez y se refleja en todas las plantillas que lo usen. Logo, nombre corporativo, menú, redes sociales.
• Plantilla — cambia en cada página generada con esa plantilla. Título, contenido, fecha, imagen principal.
• Bloque — pertenece a la sección. Se repite cada vez que el bloque aparece. Título del CTA, texto del botón, URL de destino.
• Global — existe de forma nativa. No lo creas ni lo eliminas: ya está disponible en todas las plantillas.

Sobre los parámetros globales

Los globales cubren datos del sitio y de la página que el sistema ya conoce: dominio, nombre del sitio, URL del sitio. A ellos se suman los campos SEO que cada página define por su cuenta y que también puedes usar en las plantillas:

• Título <title> — el titular de la pestaña y del resultado de búsqueda.
• Descripción SEO — la meta description, hasta 500 caracteres.
• Slug — el segmento de URL de la página.
• Canonical — sólo en plantillas de tipo Especial.
• Consulta objetivo y Estado (borrador o publicada).

Estos campos no se pueden crear ni redefinir, pero sí se leen desde la plantilla, y son las mismas columnas que aparecen al descargar el CSV de páginas de un proyecto.

Tipos de parámetro

Al crear un parámetro eliges su tipo. Estos son los cinco disponibles, con el nombre exacto que verás en la interfaz:

LÍMITE DE ANIDAMIENTO. La interfaz permite anidar hasta dos niveles: una lista dentro de una lista. En el nivel más profundo sólo puedes agregar hijos de tipo Texto. Si tu contenido necesita tres niveles, replantea la estructura antes de construirla.

Regla para elegir el tipo

La decisión sale de la estructura del contenido y de cuánta administración necesita, no de cómo se ve:

• Texto — un solo valor, sin formato.
• Texto enriquecido — contenido editorial que necesita formato y edición visual frecuente.
• HTML — estructura compleja que no necesita administrarse campo por campo.
• Lista — varios elementos repetibles con la misma estructura.
• Listas anidadas — elementos repetibles que contienen otros elementos repetibles.

El tipo HTML no debería ser tu primera opción para contenido que se administra seguido: ahorra trabajo hoy y lo cobra cada vez que alguien tenga que editarlo.

Qué pide el formulario

• Nombre del campo — lo que ve quien administra el contenido. Escríbelo en lenguaje humano: «Título del hero», no «h1_txt».
• Texto de ayuda — la instrucción que aparece bajo el campo. Es tu única oportunidad de explicar qué espera: «Ingresa la URL de la imagen del logo».
• Valor por defecto — lo que se usa si nadie llena el campo. Útil para textos que rara vez cambian.

Paso a paso

De la lista de diseños a un diseño listo para asignar a un dominio.

1. Abre la sección Diseños. Entra a Diseños desde el menú principal. Verás todos tus diseños —propios y compartidos— con buscador y paginación.

   Antes de crear uno desde cero, mira si alguno sirve como punto de partida: clonar un diseño existente suele ser más rápido que empezar en blanco.

2. Crea el diseño. Pulsa Crear diseño y completa el nombre (obligatorio) y, si quieres, la miniatura como URL de imagen. Al guardar, la aplicación te lleva directo al editor.

3. Reconoce el editor. Es donde ocurre todo el trabajo real. Tiene tres zonas:

   • Izquierda — el árbol: carpetas de Páginas y Bloques, la configuración del diseño y la plantilla base.
   • Centro — el editor de código de lo que tengas seleccionado, con vista previa en vivo.
   • Derecha — los parámetros del elemento activo.

   Los dos paneles laterales se pueden ocultar y redimensionar; en pantallas pequeñas se abren como cajones.

4. Revisa la configuración. Antes de crear contenido, abre el engranaje sobre el árbol y confirma nombre, URL de vista previa, miniatura y si quieres aplicar normalize CSS. Todo es editable después.

5. Define lo que es común a todo el sitio. Ve al nodo Avanzado → Base del árbol. Ahí van las piezas que comparten todas las páginas: tipografías, hojas de estilo, scripts de analítica, cabecera y pie.

   Aprovecha para crear aquí los parámetros de diseño —logo, menú, footer— antes de construir plantillas que los usen.

6. Crea tus plantillas. En la carpeta Páginas pulsa +. Dale nombre y elige el tipo (Normal o Especial). Se abre en el editor al crearse.

   Recuerda que ya tienes una plantilla Index creada automáticamente.

7. Crea tus bloques. En la carpeta Bloques pulsa +. Sólo pide el nombre. Después los incluyes y ordenas dentro de las plantillas que los necesiten.

8. Parametriza. Con una plantilla o bloque abierto, usa el panel derecho para declarar sus parámetros. Este es el paso que decide si tu diseño se puede administrar a escala o no: cada hueco que dejes sin parametrizar es un hueco que sólo se puede editar tocando código.

9. Previsualiza y guarda. Usa el botón de vista previa (el ojo) para ver la plantilla renderizada junto al código, con controles de viewport para revisar cómo responde en móvil y escritorio.

   Los cambios se guardan de forma explícita. Si intentas salir con cambios pendientes, aparece el aviso Cambios sin guardar con las opciones de guardar o descartar.

10. Comparte, si hace falta. Desde el menú de acciones del diseño puedes compartirlo con otras personas del equipo. Disponible según tu plan.

El editor: dónde va cada cosa

Tanto el diseño (en Avanzado → Base) como cada plantilla se editan a través de las mismas seis posiciones. Elegir la correcta es lo que evita duplicar código entre páginas.

CRITERIO. Si algo aparece en todas las páginas, va en Avanzado → Base. Si es exclusivo de un tipo de página, va en la plantilla. Duplicar en ambos lados es la causa más común de estilos que se pisan entre sí.

Convención de nombres

Los parámetros los nombra quien construye el diseño, pero los lee todo el equipo. Una convención consistente ahorra más tiempo del que parece.

Las reglas son tres:

• El identificador va en snake_case, en minúsculas y sin tildes.
• Lleva prefijo por zona cuando aplique: header_, footer_.
• El identificador es único dentro de su ámbito. Dos parámetros del mismo diseño no pueden llamarse igual.

Esta es la convención recomendada para los parámetros de diseño:

CUIDADO CON ESTO. El menú principal y el menú del pie son dos parámetros distintos y necesitan identificadores distintos: menu y footer_menu. Reutilizar el mismo identificador es un error silencioso, de los que sólo se notan cuando el pie de página muestra los enlaces del encabezado.

Qué sigue

Un diseño terminado no es todavía un sitio. Es la pieza que hace posibles todos los sitios que se construyan con él. La cadena completa es esta:

1. Diseño — plantillas, bloques y parámetros. Lo que acabas de construir.
2. Dominio — se le asigna un diseño. Define la identidad del sitio.
3. Proyecto — agrupa páginas que comparten una plantilla.
4. Página — llena los parámetros y genera HTML publicable.

El siguiente paso es asignar el diseño a un dominio. A partir de ahí, cada proyecto de ese dominio elige una de tus plantillas, y cada página llena los parámetros que definiste. Si parametrizaste bien, esas páginas se pueden crear y actualizar de a cientos desde la edición masiva, sin volver a abrir el editor de código.

LA PRUEBA DE FUEGO. Descarga el CSV de un bloque desde la edición masiva de un proyecto. Si las columnas que ves alcanzan para llenar la sección completa sin tocar el editor, tu diseño está bien parametrizado.

Guía de creación de diseños · Stronglify. Los nombres en negrilla corresponden a la interfaz en español de la aplicación.