Seleccionar página
Lo cierto es que hoy en día yo me decanto por el Divi builder que es el constructor que incluye la plantilla Divi. Aunque también se puede añadir como un plugin en otra plantilla. Es un constructor de mucha más calidad, y por el mismo precio Elegant Themes nos ofrece un paquete con el divi builder + y varias plantillas y plugins.  En esta entrada tienes un comparativo de diferentes page builders. Además, parece ser que el constructor Forge está dejando de comercializarse, ya que ha perdido la batalla contra otros constructores para wordpress.

Los page builder (constructores de páginas) nos permiten estructurar y construir una página en WordPress de una menara visual, sencilla y enriquecida con una gran variedad de elementos.

En mi opinión sería bastante complicado realizar una página web profesional con WordPress sin contar con un web builder.

 

 

Curso wordpress online para crear una página web

CURSO WORDPRESS ONLINE + INFO

Con los page builder para wordpress utilizaremos el intuitivo método de drag and drop (arrastrar y soltar) para construir una página.

Los page builder los podemos añadir a una plantilla a través de un plugin como haremos en el caso que hoy nos ocupa.

 

DESCUENTOS DIVI

 

Hoy vamos a hablar de Forge un page builder español para WordPress creado por la empresa CpoThemes.

 

 

1.- Características del page builder Forge de Cpo Themes

 

El page builder se instala en WordPress a través de un plugin.

La principal característica que lo diferencia de la mayoría de page builders es que se trabaja desde el front-end y no desde el back-end como la mayoría de los web builders.

¿Y qué significa eso?

Significa que el entorno en el que vamos trabajando es una pre visualización de la página resultado. En la mayoría de page builders es necesario accionar la vista previa de WordPress cada dos por tres para ver el resultado.

 

¿No sabes utilizar WordPress y quieres aprender?, aquí tienes mi curso WordPress online y mi curso WordPress presencial

 

Otra característica importante es que el page builder está en español, cosa que es de agradecer (aunque faltan elementos por traducir).

Existe una versión gratuita limitada y una Premium de pago. El precio de la versión personal es de 59$ y nos proporciona una licencia para un sitio web, soporte y actualizaciones durante 1 año.

Transcurrido el año no tendremos derecho a soporte y actualizaciones. Para evitar esto será necesario renovar la licencia un año más a un precio reducido.

 

 

2.- Mi opinión de Forge, a quién va dirigido este page builder wordpress

 

Lo que más me ha gustado de este page builder es que es muy sencillo de utilizar, ya que es muy intuitivo. Viva prueba de ello es que para hacer este tutorial no he tenido que consultar ninguna documentación, me he puesto en marcha y rápidamente le he cogido el tranquillo.

Que sea muy sencillo no significa que tenga pocas prestaciones, al contrario. Es un page builder muy flexible, con las opciones más importantes que debería tener cualquier constructor y quitando opciones que muchas veces lo único que hacen es complicar el uso de la herramienta.

 

¿aún no tienes hosting para tu proyecto?, te muestro una par post para ayudarte en tu decisión: post 1 y post2

 

Los elementos fundamentales de los page builder los módulos o bloques finales. Cada módulo tiene una funcionalidad diferente. Existen módulos de texto, de imágenes, de slider, etc. La variedad de módulos finales que podemos utilizar en este wordpress builder es bastante completa.

También me ha gustado mucho que la configuración de cada uno de los módulos es muy sencilla e intuitiva.

Algo que también me ha llamado la atención muy positivamente es la posibilidad de utilizar widgets como si módulos del page builder se tratasen.

En definitiva en mi opinión este page builder está especialmente indicado para usuarios finales que quieran realizar una página web profesional ellos mismos. Es decir, para personas que se quieran crear ellos mismos su página web y/o blog y quieran disponer de una potente herramienta de construcción de páginas que al mismo tiempo sea muy sencilla de utilizar. También la pueden utilizar perfectamente desarrolladores o diseñadores web, aunque tal vez este tipo de perfil se decante por un page builder más complejo.

Un usuario nobel en poco tiempo aprenderá a utilizar el page builder ya que es muy sencillo e intuitivo.

 

 

3.- Activar Forge page builder para WordPress

 

Lo primero que debemos hacer es instalar y posteriormente activar el plugin Forge para WordPress.

Cuando vayamos a crear una nueva página veremos que nos aparece en la parte superior derecha un nuevo bloque con el título: “Forge Options”.

 

activar forge page builder

Bloque para activar el Forge front end Page Builder

 

En primer lugar debemos poner el nombre a la página y pulsar el botón de «Solo guardar» para guardar la página como borrador.

Para hacer uso del page builder en la página que estamos creando deberemos pulsar el check box: “Activate Page builder” y pulsar el botón: “Open Forge Page builder”. A continuación se cargará en una nueva ventana del navegador una pre visualización de la página.

 

 

 

4.- El Editor o panel de administración de Forge builder

 

En la parte superior del editor de Forge o interface del page builder tenemos los siguientes elementos:

 

menu de opciones de forge page buider

Menú superior de Foge

 

  • Icono caja de herramientas: si hacemos clic en este icono del page builder se desplegará un panel con las herramientas para construir la página.
  • Barra de búsqueda: esta barra sirve para buscar módulos disponibles en el page builder. Conforme vayamos escribiendo irán apareciendo resultados.
  • Icono engranaje: al hacer clic en el icono se despliega un panel con las siguientes opciones:

I.- Page settings: nos permite introducir CSS en la página.

ii.- import: nos permite importar un diseño previamente guardado. Para importar lo que debemos hacer es pegar el código que obtuvimos al pulsar el botón de exports.

iii.-exports: para guardar un diseño debemos pulsar este botón y copiar el código que nos sale. Dicho código lo deberemos introducir en la nueva página tras pulsar el botón: “import”.

  • Help & FeedBack: enlace a un formulario de contacto.
  • Descartar: si pulsamos este botón saldremos del editor del page builder y no guardaremos los últimos cambios (volveremos al último estado guardado).
  • Publicar cambios: si pulsamos el botón guardaremos cambios permaneciendo en editor del constructor de páginas.
  • Icono salida: al hacer clic en el icono abandonaremos el editor del page builder pero se guardarán los últimos cambios que podremos visualizar cuando volvamos a acceder al mismo.

 

 

5.- Las filas, el elemento fundamental del page builder.

 

Vamos a aprender a utilizar las filas un elemento clave en este page builder. Las filas nos permitirán construir la página con columnas de diferentes dimensiones 1/ 1, 1/ 4, 1/ 3…

Para añadir una fila pulsaremos el icono de la barra de herramientas y en el panel desplegable haremos clic con el botón izquierdo del ratón sobre el elemento “Fila”, lo arrastraremos y lo soltaremos en el interior del rectángulo marcado con línea de puntos.

 

forge crear filas

Añadir una fila

 

Hecho esto nos aparecerá un panel de configuración de la fila. En este panel no vamos a elegir el número de columnas y su distribución pero si elegiremos la separación que habrá entre las diferentes columnas y otros elementos generales de configuración de la fila.

 

 

5.1.- Configuración de la fila:

 

Configurar filas en el page builder

Forge web builder: configurar filas

 

a.- Column Spacing: aquí elegiremos la separación que habrá entre las diferentes columnas. Podemos elegir entre 4 tipos de separaciones.

b.- Background Color: aquí seleccionaremos el color de fondo de toda la fila.

c.- Gradient color: si ponemos el mismo color que hemos utilizado en el «background color» no habrá efecto degradado, pero si elegimos un color diferente se producirá un degradado desde el color elegido en la opción «Background color» hasta el color elegido en gradient color.

d.- Imagen de fondo: si queremos añadir una imagen de fondo en vez de un color de fondo debemos pulsar el botón: “Choose” y subir la imagen.

e.- Paddings: con esta opción podemos añadir un margen interior a la fila. El margen lo debemos expresar en px (pixeles). Si rellenamos la casilla central estamos indicando que queremos que el margen interior se establezca en los cuatro laterales.

Si queremos establecer unos márgenes interiores personalizados según sea a la derecha, izquierda, arriba o abajo escribiremos el número de píxeles en la casilla que corresponda.

f.- Top Margin: Aquí estableceremos un margen exterior (no interior como el padding) en la parte superior de la fila

g.- Bottom Margin: desde aquí podremos establecer un margen exterior inferior de la fila.

A continuación pulsa el botón “Save changes” para guardar los cambios en la fila.

 

 

5.2.- Estructura de la fila y configuración de columnas en el page builder

 

Una vez guardada la columna pasaremos a establecer la distribución en columnas de la misma y la configuración de columnas.

Pasa el ratón sobre la fila que acabas de añadir y verás las siguientes opciones:

a.- Editar: sirve para que se vuelva a desplegar el panel de configuración de la fila

b.- Copiar: sirve para crear un duplicado de la fila

c.- Estructura: al poner el ratón sobre la pestaña estructura aparecerán una serie de posibles distribuciones de columnas para la fila. Haz clic sobre la distribución que quieras.

 

Estructura de la fila del page builder

Forge: Distribución de columnas en la fila

 

Tienes las siguientes opciones:

  • 1 Columna
  • 2 Columnas, distribución 1/ 2
  • 3 Columnas, distribución 1/ 3
  • 4 Columnas, distribución 1/ 4
  • 6 Columnas, distribución 1/ 6
  • 2 Columnas, distribución 2/ 3 + 1/ 3
  • 2 Columnas, distribución 1/ 3 + 2/ 3
  • 2 Columnas, distribución 4/ 5 + 1/5
  • 2 Columnas, distribución 1/5 + 4/ 5
  • 3 Columnas, distribución 1/ 2 + 1/ 4 + 1/ 4
  • 3 Columnas, distribución 1/ 4 + 1/ 4 + 1/ 2
  • 3 Columnas, distribución 1/ 4 + 1/ 2 + 1/ 4

 

d.- x: si haces clic sobre la “x” que aparece en la parte derecha de la fila procederás a eliminarla.

 

Una vez creada la estructura de columnas de la fila verás que al pasar el ratón sobre la parte inferior izquierda de cada columna aparece un botón denominado: “Column Settings”.

 

Configuración de columnas en forge page builder

Configuración de columnas Forge page builder

 

Al hacer clic sobre el botón accederás a la configuración de la columna que hayas seleccionado desplegándose un panel con las siguientes opciones:

  • Background color: sirve para establecer el color de fondo de la columna.
  • Gradient color: sirve para crear un degradado de color de fondo
  • Imagen de fondo: sirve para establecer una imagen de fondo en la columna.
  • Paddings: sirve para establecer los márgenes interiores de la columna.

 

 

Forge WordPress page builder, aprende a utilizarlo para crear una página web profesional from Joaquín Barberá on Vimeo.

 

6.- Los bloques principales de este WordPress page builder:

 

Una vez que hayamos añadido y estructurado una fila en varias columnas es el momento de añadir los bloques.

Los bloques son los elementos finales que se colocan en las columnas. Según el tipo de bloque que añadamos obtendremos una funcionalidad u otra.

Para añadir un bloque a una columna:

  • Seleccionar: simplemente tendremos que hacer clic en la caja de herramientas situada en la parte superior izquierda de la interface del web builder y a continuación se desplegará el panel con todos los bloques disponibles.
  • Arrastrar y soltar: Ahora debemos hacer clic con el botón izquierdo del ratón sobre el bloque elegido y arrastrarlo hacia una columna. Una vez situado sobre la columna donde queramos colocarlo soltaremos el botón izquierdo del ratón.
  • Configurar el bloque: una vez soltado el bloque aparecerá el panel de configuración del mismo.

 

 

6.1.- Bloque de texto:

 

El bloque de texto del Forge builder sirve para insertar textos y es muy sencillo de personalizar. Nos aparecerá el editor de texto de WordPress con todas sus opciones. También podremos insertar shortcodes de plugins.

 

Bloque de texto del page builder

Bloque de texto de Forge

 

Una vez personalizado pulsa el botón “Save Changes” para guardar los cambios.

 

 

6.2.- Cabecera:

 

Bloque encabezamiento header forge

Bloque Header o encabezamiento

 

Este bloque del constructor de páginas sirve para crear títulos o headers.

Contenidos: texto del título de cabezera o header.

Tamaño (px): Tamaño en píxeles de la fuente de texto utilizada en el título.

Position: esta opción sirve para alinear el texto a la izquierda (left), derecha (right) o centro (centered).

color: aquí estableceremos el color de la fuente de texto utilizada en el título. Podemos seleccionar un color de la paleta o escribir el código html del mismo en el campo de texto que aparece.

Font Weight: con esta opción estableceremos el grosor de la fuente de texto utilizada en el título. Podemos elegir entre: light (fina), Regular (media) y bold (gruesa)

Heading Tag: opción muy importante para el SEO. Aquí elegiremos que tipo de etiqueta HTML estableceremos al título: H1,H2,H3…H6

 

 

6.3.- Imagen:

 

Este bloque sirve para insertar una imagen en la columna que queramos.

En la configuración de este bloque solo tenemos dos opciones. Una para subir e insertar la imagen y otra para alinearla a la izquierda (left), derecha (right), centrada (center).

También podemos elegir tamaño completo (full Width). Con esta opción la imagen ocupará todo el tamaño disponible en la columna.

 

 

6.4.- Acordeón:

 

Bloque acordeon forge

Bloque acordeón de Forge

 

Con este bloque podremos crear el típico botón que se despliega y pliega al accionarlo.

a.- Título: aquí estableceremos el título de las pestaña del acordeón.

b.- Icono: si elegimos un icono, este aparecerá justo delante del texto que hemos establecido en el apartado anterior.

c.- Accordion State: aquí estableceremos si el acordeón estará abierto (open) o cerrado (closed).

d.- Group: esta opción sirve para diferenciar botones desplegables de acordeones. Es decir, si usamos varios acordeones uno debajo de otro y le damos el mismo nombre de grupo actuarán como tales.

Cuando uno esté desplegado los demás estarán plegados y cuando despleguemos otro se plegará el primero. Es decir, solo puede haber uno desplegado de los diferentes elementos que pertenezcan al mismo grupo.

Una vez guardados los cambios podremos ver el acordeón con su título pero ningún contenido en su interior. Para añadir un contenido de texto debemos arrastrar un bloque de texto y soltarlo justo bajo el título de la pestaña del acordeón.

Como antes he comentado podemos seguir añadiendo más botones del acordeón tras el primero.

 

Acordeon forge page builder

Acordeón Forge page builder

 

 

6.5.- Bloque destacado

 

Este bloque sirve para añadir un icono y un texto descriptivo.

 

Bloque iconos forge

Bloque para mostrar iconos

 

  • Título: título del bloque, aparecerá debajo del icono.
  • Contenidos: contenido de texto que aparecerá debajo del título del bloque.
  • Icono: en este apartado seleccionaremos el icono que queremos mostrar en el bloque de destacado.
  • Icon color: aquí seleccionaremos el color del icono.
  • Icon background color: aquí podemos establecer un color de fondo para el icono. Dicho fondo puede tener varias formas que seleccionaremos en el apartado “estilo”: Normal (cuadrada), Circle (circular) o Rounded (cuadrada con los bordes matados).
  • Icon gradient color: para crear un degradado del color de fondo del icono.
  • Icon size: tamaño del icono. Small (muy pequeño), normal (pequeño), médium (mediano), large (grande) y huge (muy grande).
  • Alignment: alineación del icono. Podemos seleccionar left (izquierda), center (centro) y right (derecha)
  • Estilo: forma del fondo del icono. Podemos elegir entre: Normal (cuadrada), Circle (circular) o Rounded (cuadrada con los bordes matados).

 

 

6.6.- Botón

 

Este bloque sirve para añadir un botón y por lo tanto es una llamada a la acción.

 

boton contructor forge

Botón Forge

 

Las opciones de configuración son:

  • Contenidos: Texto principal que aparecerá en el botón
  • Descripción: Texto secundario que aparecerá bajo el texto que hemos definido en el punto anterior y con una tipografía más suave. También podemos dejarlo vacío.
  • Destination URL: url destino a la que irá el usuario cuando haga clic en el botón.
  • Button Alignment: alinear el botón a la izuierda (left), derecha (right), center (centrar) y full width (ancho completo). Con esta última opción el botón ocupará todo el ancho disponible en la columna en la que esté insertado.
  • Button Size: tamaño del botón. El tamaño del botón repercute proporcionalmente en el texto que haya en el introducido. Es decir, al aumentar el tamaño del botón también aumentará el tamaño del texto que haya en su interior. Podremos elegir entre small (muy pequeño), Normal (pequeño), Medium (intermedio), Large (grande) y Huge (muy grande).
  • Color: color del texto situado en el interior del botón.
  • Background color: color del fondo del botón.
  • Gradient color: esta opción sirve para establecer un degradado en el color de fondo del botón.
  • Icono: Esta opción sirve para introducir un icono en el botón. El icono aparecerá justo delante del texto principal del mismo.
  • Target attribute: escribe en este campo “_blank” si quieres que el enlace se abra en una nueva pestaña del navegador. En caso contrario déjalo en blanco.
  • Rel attribute: escribe “nofollow” si quieres un enlace de este tipo para el botón. En caso contrario déjalo en blanco.

 

 

6.7.- Espaciador

 

Este es un bloque muy sencillo pero imprescindible para poder crear una página a nuestro gusto.

Con este bloque podremos crear un espacio medido verticalmente entre dos elementos. Este espacio puede establecerse entre dos bloques, dos columnas o dos filas.

La configuración del bloque solo tiene una opción. En el campo “Height” debemos introducir el espacio de separación en píxeles que queremos aplicar.

 

 

6.8.- Formulario de acceso

 

Este bloque sirve para poner un formulario de acceso (no de contacto) para la web.

  • Logged in Text: el texto que aquí escribamos será el que aparecerá en vez del formulario cuando estemos logueados.
  • Username label: texto que debe aparecer en la etiqueta para el campo de usuario
  • Password label: texto que debe aparecer en la etiqueta para el campo de password o clave.

 

 

6.9.- Highlight Box

 

Este bloque sirve para crear una caja sin texto con un color liso, degradado o una imagen.

  • Background color: aquí establecernos el color de fondo de la caja.
  • Gradient color: con esta opción podremos crear un degradado.
  • Imagen de fondo: aquí podremos seleccionar una imagen.
  • Paddings: con esta opción podremos establecer márgenes interiores en la caja (izquierdo, derecho, arriba y abajo).

 

 

6.10.- Lista de posts

 

Este bloque es parecido al widgets de últimos posts. Pero con este bloque además de post podremos listar páginas. Además a diferencia del widget de últimos post este bloque incluirá una miniatura de la imagen destacada del post.

  • post type: aquí seleccionaremos el tipo de lista. Post (entradas de blog), page (páginas), Attachment (adjuntos).
  • Number of entries: número máximo de entradas a listar en el bloque.
  • Number of Columns: número de columnas con las que mostrar las entradas.

 

 

6.11.- Mensaje

 

Con este módulo podremos introducir una caja con un mensaje de aviso. Según el tipo de aviso que elijamos aparecerá un color de fondo u otro.

 

Modulo mensaje forge

Modulo de mensaje

 

  • Contenidos: texto que aparecerá en el aviso.
  • Type: aquí elegiremos el tipo de aviso, cosa que marcará el color de fondo de la caja. Ok (correcto, color verde), Error (error, color rosa), Warning (aviso, color naranja) e info (información, color azul).

 

 

6.12.- Slider

 

Con este bloque podemos introducir un slider de imágenes en la página que estemos creando con el page builder. Un slider es un elemento a través del cual se van mostrando diferentes imágenes que van cambiando al pasar un determinado tiempo.

 

  • Transition speed: tiempo en milisegundos de cada transición. El tiempo de transición es el tiempo que hay entre dos slides o imágenes del slider.
  • Time Between Transitions: tiempo entre transiciones. Es decir, tiempo en milisegundos que durará cada imagen del slider.
  • Transition Effect: efecto a través del cual desaparecerá la imagen del slider y aparecerá una nueva.
  • Navigation Style: si elegimos arrows, aparecerán unas flechas en el slider que permitirán que el visitante pueda cambiar manualmente las imágenes del slider.
  • Paging Stye: si elegimos “Bullets” aparecerá un punto por cada imagen del slider. Haciendo clic en dichos puntos también será posible alternar entre una imagen y otra.
  • Paging Position: esta opción sirve para establecer la posición de estos puntos que veíamos en el apartado anterior.

 

añadir imagen slider del forge page builder

Añadir imagen al slider

 

Poniendo el ratón sobre el slider aparecerán los botones: «Add Slide» para añadir imágenes al slider y «Current Slide» para editar la imagen actual del slider

 

 

6.13.- Tabla de precios

 

Has visto alguna vez la típica tabla de precios que se utilizan en los hosting para establecer diferentes precios y características según cada plan de hosting. Este módulo se utiliza para crear una tabla de ese tipo.

Para insertar varios planes deberás crear una fila dividida en varias columnas y en cada columna introducir un bloque tipo tabla de precios. Si queremos que las tablas aparezcan unas pegadas a las otras debemos quitar el margen entre bloques en la configuración de la fila que era la opción: “Column Spacing”

Con la tabla de precios crearemos la parte superior de la tabla. El contenido o características lo podemos introducir con un bloque de texto.

  • Título: título de la cabecera de la tabla
  • Subtítulo: subtítulo de la cabecera. Aparecerá debajo del título y con una fuente más pequeña que el título.
  • Description: texto que aparecerá debajo del precio.
  • Price: precio
  • Color: color de fondo de la cabecera de la table.
  • Before: elemento que aparecerá delante del precio. Los americanos lo usan para poner el signo del dólar.
  • Después: Elemento que aparecerá después del precio. Lo podemos usar para poner el signo “€” o “€/mes”, etc.
  • Tipo: esta opción sirve para destacar una de las tablas (la que más nos interese), la tabla que destaquemos con aparecerá con una cabecera un poco más alta. En la tabla destacada seleccionaremos la opción: “Highlighted”, y en las tablas no destacadas seleccionaremos la opción “normal”.

 

Tabla de precios generada con el forge builder

Tabla de precios Forge pro builder

 

6.14.- User profile

 

Este bloque sirve para crear el típico perfil personal.

  • Imagen: con esta opción subiremos la imagen de la persona.
  • Nombre: Nombre de la persona.
  • Contenidos: descripción.
  • Perfiles sociales: a continuación aparecerán una serie de perfiles sociales. Debemos poner la url de los perfiles que queremos que aparezcan en la ficha.
  • Webpage: aquí se pondría la url de la web personal. Aparecerá un icono circular tipo enlace delante de los iconos de redes sociales.
  • Email adress: dirección de email que aparecerá bajo los perfiles sociales precedido por un icono de un sobre.
  • Phone: Número de teléfono fijo. Número que aparecerá precedido por el icono de un teléfono fijo.
  • Cell phone: Número de teléfono móvil. El número aparecerá precedido por el icono de un teléfono móvil.

 

 

6.15.- Vídeo

 

Este bloque nos permite embeber un vídeo de youtuebe o Vimeo. El vídeo se ajustará al tamaño disponible en la columna.

En la configuración solamente tendremos que introducir la url del vídeo.

Existen otras maneras de introducir vídeos de youtube en wordpress como te comento en este post.

 

 

6.16.- Widgets

 

El resto de elementos disponibles son widgets de wordpress. Para introducir un widget en una columna haremos exactamente lo mismo que con los bloques. Arrastramos y soltamos.

Una vez colocado el widget en su posición se desplegarán las opciones de configuración del mismo. Como ya sabéis las opciones de configuración son diferentes según el Widget de que se trate.

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com