Crear web con Carrd – Tutorial paso a paso

El objetivo de este post, es enseñarte a crear una web con Carrd paso a paso. Veremos una introducción sobre qué es Carrd, como crear y publicar tu web en Carrd, y un ejemplo para añadir un formulario de contacto que nos enviará un correo cada vez que se rellene.

¿Qué es Carrd?

Si has llegado hasta aquí, imagino que ya has leído o escuchado acerca de Carrd. La herramienta No Code que nos permite crear webs en cuestión de minutos sin programar ni una sola línea de código.

Aun así, por si sigues con alguna duda o bien aún no has leído acerca de la herramienta, te dejo un post donde hablo sobre ¿Qué es Carrd?

Crear tu web con Carrd

A continuación, vamos a ir viendo los pasos necesarios para crear tu web con Carrd. El resultado final del tutorial puedes verlo en https://nocodespain.carrd.co/

Registro en Carrd

Como es de esperar, para poder utilizar la herramienta lo primero que debemos hacer (Si no la tenemos), es crear una cuenta de Carrd

Nada más entrar en la web, nos aparecerá la página de inicio, donde nos ofrecerá la opción de iniciar sesión o elegir un punto de partida. 

Página de inicio de Carrd con botones de iniciar sesión o elegir plantilla
Página de inicio de Carrd

¿Y dónde está la opción de crear una cuenta?

Pulsaremos en el botón de Log in y seremos redirigidos a la ventana de inicio de sesión, donde ahora ya sí nos dará la opción de crear una cuenta a través del botón “Sign Up”.

Imagen del formulario de inicio de sesión en Carrd
Formulario de login de Carrd

Tras pulsar el botón, nos llevará al formulario de creación de cuenta donde tendremos que rellenar los siguientes elementos:

  • Nombre: Nombre que quieres mostrar en tu cuenta de usuario. 
  • Email: Dirección de correo con el que iniciarás sesión cuando entres a Carrd. Es importante indicar una dirección válida ya que nos enviarán un correo de verificación.
  • Contraseña: Clave de acceso a la plataforma.
  • Confirmar contraseña: Escribir de nuevo la contraseña
  • Checkbox de Aceptar términos y condiciones.
Formulario de registro de usuario en Carrd
Formulario de registro de Carrd

Una vez hayamos rellenado el formulario y aceptado los términos se activará el botón de registro y podremos proceder a darnos de alta como usuario.

Posiblemente, nos lance un popup de verificación como el que se muestra a continuaci

captcha de verificación de Carrd cuando creas una cuenta de usuario
Verificación de registro de Carrd

Verificación de cuenta de usuario

En cuanto termine el registro, seremos redirigidos a nuestro Dashboard y nos mostrará un mensaje donde se indica que se requiere la activación de nuestra cuenta.

Mensaje de verificación de cuenta pendiente en el dashboard de Carrd.
Mensaje de verificación pendiente en el Dashboard

Para la verificación de la cuenta pulsaremos el botón de “Send Verification Email” y automáticamente cambiará el mensaje indicando que el correo ha sido enviado a la cuenta de dirección de correo que hemos indicado en el proceso de registro

Mensaje de correo de verificación de usuario enviado a la dirección indicada.
Mensaje de email enviado para la verificación en el Dashboard

En ese momento, iremos a nuestra bandeja de entrada y habremos recibido un correo de Carrd con el asunto “Verify your Carrd account” con un enlace sobre el que tendremos que hacer click y en ese momento quedará nuestra cuenta activada.

Plantilla de correo electrónico recibido con enlace para activación de nuestra cuenta de usuario en Carrd.
Ejemplo de correo de verificación de cuenta de usuario Carrd

Importante: Asegúrate que el navegador que se abrirá al hacer click en el enlace sea el mismo que en el que tienes la sesión iniciada, en caso contrario nos dará el siguiente error. Si acaso no se abre con el mismo navegador, copia y pega de manera manual.

Error recibido en Carrd cuando se abre un navegador con el que no tenemos sesión iniciada
Mensaje de error de Carrd cuando se abre enlace en navegador distinto.

Cuando hayamos hecho click en el enlace, seremos redirigidos a la página de verificación donde ahora sí veremos un botón de “Verificar”.

Vista del botón de verificación de cuenta en el dashboard de Carrd
Ventana con botón de verificación de cuenta tras acceder con el enlace recibido

Si todo ha ido correctamente, nos mostrará un mensaje de éxito y tendremos nuestra cuenta verificada.

Mensaje de verificación de cuenta realizado con éxito
Mensaje de verificación completada

Crear tu primer sitio Carrd

Para crear nuestra primera web, tendremos que pulsar el botón “+ New site” que encontraremos en la esquina superior derecha.

Imagen del panel superior del Dashboard de Carrd
Imagen del panel superior del Dashboard de Carrd

Automáticamente seremos redirigidos a una página que nos ofrecerá la posibilidad de elegir un punto de partida rápido haciendo uso de una plantilla existente.

Listado de las plantillas disponibles para Carrd
Listado de las plantillas disponibles para Carrd

Nota: También puedes crear un sitio en blanco haciendo click en el cuadrado de la esquina superior derecha.

Botón para crear un nuevo sitio en blanco en Carrd
Botón para crear un nuevo sitio en blanco en Carrd

Selección de plantilla

Para no hacer más largo este tutorial, es el momento de elegir una plantilla, por lo cual voy a ir directamente a la pestaña de profile donde seleccionaremos una plantilla gratuita.

Listado de plantillas disponibles de tipo Profile en Carrd
Selección de plantilla de tipo Profile en Carrd

Primeros pasos

Una vez seleccionada la plantilla, se cargará el contenido (Las imágenes no se cargan por defecto) y nos mostrará una guía rápida del control de mandos que permitirá crear nuestra web con Carrd.

Vista de ayuda para el panel de control Carrd en la creación del sitio
Vista de ayuda para el panel de control Carrd en la creación del sitio

Nota: Si no te salta el pop up con las instrucciones, puedes visualizarlas facilmente pulsando en el botón de menú y opción “Instructions”

Atajo para volver a ver las instrucciones de uso a través del menú principal.
Atajo para volver a ver las instrucciones de uso a través del menú principal.

Cambio de contenido

Para no alargar este tutorial, vamos a ver el proceso básico para sustituir el contenido de los elementos. 

Ten en cuenta que depende de la creatividad de cada persona hacer más o menos cambios sobre una plantilla. En nuestro caso, vamos a cambiar la imagen de la web y los textos principales.

Si queremos sustituir una imagen, clicamos sobre el elemento y automáticamente nos saldrá la opción de subir una imagen y añadir los atributos “Alt” y un enlace si queremos.

Ejemplo de cambio de imagen en una plantilla Carrd
Ejemplo de cambio de imagen en una plantilla Carrd

Para el texto, haremos clic sobre los elementos que queramos y nos saldrá el panel lateral para modificar el contenido

Ejemplo de edición de un título de página en Carrd
Ejemplo de edición de un título de página en Carrd

Después de realizar los cambios, ya tenemos nuestra web.

Ejemplo de resultado final de web en Carrd
Ejemplo de resultado final de web en Carrd

Crear formulario de contacto con Carrd

Vale! Tenemos la web, pero ¿Qué aporta una web tan sencilla?.

Normalmente, cuando montamos una web de contacto, landing o cualquier finalidad, queremos dar la posibilidad al visitante de ponerse en contacto con nosotros, ¿no?.

Carrd nos permite crear formularios y nos da dos plantillas predefinidas:

  • Formulario de contacto: Crea un formulario con los campos básicos, es decir, nombre, email y mensaje.
  • Formulario de suscripción: Si estamos empezando con un negocio o queremos validar una idea podemos recoger información y crear nuestra audiencia.

Importante: La creación de formularios está disponible para los usuarios de pago.

Una vez dicho esto, vamos a instanciar un formulario, y para ello, iremos al panel de control y pulsaremos sobre el icono “+” donde se desplegarán todos los elementos y seleccionaremos “Form”

Listado de componentes disponibles para añadir a una web de Carrd
Listado de componentes disponibles para añadir a una web de Carrd
Visualización de un formulario de contacto creado en Carrd
Visualización de un formulario de contacto creado en Carrd

Automáticamente, nos creará un formulario con los campos básicos de un formulario donde como puedes observar nos selecciona que sea de tipo “Contacto”.

Configurar receptor formulario en Carrd

Si el usuario va a poder enviar formularios, ¿Dónde se van a enviar? ¿Quién o cómo lo voy a recibir?

Carrd nos permite configurar un buzón para recibir un correo, para ello, seleccionando el formulario iremos a la sección “Recipient Email” donde podremos añadir un destinatario a cada envío.

Configuración de receptor de formularios enviados desde la web
Configuración de receptor de formularios enviados desde la web

Publicar sitio web con Carrd

Ya tenemos nuestra web lista, ahora solo necesitamos hacerla visible para el mundo, por lo que vamos a publicar nuestra web.

Para ello, tendremos que ir al menú de control de mandos y pulsar sobre el icono de guardar.

Como no existe aún el proyecto, nos pedirá que definamos los siguientes campos:

  • Título: Permitirá identificar nuestro proyecto en el dashboard, y además se utilizará para mostrar el nombre en la pestaña del navegador
  • Descripción: Permitirá añadir una descripción de nuestro sitio. 
  • Dominio: Tendremos que elegir cuál es el nombre del dominio que con el que accederemos a la web. A este dominio le seguirá el sufijo “.carrd.co” ya que estamos publicando en su hosting, y además tendrá que ser único.

Una vez lo tenemos, pulsaremos la opción “Publish” y nuestra web estará creada.

Configuración de titulo, descripción y dominio para publicación de web Carrd
Configuración de titulo, descripción y dominio para publicación de web Carrd
Mensaje de confirmación de sitio publicado en Carrd
Mensaje de confirmación de sitio publicado en Carrd

Si todo ha ido correctamente, nos mostrará un pop up como se muestra en la imagen anterior, por lo que pulsaremos en la opción “View Site” para ver la web.

Visualización final de web creada con Carrd
Visualización final de web creada con Carrd

Recibir formulario Carrd en Gmail

Por último, vamos a hacer una prueba del funcionamiento del formulario de contacto que hemos enlazado a la cuenta de Gmail.

Accedemos a la web de nuevo, y rellenamos todos los campos.

Ejemplo de campos rellenos en un formulario de Carrd para recepción de email
Ejemplo de campos rellenos en un formulario de Carrd para recepción de email

Si todo ha ido correctamente, nos mostrará un mensaje en formato de pop up (Que se podrá configurar) y recibiremos un email.

Mensaje de confirmación de formulario enviado correctamente
Mensaje de confirmación de formulario enviado correctamente
Notificación de correo electrónico recibida con la información de los campos rellenados en un formulario de Carrd
Notificación de correo electrónico recibida con la información de los campos rellenados en un formulario de Carrd

Publicar Carrd en un dominio propio

El siguiente paso para terminar de dar forma a nuestra web con Carrd, sería publicar nuestra web a un dominio personalizado y así eliminar de la URL el sufijo «.carrd.co».

Para ello, he creado un tutorial paso a paso que te indica como conectar Carrd con un dominio custom.

Conclusiones

Como puedes ver, en este tutorial hemos aprendido como crear una web con Carrd en cuestión de minutos haciendo uso de herramientas no code y totalmente gratis.

En próximos post, explicaré como integrar un formulario con MailChimp para crear una audiencia con la que validar un producto o hacer email marketing.

Espero que te sirva para poder lanzar tu negocio o idea. Si te ha gustado, deja un comentario o comparte este post en tus redes.

14 comentarios en «Crear web con Carrd – Tutorial paso a paso»

  1. Pingback: Crear ecommerce no code con Carrd - NoCodeSpain
  2. Buenas tardes:
    Buen post. Conciso y claro.
    Sólo me queda por aclarar una cosa: el tema de los textos legales. ¿Cómo se diseñan, tanto el banner de cookies, textos legales, etc?
    Saludos

    Responder
    • Hola Vicente,

      Muchísimas gracias por tu comentario. Respecto a tu pregunta, existen productos de terceros que te permiten configurar las cookies de un sitio web, e integrarlo dentro de tu servidor a través de un script, pero el servicio es de pago.

      El proceso sería:
      1. Registrarse en la plataforma (Como plausible.io)
      2. Obtener el script que te genera
      3. Utilizar el elemento «embed» de Carrd para que se cargue dicho javascript.

      Espero que te haya servido, yo tomaré tu pregunta como referencia para crear un post más detallado.

      Un saludo!!

      Responder
      • Hola Juma, muchas gracias por el aporte.

        Sabes si existe alguno de estos servicios pero gratuito?

        Sería una lástima pagar tan solo 19$ al año por la cuenta de Carrd y luego tener que pagar una suma mayor para algo tan trivial como los avisos legales y la privacidad

        Un saludo

        Responder
        • Hola Santiago,

          Desconozco si existe alguno gratuito. Quizás sería interesante que el propio Carrd lo añadiese como una configuración. Aunque fuese en el plan de pago.

          Gracias por el comentario!

          Responder
  3. buenas , gracias por el post.
    para añadir un sistema de analítica concreto, tengo que modificar los atributos html o css o javascript. En carrd puedo añadir fragmentos de código con el elemento correspondiente, pero no veo cómo puedo acceder al html para modificar esos botones. mi versi9n es la pro plus

    Responder
    • Hola Dani,

      No entiendo muy bien tu necesidad. En Carrd puedes añadir un elemento «embed»y añadir ese código en formato HTML que normalmente será un fragmento de script.

      Si lo que quieres hacer es modificar los atributos de cada elemento, tendrías que hacerlo a través de la pestaña «Settings» que encontrarás en el menú izquierdo tras pulsar sobre un elemento. Ahí podrás añadir id’s, clases y hasta eventos para manipular la herramienta de analítica.

      Espero que te sirva la respuesta, si no era lo que esperabas, házmelo saber e intentamos buscar una solución juntos.

      Un saludo, y muchas gracias!!

      Responder

Deja un comentario

RSS
LinkedIn
Share