Creación, mantenimiento y asistencia web

Constructor de páginas SP Page Builder

SP Page Builder es un constructor visual de páginas.

Ten en cuenta que la información aquí contenida puede variar según la versión instalada del programa.

Para llegar a él desde el panel de administración de Joomla haz clic en Componentes > SP Page Builder.

Una vez allí verás un listado con las páginas ya creadas.

Pinchando en el título de cada una la editas. También puedes verla y editarla en la parte pública (frontend).

La edición desde la parte pública es más visual: lo que ves es lo que obtienes. Desde el panel de administración es más esquemática.

Estructura de una página

Cada página contiene una o varias filas.

Estas filas contienen columnas.

Dentro de las columnas se añaden bloques. Aquí es donde van los contenidos (texto, imagen, vídeo...).

Dentro de las filas y columnas se pueden añadir nuevas filas, pero no nos compliquemos la vida de momento.

Filas

Una vez creadas puedes moverlas para cambiar el orden. Se hace pulsando en el icono con flechas y arrastrando.

Verás un icono que permite definir las columnas. Tenemos una rejilla de 12 unidades. Por ejemplo, si queremos dos columnas iguales, serán de 6 + 6. Para tres columnas iguales: 4 + 4 + 4.

Las configuraciones más habituales ya vienen para seleccionarlas a golpe de clic pero también se pueden escribir las nuestras propias. Por ejemplo, para dos columnas pero una más ancha que la otra podemos escribir 7 + 5.

Las filas pueden duplicarse, copiarse e incluso podemos guardarlas para usar de nuevo más adelante.

El icono con una rueda dentada sirve para configurar la fila. Tiene pestañas.

En la pestaña general puedes establecer opciones como la alineación vertical de las columnas o si la fila va a ocupar el ancho completo del navegador.

En la de estilo puedes establecer un fondo, relleno, márgenes...

La tercera pestaña es para crear animaciones para cuando se visualiza esta fila.

Columnas

En las columnas tienes opciones de configuración donde les puedes cambiar el estilo, la posición según el tamaño de pantalla, animaciones...

Bloques

Son los que tienen el contenido. El que más usaremos será el de texto. Los hay también para añadir imágenes, vídeos y otros que irás descubriendo.

Cada bloque tiene su parte de configuración. Todos cuentan con un apartado donde se les puede tocar el estilo.

Puede haber más de un bloque en cada columna. Los ordenas arrastrando y soltando.

También puedes duplicarlos y llevártelos a otras columnas.

Páginas adaptables o responsive

Recordemos que estamos creando páginas que deben visualizarse correctamente en todos los dispositivos, incluido el móvil.

En una pantalla grande, las columnas de una fila, se ven unas al lado de las otras.

En una pantalla pequeña la idea inicial es que las columnas se sitúen unas encima de las otras. Este comportamiento es el de por defecto pero se puede variar.

Estilo o diseño

Tratemos de simplificar en cuanto a estilo se refiere.

Si a cada texto que añadamos, por ejemplo, modificamos su tamaño, tipo de letra, margen, etc. nos volvemos locos.

Deja, como norma general, estas opciones en blanco. De esta forma permites que sea la plantilla del sitio la que decida estos estilos. Si no nos gustan se pueden cambiar a nivel global.

Así conseguimos que haya una homogeneidad a lo largo de todas las páginas del sitio.

Para un caso particular sí puedes hacer variaciones, claro, para eso está.

Imágenes

Las imágenes las clasificamos en carpetas con la opción Browse Folders. Si las subimos directamente nos las clasifica automáticamente por fecha, cosa que luego es poco manejable.

Deben optimizarse antes de subirlas al servidor. En este artículo hablo de ello: Optimizar imágenes para web.

Buenas prácticas creando páginas

Es importante tener en cuenta una serie de normas a la hora de crear cualquier página para un sitio web.

Si las conoces desde un primer momento ya las vas aplicando mientras creas contenidos.

En este sentido, echa un ojo al apartado de buenas prácticas del artículo que creé sobre accesibilidad web.

Metadatos

Cada página tiene unos datos meta, que sirven para describirla.

Es la información que luego aparece en Google, al compartir el enlace en redes sociales o programas de chat.

En el caso de este constructor de páginas hay un apartado que denomina Open Graph en el que se pueden establecer un título, una imagen representativa y una descripción breve.

Bloqueo de páginas

Cuando estás editando una página y otra persona intenta hacerlo también, verá un candado al lado del título, en el listado de páginas.

Cuando termines de editar guarda y cierra, así el candado desaparece y ya permites que otros editen.

Si abres una página para editarla y pulsas el botón Atrás del navegador, la dejas bloqueada. Dale al botón cerrar mejor.

Cuando pasas el ratón por encima del candado te dice quién la bloqueó y cuándo.

Si haces clic sobre este candado desbloqueas la página pero ojo, haces que la persona que esté editando pierda el trabajo que no haya guardado.

Diferencias entre la versión gratuita y la profesional

El número de bloques que se pueden añadir. La versión de pago tiene unos cuantos tipos de bloques más.

Exportar e importar. Esta funcionalidad es muy práctica cuando ya te estás algo metido a fondo con este gestor de páginas.

Diseños ya hechos, tanto de una página completa como de bloques.

Documentación y otros recursos

Aquí te dejo el enlace a la documentación oficial en inglés.

Cuando creas texto, hay un editor que te ayuda. Puede ser el que viene con Joomla, JCE u otro. Si es JCE puedes echar un ojo a este artículo en el que hablo de sus herramientas.

Conclusión

Como puedes comprobar, esta extensión para Joomla es muy completa y funcional.

No obstante, no suelo recomendarla para secciones del sitio como blogs u otros. Para este tipo de contenidos recomiendo usar los artículos de Joomla. Esto es porque el contenido que se genera con esta solución está dentro de ella de una forma poco manejable.

Es probable que tengas preguntas o surjan problemas. Si es así, no dudes en contactarme.