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.
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.
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.
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”.
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:
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.
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:
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.
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 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 de Forge
Una vez personalizado pulsa el botón “Save Changes” para guardar los cambios.
6.2.- Cabecera:
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 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.
Acordeón Forge page builder
6.5.- Bloque destacado
Este bloque sirve para añadir un icono y un texto descriptivo.
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.
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 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 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 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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Es una vergüenza que después de invertir dinero comprando este plugin el autor desaparece del mapa sin dejar rastro, sin dar soporte, sin responder tickets… a medida que van pasando actualizaciones mayores de WordPress es cuando empieza a fallar cosas elementales como mostrar los comentarios. En fin… Manuel Vicedo todo un crack
Hola Juan.
Muchas gracias por tus comentarios. Seguro que a la gente que vaya a comprar este constructor lo interesa saber todo lo que comentas
y que analice las opciones de Divi builder y Elementor pro
un saludo
Me parece genial
Por fin una forma de diseñar tu página sin volverte loco, haciendo cambios en las plantillas premium o gratuitas.
De esta manera creas tu propia plantilla con tu propio diseño y estilo
Hola Pascual,
exactamente, aunque como cuento en el post yo me he pasado a Divi y al Divi builder.
Un saludo
Buenas tardes,
He instalado, en un servidor virtual con wordpress , el pluggin Forge para hacer pruebas con él; Encontré este tutorial que me parece muy bueno y muy útil pero siguiendo los pasos expuestos me encuentro con que en mi instalación de forge hay opciones que no concuerdan con lo aquí expuesto (en la opción filas no veo las posibilidades para definir margin o padding que se comentan) o simplemente el software se las salta (al pinchar sobre fila y arrastrar a la zona de puntos directamente me encuentro sobre lo que sería el apartado 5.2 de la guía sin poder ver lo que se expone previamente).
¿Sobre que versión de forge se hizo la guía, la gratuita o la de pago? Igual van por ahí los tiros…
Un saludo y gracias por esta amplia guía publicada.
Hola Cesar,
La guía se hizo sobre la versión de pago pero ya está desactualizada. Tu seguramente usarás una versión más nueva del plugin Forge.
En cualquier caso yo ya no trabajo con este constructor y no estoy al tanto de sus novedades.
Prefiero la plantilla Divi y el constructor Divi Builder.
Un saludo
Ok. Gracias
¡Hola! Este post me viene de perlas para avanzar en mi web, ya que estoy reestructurando contenidos, menú… y crearé páginas para facilitar «el viaje» dentro. ¡Así que muchas gracias!
Si tienes algún consejo al respecto, además de agradecértelo, te hago la ola 😉
Soy nueva usando este plugin tan interesante y me encuentro con un problemilla que me gustaría solucionar: deseo ocultar el título de la página Inicio.
Un cordial saludo y gracias por tu info.
Hola Rosa,
Que aparezca el título de la página en la página habitualmente depende de la plantilla utilizada. Yo utilizo la plantilla Divi, con la cual una vez activas el constructor que viene incorporado (el divi builder) automáticamente desaparece el nombre de la página. Si queremos que aparezca hay que ponerlo específicamente.
Un saludo
Muchas gracias por el review, Joaquín!
Sólo tendría que añadir que Forge todavía es bastante joven, pero estamos lanzando nuevas funcionalidades sin cesar. La idea es convertir este plugin en una suite completa de herramientas de marketing online, y todo empieza con el diseño de una página.
Un placer tenerte por aquí Manuel,
Un saludo