Tutorial Carrd. Aprende a utilizar la herramienta No Code

Escrito por Amparo Domingo
Tutorial Carrd. Aprende a utilizar la herramienta No Code

Contáctanos!

En este tutorial queremos ayudarte a que aprendas a utilizar más en profundidad la herramienta Carrd, para que puedas exprimir sus funcionalidades y crear tus sitios web de la manera más profesional. 

Si no conoces la herramienta todavía, te aconsejamos leer el artículo de “Carrd; La herramienta No Code para crear “One Pages” antes. 

Conceptos generales

El constructor está diseñado para ser sencillo y simple, y al mismo tiempo ha crecido para incluir algunas interesantes y útiles características de su interfaz básica se ha mantenido prácticamente sin cambios (de una manera buena :) Así es como se desglosa:

Canvas

Carrd gif 1

El aspecto más destacado de la interfaz es el Lienzo, y es donde no sólo verás una vista previa (mayormente en vivo) del sitio que estás construyendo, sino también lo que utilizarás para mover y organizar tus elementos, así como para acceder a dos elementos base que se encuentran en cada sitio Carrd:

Background o fondo. El fondo del sitio. Se puede configurar en un color sólido, un degradado, una imagen o incluso un video.

Página. Donde se encuentran todos los demás elementos del sitio. Se puede reposicionar y dar estilo de varias maneras.

Panel de propiedades

Carrd Image 1

Al hacer clic en un elemento, aparecerá un panel de propiedades con varias pestañas para manipular y cambiar sus diversas propiedades y configuraciones. El conjunto exacto de pestañas variará según el tipo de elemento con el que estés trabajando, pero la mayoría generalmente tendrá al menos lo siguiente:

  • La pestaña principal del elemento con propiedades específicas de su tipo (en este caso, un elemento de texto).
  • Una pestaña Apariencia con todas las propiedades relacionadas con la apariencia del elemento.
  • Una pestaña de Configuración con configuraciones avanzadas adicionales (requiere Pro Plus o superior).

Menú

Carrd Image 2

Y, por último, el menú es lo que utilizarás para realizar acciones en el sitio que estás creando. Aquí hay una descripción general de lo que hace todo:

  • Agregar nuevos elementos al sitio.
  • Deshacer la acción anterior.
  • Volver a realizar la siguiente acción.
  • Obtener una vista previa de las animaciones si se han agregado.
  • Cambiar a Vista móvil.
  • (Vista móvil) Cambiar a la vista ampliada.
  • (Vista móvil) Cambiar a la vista recortada.
  • (Vista móvil) Volver a la vista de escritorio.
  • Cambiar a la vista de sección.
  • (Vista de sección) Mostrar todas las secciones.
  • Publicar el sitio (y abrir tu panel de propiedades).
  • Mostrar acciones adicionales.

Conceptos Básicos

¿Eres nuevo en la construcción de un site con Carrd? Aquí hay un resumen rápido de algunas de las tareas de construcción más comunes:

Agregar un elemento

  1. Haz clic en Agregar elemento
  2. Haz clic en el tipo de elemento que deseas agregar (por ejemplo, agregar un nuevo elemento de texto). Esto agregará un nuevo elemento del tipo seleccionado al final del sitio y abrirá su panel de propiedades.
  3. Usando el panel, personaliza el nuevo elemento según sea necesario.
  4. (Opcional) Haz clic en Listo para cerrar el panel.

¡Listo! El nuevo elemento ahora debería agregarse al sitio.

Mover un elemento

  1. Haz clic y comienza a arrastrar el elemento que te gustaría mover.
  2. Arrastra el elemento antes o después de otro elemento (aparecerá una barra verde indicando a qué lado del elemento está apuntando actualmente).
  3. Suelta, haz clic para soltar el elemento.

¡Listo! El elemento ahora debería moverse.

Editar un elemento

  1. Haz clic en el elemento que deseas editar para abrir su panel de propiedades.
  2. Usando el panel, edita el elemento según sea necesario.
  3. (Opcional) Haz clic en Listo para cerrar el panel.

¡Listo! El elemento ahora debería editarse.

Eliminación de un elemento

  1. Haz clic en el elemento que deseas eliminar para abrir su panel de propiedades.
  2. En la parte inferior del panel, haz clic en Eliminar.

¡Listo! El elemento ahora debería eliminarse.

Clonación de un elemento

  1. Haz clic en el elemento que deseas clonar para abrir su panel de propiedades.
  2. En la parte inferior del panel, haz clic en Clonar.

¡Listo! Un clon del elemento debería aparecer inmediatamente antes.

Elemento de fondo (Background)

El background es simplemente el fondo que se encuentra detrás de todos los elementos de un sitio (incluido su elemento de página). Se puede diseñar para que muestre un color sólido, un degradado, una imagen o un video.

Establecer un color de fondo

  1. Selecciona el elemento Fondo del sitio.
  2. Selecciona el Estilo en Color.
  3. Utiliza el selector de color para establecer un color de fondo.
  4. (Opcional) Haz clic en Listo para cerrar el panel de propiedades.

¡Listo!

Establecer un degradado de fondo

  1. Selecciona el elemento Fondo del sitio.
  2. Selecciona Estilo en Degradado.
  3. Utiliza Stop # 1 y Stop # 2 para establecer los colores y posiciones del degradado.
  4. (Opcional) Utiliza Ángulo para ajustar el ángulo del degradado.
  5. (Opcional) Haz clic en Listo para cerrar el panel de propiedades.

¡Listo!

Configuración de una imagen de fondo

  1. Selecciona el elemento Fondo del sitio.
  2. Selecciona estilo en imagen.
  3. Haz clic en Cargar o Seleccionar de la biblioteca.
  4. Selecciona una imagen para usar como fondo.
  5. (Solo carga) Cambia el tamaño y recorta según sea necesario, luego haz clic en Aceptar
  6. Selecciona la posición en la esquina o lado de la imagen que debe tener prioridad en las pantallas de dispositivos móviles.
  7. (Opcional) Ajusta el tamaño y otras propiedades de fondo según sea necesario.
  8. (Opcional) Elige una superposición de color o degradado para mejorar la visibilidad de los elementos colocados en la imagen.
  9. (Opcional) Haz clic en Listo para cerrar el panel de propiedades.

¡Listo!

Configuración de un video de fondo

(requiere Pro Lite o superior)

  1. Selecciona el elemento Fondo del sitio.
  2. Selecciona Estilo en Video.
  3. Haz clic en Cargar
  4. Selecciona un video para usar como fondo (debe estar en formato H.264 MP4).
  5. Selecciona la posición en la esquina o en el lado del video que debe tener prioridad en las pantallas de los dispositivos móviles.
  6. (Opcional) Elige una superposición de color o degradado para mejorar la visibilidad de los elementos colocados en el video.
  7. (Opcional) Haz clic en Listo para cerrar el panel de propiedades.

¡Listo!

Configurar una presentación de diapositivas en segundo plano

(requiere Pro Lite o superior)

  1. Selecciona el elemento Fondo del sitio.
  2. Selecciona Estilo en Presentación de diapositivas.
  3. Haz clic en la primera diapositiva (etiquetada como "Sin título") para expandirla.
  4. Haz clic en Cargar.
  5. Selecciona una imagen para usar como fondo de la diapositiva.
  6. Cambia el tamaño y recorte según sea necesario, luego haz clic en Aceptar
  7. Selecciona la posición en la esquina o lado de la imagen que debe tener prioridad en las pantallas de dispositivos móviles.
  8. (Opcional) Elige una opción de Movimiento.
  9. Haz clic en Agregar para agregar imágenes adicionales, repitiendo los pasos del 3 al 8 para cada una.
  10. (Opcional) Haz clic en Listo para cerrar el panel de propiedades.

¡Listo!

¿Te está gustando el contenido? ¡Suscríbete a nuestro blog!

Elemento de página

El elemento de página es donde están todos los elementos de un sitio (con la excepción de su elemento de fondo). Es responsable del diseño general de un sitio y, como tal, se puede diseñar, colocar y configurar de varias maneras.

Aplicar estilo al elemento de página

  1. Selecciona el elemento de página del sitio.
  2. Selecciona Estilo en una de las siguientes opciones:

    1. Predeterminado: un área simple y transparente que se puede colocar en el centro, la esquina o el borde de la pantalla. Útil si estás creando un diseño simple o un diseño más avanzado utilizando principalmente elementos de contenedor.
    2. Cuadro: incluye los elementos del sitio en un cuadro sólido y elegante que se puede colocar en el centro, la esquina o el borde de la pantalla. Admite el modo de fondo amigable en pantallas móviles.
    3. Cuadro ancho: incluye los elementos del sitio en un cuadro sólido y elegante que ocupa el ancho de la página. Puede colocarse en la parte superior, central o inferior de la pantalla. Admite el modo de fondo amigable en pantallas móviles.
    4. Cuadro alto: incluye los elementos del sitio en un cuadro sólido y elegante que ocupa la altura de la página. Puede colocarse a la izquierda, al centro o a la derecha de la pantalla. Admite el modo amigable con el fondo en las pantallas de dispositivos móviles y, si se coloca a la izquierda o a la derecha de la pantalla, se puede configurar para que se superponga (o no) al fondo.

3. Selecciona la Posición del elemento.

4. (Solo recuadro, recuadro ancho, recuadro alto) Personaliza el fondo, el borde y otras configuraciones de apariencia del elemento.

5. (Opcional) Haz clic en Listo para cerrar el panel.

¡Listo!

Uso del modo amigable con el fondo

Cuando el elemento Página está configurado para usar un estilo de "cuadro" (Cuadro, Cuadro ancho o Cuadro alto), es muy probable que el fondo del sitio termine total o parcialmente oscurecido en las pantallas de dispositivos móviles, una situación que podría ser poco adecuada, si el fondo es algo importante (como, por ejemplo, una foto de una persona). Para solucionar este problema, puedes habilitar el modo amigable con el fondo para apilar automáticamente el elemento Página debajo del fondo en las pantallas de los dispositivos móviles. He aquí cómo:

  1. Selecciona el elemento Página del sitio.
  2. Desplázate hacia abajo hasta Móvil y cámbialo al modo Manual. Esto revelará opciones adicionales para controlar manualmente cómo aparece el elemento en las pantallas de los dispositivos móviles.
  3. Selecciona el Modo en Fondo amigable.
  4. (Opcional) Marca “Ocultar superposición de fondo” para ocultar la superposición del fondo en las pantallas de dispositivos móviles (si hay alguna configurada).
  5. (Opcional) Haz clic en Listo para cerrar el panel.

¡Listo!

Uso de la superposición de fondo

Cuando seleccionas un “cuadro alto” como elemento de la página, las siguientes opciones estarán disponibles para controlar cómo interactúa con el fondo del sitio:

Fondo superpuesto

Si está habilitado, el fondo llenará toda la pantalla y el elemento de la página simplemente lo superpondrá (oscureciéndolo parcialmente). Si está deshabilitado, el elemento no se superpondrá al fondo y, en su lugar, escalará este último para llenar el espacio restante en la pantalla.

Restringir ancho

Si está habilitado, el ancho del elemento Página se restringirá en pantallas más pequeñas y móviles para mostrar la mayor cantidad de fondo posible. Si está deshabilitado, el elemento Página simplemente usará su Ancho definido independientemente del tamaño de la pantalla.

Organización de elementos en columnas

Para organizar elementos en dos, tres o incluso cuatro columnas responsive, siga estos pasos:

  1. Haz clic en Agregar elemento
  2. Haz clic en Contenedor para crear un nuevo elemento.
  3. Selecciona Tipo en Columnas. Esto dividirá el contenedor en dos columnas de igual ancho.
  4. (Opcional) Ajusta el ancho de las columnas según sea necesario o agrega columnas adicionales (hasta cuatro). Ten en cuenta que el ancho mínimo permitido para una columna es del 25%.
  5. Arrastra y suelta elementos en cada columna.

¡Listo! Las columnas se adaptarán de manera responsive a las pantallas de los dispositivos móviles, pero si se necesita más control sobre cómo se adaptan, haz clic en la pestaña Apariencia, configura Móvil en Manual y luego ajusta las propiedades del dispositivo móvil según sea necesario.

El uso de Secciones

Las secciones permiten dividir un sitio en partes llamadas "secciones", que se pueden vincular y alternar para simular el efecto de tener varias páginas en un sitio de una sola página:

Gif 1

Las secciones también son lo suficientemente versátiles para usos más creativos más allá de la simple simulación de páginas; por ejemplo, la creación de menús de sitio a pantalla completa, la inserción de confirmaciones de estilo modular a los formularios, e incluso la construcción de presentaciones con botones de navegación que funcionan.

Creación de una sección

En el corazón del concepto de secciones está el salto de sección, un elemento de control especial que marca dónde comienza una sección, dónde termina y qué elementos deben pertenecer a ella. Así es como se usa:

  1. Haz clic en Agregar elemento
  2. Haz clic en Control para crear un nuevo elemento.
  3. Selecciona Tipo en Salto de sección.
  4. Dale un nombre breve y descriptivo compuesto solo de letras minúsculas, números y guiones (por ejemplo, trabajo). Esto identificará de manera única la sección y te permitirá vincularla (ver más abajo).
  5. Arrastra el salto de sección al lugar donde te gustaría dividir el sitio, suelta el clic para soltarlo y... eso es todo. Si bien los efectos no serán evidentes en el generador, esto es lo que sucede con la versión publicada del sitio:
    1. Crea una nueva sección con el nombre que acabas de configurar (por ejemplo, trabajo) que contiene todos los elementos después del salto de sección (hasta otro salto de sección, un marcador de pie de página o la parte inferior del sitio).
    2. Asigna todos los elementos antes del salto de sección (hasta otro salto de sección, un marcador de encabezado o la parte superior del sitio) a la sección anterior.
    3. ... y si no existe una sección anterior, crea automáticamente una con el nombre “home”.
  6. Víncula la sección con un botón, un vínculo o prácticamente cualquier otra cosa que tome una URL usando un hash # seguido del nombre de la sección (por ejemplo, #trabajo).
  7. (Opcional) Selecciona el elemento Página del sitio, haz clic en la pestaña Animación y luego selecciona un efecto de cambio de sección para utilizarlo cuando el sitio cambie de sección.

¡Listo! Al hacer clic en un enlace a la sección, se abrirá inmediatamente y revelará su contenido (y lo hará usando un efecto de cambio de sección si se seleccionó uno), y cada sección se puede vincular en profundidad simplemente agregando su nombre con el prefijo hash a la URL del sitio.

... ¡y eso es todo! Simplemente repite el proceso para crear más secciones u opcionalmente lleva el concepto un paso más allá y agrega un encabezado y un pie de página.

Agregar un encabezado

Al usar secciones, puede usar un marcador de encabezado para crear un encabezado, una región especial en la parte superior del sitio que permanece visible en cada sección. He aquí cómo:

  1. Haz clic en Agregar elemento
  2. Haz clic en Control para crear un nuevo elemento de Control.
  3. Selecciona el tipo “Marcador de encabezado”.
  4. Arrastra el marcador del encabezado hasta donde te gustaría que terminara, luego suelta el clic para soltarlo. Esto asigna todos los elementos antes del marcador de encabezado (hasta la parte superior del sitio) al encabezado del sitio.

Nota: El encabezado debe estar ubicado físicamente antes que todos los demás elementos del sitio.

¡Listo! Los elementos asignados al encabezado ahora deberían estar visibles en la parte superior de cada sección. Ten en cuenta que también puedes agregar un pie de página mediante un proceso similar.

Agregar un pie de página

Al usar secciones, puede usar un marcador de pie de página para crear un pie de página, una región especial en la parte inferior del sitio que permanece visible en cada sección. He aquí cómo:

  1. Haz clic en Agregar elemento
  2. Haz clic en Control para crear un nuevo elemento de Control.
  3. Selecciona Tipo en Marcador de pie de página.
  4. Arrastra el marcador de pie de página hasta donde le gustaría que comience, luego suelte el clic para soltarlo. Esto asigna todos los elementos después del marcador de pie de página (hasta la parte inferior del sitio) al pie de página del sitio.

Nota: El pie de página debe estar ubicado físicamente después de todos los demás elementos del sitio.

¡Listo! Los elementos asignados al pie de página ahora deberían estar visibles en la parte inferior de cada sección. Ten en cuenta que también puedes agregar un encabezado mediante un proceso similar.

Agregar vídeos

El elemento vídeo te permite cargar vídeos directamente o incrustarlos desde YouTube, Vimeo o Twitch. He aquí cómo:

Incrustar un vídeo

  1. Haz clic en Agregar elemento
  2. Haz clic en vídeo para crear un nuevo elemento de vídeo.
  3. Selecciona Tipo en Insertar.
  4. Pegue la URL del vídeo que deseas insertar. Actualmente admite URL en los siguientes formatos:
    1. YouTube https://www.youtube.com/watch?v=xxxxxx
    2. Vimeo https://vimeo.com/xxxxxx
    3. Twitch:
      1. https://www.twitch.tv/username
      2. https: // www.twitch.tv/vídeos/xxxxxx
      3. https://www.twitch.tv/username/clip/xxxxxx
  5. (Opcional) Alternar opciones de vídeo (como Bucle o Controles).

¡Listo!

Cargar un vídeo

(requiere Pro Lite o superior)

  1. Haz clic en Agregar elemento
  2. Haz clic en vídeo para crear un nuevo elemento de vídeo.
  3. Selecciona Tipo en Cargar.
  4. Selecciona un vídeo MP4 para cargar. El vídeo debe estar codificado en formato H.264.
  5. (Opcional) Alternar opciones de vídeo (como Bucle o Controles).

¡Listo!

Agregar audio

El elemento Audio te permite incrustar pistas de audio y reproductores de SoundCloud o Bandcamp. He aquí cómo:

  1. Haz clic en Agregar elemento
  2. Haz clic en Audio para crear un nuevo elemento de audio.
  3. Pegue la URL de la pista de audio, el conjunto o el álbum que desea incrustar. Actualmente admite URL en los siguientes formatos:
    1. SoundCloud:
      1. https://soundcloud.com/xxxxxx/yyyyyy
      2. https://soundcloud.com/xxxxxx/sets/yyyyyy
    2. Bandcamp:
      1. https://xxxxxx.bandcamp.com/track/yyyyyy
      2. https: / /xxxxxx.bandcamp.com/album/yyyyyyListo

¡Listo!

Uso de puntos de desplazamiento

Los puntos de desplazamiento son elementos de control especiales que crean puntos vinculables dentro de un sitio que se pueden vincular internamente (por ejemplo, para desplazar el navegador a un formulario de registro después de hacer clic en un botón de llamada a la acción), o externamente para vincular a un parte específica de un sitio. A continuación se explica cómo configurar uno:

  1. Haz clic en Agregar elemento
  2. Haz clic en Control para crear un nuevo elemento de Control.
  3. Selecciona Tipo en Punto de desplazamiento.
  4. Dale un nombre breve y descriptivo compuesto solo de letras minúsculas, números y guiones (por ejemplo, registro). Esto identificará de manera única el punto de desplazamiento y te permitirá vincularlo (ver más abajo).
  5. Arrastra el punto de desplazamiento hasta dónde te gustaría crear un punto enlazable, luego suelte el clic para soltarlo.

¡Listo! Ahora puedes enlazar directamente al punto de desplazamiento internamente usando su nombre con prefijo hash (por ejemplo, #signup) o externamente agregando su nombre con prefijo hash a la URL del sitio (por ejemplo, foo.carrd.co/#signup).

Agregar widgets

El elemento Widget le permite incrustar widgets prefabricados de una selección de servicios de terceros.

Agregar un botón de pago de Stripe

El widget de pago de Stripe te permite aceptar pagos con tarjeta de crédito a través de Stripe. A continuación, te indicamos cómo usarlo:

  1. Si aún no lo has hecho, crea una cuenta de Stripe.
  2. Inicia sesión en tu cuenta de Stripe y habilita el pago siguiendo estas instrucciones.
  3. De vuelta en Carrd, haz clic en Agregar elemento
  4. Haz clic en widget para crear un nuevo elemento de widget.
  5. Selecciona Tipo en “Stripe Checkout”.
  6. En Producto, selecciona un Tipo y agrega el ID de precio único que se utilizará (por ejemplo, price_xxxxxxxxxxxxxx).
  7. (Opcional) Cambia la etiqueta del botón y otras opciones.
  8. (Opcional) Añade una URL correcta, que puede ser cualquier URL válida o estar en blanco para usar la URL actual del sitio.
  9. Desplázate hacia abajo un poco y añade tus claves de API de Stripe, que se pueden encontrar usando estas instrucciones.

¡Listo!

Agregar un botón de compra de Gumroad

El widget de Gumroad permite agregar un botón de "Comprar" para un solo producto de Gumroad. He aquí cómo usarlo:

  1. Si aún no lo has hecho, crea una cuenta de Gumroad y agrega un producto.
  2. De vuelta en Carrd, haz clic en Agregar elemento
  3. Haz clic en widget para crear un nuevo elemento de widget.
  4. Selecciona Tipo en Gumroad.
  5. Añade la URL del producto Gumroad que deseas asociar con este botón (por ejemplo, https://gum.co/XXXXX), que se puede encontrar usando estas instrucciones.
  6. (Opcional) Cambia la etiqueta del botón y otras opciones.

¡Listo!

Agregar un botón "Me gusta" de Facebook

El widget de Facebook permite agregar un botón "Me gusta" de Facebook a un sitio. A continuación se explica cómo se usa:

  1. Haz clic en Agregar elemento
  2. Haz clic en Widget para crear un nuevo elemento Widget.
  3. Selecciona Tipo en Me gusta de Facebook.
  4. (Opcional) Añade la URL exacta que le gustaría asociar con este botón, o simplemente déjela en blanco para usar la URL actual del sitio.
  5. (Opcional) Cambia el diseño, la acción y otras opciones.

¡Listo!

Agregar un botón de PayPal

El widget de PayPal le permite agregar botones para aceptar pagos, donaciones y suscripciones a través de PayPal. A continuación, le indicamos cómo utilizarlo:

  1. Si aún no lo ha hecho, crea una cuenta de PayPal.
  2. De vuelta en Carrd, haz clic en Agregar elemento
  3. Haz clic en widget para crear un nuevo elemento de widget.
  4. Selecciona Tipo en PayPal.
  5. Elige la acción que deseas que realice este botón:
    1. Comprar: paga por un solo artículo.
    2. Carrito: agrega un solo artículo al carrito de PayPal del usuario.
    3. Donar: dona una cantidad fija.
    4. Suscribirse: se suscribe a una suscripción o servicio.
  6. Añade un Nombre, Importe y otros detalles de pago.
  7. (Opcional) Añade una URL de retorno, que puede ser cualquier URL válida o estar en blanco para usar la URL actual del sitio.
  8. Añade tu ID de comerciante de PayPal, que puedes encontrar usando estas instrucciones.

¡Listo!

Agregar un Typeform

El widget Typeform permite incrustar un typeform o simplemente agregar un botón para iniciar uno. A continuación, indicamos cómo usarlo:

  1. Si aún no lo ha hecho, crea una cuenta de Typeform y crea un typeform.
  2. De vuelta en Carrd, haz clic en Agregar elemento
  3. Haz clic en Widget para crear un nuevo elemento.
  4. Selecciona Tipo en Typeform.
  5. Selecciona la URL completa de tu typeform.
  6. (Opcional) Elige un estilo:
    1. Ventana emergente (clásica): muestra un botón que abre el tipo de formulario como una ventana emergente de pantalla completa.
    2. Ventana emergente (cajón): muestra un botón que abre el tipo de formulario como una ventana emergente deslizable.
    3. Incrustar: incrusta el tipo de formulario en un marco.
  7. (Opcional) Si usas un estilo emergente, cambia la etiqueta del botón.

¡Listo!

Incrustar código personalizado

requiere Pro Standard o superior

El elemento Incrustar permite insertar código HTML, CSS e incluso Javascript personalizado prácticamente en cualquier lugar de un sitio (incluido el <head>). Si necesitas agregar un widget de terceros que aún no es compatible con el elemento Widget, o si simplemente deseas incorporar funciones personalizadas más allá de las que ofrece Carrd actualmente, aquí mostramos cómo hacerlo:

  1. Haz clic en Agregar elemento
  2. Haz clic en Insertar para crear un nuevo elemento Insertar .
  3. Selecciona Tipo Código.
  4. Selecciona Code en el código personalizado que te gustaría insertar. Esto puede ser prácticamente cualquier cosa que normalmente pegarías en el HTML de un sitio, por lo que HTML estándar, etiquetas <style> que contienen reglas CSS personalizadas e incluso etiquetas <script> que contienen código Javascript son todas aceptables aquí.
  5. (Opcional) Selecciona en Etiqueta, algo que ayude a identificar esta inserción en particular (por ejemplo, Mi código de widget).
  6. Elige el estilo de la inserción:
    1. Inline: para insertar tu código exactamente donde aparece la inserción en el sitio (como cualquier otro elemento).
    2. Oculto: para insertar tu código en uno de los tres lugares específicos: Head para el elemento <head> del sitio, Body Top para justo después de la etiqueta <body>, o Body End para justo antes de la etiqueta </body>. Dado que esto publica efectivamente la incrustación fuera del flujo normal de elementos, no dudes en moverla a un lugar más conveniente (al final del sitio, por ejemplo).

¡Listo! Su código personalizado ahora debería estar visible en el sitio publicado. Ten en cuenta que el elemento incrustado no generará nada en el constructor, por lo que deberás publicar el sitio para verlo en acción.

Incrustación de IFRAMEs

(requiere Pro Standard o superior)

Además de incrustar código personalizado, el elemento Embed también permite crear responsive inline frames (IFRAMEs) para incrustar contenido de otros sitios. Aquí se explica cómo usarlo:

  1. Haz clic en Agregar elemento
  2. Haz clic en Insertar para crear un nuevo elemento.
  3. Selecciona Tipo IFRAME.
  4. Selecciona la URL completa del contenido que deseas incrustar.
  5. (Opcional) Ajusta el ancho y el alto según sea necesario.
  6. (Opcional) Elige cómo el IFRAME debe gestionar su relación de aspecto cuando se visualiza en pantallas móviles:
    1. Ignorar: ignora la relación de aspecto, lo que le da al IFRAME una altura fija mientras reduce su ancho para ajustarse a la pantalla cuando sea necesario.
    2. Estricto: mantiene la relación de aspecto, reduciendo proporcionalmente tanto el ancho como el alto del IFRAME para ajustarse a la pantalla cuando sea necesario.
    3. Flexible: mantiene la relación de aspecto, reduciendo proporcionalmente la anchura y altura del IFRAME para adaptarse a la pantalla cuando sea necesario, pero con un poco de holgura en la altura, para mejorar la experiencia de visualización en pantallas móviles.

¡Listo! Tu IFRAME ahora debería estar visible en el sitio publicado. Ten en cuenta que el elemento incrustado no generará nada en el constructor, por lo que deberás publicar el sitio para verlo en acción.

Optimización de elementos para dispositivos móviles

De forma predeterminada, Carrd optimizará automáticamente la apariencia de un elemento para su visualización en pantallas de dispositivos móviles. Si bien esto suele ser suficiente, si prefieres tener un poco más de control sobre la apariencia móvil de un elemento, puedes hacer lo siguiente:

  1. (Opcional) Cambia el constructor a Vista móvil.
  2. Haz clic en el elemento que te gustaría cambiar.
  3. Haz clic en Apariencia.
  4. Desplázate hasta la parte inferior del panel y localiza el botón de alternancia Móvil.
  5. Cambia el botón a Manual. Esto cambiará el modo de manejo de la apariencia móvil del elemento al modo manual y revelará las configuraciones adicionales sólo para móviles que ahora puedes ajustar. Recuerda que cualquier ajuste con un valor de Auto permitirá a Carrd optimizar automáticamente sólo esos ajustes, lo cual es útil si estás contento con el aspecto de un elemento optimizado automáticamente en móvil pero te gustaría ajustar, por ejemplo, sólo sus márgenes.

¡Listo! Para volver a la optimización completamente automática, cambia el botón móvil del elemento a Auto.

Uso de estilos de elementos

Normalmente, la apariencia de cada elemento debe cambiarse individualmente e independientemente de otros elementos. Si bien esto generalmente funciona bastante bien, hay ocasiones en las que esto puede volverse bastante tedioso (por ejemplo, hacer el mismo cambio menor en una docena de elementos idénticos). Los estilos de elementos solucionan esto al permitir que varios elementos se vinculen a una sola apariencia compartida (un estilo) que, cuando se cambia, también cambiará la apariencia de todos los elementos vinculados a ese estilo en particular.

Crear un estilo

  1. Haz clic en el elemento que te gustaría usar como base para un estilo.
  2. Haz clic en Apariencia
  3. Haz clic en el menú desplegable de estilo en la esquina superior derecha del panel de propiedades.
  4. Haz clic en Agregar estilo. Esto creará un nuevo estilo basado en la apariencia de este elemento (y automáticamente vinculará el elemento a él).
  5. (Opcional) Haz clic en el icono Editar del nuevo estilo para cambiarle el nombre.

¡Listo! Se ha creado un nuevo estilo al que ahora se pueden vincular otros elementos de este tipo.

Vinculación de un elemento a un estilo

  1. Haz clic en el elemento que deseas vincular a un estilo.
  2. Haz clic en Apariencia
  3. Haz clic en el menú desplegable de estilo en la esquina superior derecha del panel de propiedades.
  4. Selecciona el estilo que le gustaría usar.

¡Listo! Este elemento ahora estará vinculado al estilo seleccionado. Al hacer cambios en la apariencia de este o cualquier otro elemento vinculado a este estilo, esos cambios se aplicarán a todos los elementos vinculados a este estilo.

Cambio de nombre de un estilo

  1. Haz clic en un elemento del tipo del estilo.
  2. Haz clic en Apariencia
  3. Haz clic en el menú desplegable de estilo en la esquina superior derecha del panel de propiedades.
  4. Haz clic en el icono Editar del estilo e Añade un nuevo nombre.

¡Listo!

Eliminación de un estilo

  1. Haz clic en un elemento del tipo de estilo.
  2. Haz clic en Apariencia
  3. Haz clic en el menú desplegable de estilo en la esquina superior derecha del panel de propiedades.
  4. Haz clic en el icono Eliminar del estilo.

¡Listo! El estilo ahora está eliminado. Todos los elementos que anteriormente estaban vinculados a él conservarán su configuración de apariencia actual, pero ahora se pueden cambiar de forma independiente (o vincularlos a un estilo diferente).

El uso de la configuración avanzada

(requiere Pro Plus o superior)

Para casos de uso más avanzados de Carrd, la función de configuración avanzada proporciona acceso a las siguientes configuraciones adicionales para cada elemento:

  • Asignar Elementos fijos de ID en lugar de ID generados automáticamente
  • Establecer atributos HTML
  • Asignar clases personalizadas
  • Aplicar Propiedades CSS personalizados a elementos y, cuando corresponda, subcomponentes de elementos.
  • Activar código JS personalizado cuando ocurren ciertos eventos (donde sea compatible; ver más abajo para obtener más información)

Para acceder a estas configuraciones, selecciona un elemento, luego haz clic en su pestaña Configuración.

Eventos

Algunos tipos de elementos admiten la capacidad de activar código JS personalizado cuando ocurren ciertos eventos. Esto se puede usar para agregar todo tipo de funcionalidad extendida que aún no está disponible de forma nativa dentro de Carrd; por ejemplo, activar una llamada gtag () de Google Analytics para rastrear el envío de un formulario, o activar una llamada API de un tercero al hacer clic en un botón.

Para acceder a los eventos de un elemento, selecciona un elemento, haz clic en su pestaña Configuración y luego haz clic en Eventos. Actualmente, los eventos se admiten en los siguientes tipos de elementos:

  • Formulario:
    • Al enviar: se activa cuando se envía el formulario.
    • En caso de éxito: se activa cuando se envía el formulario y resulta en éxito.
    • En caso de error: se activa cuando se envía el formulario y da como resultado un error.
  • Control:
    • Al abrir (saltos de sección): se activa cuando se abre la sección.
    • Al cerrar (saltos de sección): se activa cuando la sección está cerrada.
  • Iconos:
    • Al hacer clic (por icono): se activa cuando se hace clic en un icono.
  • Botones:
    • Al hacer clic (por botón): se activa cuando se hace clic en un botón.
  • Enlaces:
    • Al hacer clic (por enlace): se activa cuando se hace clic en un enlace.

Uso de la vista móvil

Para previsualizar rápidamente el aspecto de un sitio en las pantallas móviles, al hacer clic en Cambiar a vista móvil en el menú, el canvas del constructor cambiará a una vista móvil simulada:

Carrd Image 4

Una vez activado, si se hace clic en el menú "Cambiar a vista ampliada" , el canvas se desajustará y se ampliará para ocupar la altura de la ventana del navegador:

Carrd Image 5

La vista móvil conserva toda la funcionalidad habitual del constructor para que puedas continuar trabajando en el sitio mientras este modo está activo. Sin embargo, ten en cuenta que, a menos que estés cambiando explícitamente la configuración de apariencia solo para dispositivos móviles de un elemento, los cambios también afectarán a su apariencia en la vista de escritorio. Para salir de la vista móvil, haz clic en “Cambiar a vista de escritorio” en el menú.

Uso de la vista de sección

Si estás trabajando en un sitio que utiliza secciones, puedes usar la vista de sección del constructor para navegar rápidamente por todas las secciones dentro de ese sitio en particular. A continuación se explica cómo activarlo:

Desde el menú

  1. Haz clic en “Cambiar a vista de sección” en el menú. Ten en cuenta que si este elemento no aparece en el menú, significa que el sitio no utiliza secciones, o que sus elementos de control no están configurados correctamente.
  2. Haz clic en la sección que quieras mostrar en la vista de sección.

¡Listo! La sección seleccionada debería ser ahora la única visible. Para salir de la vista de sección, haz clic en “Salir de la vista de sección” en el menú.

Desde el Panel de propiedades

  1. Haz clic en el elemento de control de la sección que te gustaría mostrar en la vista de sección.
  2. Haz clic en Mostrar en la vista de sección. Ten en cuenta que si este botón está desactivado, es probable que los elementos de control del sitio no estén configurados correctamente.

¡Listo! La sección seleccionada ahora debería ser la única visible. Para salir de la vista de sección, Haz clic en “Salir de la vista de sección” en el menú.

Solución de problemas

Es posible que te encuentres con algunos problemas, los mas frecuentes son los si

Recibo un mensaje de "Publicación fallida" cuando intento publicar mi sitio.

Este es un mensaje de error general que indica que algo sobre el sitio o el navegador impide que el constructor publique. Algunas causas conocidas de esto:

  • Estás usando el autocompletar para completar el título, la descripción o la URL del sitio (haciendo que los campos se vuelven amarillos). Se sabe que esto interfiere con la publicación en al menos algunos navegadores, así que intenta completarlos a mano.
  • Estás cargando archivos SVG guardados directamente desde una aplicación como Inkscape o Sketch. Los SVG guardados de esta manera pueden terminar en un formato que Carrd no puede entender, así que asegúrate de guardarlos explícitamente para usarlos en la web. En Inkscape, por ejemplo, esto se puede lograr simplemente seleccionando "SVG optimizado" como formato de salida.
  • Estás subiendo GIF animados generados por Ezgif. Se sabe que ocasionalmente tienen problemas con Carrd, por lo que si estás utilizando GIF generados por este servicio, intenta cambiarlos por otra cosa.
  • Estás subiendo imágenes o vídeos que has añadido al sitio, pero que has eliminado localmente. Esto puede causar problemas con imágenes y vídeos más grandes, así que evita eliminarlos hasta que hayas publicado el sitio.
  • Estás subiendo vídeos que tienen extensiones de archivo .MP4, pero que no están codificados en H.264. Actualmente, Carrd solo acepta cargas de vídeo codificadas en H.264.
  • Estás copiando y pegando texto de otra aplicación. Si bien esto generalmente funciona bien, algunas aplicaciones incluyen caracteres ocultos o no válidos que Carrd se negará a procesar. Si sospechas que este es el problema que estás experimentando, intenta ingresar el texto a mano o copiarlo en otra aplicación primero (por ejemplo, un editor de texto) antes de copiarlo al constructor.
  • De alguna manera te has desconectado de tu cuenta, en cuyo caso simplemente abre otra pestaña para confirmar que todavía estás conectado y, si no lo estás, vuelve a iniciar sesión.

... pero si ninguno de estos casos se aplica y sigues recibiendo este mensaje, ponte en contacto.

Recibo un mensaje de "Elementos no configurados" cuando intento publicar mi sitio.

Esto generalmente significa que tienes uno o más elementos esperando que se les asigne una imagen o un vídeo (por ejemplo, un elemento de la Galería con imágenes sin asignar o un elemento Contenedor que espera una imagen de fondo). Al hacer clic en Ir al elemento, saltará al primero de estos elementos infractores y delimitará el resto en rojo para que puedas identificarlos y corregirlos.

Mis cambios no se muestran en mi sitio publicado

Es probable que solo vea una copia del sitio almacenada en caché local (más antigua), en cuyo caso simplemente haz una actualización completa en tu sitio publicado (Ctrl + Shift + R en Windows, Cmd + Shift + R en macOS) o borrar la caché de tu navegador debería mostrar sus cambios.

Mi sitio se atasca al cargar antes de que alcance el 100%

Por lo general, indica que hay un problema con una de tus imágenes. Ponte en contacto y lo solucionaremos.

Mi sitio tarda una eternidad en cargarse en el constructor.

Si el sitio tiene muchos elementos, probablemente esta sea la razón por la que tarda un poco en cargarse. Desafortunadamente, esto también significa que no hay una "solución", pero siempre estamos optimizando el rendimiento del constructor, por lo que con el tiempo esto debería, al menos, mejorar. Dicho esto, si el sitio no tiene tantos elementos y esto todavía está sucediendo, ponte en contacto con nosotros.

El constructor se ve extraño o roto cuando se carga.

Por lo general, sucede cuando tu navegador tiene extensiones instaladas que cambian o bloquean cosas en una página. Para confirmar si este es el caso, abre el constructor en una ventana privada o de incógnito y comprueba si funciona. Si es así, agregar carrd.co a la (s) lista (s) blanca (s) de extensión, debería solucionar el problema de forma permanente. Si no es así, pruébalo en otro navegador y si aún no funciona allí, ponte en contacto.

El constructor ocasionalmente falla cuando intento usarlo en mi teléfono.

La experiencia del constructor móvil todavía es algo beta, así que recomendamos usar el constructor en el escritorio para obtener la mejor experiencia (cuando sea posible).

Hice algunos cambios en mi sitio, pero ahora la versión publicada aparece en blanco.

Si has agregado un código personalizado mediante un Embed o un evento, asegúrate de que el código sea Javascript 100% válido, ya que incluso un simple error de sintaxis romperá el sitio y evitará que se cargue. Por lo general, puedes confirmar que un error de código es el culpable abriendo la consola de tu navegador (Ctrl + Shift + J en Windows, Cmd + Shift + J en macOS) y volviendo a cargar el sitio.

No puedo hacer clic en los elementos de mi fondo o página.

Esto puede suceder si estás utilizando elementos que cubren todo el fondo o la página. En cualquier caso, siempre puedes acceder a cualquiera de los elementos haciendo clic en Menú y luego en Fondo o Página.

Mi sitio usa saltos de sección, pero la versión publicada muestra todas mis secciones al mismo tiempo.

Esto generalmente significa que hay un problema con la configuración del salto de sección. Algunas cosas comunes para verificar:

  • Tienes un marcador de encabezado después de un salto de sección o tienes más de un marcador de encabezado. Los elementos que componen tu encabezado deben colocarse antes que cualquier otra sección, y cada sitio solo puede tener un solo encabezado definido.
  • Tienes un marcador de pie de página antes de un salto de sección o tienes más de un marcador de pie de página. Los elementos que componen tu pie de página deben colocarse después de cualquier otra sección, y cada sitio solo puede tener definido un pie de página.

Mis vídeos no se reproducen automáticamente a pesar de que marqué "Reproducción automática"

En determinadas situaciones, un navegador puede simplemente rechazar la reproducción automática de un vídeo a pesar de que esté configurado para hacerlo. Algunas razones conocidas para esto:

  • El vídeo tiene una pista de audio. Silenciar el vídeo debería solucionar este problema, pero si todavía se niega a reproducirse automáticamente o si el vídeo se está utilizando como fondo del sitio (en cuyo caso está silenciado de forma predeterminada), intenta eliminar la pista de audio del vídeo en su totalidad.
  • El navegador está en un dispositivo en modo de bajo consumo de energía, ahorro de batería o ancho de banda bajo.
  • El navegador tiene instalada una extensión de bloqueo que bloquea explícitamente los medios de reproducción automática.

Si necesitas más información sobre Carrd, puedes leer nuestros artículos:

Carrd. La herramienta No Code para crear “One Pages”

Carrd(II). Qué debes tener en cuenta al crear tu web con Carrd

Contáctanos!

¡Cuéntanos que opinas sobre este post!

Gracias por enviar tu comentario. Será revisado por los administradores antes de ser publicado.

    ¡Mantente al día de las novedades y suscríbete a nuestra newsletter!

    ¡Suscríbete!