Creación de la Sección Above Default en Card.co

Curso de Diseño Web No Code

Contenido del curso

Introducción al No Code

Estrategia de diseño de una landing

Crear y vender productos digitales en Notion y Gumroad

Diseñar una landing en Carrd

Cierre del curso

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:39

Creación de la Sección Above Default en Card.co

Curso de Diseño Web No Code

Clase 15 de 20

Clase 15 / 20

Comentarios (20)20 comentarios

Malu Mendoza

Creo que vamos bien :D Pero honestamente necesito practicar mi copy y mejorar la calidad de mis fotos 🙈

Fabian Flores

Les dejo la imagen

Andrés Felipe Rivera Giraldo

Para poder ir en línea con el proyecto de Elena: Título

Color: #121738
Font: Inter
Size: 3
Weight: Heavy
Line Spacing: 1.375
Letter Spacing: -0.125
Mobile Size: 2.5

Subtítulo

Color: #33343F
Font: Karla
Size: 1.5
Weight: Regular
Line Spacing: 1.5
Letter Spacing: -0.075

Botón

Color Background: #7B79F5
Color Hover: #716FE0
Label: #FFFFFF
Width: Auto
Height: 3
Corner Rounding: 0.5
Font: Inter
Size: 1
Weight: Medium
Letter Spacing: -0.025
Spacing: 0
Mobile Size: 1.25

Contenedor principal ++Escritorio++

Widh: Edge to Edge
Padding Vertical: 10
Padding Horizontal: 3
Gutters: (Espacio entre columnas) 2
Contents:
1. Position: Auto
2. Widh: 100
3. Alignment: Auto | Top
4. Spacing: 1.375
Background Color: #FFFFFF

++Mobile:++

Layout: Stack (reverse) (Cuando se ve en mobile, primero se observa la imagen)
Content Alignment: Auto

Así va la cosa, por cierto:

Emmanuel García

Lo que más destaco en este video es el orden de la documentación en Notion, superimportante para llevar un control presente-futuro y comunicación con otras áreas o compañeros

Emmanuel García

Emmanuel García

Sería genial que la maestra pudiera compartirnos el archivo para tomarlo de referencia :)

Carlos G

Carlos G

Ya se encuentra disponible en el proyecto,

Jaime Moncada

Above the fold: BBDD de diferentes patrones y tipos de modelos de negocio https://modelosdenegocio.carrd.co/

Daniela Salgado Perez

He observado que no enseñan como hacer el portafolio para UX UI design.

Tambien sería excelente un curso para encontrar trabajos de diseño UX UI y que den tips de como sobresalir.

Please platzi :)

Dany Alberto Aristizabal Correa

Este es mi resultado

Edwin Omar de la Cruz Garcia

Felipe Bernardo González Barranco

Genial, definitivamente lo voy a usar!

Hugo Montoya Diaz

Cuenta creada en CARRD

Alejandro rodriguez

Como lo psamaos a nuestra page de nuestra web

Dicson Quimbayo

Dicson Quimbayo

Hola Alejandro, ya lo que estamos creando en Carrd lo puedes utilizar como tu página web, al finalizar tu proceso de diseño y creación puedes dejarle en dominio generado por carrd o configurar tu dominio personalizado

Franco Moreira

como se modifica el favicon?

Sebastian Santiago Pazo

por qué no puedo mover la imagen? parece que estuviera fija

Sergio Andres Quintero Sarmiento

Mi primer above the fold en Carrd :)

Fernanda López

Mi aporte ☺️

José Adrián Alfonso

impresionante este curso, ahora solo lo estoy viendo, lo voy a volver a ver para crear mi proyecto, realmente la profesora es excelente!

Cristian Sevillano

Espero mejorarlo para mi marca personal

![](

Juan Wilton Torvisco Salas

Aquí mi "Above the fold" en Carrd:

Andy Gregorio

Aquí va mi página https://libreriaantropologica.carrd.co/

Fredy Antonio pelaez castañeda

Fredy Antonio pelaez castañeda

no se ve nada

Renne Aguilar

Recursos

¿Cómo empezar a crear la sección "Above the Fold" en Card?

La plataforma Card.co se presenta como una herramienta increíblemente intuitiva para el desarrollo de sitios web. Tras crear tu primer sitio en Card, es esencial comenzar con una de las áreas más importantes: la sección "Above the Fold". Esta área es crucial, ya que contiene el contenido que los visitantes ven al cargar la página, influyendo directamente en si se quedan o se van. En este artículo, te guiaremos a través de cada paso para perfeccionar esta sección.

¿Qué es el dashboard de Card y cómo editar un sitio?

Desde el dashboard de Card, puedes acceder y gestionar tú contenido de manera eficiente. Aquí se encuentran todos tus sitios, permitiéndote editarlos mediante un simple clic en el botón de edición. Este panel centralizado es tu control general para realizar y supervisar cambios.

¿Cómo configurar el diseño de tu nueva página?

El diseño de tu página es esencial para atraer y retener a los visitantes. En Card, tienes la posibilidad de ajustar varios aspectos:

Eliminar elementos innecesarios: Primero, realiza una limpieza eliminando cualquier elemento del cual no necesites.
Opciones de página: Puedes elegir entre diferentes estilos de página; el más utilizado es el "default". Ajusta también la posición, llevándola al tope para permitir que la página comience en la parte superior.
Ajustes de anchura y padding: Ajusta la anchura de la página a tu preferencia. Además, juega con el padding, el espacio alrededor de los elementos, para asegurar que se vea limpio y atractivo. En nuestro ejemplo, configuramos un padding vertical de 0 y un horizontal de 1.25.

¿Cómo trabajar con contenedores y columnas?

Crear un elemento contenedor es fundamental para organizar el contenido. Se recomienda utilizar un contenedor a dos columnas, ideal para colocar elementos como títulos, subtítulos y botones en una y una imagen relevante en la otra.

¿Qué son y cómo aplicar estilos personalizados?

Los estilos personalizados permiten un diseño coherente a lo largo del sitio. Crea estilos específicos para cada tipo de texto o botón, lo que te ahorrará tiempo al ajustar la apariencia a futuro:

Textos y fuente: Por ejemplo, utiliza fuentes como Inter para títulos y Carla para subtítulos, ajustando tamaños y espaciado para optimizar la legibilidad.
Botones: Los estilos pueden incluir colores sólidos y variantes al pasar el mouse, creando así un botón atractivo e interactivo.

¿Por qué es importante configurar los elementos visuales?

La imagen o ilustración principal es crucial para captar la atención del usuario. Al agregar una imagen a una de las columnas de tu contenedor:

Arrastrar y soltar imágenes: Esta función simplifica el proceso de colocar una imagen en el diseño.
Ajustes y corte: Ya con la imagen cargada, podrás ajustar la visualización para garantizar que se enfoque en la parte más significativa.

¿Cómo finaliza la configuración del diseño "Above the Fold"?

La sección "Above the Fold" puede verse influida positivamente por pequeños ajustes:

Ajusta el contenedor: Crea un estilo que permita mayor "espacio para respirar" o padding, haciendo que el contenido no se vea saturado.
Ordenamiento en dispositivos móviles: Al usar la opción "Stack Reverse", asegúrate de que la imagen se vea primero en móviles para un impacto visual más efectivo.

Por último, ¡es tu turno! Crea una sección "Above the Fold" que se adapte a tus necesidades y comparte tus resultados. No te olvides de seguir experimentando y ajustando a medida que avanzas, ¡la práctica hace al maestro!