Jul 10 2018

Cómo replicar la landing de Facebook

Cómo replicar la landing de Facebook

Paso #1: Cambiar el Tema

Lo primero que debes hacer es cambiar el Tema que viene por defecto en WordPress por uno neutro, que no agregue elementos adicionales a las páginas que vayas a crear en el futuro.

Para esto, ya elegimos uno para ti llamado Altitud Pro.

Debes dirigirte a "Apariencia" en el menú lateral y seleccionar el sub-menú "Temas". Ahí debes buscar el Tema llamado "Altitud Pro" y hacer click sobre el botón "Activar".

Paso #2: Añadir opciones de edición de texto

Inicialmente, las opciones con que cuentas para editar texto son restringidas.

Para agregar la posibilidad de cambiar el tipo, tamaño y color de las letras, debes dirigirte a "Ajustes" en el menú lateral, y seleccionar el sub-menú "TinyMCE Advaced".

Una vez dentro, arrastra con el mouse los tres elementos correspondientes a la barra superior de opciones de edición de texto y haz click en "Guardar cambios".

Paso #3: Crear una nueva página

Dirígete a "Páginas" en el menú lateral y selecciona el sub-menú "Añadir nueva".

Una vez ahí, pon un nombre a la página y haz click en "Publicar".

Paso #4: Crear la primera fila

Selecciona "PageBuilder" entre las opciones de editor, agrega una nueva fila y hazle las siguientes ediciones:

Primero, debe tener 4 columnas, de 10%, 40%, 40% y 10% respectivamente.

Luego selecciona "Estructura" en el menú lateral derecho y fija el margen inferior en 0, y cambia la estructura de la fila a "Anchura total extendida".

Finalmente, desde el menú de "Diseño" fija el color del fondo en #3b5998, haz click en "Añadir" y luego en "Actualizar".

Paso #5: Subir el logo

Haz click sobre la segunda columna y luego sobre "Agregar widget".

Ahí, debes buscar y seleccionar el widget llamado "Imagen de SiteOrigin".

Una vez hayas hecho esto, pon tu mouse sobre el widget y haz click en editar, luego selecciona "Elegir objeto" y adjunta la imagen del logo.

Finalmente, selecciona la opción de tamaño que prefieras y, opcionalmente, puedes agregar un margen superior e inferior desde el menú lateral derecho bajo "Estructura".

Paso #6: Crear la segunda fila

Para ahorrar tiempo, primero vas a duplicar la primera fila, y a esta nueva fila sólo le vas a cambiar el color del fondo por #D3D8E8.

Luego tienes que eliminar el widget con el logo de la página y hacer click en "Actualizar".

Paso #7: Comunicar tu WHY

Haz click sobre la segunda columna de la segunda fila y luego sobre "Agregar widget".

Ahí, debes buscar y seleccionar el widget llamado "Editor SiteOrigin".

Una vez hayas hecho esto, pon tu mouse sobre el widget y haz click en editar.

Escribe el texto que define la oferta de valor, y elige el tipo, tamaño y color de fuente que prefieras. Haz click en "Añadir" y luego en "Actualizar".

Paso #8: Agregar una imagen

Selecciona el mismo cuadro que en el paso anterior y agrega anda a agregar otro widget.

Elige el widget llamado "Imagen de SiteOrigin" y sube la imagen que desees.

Finalmente haz click en "Actualizar".

Paso #9: Crear la última fila

De la misma forma en que lo hiciste la vez anterior, duplica la segunda fila, y sobre esta nueva fila elimina el widget de imagen.

Luego anda a editar la fila, cambia el número de columnas a 3 y selecciona la siguiente distribución de ancho: 10%, 80% y 10%.

Haz click en "Actualizar".

Paso #10: Lo último...

Reemplaza el texto del último widget por lo que quieres que vaya en el "footer" de la página, así como también el tipo, tamaño y color de la fuente.

Luego cambia la Plantilla de la página a "Landing" en el menú derecho y haz click en "Actualizar".

Written by Gabriel · Categorized: Tutoriales

Copyright © 2021 · Altitude Pro Theme on Genesis Framework · WordPress · Log in