Crear una Landing Page en WordPress con Site Origin

Landing Page con Site Origin

Cómo crear una Landing Page con Site Origin

La semana pasada hemos visto cómo crear una Landing Page en WordPress utilizando una plantilla de LeadPages. Este es el segundo artículo dedicado a la creación de Landing Pages y en esta ocasión vamos a ver cómo podemos crear una Landing Page con Site Origin Page Builder.

Site Origin Page Builder es el editor visual de contenidos más popular y de los más utilizados últimamente, su fuerza radica en una programación muy ligera, con unos scripts que cargan muy rápido y que están muy bien creados y estructurados. Además, su interface es muy sencilla, lo que lo hace un plugin muy simple de utilizar y con unos acabados muy potentes visualmente hablando.

En este post no voy a enseñarte a utilizar Site Origin Page Builder, eso lo explico en otro post (maqueta tus contenidos de forma profesional con Site Origin Page Builder), aquí sólo te enseñaré cómo hacer una Landing Page, o Página de aterrizaje, utilizando las opciones de este plugin.

En realidad vamos a utilizar dos plugins: Page Builder de SiteOrigin (el mejor plugin constructor de contenido Drag & Drop grauito para WordPress), y el segundo plugin que tenemos que instalar es Paquete de Widgets de SiteOrigin (añade widgets extra a la instalación del Page Builder). Aprovechamos la ocasión y también podemos instalar el plugin Shortcodes Ultimate (con el que añadiremos posteriormente bloques de contenido adicionales a la estructura de la Landing Page).

La mayoría de las Landing Page de calidad suelen tener los siguientes elementos:

  • Un buen titular, grande y atrevido.
  • Elementos laterales mínimos, como la barra lateral, el contenido del pie de página o cualquier otra cosa que pueda distraer al visitante.
  • Claro enfoque en un solo objetivo. Esto puede ser una venta, un clic en un enlace de afiliado, o una suscripción al boletín (por lo general).
  • Presentación basada en una historia, donde el visitante es llevado a través de cada sección de la página hasta que llegue a una llamada final a la acción.
  • La llamado a la acción. Este elemento le dice al visitante qué debe hacer.
  • Buena separación visual de las secciones individuales en la página.

Una vez descargados los plugins, los instalamos y los activamos.

Descargar Page Builder por SiteoriginDescargar Page Builder por Siteorigin Activar Page Builder por SiteoriginActivar Page Builder por Siteorigin

No olvides que no sólo necesitamos el plugin principal de Site Origin, sino también el paquete de widgets adicionales

El siguiente paso es la creación de una plantilla de página.

La primera decisión que debemos tomar es si vamos a crear nuestra Landing Page con Site Origin como una publicación de WordPress o una página.

Técnicamente hablando, no hay diferencia. Pero debemos tener en cuenta que la mayoría de los temas nos permiten utilizar una plantilla de ancho completo (sin barra lateral) para las páginas, mientras que muy pocos ofrecen esta funcionalidad para los post.

Así que al final vamos a trabajar con una nueva página.

Una vez en el apartado de Páginas pulsamos el botón Añadir nueva, e inmediatamente cambiamos al modo Page Builder.

Cambiar al modo Page BuilderCambiar al modo Page Builder

A partir de aquí tenemos la opción de empezar a construir algo desde cero, o utilizar uno de los diseños pre-construidos.

Vista del modo Page BuilderVista del modo Page Builder

Para el propósito de este post, vamos a construir una Landing Page con Site Origin desde el inicio, pero también te recomiendo que eches un vistazo a los diseños preconstruidos, y así poder ver cómo han sido creados. Cada uno de esos diseños es totalmente editable.

Plantillas del Page BuilderPlantillas del Page Builder

Hay dos tipos de contenedores principales en SiteOrigin:

  • Filas
  • Widgets

Básicamente, para poner cualquier tipo de contenido en nuestra Landing Page, primero debemos crear una fila y, a continuación, agregar su contenido como un widget.

Creando filas para nuestra página de aterrizaje

Bueno, para empezar, necesitas una idea general de cómo quieres que aparezca tu página de destino.

Aquí tienes un ejemplo rápido de cómo puede ser tu Landing Page con Site Origin:

Ejemplo visual para la Landing PageEjemplo visual para la Landing Page

Como puedes ver, nada demasiado lujoso.

Dado que necesitamos un buen ejemplo para trabajar, el propósito de este artículo será crear una Landing Page para promover una guía sobre «cómo crear una Landing Page con Site Origin moderna en menos de 20 minutos».

También, para que la estructura se vea bien, necesitamos cuatro filas individuales:

  • La sección del titular
  • Otra fila que contendrá la sección de detalles (la que presenta esas tres imágenes)
  • Una tercera fila que contendrá la sección Acerca de
  • Y por último la sección con el formulario opt-in

Comencemos por la parte superior:

La fila del título es muy simple de hacer, sin embargo, visualmente es realmente impresionante

Hacemos clic en el botón row de la interfaz principal de SiteOrigin:

Insertar una fila en SiteOrigin Page BuilderInsertar una fila en SiteOrigin Page Builder

A continuación, cambiamos el diseño a 1 columna y hacemos clic en Insertar:

Insertar una columna dentro de la fila en SiteOrigin Page BuilderInsertar una columna dentro de la fila en SiteOrigin Page Builder

Ahora, vamos a agregar un nuevo widget.

Hacemos clic en el botón Agregar widget.

A continuación, cambia a «Widgets Bundle» y selecciona el widget «SiteOrigin Hero»:

Elegir el Widget SiteOrigin HeroElegir el Widget SiteOrigin Hero

Si no aparecen los nuevos widgets hacemos clic en el texto Instalar el paquete de widgets que está en la parte inferior de esta ventana (para tener los widgets extras). Y si aún así sigue sin aparecer el widget SiteOrigin Hero, hacer clic de nuevo en el texto Habilitar mas widgets en los ajustes del paquete de widgets (que aparece también en la parte inferior).

Ahora debemos situarnos sobre el icono de llave inglesa en la esquina superior derecha de la nueva fila y elegimos la opción Editar fila. Se abre una nueva ventana y en la parte derecha, en el apartado Estilos de fila, hacemos clic en Estructura.

Modificar la estructura del WidgetModificar la estructura del Widget

Desde ahí nos desplazamos hasta la parte inferior y en la sección Diseño de la fila elegimos la opción Anchura Total extendida. Esto estirará toda la fila, lo que hará que sea posible tener una Imagen en el fondo con la anchura total del diseño.

Anchura total para el WidgetAnchura total para el Widget

Sin embargo, para lograr el efecto de ancho completo, necesitamos un par de pasos más. En primer lugar, editaremos el widget SiteOrigin Hero, para ello nos ponemos sobre él y hacemos clic en la opción Editar.

Editar el Widget SiteOrigin HeroEditar el Widget SiteOrigin Hero

En el apartado Cuadros Hero hacemos clic en Añadir

Añadir Cuadros HeroAñadir Cuadros Hero

Y hacemos clic en la flechita de la parte derecha de este marco para editarlo:

Editar el marcoEditar el marco

Aquí es donde vamos a escribir nuestro titular.

Escribir el titular del marcoEscribir el titular del marco

Justo debajo de ese bloque de Cuadros Hero, hay una sección llamada Fondo. En ella, podemos configurar nuestra imagen de fondo de ancho completo. Funciona como cualquier otro objeto de medios en WordPress. Simplemente hacemos clic en el botón Elegir medios y cargamos una imagen desde nuestro ordenador.

Añadirle una imagen de fondoAñadirle una imagen de fondo

Cuando terminemos, haremos clic en el botón principal Hecho, en la esquina inferior derecha. Con esto hecho ya podemos hacer clic en el botón Vista previa de los cambios, o en el botón Actualizar para ver los cambios en el navegador.

Esto es lo que tengo en mi Landing Page hasta este momento:

Vista previa de la Landing PageVista previa de la Landing Page

Ahora vamos a por la fila de detalles

Esta fila es donde vamos a colocar esas tres pequeñas imágenes (en mi diseño). También es el primer lugar donde vamos a usar el complemento Shortcodes Ultimate.

Comencemos agregando una nueva fila (igual que lo hemos hecho anteriormente). Pero esta vez, queremos tres columnas, y que además, que sean iguales:

Crear tres columnas de igual anchoCrear tres columnas de igual ancho

Ahora en cada columna vamos a agregar un widget simple llamado SiteOrigin Editor.

Agregar el widget simple llamado SiteOrigin EditorAgregar el widget simple llamado SiteOrigin Editor

Esto es básicamente una ventana de editor estándar con toda la capacidad de edición de texto de WordPress. Lo vamos a utilizar para crear un bloque de contenido muy simple: sólo una imagen y un poco de texto. Quedaría así:

Vista previa del widget simple SiteOrigin EditorVista previa del widget simple SiteOrigin Editor

Y creando el contenido de las tres columnas se parecerá a esto:

Vista previa en el navegador del widget simple SiteOrigin EditorVista previa en el navegador del widget simple SiteOrigin Editor

A continuación, vamos a añadir algunos Shortcodes Ultimate y así crearemos la magia.

EL objetivo es hacer que la imagen aparezca en la pantalla después de un ligero retraso y con una animación simple.

Para que esto suceda, hemos clic en el botón Inserta shrotcode, en la parte superior izquierda de la pantalla del editor (al lado del botón Añadir objeto), y elegimos la opción Animación.

Añadir una animación all widget simple SiteOrigin EditorAñadir una animación all widget simple SiteOrigin Editor

Lo que veremos son todos los shortcodes de Shortcodes Ultimate. Esto podría ser un poco intimidante al principio, pero en realidad es un sistema muy fácil de usar.

El shortcode que vamos a utilizar se llama Animación.

Seleccionar el shortcode AnimaciónSeleccionar el shortcode Animación

Eres libre de experimentar con las opciones disponibles en esa ventana de configuración hasta que veas algo que realmente te gusta. Para ayudarnos, hay un pequeño botón de Vista previa en la parte inferior.

Añadir el shortcode AnimaciónAñadir el shortcode Animación

Por ahora, sin embargo, vamos a acelerar las cosas, y sólo vamos a usar el shortcode dentro de la ventana del editor que ya tenemos preparado. Simplemente coloca el código siguiente alrededor de la imagen:

[su_animate type=»flipInY» delay=»1″]

TU IMAGEN VA AQUI

[/su_animate]

Quedaría así:

Añadir la imagen en medio del shortcodeAñadir la imagen en medio del shortcode

Lo importante es notar que el parámetro delay (retraso) está ajustado a 1 segundo.

A continuación, vamos a crear dos bloques más como este (o duplicarlo 2 veces), y agregar códigos cortos similares en cada uno, pero podemos asignarles diferentes retrasos a cada uno de ellos (2 segundos para el segundo bloque y 3 segundos para el tercero). Esto nos dará una buena progresión.

Así es como debería verse ahora esta fila.

Cómo quedaría esta filaCómo quedaría esta fila

En este punto, probablemente deberíamos también mencionar que cada widget y cada fila se pueden recolocar con arrastrar y soltar. Esto hace las cosas realmente sencillas para el trabajo de edición de la Landing Page.

Ahora vamos a la fila Acerca de

La fila Acerca de, utiliza básicamente los mismos elementos de widget, pero tiene dos columnas en lugar de tres. Por lo tanto, vamos a crear una nueva fila y elegir que contenga 2 columnas. A continuación, establecer las columnas que se dividen de acuerdo a la proporción Golden, y de derecha a izquierda. Así:

Añadir una fila para el Acerca deAñadir una fila para el Acerca de

SiteOrigin es muy útil aquí, la proporción Golden es sólo uno de los muchos aspectos pre-hechos que tenemos para elegir. Puedes experimentar con las demás proporciones también:

El contenido de estas columnas es bastante sencillo también. Sólo lo usaremos para mantener un widget de Editor SiteOrigin con una imagen nuestra en el primero y otro Editor de SiteOrigin con la información de Acerca de.

Insertar el widget de Editor SiteOriginInsertar el widget de Editor SiteOrigin

Finalmente, esto es lo que aparece en la fila:

Vista previa de esta filaVista previa de esta fila

Esta sección quedaría más o menos así:

Vista previa de esta secciónVista previa de esta sección

Ahora vamos a hacer la fila Opt-in

Esta es nuestra última fila, y en realidad la fila más importante para cualquier Landing Page, es donde se encuentra la llamada a la acción.

Para hacerla vamos a utilizar una fila de tres columnas, y con la relación establecida en Even(1). Sin embargo, ajustaremos la columna central de inmediato para ocupar sólo el 20% del ancho total. Debería quedar así:

Añadir una fila para el formulario Opt-inAñadir una fila para el formulario Opt-in

Como podemos ver, SiteOrigin hace que sea realmente fácil ajustar el ancho de cualquier columna. Sólo tenemos que hacer clic en el ancho actual y escribir cualquier valor que deseemos.

Ahora, mis columnas:

  • En la primera columna es donde colocaremos un pedazo corto de texto que invite a la gente a dejar su dirección de correo electrónico para obtener la descarga. Aquí insertaremos un widget Editor SiteOrigin widget.
  • El segundo bloque tampoco será nada demasiado ornamentado. Yo sólo uso un icono de flecha para apuntar al formulario Opt-in que se va a colocar a la derecha. Una vez más, hecho con el widget Editor SiteOrigin.
  • La tercera columna es donde ocurre la magia. Aquí es donde usaremos un widget con un plugin Opt-in para la entrega de correo electrónico. Ese widget se encargará de colocar un formulario Opt-in directamente en la página y conectarlo a nuestro software de correo electrónico (consulta con tu proveedor de correo electrónico para averiguar cómo hacer que esta parte funcione). Si no tienes un plugin de formularios Opt-in, puedes utilizar el widget de Formulario de contacto de SiteOrigin y modificarlo según tus necesidades.

Así es como se ve la estructura de nuestra Landing Page en WordPress:

Vista previa de la Landing Page en WordPressVista previa de la Landing Page en WordPress

Y así es como se ve en el navegador:

Vista previa de la Landing Page en el navegadorVista previa de la Landing Page en el navegador

Conclusión:

Construir algo como esto es muy simple con SiteOrigin y Shortcodes Ultimate. Una vez que tengas tu idea, no necesitarás la ayuda de nadie para poder crear tus propias Landing Pages.

El proceso de construcción de una Landing Page que hemos descrito aquí funciona con todos los temas que tengan programada la Plantilla de página Full witdh, por lo que lo único que te frenará es tu propia creatividad. En este caso, he utilizado el tema Twenty Seventeen que desgraciadamente no tiene implementada esta Plantilla de Página.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 Comentarios

    1. Hola Nadinne, te doy las gracias por pasarte por mi web y leer los artículos.
      Me alegra mucho que este artículo te haya servido y te invito a leer el resto y a comentar cuando lo consideres necesario.
      Muchas gracias de nuevo por tu comentario.
      Un saludo.

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *