Saltar al contenido

Como crear una página en construcción fácilmente

sitio en construccion

A veces cuando tienes cuando creamos un nuevo proyecto o hacemos modificaciones nos interesa poner una página con un mensaje de “página en construcción” de esta forma podemos darle información a tus visitantes. A continuación voy a enseñarte la forma de hacer tu página en construcción de una forma fácil y rápida.

Crear una página en construcción o en mantenimiento en WordPress o Woocommerce

Si estas haciendo una web en en WordPress o una tienda online en Woocomerce, hay plugins de pagina en construcción para WordPress que te facilitaran mucho la vida. Entre los mejores plugins de WordPress de sitio en construcción y en mantenimiento he elegido es WP Maintenance Mode & Coming Soon a continuación vamos a ver como instalarlo y configurarlo.

Instalar WP Maintenance Mode & Coming Soon

Nos vamos a plugins > añadir nuevo y buscamos WP Maintenance Mode & Coming Soon y elegimos el que es de Themeisle y le damos a Instalar ahora y después a Activar

instalar wp maintenance mode

Configurar el contenido, diseño y las opciones del plugin WP Maintenance Mode & Coming Soon

A continuación nos vamos a Ajustes > WP Maintenance Mode y nos aparecerá el panel principal del plugin. Ahora para activarlo vamos a dejarlo de la siguiente forma y a continuación te digo los motivos.

configuración modo mantenimiento

Para activar el modo de página en construcción o mantenimiento le damos a activar, le damos a ‘Sí’ a Evitar para los robots de búsqueda, esto es mejor para el SEO ya que los motores de búsqueda no verán la página en mantenimiento, de todas formas si la página tiene contenido indexado y posicionado los mejor es que esté en construcción o mantenimiento el menor tiempo posible.

En la pestañan Diseño ponemos el titulo, el encabezado y el contenido del mensaje. Yo para el diseño le vamos a poner todas las letras en blanco de esta forma:

color texto

En fondo elegimos Fondo Predeterminado y elegimos el fondo que mas nos guste de los fondos que aparecen, yo en este caso voy a elegir uno oscuro para que las letras blancas se vean bien y le damos a Guardar ajustes.

fondo

Y para terminar en la pestaña módulos podemos activar la cuenta a tras, redes sociales y formulario de contacto. Con esto ya tendremos hecho la página en construcción o mantenimientos, para ver el resultado tienes que poner tu web en modo incognito del navegador, ahora puedes ver el resultado:

sitio en construccion

Bueno ya puedes ver lo fácil que es hacer una página en construcción con WordPress, la personalización queda a tu cuenta. Para desactivarlo solo lo tienes que darle a desactivar en el estado del panel principal del plugin.

Crear una pagina en construcción HTML

Si aun no tienes nada en tu web o estas haciendo un desarrollo a medida lo mas sencillo es crear una simple pagina en construcción con HTML. Para ello nos vamos a basar un una plantilla básica y te voy a decir como configurarla. Los pasos son los siguientes:

Descargar plantilla página en construcción básica

  • Nos vamos aquí y entraremos en GitHub en el proyecto que he creado de una plantilla básica
  • A continuación vamos al boton code y a download zip
    descargar zip

Esto nos descargará un archivo zip el cual tenemos que descomprimir en una carpeta

Editar la plantilla de página en construcción

  • Ahora vamos a editar la plantilla para ello solo tienes que abrir en el archivo index.html
  • Editamos el porcentaje de progreso que quieras para esto hay que editarlo en 3 sitio y puedes verlo en las siguientes imágenes:
     
  • Ahora editamos el titulo con el nombre de tu empresa o sitio web y la descripción si queremos, si nos apetece en la descripción podemos poner un email de contacto un teléfono o la fecha de apertura del sitio web
  • Para terminar vamos a cambiar el logo.png por el de nuestra empresa/web por defecto trae una imagen de “sitio en construcción” con lo cual si no quieres poner el logo no tiene por que ponerlo la imagen es de dimensiones 1250px X 938px pero si tu logo tiene otras dimensiones cambia la linea del index.html donde poner  aspect-ratio: 1250 / 938; por el de las dimensiones de tu logo.

Sube el contenido a tu página web

Para terminar sube los archivos a la raíz de tu proyecto por FTP, si no sabes como lo puedes ver el el artículo como configurar el cliente de Filezilla

Para terminar te voy a poner un video muy interesante de como hacer una página de construcción con html5 fácilmente el método es parecido al que hemos visto anteriormente pero con otro enfoque

Ahora que sabes como editar o crear una plantilla de en construcción te recomiendo que el eches un vistazo a el artículo de las mejores plantillas de páginas en construcción

Página en construcción en Prestashop

Si estás montando una tienda online en Prestashop y necesitas ponerla en modo mantenimiento o en construcción, te recomiendo que le eches un vistazo al artículo de activar modo mantenimiento en Prestashop 1.7

Puntuación

Compartir este Articulo

Settings