¿Necesitas ayuda?

Plantilla propia

Si quieres usar tu propio diseño en tu página Jimdo puedes hacerlo con la opción Plantilla propia desde la sección Diseño. Esta función está disponible en todas las versiones de Jimdo (Free, Pro y Business). Hay algunas limitaciones y deberás integrar ciertas etiquetas en tu código para que el sistema de Jimdo lo reconozca.

Podrás utilizar lenguaje HTML5 así como CSS3, menús desplegables y muchas características más que te permitirán personalizar tu página. A continuación te describiremos como integrar tu propio diseño en tu página Jimdo.


Cómo integrar tu propia plantilla

Para integrar tu propia plantilla debes saber trabajar con códigos de HTML y CSS, y seguir estos pasos:

  1. Copia el código HTML e insértalo bajo la pestaña HTML
  2. Introduce las variables para la navegación, contenido, barra lateral y pie de página en la zona deseada
  3. Luego haz clic en xhtml para verificar tu código. Ten en cuenta que Jimdo sólo necesita la sección del body. La sección del head la puedes incluir más tarde en Editar head en los Ajustes de tu página
  4. Copia el código CSS, pegalo bajo la pestaña CSS y haz click en Guardar
  5. Sube las imágenes u otros archivos que necesites para la plantilla en la pestaña Archivos

Advertencia:

Te recomendamos lo intentes primero en una página JimdoFree de prueba. Jimdo no se hace responsable por los códigos que introduces en esta sección. Si dañas las funciones de tu página introduciendo códigos erróneos o perjudiciales debes intentar repararlo por ti mismo. Nuestro soporte no ofrece ayuda para temas relacionados con códigos externos.

Variables del sistema de Jimdo

Estos son los elementos que deberás integrar en tu plantilla propia:

 

Variables obligatorias:

Contenido:  <var>content</var>

Sidebar: <var>sidebar</var>

Footer:  <var>footer</var>

Navegación estándar: <var levels="1,2,3" expand="false" variant="standard" edit="1">navigation</var> o <var>navigation[1|2|3]</var>

 

Variables opcionales:

Para usar un menú de navegación desplegagle, deberás insertar:

Navegación (nested): <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>

 

Si quires incluir un menú tipo breadcrumb o miga de pan, deberás insertar:

Navegación (breadcrumb): <var variant="breadcrumb" edit="0">navigation</var>

 

Para especificar la posición del carrito de compras, deberás insertar:

Carrito de compras (shopping cart) <var>shoppingcart</var>

Nota:

En cuanto ingreses todos estos elementos podrás tener tu plantilla propia, puedes dar en la opción de xhtml para verificar que el código es correcto. Si hubiera algún error, con esta herramienta lo puedes identificar y después corregirlo.

Ejemplo estructura básica

Ejemplo de una página con plantilla propia


Contenido

<var>content</var>

 

Es la sección donde irá el contenido de tu página. En esta área podrás añadir el contenido en las diferentes subpáginas usando los módulos del sistema de Jimdo.

Sidebar o barra lateral

<var>sidebar</var>

 

Esta es otra de las secciónes donde podrás ingresar contenido a tu página. Sin embargo, a diferencia del área de contenido, los elementos que ingreses aquí se mostrarán en todas las páginas de tu sitio. El Sidebar lo puedes ubicar a uno u otro lado del contenido o debajo de éste.

 

Sugerencia:

Recomendamos ingresar elementos como contactos, redes sociales o alguna información importante acerca de tu empresa que quieras que aparezca en todas tus subpáginas.

Footer

<var>footer</var>

 

Es la sección de la plantilla donde aparecerá el inicio de sesión, así como otros enlaces del sistema. Ten en cuenta que en el footer o pie de página no se puede insertar ningún módulo de contenido.

Menú de navegación

El menú de navegación es donde puedes editar las subpáginas que desees ingresar a tu página. Para que el sistema de Jimdo reconozca la navegación de tu plantilla propia y puedas editar el menú de navegación desde las opciones del CMS, deberás colocar la variable:

<var levels="1,2,3" expand="false" variant="standard" edit="1">navigation</var>.

También puedes inlcuir la variable: <var>navigation[1|2|3]</var> aunque es una versión anterior aún funciona.

 

Además del menu de navegación estándar tienes la opción de incluir dos tipos de navegación más, el menú de navegación desplegable y navegación tipo breadcrumb (miga de pan), agregando las etiquetas correspondientes:

 

Navegación desplegable (nested):

<var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>

 

Navegación miga de pan (breadcrumb):

<var variant="breadcrumb" edit="0">navigation</var>

 


Nota:

Ten en cuenta que debes incluir los estilos CSS del menú de navegación en la sección de los CSS para que aparezca navegación desplegable cómo la has creado. Ver recomendaciones para dar estilo al menú de navegación.

Carrito de compras

<var>shoppingcart</var>

 

Con esta variable puedes ingresar el carrito de compras en cualquier parte de tu plantilla.

Nota:

No hay problema si no incluyes esta variable, ya que por defecto aparece dentro del sidebar o barra lateral.

Código CSS

 Después de ingresar el código HTML, copia y pega el código "CSS" en la sección correspondiente.

 

Para los estilos CSS que vas a dar a tu plantilla puedes usar los nombres de ids y clases que desees. Solo tienes que tener en cuenta incluir la clases del sistema para la navegación para espcificar estilos diferentes para cada nivel de y los estados como current, visited o hover.

 

CSS clases para el menú de Jimdo:

.j-nav-level-0 /* Primer nivel de navigaciónn level, elemento tipo UL */
.j-nav-level-1 /* Segundo nivel de navigaciónn level, elemento tipo UL */
.j-nav-level-2 /* Tercer nivel de navigaciónn level, elemento tipo UL */
.j-nav-parent /* Elemento de la lista superior al los elementos actuales*/
.j-nav-current /* Elemento actual del menú*/

 A cada una puedes añadir los diferentes selectores y pseudo clases como (li, a:visited, a:hover, etc.)

Archivos e imágenes

La función de plantilla propia de Jimdo cuenta también con la opción de subir imágenes y otras dependencias de tu plantilla, como archivos Javascript o jQuery. Para ello ve a la sección "archivos" dentro de las opciones de plantilla propia.

 

Recuerda que solo puedes usar estos formatos para imágenes: .jpg, .gif, .png.

 

Una vez subidas las imágenes, podrás ingresar los enlaces automáticamente con la opción "insertar imágenes", o escribiendo el código de la siguiente manera:

<img src="foto.jpg" alt="" />