Introducción a Carrd

Darse de alta en Carrd

Vamos a empezar un nuevo curso de la herramienta Carrd. Para quien no lo conozca se puede preguntar.

¿Pero qué es Carrd?

Carrd es una herramienta que nos permite hacer webs de una sola página.

Estas páginas son ideales para proyectos como:

  • Landing Page.
  • Cartas de presentación.

Para acceder a Carrd lo haremos desde aquí:

Home Carrd

En esta primera página podemos ver que hay dos opciones:

Si elegimos la opción Choose a Starting Point:

Nos encontraremos ante un montón de demos que podemos usar. Algunas de ellas son gratis, y otras (en las que pone pro) tendrás que ser miembro pro para poder usarlas.

Si observamos, sobre cada una de las plantillas hay una opción demo, que nos permitirá ver como quedan.

Un ejemplo sería la siguiente:

A la vista está que Carrd nos permite realizar trabajos profesionales a la vez de trabajar de forma sencilla.

Podemos utilizar Carrd de dos formas, una completamente gratis, y otra versión pro.

La versión pro nos permitirá hacer cosas más avanzadas, así como utilizar nuestro propio dominio. Sin embargo, si usamos la cuenta gratuita nuestro dominio será un subdominio de la cuenta carrd.com, es decir, si nuestra página se llamara página de prueba la dirección sería paginadeprueba.carrd.com

Nosotros recomendamos que aquellos que quieran trabajar de una manera profesional lo hagan a través de su versión pro. El enlace es el siguiente.

Y sin mas dilación vamos a empezar a usar nuestra herramienta.

Para ello accedemos a través del botón Log in de la siguiente pantalla:

Nos logueamos.

Login carrd

Y como podéis observar, una vez que estamos dentro aparece el lienzo sobre el que vamos a trabajar.

Hago click en New Site

new site carrd

Me permite empezar con alguna de las plantillas ya predefinidas.

Podemos verlas todas, o podemos elegir la opción profile (interesante si lo que buscamos es tener presencia en internet), o landing (si queremos hacer una landing page) etc. a continuación podéis ver todas las opciones que tenemos.  

Profile: La opción perfecta si buscamos es tener presencia en internet

Landing: La mejor opción si lo que queremos hacer una landing page:

Es decir, tenemos un montón de variedad según las necesidades que tengamos en cada momento.

Por ejemplo si queremos una plantilla dentro de Landing, podemos probar con la plantilla denominada como Untiled:

Elegimos la opción seleccionar y ya podemos empezar a trabajar:

Donde nos permite modificar cada una de las partes de la plantilla.

Esto lo explicaremos en otro artículo.

En este caso nos parece más interesante empezar con un lienzo completamente desde cero.

Para ello accedemos desde New Site.

 

Y aquí hacemos click donde pone un lienzo nuevo (Blank Canvas)

Aquí aparecerá lo siguiente:

lienzo en blanco de carrd

Es decir, aparecerá mi página de trabajo.

En este primer artículo mostraremos como se añaden objetos, algo muy sencillo

Por lo que para el principio, como lo que queremos es empezar de cero completamente, vamos a borrar lo que hay, es decir este “Nothing here yet!:)”, para ello seleccionamos y damos a borrar. Ahora que ya lo tenemos borrado, le damos a añadir texto como se muestra en la imagen

tipos de elementos a añadir en carrd

Y saldrá un bloque en la parte izquierda, en el que podremos modificar el texto.

opciones texto en carrd

Si observamos atentamente, justo debajo aparece el formato que yo puedo usar, concretamente en este caso usará markdown.

Por lo que si queréis que una parte de este título sea con negrita, para ello ponemos dos asteriscos antes y después de la palabra (como se muestra debajo, con un breve listado de instrucciones básicas de markdown).

Usar Markdown en Carrd

Pero si en lugar de negrita lo que queremos es que nos aparezca un formato de cursiva para ello lo haremos con dos guiones bajos antes y después de la palabra.

También, nosotros podemos elegir el tipo de texto que queremos, y cada vez que hacemos click, este va a cambiar. Esto significa que podemos tener diferentes tipos de texto a medida que lo cambiemos.

Por ejemplo, si lo que queremos cambiar es el título del sitio elegimos la opción (Site Title) y vamos a las opciones (Appearance) como se muestra a continuación

Y desde aquí lo vamos a poder cambiar todo, desde el tamaño:

Dependiendo el tipo de texto que elijamos, en Appearance, cambiaremos las propiedades solo de ese tipo de texto, y las del resto se mantendrán inalteradas.

Por ejemplo, si ahora elegimos añadir un nuevo texto.

Al haber elegido un nuevo texto tendríamos dos textos distintos, por un lado “Site Title”, y por otro “Text”. En principio parece que tienen un mismo tamaño, pero puedo elegir el tipo de texto y modificar sus propiedades.

Como ahora hemos elegido texto, en lugar de Site Title, puedo elegir que este sea más pequeño.

Y si observáis este cambia de tamaño, pero el anterior, el Site Title, no cambia.

Sobre este texto, yo puedo poner lo que quiera, en este caso, lo que vamos a poner es un poco de código.

Hemos puesto un código en el texto a propósito, para luego decirle desde las opciones que es un código (Code) tal y como se ve en la imagen

En este caso, ya solo tendríamos que ponerle los símbolos de markdown propios del código (un apóstrofe antes y después de las palabras que queramos incluir en el código).

anadir codigo carrd markdown

Otra opción es destacar el texto, para ello como vemos bastará con poner dos signos igual antes y después de cada palabra (==)

Al hacer esto, vemos que el texto ha cambiado

Ha cambiado, pero sigue pudiendo cambiarse mucho más, para ello (y al haberlo marcado como Highlight), podemos seguir cambiando sus propiedades dentro de Appearance, vamos a highlight y cambiamos el color que nosotros prefiramos.

Texto destacado Carrd

En este caso nosotros lo que hemos hecho ha sido cambiar el fondo, a un color amarillo.

Una vez visto varios objetos de texto ahora vamos a seguir añadiendo otros tipos de objetos. En el caso de ahora lo que vamos a añadir va a ser un botón:

Añadir un botón en Carrd

El cual vamos a renombrar como empezar, como se ve en la imagen, también aquí se puede definir la url.

Propiedades botón Carrd

Luego desde Appearance podemos elegir el color, nosotros hemos optado por el azul :

Cambiar color botón Carrd

E incluso elegir como queremos los bordes, desde Corner Rouding

Si queremos seguir añadiendo objetos es muy sencillo, solo hay que darle al botón de más y desde aquí elegir la opción que mejor nos venga.

Ahora y para finalizar este artículo vamos a insertar un vídeo.

Añadir Vídeo Carrd

Al hacer esto ya nos aparece el objeto de vídeo.

Y podemos elegir subirlo desde nuestro propio ordenador, o hacerlo embebido (por ejemplo desde youtube)

Nosotros hemos elegido esta opción, para ello vamos a youtube, elegimos un video, copiamos la dirección, y lo único que tenemos que hacer es pegarla como se muestra a continuación.

Añadir video youtube carrd

En este caso también tendremos muchas opciones distintas, como es que se ejecute automáticamente (Autoplay), que se repita en bucle (Loop ) así como el resto de opciones que se muestran a continuación.

Una vez que tenemos todo lo que queremos le damos a Done, y ya lo tendríamos.

Si cuando vemos el resultado, consideramos que por ejemplo nos gustaría ver el vídeo mas grande, no tendríamos mas que hacer click sobre el vídeo, ir a Appearance y cambiarle el tamaño desde Size:

cambiar tamano video carrd

Una vez hecha mi página ahora solo tendría que guardarla y publicarla.

Para ello en primer lugar guardamos tal y como se muestra en la imagen:

publicar web en carrd

Al hacer esto, aparece el módulo Publish en la parte izquierda, ponemos título, en este caso Mi primera Web, en la descripción pondremos lo mismo.

Publicar web en carrd

Ahora en este momento, sí va a depender de si nuestra cuenta es gratuita o es pro.

Si es gratuita, tendríamos que usar un subdominio del tipo .carrd.co . Pero en el caso de que sea pro, puede usar el dominio que elijas desde Use a custom domain.

En este ejemplo usaremos la opción de subdominio, con el nombre de primeraweb.carrd.co y le damos a publicar.

Cuando lo hayamos hecho nos aparecerá la siguiente pantalla

web publicada

Hacemos click sobre ver nuestro sitio (View Site)

web hecha en carrd

Y vualá, se ve todo tal y como nosotros lo hemos diseñado.

Otra de las virtudes de Carrd es que hace las páginas completamente “responsive”, por lo que se vería perfectamente desde el móvil. Aunque en este artículo no nos hemos detenido, tenemos el botón con forma de móvil:

carrd responsive

Si hacemos click en él, podemos ver como queda nuestra página para las dimensiones de un móvil.

carrd para movil

Y hasta aquí el artículo de hoy.

¡Que no os engañe este primer articulo!, ya que hemos hecho algo muy sencillo pero vamos a avanzar un montón, incluso vamos a hacer una web de cursos y una membership site con Carrd.

Esperamos que os haya gustado!!! Nos vemos en el siguiente artículo.

Para seguir el tutorial necesitas:

Crearte una cuenta de Carrd

Temario

Introducción a Carrd
Introducción a Carrd
08:23
Cambiar el fondo o background a nuestra página web
Cambiar el fondo o background a nuestra página web
03:25
Cómo trabajar con las Columnas en Carrd
Cómo trabajar con las Columnas en Carrd
03:09
Como trabajar con las Secciones en Carrd
Como trabajar con las Secciones en Carrd
05:45
Como trabajar con Formularios en Carrd
Como trabajar con Formularios en Carrd
07:04
Integración de Formularios con Autorespondedor en Carrd
Integración de Formularios con Autorespondedor en Carrd
06:14
Integración de Carrd con Zapier
Integración de Carrd con Zapier
05:03
Darse de alta en Carrd