Características del Template JA Kyanite II

Última actualización el Miércoles, 27 de Enero de 2010 16:50 Escrito por Soledad Duarte Lunes, 25 de Enero de 2010 10:23

Guías - Diseño y administración Web con Joomla!

Introducción

La mejor manera de personalizar el aspecto estético de un sitio web Joomla!, como dijimos en varias ocasiones, es utilizando templates comerciales desarrollados por diseñadores profesionales y expertos en Joomla!.

En esta ocasión, vamos a analizar y explicar todas las características, funcionalidades, y especificaciones de un template que hemos seleccionado. Se trata de JA Kyanite II, de Joomlart , cuyo demo podrás ver en: http://templates.joomlart.com/ja_kyanite_ii/

1.- Sección Home / Página Principal

Lo que debes interpretar cuando miras este template es:

En la posición nº1 (imagen anterior): Es aquí donde apacerá tu logotipo, trata de ver si el que posees podrá adecuarse al alto de la cabecera y podrá visualizarse correctamente.

En la posición nº2: Este es el módulo de busqueda. Activado, le permitirá al usuario realizar búsquedas específicas dentro de tus contenidos.

En la posición nº3: En el menú principal se insertarán los enlaces a cada sección correspondiente de tus servicios, empresa, contacto.

En la posición nº4: Aquí podrás destacar tus principales productos y/o servicios, de un lado colocarás la imagen y del otro aparecerá una pequeña introducción. Recuerda que las imágenes deberan respetar el ancho y alto del ejemplo, y deben ser de muy buena resolución/calidad.

En la posición nº1: Aquí hay unos 5 bloques, se pueden utilizar todos o menos. Podrás insertar imágenes de los productos o servicios más solicitados, o nuevos, etc.

En la posición nº2: Aquí es donde iran los contenidos (documentos - artículos de contenidos). En el templates se visualiza el contenido en formato de blog: indica fecha, autor, una imagen pequeña + texto de introducción y el enlace leer más, debajo aparece otro artículo. Si deseas crear una sección de blog, este será el estilo que tomará por defecto.

En la posición nº3 y nº4: Aquí hay módulos de enlaces hacia contenido/documentos web internos y pequeñas introducciones de texto + imágenes. Lo que no se recomienda es utilizar todos y cada uno de los módulos que tiene el template, ya que sino la Home tiende a tener demasiadas visualizaciones en las cuales pueden distraer al usuario de lo que más le importa ver.

En nº1: Aquí se activaron más módulos, iran debajo del contenido.

En nº2: Aquí podrás activar, si es necesario, otro menú. Usualmente es para secciones que pertenecen a tu sitio y que no quieres que esté tan a la vista, es decir no son tan importantes.

En nº3: El pie de página. Aquí debe ir el Copyright, enlace hacia el diseñador/desarrollador.

En nº4: El template tiene una versión para Móviles disponible.

2.- Sección Typography / Tipografía

En esta sección se indica los estilos que tiene disponible el template.

2.1- En primer lugar indica los tamaños que tendran los encabezados H1, H2, H3, etc (Heading 1, 2, 3):

2.2- "Special Content"

2.2.1- Para obtener el siguiente estilo debes agregar el texto dentro de la etiqueta <pre>, también puedes colocar el texto dentro de la etiqueta <div> sólo que debes agregarle la clase "code", te debe quedar <div class="code">

2.2.2- Para resaltar alguna frase dentro de un texto debes usar la etiqueta <span class="highlight">FRASE QUE QUIERES RESALTAR</span>

2.2.3- Para que la primera letra de un párrafo sea de mayor tamaño (ver siguiente imagen) debes agregar la etiqueta <span class="dropcap">PRIMERA LETRA</span>

2.2.4- Para agregar comillas: Hay 2 formas.

2.2.4.1- Una es que agregues la etiqueta <blockquote>TEXTO</blockquote>. Este agregará sólo las comillas de apertura.

2.2.4.2- Otra es que agregues las etiquetas <blockquote><span class="open">PRIMERA LETRA</span>RESTO TEXTO<span class="close">ÚLTIMA LETRA </span></blockquote>

2.3- Lists Style

2.3.1- Estilos de viñetas. Por defecto las viñetas en orden (1,2, etc) y sin orden aparecerán así:

2.3.2- Para que tengan una imagen (verificación, estrella, etc) deberás agregar los siguientes estilos:

2.3.2.1- Para que aparezcan estas flechas debes agregar <ul class="arrow"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

2.3.2.2- Para que aparezcan estas flechas debes agregar <ul class="phone"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

2.3.2.3- Para que aparezcan estas flechas debes agregar <ul class="star"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

2.3.2.4- Para que aparezcan estas flechas debes agregar <ul class="address"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

2.3.2.5- Para que aparezcan estas flechas debes agregar <ul class="checklist"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

2.3.2.6- Para que aparezcan estas flechas debes agregar <ul class="email"><li><span class="icon"> </span>TEXTO VIÑETA</li></ul>

3.3- Para que el número aparezca como la siguiente imagen, debes agregar <p class="blocknumber-1"><span class="bignumber">NUMERO A RESALTAR</span>RESTO DEL TEXTO</p>

2.4- Para que el número aparezca como la siguiente imagen, debes agregar <p class="blocknumber-2"><span class="bignumber">NUMERO A RESALTAR</span>RESTO DEL TEXTO</p>

2.5- Para que el número aparezca como la siguiente imagen, debes agregar <p class="blocknumber-3"><span class="bignumber">NUMERO A RESALTAR</span>RESTO DEL TEXTO</p>

3.- Paragraph Style

Usar <p class="error"><span class="icon"> </span>TEXTO A RESALTAR</p>	Usar <p class="cart"><span class="icon"> </span>TEXTO A RESALTAR</p>
Usar <p class="message"><span class="icon"> </span>TEXTO A RESALTAR</p>	Usar <p class="doc"><span class="icon"> </span>TEXTO A RESALTAR</p>
Usar <p class="tips"><span class="icon"> </span>TEXTO A RESALTAR</p>	Usar <p class="note"><span class="icon"> </span>TEXTO A RESALTAR</p>
Usar <p class="key"><span class="icon"> </span>TEXTO A RESALTAR</p>	Usar <p class="photo"><span class="icon"> </span>TEXTO A RESALTAR</p>
Usar <p class="tag"><span class="icon"> </span>TEXTO A RESALTAR</p>	Usar <p class="mobi"><span class="icon"> </span>TEXTO A RESALTAR</p>

5.- Boxes and Legends Style

Usar <p class="box-sticky">TEXTO</p> para lograr lo siguiente:

Usar <p class="box-download">TEXTO</p> para lograr lo siguiente:

Usar <p class="box-grey">TEXTO</p> para lograr lo siguiente:

Usar <p class="box-hilite">TEXTO</p> para lograr lo siguiente:

Usar <div class="legend"><h3 class="legend-title">TITULO</h3><p>RESTO TEXTO</p></div> para lograr lo siguiente:

Usar <div class="legend-hilite"><h3 class="legend-title">TITULO</h3><p>RESTO TEXTO</p></div> para lograr lo siguiente:

6.- Special Module Style

Estilos para los módulos:

En el módulo (parte administrativa) en class suffix: agregar _badge badge-top

En el módulo (parte administrativa) en class suffix: agregar _badge badge-pick

En el módulo (parte administrativa) en class suffix: agregar _badge badge-new

En el módulo (parte administrativa) en class suffix: agregar _badge badge-hot

7.- Sección Explore

En esta sección muestra las características del template:

1- Tipos de Menú Principal:

Split Menú: Con este tipo de menú los sub-enlaces (sub-menu) no se visualizan, se debe acceder al enlace padre para ver el resto.
CSS Menú: Con este tipo de menú si se visualizan los sub-enlaces, sólo que tienen un estilo más recto y sin efectos desplegables.
Moo menú: Con este tipo de menú se visualizan los sub-enlaces con estilo más recto y efectos desplegables.
Mega menu: Este es el menu por defecto, con este tipo de menú podrán visualizarce con un estilo moderno, con sub-enlaces en 2 a 3 columnas.

2- Layout: En esta columna están los enlaces hacia contenido con:

Ancho máximo
Columna Izquierda + Contenido
Contenido + Columna Derecha
3 Columnas

De tal manera de que si en algún contenido, activas o no, las columnas podrás ver como el ejemplo (con tu contenido).

3- Colores del Template: Cambiará el fondo del enlace activo (menu principal), color del texto del enlace, fondos de cabecera de los módulos. Los colores disponibles son:

Color Rojo: por ejemplo
Color Azul: por ejemplo
Color Naranja: por ejemplo
Color Verde: por ejemplo
Estilo Madera: por ejemplo

8.- Sección About Joomla (sobre Joomla)

Como lo indica el título en la sección está el contenido que trae Joomla al instalarlo con los datos de ejemplo.

En la primer columna, son enlaces al contenido. Navega por cada uno de ellos para ver cómo se visualiza, ya que si utlizas algun contenido se visualizará como te muestra.

En la segunda columna está el formulario de Acceso, este formulario es propio de Joomla no debes instalar nada extra, es decir, si tienes o no este template el formulario estará disponible. Sólo que con el template JA Kyanite II, se podrá visualizar así:

9.- Sección Contact Us / Contáctanos

Esta sección tiene el formulario simple de contacto que trae Joomla, esto quiere decir que si no tienes el template, igual lo tendrás (deberás configurarlo desde la administración de tu sitio en Joomla)