Joomla, Instalación de plantilla y creación de menú.

Edgardo Fernandez . Vista 7190 veces

La elección de la plantilla es una elección que nos puede llevar mucho tiempo, pero una mala elección de la misma puede hacer fracasar nuestro proyecto. Si trabajamos para un cliente, lo primero que le va a gustar o no, es la parte visual; y esto es claramente la plantilla, no le interesará si la web es auto administrable y sus diversos beneficios, solo escuchará estos beneficios, si se llena los ojos con el diseño.


  • Por este motivo la elección de la plantilla tiene que ser la adecuada, nos puede llevar más tiempo de lo debido pero la elección de la plantilla justa, nos va a ahorrar muchísimas idas y venidas con nuestro cliente.
    Si llevamos años trabajando con Joomla, en el momento que tenemos la entrevista con el cliente, nosotros automáticamente ya tenemos pensado la plantilla indicada para el trabajo, pero si recién comenzamos en este mundillo, vamos a tener que hacer una buena investigación por internet.
    Existen muchísimas plantillas para Joomla, tanto comerciales como no comerciales en este tutorial solo vamos a trabajar con plantillas no comerciales, de esta manera no vamos a gastar dinero y vamos a aprender a trabajarlas en su totalidad.
    Vamos a trabajar con la plantilla Simple Tech y en la web Joomla themes podrás encontrar varias plantillas gratuitas para desarrollar tus páginas.
    En la plantilla Simple Tech, tenemos la opción de descarga y una vista de “Module positions” que son las posiciones de la plantilla, esto nos será de gran utilidad.
    Entramos al administrador de Joomla y nos dirigimos a la opción instalar, e instalamos la plantilla en formato zip.

    Instalamos la plantilla en formato zip. Instalamos la plantilla en formato zip.

    Una vez instalada nos dirigimos a “extensiones” y en el desplegable seleccionamos la opción “Gestor de plantillas”. Seleccionamos la plantilla y le otorgamos el rango de predeterminada.

    Gestor de plantillas Gestor de plantillas

    Ahora nos dirigimos al sitio y vemos como la plantilla ya se encuentra instalada.

    Página web. Página web.

    Ahora vamos a crear el menú y otorgarle la posición correcta. Vamos a “Gestor de menú” para crear la primera parte del árbol de menú, hacemos clic en el número para entrar al menú.

    Gestor de menú. Gestor de menú.
    Elementos del menú. Elementos del menú.

    Entramos en el menú que está creado por defecto llamado “inicio” hacemos clic en el titulo.
    Podemos cambiarle el título por el que necesitamos.
    Un consejo al crear el árbol del menú, hay que ponerles nombres cortos, como los que vamos a utilizar en el tutorial, por ejemplo “productos” es un buen ítem de menú, pero “nuestros productos” es muy largo. Ahora seleccionemos el artículo.

    Editar elementos del menú. Editar elementos del menú.

    Elegimos el artículo indicado, en este caso inicio.

    Elegimos el artículo indicado. Elegimos el artículo indicado.

    Ahora tenemos que limpiar el artículo, para que se parezca lo menos posible a un blog. Joomla tiene iconos bastante básicos a nivel diseño, no recomendamos dejarlos, salvo que la web lo demande.

    Limpiar el artículo. Limpiar el artículo.

    Creamos otros dos ítems nuevos de menú, en este caso creamos “nosotros” y  “servicios”. Hacemos clic en “Guardar y nuevo”.  Vamos al icono seleccionar  y escogemos la opción artículo simple para linkear otro artículo.

    Le ponemos el nombre al artículo, en este caso Nosotros  y en “Elemento Padre”, si es superior lo dejamos por defecto, pero si queremos hacer sub menú, tenemos que seleccionar el menú que queremos. (Dejamos un ejemplo de menú desplegable, en la pestaña “Nosotros”). En seleccionar elegimos nuestro artículo y en parámetros de componente hacemos lo mismo que en el anterior, una vez terminado hacemos clic en “Guardar y nuevo”. Hasta terminar el menú completo.

    • Guardar y nuevo. Guardar y nuevo.
    • Menú. Menú.

    Ya creados los ítems, tenemos que otorgarle la posición correcta al menú. Para saber dónde va ubicado cada modulo, tenemos que tener las posiciones o normalmente llamadas “Module positions”. En este caso vienen las posiciones en la misma página de descarga, también la podemos encontrar en un archivo jpg dentro del archivo zip. O ponemos en cualquier buscador la siguiente frase (Nombre de la plantilla + module positions) y lo encontraremos con seguridad.

    Module positions. Module positions.

    Nos dirigimos a "Gestor de menú" y hacemos clic en “Menú principal”.

    Menú principal. Menú principal.

    En posición le vamos a dar el lugar indicado al menú; en este caso la posición es “Menú” esto varia depende la plantilla. 

    Gestor de módulos. Gestor de módulos.
    • Posición Posición
    • posición "Menú". posición "Menú".

    Hacemos clic en “Mostrar siempre los items en los submenús”. Esto acticvará el desplegable.
    Hacemos clic en “Guardar” y nos dirigimos al sitio para ver los cambios.

    Mostrar siempre los items en los submenús. Mostrar siempre los items en los submenús.
    • Página. Página.
    • Desplegable. Desplegable.

    Cambio de logo y favicon.
    Logo:
    Nos dirigimos vía FTP a la siguiente ruta (templates/jt004_j25/images). Y remplazamos el logo del sitio, por el actual. Tiene que tener el mismo nombre y extensión, en este caso (logo.png). Creación de logo.

    • FTP - Cambio de logo. FTP - Cambio de logo.

    Favicon (Es el logo que se detalla en la pestaña del navegador.):

    Tomamos el logo en formato png y lo abrimos con un editor de imágenes.  Elegimos algo que identifique al logo, lo recortamos, le cambiamos la medida por 16 X 16 y lo guardamos con el nombre (favicon) en formato (.ico). Luego lo subimos vía FTP.

    Raíz de template. Raíz de template.
    • Logo. Logo.
    • Favicon. Favicon.

    Para finalizar crearemos un formulario de contacto. Nos dirigimos a “Componentes” y seleccionamos la opción “Contacto”. Primero creamos una categoría y luego en contacto, creamos uno nuevo. Completamos el dato del “Nombre“ y escogemos la categoría creada. En “Detalles Contacto” rellena los datos de la página. Es fundamental agregar el correo electrónico, para que nos haga el formulario.

    • Componentes. Componentes.
    • Gestor de contactos. Gestor de contactos.
    • Gestor de menú. (Crear y publicar la pestaña contacto). Gestor de menú. (Crear y publicar la pestaña contacto).
    • Contacto único. Contacto único.
    • Vincular, formulario de contacto. Vincular, formulario de contacto.
    • Página. Página.

    Si quieres cambiar los iconos, entra  via FTP a la siguiente ruta (tudominio/media/contacts/images/) y podrás encontrar todas las imágenes para manipularlas o reemplazarlas.

    FTP. FTP.

    Consejo:

    Puedes tener problemas con el idioma del sitio (Si vienes siguiendo los tutoriales y migraste el Joomla 1.5 a la versión 2.5). Podrás tener problemas con el idioma de la página.
    Ve a gestor de idiomas eliges en todas las opciones “Español” y luego dirígete a “Gestor de Plugins” y activa el siguiente plugin “System - Language Code”.

    Plantilla:  Link

¿Y tú, qué opinas?

  • #1 DescargaOn.com
    DescargaOn.com domingo, 05 de agosto de 2012, 21:34

    Muy buena la serie de tutoriales de joomla, aumque me gustaria que hicieran un tutorial enseñandonos como adaptar nuestra plantilla de dreamweaver o photoshop a joomla.

    Responder >> Attention Minus Plus Votos: 0 de 0
  • #2 sayyid
    sayyid lunes, 06 de agosto de 2012, 04:11

    Por favor, sigue con los tutos y tantos como puedas que estoy aprendiendo Joomla gracias a ti !!!! Y los sigo al pie de la letra.

    Responder >> Attention Minus Plus Votos: 0 de 0
  • #3 edspal
    edspal lunes, 06 de agosto de 2012, 04:56

    Por favor pueden subir en algun lugar los tutos en pdf para bajarlos
    desde ya gracias

    Responder >> Attention Minus Plus Votos: 0 de 0
  • Cargando...Cargando...

  • nuevo comentario
    Nombre

    Campo obligatorio

    Email

    Escriba una dirección de correo electrónico con el formato sunombre@ejemplo.com.

    Campo obligatorio

 
Ir arriba