De la hoja de cálculo a lo creativo: datos dinámicos en acción
Aria Morgan
16 may 2025
Prepara tu archivo CSV
Asegúrate de que tu archivo esté exportado como un archivo "CSV", también conocido como archivo de "Valores Separados por Comas". Si encuentras algún problema, querrás verificar que tu archivo esté codificado en UTF-8 y tenga menos de 5mb. Si tu archivo es más grande que eso, intenta eliminar columnas que no necesites. Ver más abajo para información adicional sobre campos específicos.
Consejo: No es necesario importar cada columna de tu CSV. Solo se importarán los campos configurados en tu colección CMS en el siguiente paso.
Campos de Texto Enriquecido
El contenido de texto formateado debe estar formateado como HTML. Se admiten muchas etiquetas, como párrafos y encabezados <p>,<h1>, <h2>), formateo (<em>, <i>, <strong>), enlaces (<a>), listas (<ol>, <ul>, <li>) e imágenes (<img>). Las imágenes desde URL se descargarán automáticamente de su fuente original e importarán a Framer.
Campos de Imagen
Las imágenes en el contenido de tu CSV deben ser URL a una imagen. Se descargarán e importarán a Framer. No se admiten rutas relativas.
Campos de Fecha
El formato recomendado es compatible con ISO8601, por ejemplo: 2023-12-17T14:42:00. También se admite el valor abreviado de año-mes-día, por ejemplo: 1982-12-01. Las cadenas de formato largo pueden funcionar, pero dependerán de tu navegador, por ejemplo: Tue May 12 2020 18:50:21 GMT-0500 (Hora de Verano Central). Todos los datos de tiempo, incluida la información sobre la zona horaria, se eliminarán de la fecha.
Campos de Color
Un color formateado como código RGB hexadecimal CSS, expresión rgb, hls o hlv, o un color nombrado. Todas las variantes con un valor alfa también son compatibles. Ejemplos: #00ffee, rgb(0, 153, 255), hsla(204, 100%, 50%, 0.5), azul, verde oscuro, rebeccapurple.
Campos de Alternancia
Un valor booleano. Y, sí, VERDADERO, 1 se interpretará como que la alternancia es "Sí", todos los demás valores serán "No".
Prepara tu Colección CMS
Aquí tienes una lista de verificación para preparar tu colección CMS para la importación.
Verifica que cada campo/columna en tu CSV tenga un campo correspondiente en tu colección CMS con el mismo nombre.
Incluye un campo único para cada elemento, a menudo llamado "Slug"
Verifica que tus tipos de datos coincidan (por ejemplo, un campo de Fecha de CMS para un campo de fecha en tus datos)
Consejo: Framer utiliza tu campo Slug para identificar cada elemento, y lo utilizará para actualizar ese elemento con importaciones repetidas.
Importa tu archivo CSV
Puedes encontrar la función de Importar yendo al CMS en tu proyecto y haciendo clic en "Importar" en la barra de herramientas. Desde allí, puedes seleccionar tu archivo CSV para la importación. También puedes arrastrar y soltar tu archivo CSV directamente en la interfaz de colección CMS.
Consejo: La importación admite acciones Deshacer / Rehacer. Si no estás satisfecho con la importación, simplemente puedes deshacer el cambio con CMD+Z en MacOS o CTRL + Z en Windows. Rehacer no volverá a ejecutar la importación, pero aplicará instantáneamente los cambios a la colección.
Actualización o Re-Importación
Para actualizar tu contenido, puedes importar nuevamente en la misma colección. Si algún elemento de la nueva importación tiene un campo slug que coincide con uno de los elementos de tu colección, podrás actualizarlo o omitir la importación nuevamente.