¡Hola!.

Antes que nada quiero decirles que los datos  utilizados en este artículo pueden variar dependiendo la aplicación ( Usos de aplicación, fragmentos de textos  muy largos, tamaño de imagenes,  la utilización de color ) Muchos factores intervinene a la hora de diseñar tengamoslo encuenta.

¡Porfavor experimenten!.
Esto solo trata de ser una guía de como crear composiciones diferentes a las que siempre vemos de dos columnas.

Header cards 2 CALL ACTION CTA.

El objetivo de usar 2 Call Action (CTA) es promocionar dos productos o servicios de mayor importancia con un breve texto.
Aquí estamos utilizando jerarquias de la información. (Luego hare un artículo sobre eso).
Hay que olvidarnos de llenar la web con páginas de texto, recordemos que el usuario quiere la información en el momento.
No que tenga que buscarla en cientos de páginas.

Despues de esta breve introducción, empecemos.

Añadir columna

1. Crearemos una sección con 3 columnas

Insertar Call Action.

2.- Ahora insertaremos 1 Call Action.

3.- Añadimos nuestro texto que ya tenemos depurado  y colocamos el enlace del botton para que aparesca.

Degradado Call Action

4.- Con este Call action trabajaremos todos los efectos, para duplicar despues.
Añadimos de gradado valores
Primero color: #b1aedd
Segundo color: #837ecc

5.- Configuración de Gradiente

Grandient Type:  Radial
Radial Direction: TOP (En la captura aparece center, pero es TOP )
Start Position: 0%
End position: 97%

Formato de texto

6.- Ahora vamos a darle Formato al texto que seria el Titulo en H2 (CHOCOLATE NEGRO)

Title Text: H2
Title Font: PlayFair Display
Título Font Weight: Heavy

Title Text Size

Desktop: 26px
Tablet: 26px
Smartphone: 20px

ESTILO BOTON (Call action)

Use Custom Style for Button: Yes /Si
Button Text Size: 13px
Button Text Color: #0c71c3

Button Background Color

Primer color: #fcfcfc
Segundo color:
#e2e2e2
Gradient Type: Linear
Gradient Direction: 180Deg
Start Position: 47%
End Position: 85%

Button border (Borde Botón)

Button Border Width: 0px
Button Border Radius:25px
: NO

Button Hover Text Color: #e09900
Button Hover Border Radius: 3
Button Hover Letter Spacing: 0
Button Alignment: Centrado

Button Text Shadow

Button Text Shadow Horizontal Length: 0.11em
Button Text Shadow Vertical Length:
-0.02em
:
0.09em

Button Box Shadow

Box Shadow Horizontal Position: -1px
Box Shadow Vertical Position:
10px
:
21px
Box Shadow Spread Strength:
-6px
Shadow Color:
#4137cc

Spacing (Espaciado)

Custom Margin:
Desktop: 0px
Tablet: 0px
Smartphone: 0px

Custom Padding

Desktop TOP: 20px
Tablet TOP: 20px
Smartphone TOP: 20px
Smartphone BUTTOM: 20px

Box Shadow (Sombra)

Box Shadow Horizontal Position: 6px
Box Shadow Vertical Position: 30px
Box Shadow Blur Strength: 11px
Box Shadow Blur Strength: -21px

INSERTAMOS IMAGEN

DUPLICAMOS CALL ACTION

Ahora que ya tenemos duplicado nuestro Call Action solo tenemos que cambiarle el Tamaño para Desktop, Tablet y Smartphone.
E igual degradado como la imagen

IMAGEN

CUSTOM PADING (Espacio personalizado)

Custom Padding
Desktop TOP: 41px
Tablet TOP: 20px
Smartphone TOP: 20px

BACKGROUND (DEGRADADO )

Grandient Type:  Radial
Radial Direction: TOP
Start Position: 0%
End position: 97%

ROW SETTINGS (AJUSTES DE FILA)

Background: #fbeed5

Sizing (Dimensionamiento)

Make This Row Fullwidth: Yes
Use Custom width: No
Use Custom Gutter Width: Yes
Gutter width: 2
Equalize Column Heights: Yes

Spacing (Espaciado)

Custom Padding
Desktop: TOP: 100px  Right: 100px Bottom: 100px Left: 40px
Tablet: TOP: 100px  Right: 20px  Bottom: 100px Left: 20px
Smartphone: TOP: 30px Right: 10px Bottom: 30px Left: 10px



Desktop: TOP: 0px  Right: 0px Bottom: 0px Left: 20px
Tablet: TOP:
0px  Right: 30px  Bottom: 0px Left: 30px
Smartphone: TOP:
10px Right: 10px Bottom: 0px Left: 10px

Column 2 Custom Padding

Desktop: TOP: 0px  Right: 0px Bottom: 0px Left: 20px
Tablet: TOP:
0px  Right: 30px  Bottom: 0px Left: 30px
Smartphone: TOP:
10px Right: 10px Bottom: 0px Left: 10px

SECTION SETTINGS (CONFIGURACIÓN DE LA SECCIÓN)

Spacing (Espaciado)

Custom Padding
Desktop: TOP: 100px  Right: 0px Bottom: 100px Left: 0px
Tablet: TOP: 100px  Right: 0px  Bottom: 100px Left: 0px
Smartphone: TOP: 100px Right: 0px Bottom: 100px Left: 0px

Background (Fondo)

Color fondo:  rgba(58,30,0,0.92)

Configuración Imagen (Fondo)

1.- Seleccionamos la imagen de fondo.
2,. Despues aplicamos la siguiente configuración


Background Image Position: Center
Background Image Repeat: Repeat
Background Image Blend: Multiply

Ahora que ya terminamos de trabajar en nuestras dos columnas, vamos a trabajar en a ultima columna

Añadir Texto 3 columna

Estilo Tipografía (Heading 1 o H1 )

Valores Heading Text (Valores Título H1)

Title Text: H1
Title Font: PlayFair Display
Título Font Weight: Bold

Title Text Size

Desktop: 38px
Tablet: 30px
Smartphone: 29px

SPACING

Custom Padding

Desktop:  TOP: 190px Left: 20px
Tablet TOP: 20px Left: 30px
Smartphone TOP: 20px Left: 20px

Añadimos el ultimo párrafo

PARRAFO

Custom Margin ( Personzalización de margenes)

Desktop: TOP: -10px
Tablet TOP: -10px
Smartphone TOP: -10

Custom Padding

Desktop Right: 10px
Tablet  Right: 30px Left: 30px
Smartphone Right: 20px Left: 20px

Justificación Texto

Seleccionar texto y añadir Color

Y esto fue el final.

¿Te parece interesante este artículo?
Puntaje
[Total: 2 Average: 3]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares