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”.