Cómo utilizar el útil, muy útil, módulo Personalizar HTML en Joomla 2.5 (I)

Tags: CMS | gestor de contenidos | Joomla | Joomla 2.5

Uno de los módulos predeterminados del sistema es el módulo Personalizar HTML. Es seguro que será uno de los módulos que más utilices en tus sitios Joomla y es, además, el que tendrás que utilizar en todas aquellas ocasiones en las que necesites incluir o añadir tu propio código HTML, o de terceros.

En este artículo te mostramos algunas de sus posibilidades:

Crea un módulo con imágenes que enlacen a sitios Web externos

Tanto si necesitas disponer de un módulo con una única imagen que permita enlazar a un sitio Web o bien varias imágenes en el mismo módulo a modo de blogroll, el módulo personalizar HTML te permitirá realizar estas tareas con mucha facilidad. Verás como...

Una vez en la administración de Joomla acude al menú Extensiones – Gestor de módulos para crear un nuevo módulo en el sistema. Haz clic en el botón Nuevo de la Barra de herramientas y selecciona como nuevo tipo de módulo el denominado Personalizar HTML haciendo clic en su enlace para acceder a la página de edición y configuración del nuevo módulo.

Detalles

Título: Escribe Con el ordenador a cuestas. Será el nombre que se asignará al módulo en el listado del Gestor de módulos y también el nombre visible en el Frontend de tu sitio si validas la opción Mostrar del apartado siguiente Mostrar Título.

Posición. Utiliza el botón Examinar para localizar position-6 en el listado de posiciones de la plantilla Beez_20 o escribe directamente su nombre en la caja de texto.

Nota. Teclea una descripción para el módulo que estás creando. Nosotros hemos escrito Sitio web orientado a la formación en software libre. Esta descripción se muestra justo debajo del nombre del módulo en el listado del Gestor de módulos y resulta útil para clarificar la finalidad de cada módulo creado y configurado (ten en cuenta que puedes tener diferentes módulos creados en el sitio del mismo sitio y el título puede no ser tan descriptivo como para diferenciar unos de otros).

Salida personalizada

Utiliza esta sección de la página para incluir en ella el contenido del módulo. En nuestro caso vamos a añadir el logo del sitio y un enlace que apunte hacia el sitio Web deseado cuando se haga clic sobre ella.

Utiliza el botón Imagen situado justo en la parte inferior del editor de textos para localizar la imagen a utilizar. Recuerda que en la nueva ventana emergente puedes hacer clic en el botón Examinar para encontrar la imagen a utilizar. En concreto, utilizaremos la imagen siguiente:

Si deseas emplearla también sálvala a tu ordenador para su utilización en este momento.

Cuando lo hayas hecho utiliza el botón Iniciar subida para guardarla en el Gestor multimedia de Joomla 2.5. A continuación haz clic en el botón Insertar que se localiza en la esquina superior derecha de la ventana para añadir la imagen al editor de textos. Recuerda que se ubica exactamente en el lugar donde estaba el cursor de inserción del ratón.

Una vez en el editor pulsa el icono que te permite alinear la imagen en el centro del mismo. ¡La imagen ya está en su sitio!

Para crear el enlace al sitio Web externo selecciona en primer lugar la imagen haciendo clic sobre ella. Puedes ver que se muestran una especie de tiradores en sus bordes (por cierto, te permiten aumentar o disminuir su tamaño) que te indican que la imagen se haya seleccionado.

Ahora acude al botón Insertar / Editar Hipervínculo en la segunda barra de herramientas del editor:

La nueva ventana que se muestra en pantalla es muy intuitiva.

URL del hipervínculo. Escribe aquí la dirección URL del sitio al que quieres que los usuarios – visitantes de tu sitio naveguen al hacer clic en la imagen. También puedes copiar – pegar la dirección URL del sitio a visitar directamente desde el navegador. En este caso en concreto, escribe http://www.lasticenelaula.es/portal/

Destino. El menú desplegable te permite seleccionar el comportamiento del enlace una vez que has hecho clic en él:

• Abrir vínculo en la misma ventana. Al hacer clic en la imagen navegaremos hasta el sitio Web indicado y la nueva página se abrirá en la misma ventana de tu sitio Joomla. El usuario – visitante tendrá que utilizar las fechas de dirección del navegador para volver atrás y volver así, a la página inicial.
• Abrir vínculo en una nueva ventana. Al hacer clic en la imagen se navega hacia el sitio Web indicado pero abriendo la página en una nueva pestaña o ventana. Este es el comportamiento tal vez más apropiado para navegar a un sitio Web externo aunque esto depende también de las costumbres y hábitos de los usuarios en su navegación por Internet.

Elige esta segunda opción, por el momento.

Título. Utiliza la caja de texto para escribir aquí un pequeño texto sobre el enlace que se está creando. Este texto se mostrará en pantalla cuando el usuario – visitante pase el cursor del ratón sobre este enlace, es decir, directamente sobre la imagen del logo.

Una vez que hayas finalizado de configurar estas opciones haz clic en el botón Insertar.

Menú asignado

Recuerda que esta sección te permite definir en qué lugar de tu sitio se mostrará o no el módulo que estás creando. En este caso en concreto, deja la opción predeterminada En todas las páginas, así el módulo se visualizará en todas las páginas del sitio por donde navegue el usuario – visitante.

Opciones Básicas

• Preparar contenido. Esta funcionalidad es tremendamente útil ya que ofrece la posibilidad de aplicar funciones adicionales al contenido de los artículos a través de plugins instalados en el sistema. Si se activa esta opción, que de manera predeterminada lo está, el código HTML que introduzcas en el modulo será tratado como el contenido de cualquier artículo pudiendo, por tanto, beneficiarse del uso de estos plugins. No es de utilidad en este momento dado que no estamos escribiendo directamente código HTML en el módulo.
• Seleccionar imagen para el background. El botón Seleccionar te permite elegir la imagen que se utilizará como fondo del módulo. Es una manera más de personalizar los módulos en Joomla 2.5.

Opciones Avanzadas

Ya te hemos hablado de estas opciones en nuestro primer artículo dedicado a la creación y gestión de módulos predeterminados en el sistema:

• Diseño alternativo. Te permite elegir de entre diferentes estilos de plantilla, en el caso de que tu plantilla ofrezca esta posibilidad.
• Sufijo de clase de módulo. Será añadido delante de las clases CSS usadas por el módulo. Esta funcionalidad es muy útil para aplicar estilos individualizados a los módulos.
• Activar o desactivar el sistema de cacheo de Joomla y establecer el tiempo que pasará antes de que el módulo sea "re-cacheado" cuando esté activo.

Una vez que has terminado de configurar todas las opciones posibles haz clic finalmente en el botón Guardar & Cerrar para volver al Gestor de módulos y salvar así los cambios realizados.

Actualiza el Frontend de tu sitio para comprobar el aspecto final del módulo y comprueba su funcionamiento haciendo clic en la imagen. Observa como Joomla 2.5 navega hacia el sitio Web establecido y lo hace abriendo una nueva pestaña – ventana en tu navegador.

Crea un módulo tipo blogroll

Utilizando idénticos procedimientos pero añadiendo más imágenes al módulo puedes crear un módulo tipo Blogroll, de esta manera ofrecerás la posibilidad de navegar a diferentes sitios web especializados en las temáticas que ofreces desde tu propio sitio Web.

Por ejemplo, con las imágenes siguientes, enlazadas a los sitios Web que te indicamos respectivamente, puedes disponer de una buena funcionalidad en la navegación de tu sitio:

Enlaces respectivos:
Imagen blogroll 1 - http://recursostic.educacion.es/secundaria/edad/4esobiologia/index.htm
Imagen blogroll 2 - http://www.bioygeo.info/PrincipalBG4.htm
Imagen blogroll 3 - http://recursos.cnice.mec.es/biosfera/profesor/index.htm
Imagen blogroll 4 - http://recursostic.educacion.es/ciencias/proyectobiologia/web/

y el resultado final:

Descarga nuestro tutorial en formato PDF - 177 kb - Descargar

Joomla 2.5 - Tutoriales Joomla!