x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.

Tutorial Joomla. Crear Página Offline

Publicado por BIAlita en Joomla
página offline en Joomla
5.0 de 5 basado en 3 voto(s)
  / 3
PocoMucho 

La página offline de Joomla también entra en el diseño del sitio, es algo que podemos usar desde la instalación o cuando ponemos la pagina web en mantenimiento.

En este ejemplo integré un contador que muestra los días restantes para publicar el sitio pero también pueden integrar cualquier elemento que necesiten.

Por supuesto que en el directorio de extensiones, pueden descargar o comprar algunos que ya realizan esta función, como n3t coming soon o AWDoffline que es de pago, pero siempre es bueno saber cómo hacerlo uno mismo.

Como todas las modificaciones que realicemos en Joomla, debemos hacerlo vía override, es decir, editar o crear archivos en el template que estemos utilizando , para que al hacer un update en la versión de Joomla, no perdamos éstos cambios; por ésta razón el primer paso es copiar el archivo /templates/system/offline.php a la ruta /templates/mi_template/offline.php.

*Para éste tutorial utilicé el template de Joomla beez_20.

En éste contador utilizaremos 3 archivos js, que irán en la carpeta /templates/beez_20/javascript, una vez que los tenemos integrados, en la sección <head> del index.php debemos agregar sus script

 

<script language="Javascript" type="text/javascript"

src="/<?php echo $this->baseurl ?>/templates/beez_20/javascript/jry-1.4.4.js"></script>


<script language="Javascript" type="text/javascript"

src="/<?php echo $this->baseurl ?>/templates/beez_20/javascript/jry.lwtCountdown-1.0.js"></script>


<script language="Javascript" type="text/javascript"

src="/<?php echo $this->baseurl ?>/templates/beez_20/javascript/misc.js"></script>

 

También manejaremos una hoja de estilos específicamente para la página de offline, la cual llamaremos style.css y deberá estar en templates/beez_20/css, y en el index.php lo agregamos

<link rel="stylesheet"

href="/<?php echo $this->baseurl ?>/templates/beez_20/css/style.css" type="text/css" />

 

Como vamos a utilizar de igual forma los campos y estilos originales, haré una copia del archivo /templates/system/css/offline.css a templates/beez_20/css/offline.css y en el index.php cambiaré su ruta.

<link rel="stylesheet"

href="/<?php echo $this->baseurl ?>/templates/beez_20/css/offline.css" type="text/css" />

 

En el video pueden ver el proceso completo y descargar los archivos utilizados en este ejemplo.

boton de descarga

No olviden que podemos incorporar varios elementos a ésta página para no desaprovechar la oportunidad de que los visitantes conviertan, pensemos en está página como una Página de Aterrizaje (Landing Page), por ejemplo:

1. Mostrar un formulario para newsletter
2. Botones para seguir nuestras redes sociales
3. Teléfono de contacto que puedan leer los dispositivos móviles
4. Mostrar un formulario de contacto
5. La ubicación de su empresa o negocio

Pueden ver varios ejemplos de éste tipo de páginas de lanzamiento aquí http://www.designyourway.net/blog/inspiration/28-intriguing-launching-soon-pages/

 

Te agradecería nos regalaras un +1 o votaras el artículo en la parte superior para seguir creando contenidos interesantes

 

Soy CEO de . Fundadora y co-administradora del grupo Joomla en México, también cuento con un Canal de YouTube sobre SEO Joomla y Wordpress que te invito visitar. Estoy certificada en Google Adwords y Google Analytics. Sígueme en mi perfil de Google + y salúdame para conocerte.

x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.