En este post quiero explicar cómo podemos crear el lanzamiento de una página web con un contador utilizando las herramientas que nos aporta el tema DIVI de Elegant Themes y sin utilizar ningún plugin.
Vamos a trabajar con el tema DIVI el más potente y flexible de los temas que ofrece Elegant Themes para WordPress.
Cómo habréis visto en algunas páginas web a veces se pone un contador regresivo que cuenta días, horas, minutos y segundos hasta una determinada fecha del calendario en la cual se hace oficial el lanzamiento de una página web. En ese periodo se realizan diferentes promociones en redes sociales para aumentar la expectación. Finalmente en el día y hora señalada se realiza el lanzamiento quitando el contador y mostrando públicamente la web.
DESCUENTO DIVI
1.- ¿Qué queremos conseguir en la página web?
a.- Crear una página de inicio con un contador regresivo que marque los días, horas, minutos y segundos para el lanzamiento público de la página web.
b.- Que se pueda acceder al Front Office de la página web por parte de los miembros del equipo para hacer los últimos retoques y compartir opiniones sobre el desarrollo de la misma. El público general sólo debe poder acceder al contador.
c.- Ya sabemos que la utilización de plugins ralentiza las páginas web por lo que vamos a intentar no utilizar ningún plugin para este cometido.
2.- ¿Cómo lo haremos?
Tenemos creada una página web con 6 pestañas: Inicio, nosotros, servicios, equipo, contacto y blog.
La página de inicio está puesta como home como podemos ver en «Ajustes > Lectura» del panel de administración de nuestra instalación de WordPress.
En la imagen podemos ver cómo está configurado que la página inicial o home que muestra WordPress sea la página denominada INICIO.
Lo que vamos a hacer es crear una página nueva que vamos a llamar “contador” y esta será la página que pondremos como home o página inicial de la web.
Por lo que si escribimos la url del sitio web “www.miweb.es” nos aparecerá el contador. Si por el contrario escribimos “www.miweb.es/inicio” accederemos a la que será la página inicial cuando llegue el momento del lanzamiento de la web y quitemos la página del contador.
3.- Creamos la página contador.
Queremos que hasta que no llegue el día, hora, minuto y segundo de lanzamiento de la página web aparezca un contador regresivo con un fondo. Lógicamente esta página no puede tener ningún tipo de menú ni enlaces a ninguna otra parte de la web.
Para crear la página de contador con DIVI vamos a “Páginas > añadir nueva” y pulsamos el botón de “use page builder” para activar el constructor de páginas de DIVI.
En el bloque “Atributos de página” opción “plantilla” tenemos que seleccionar “Blank Page” para utilizar una plantilla vacía. Es decir, una plantilla sin encabezamiento (logo y menú).
En el page builder vamos a añadir una sección pulsando el botón “Add section”. En la sección añadiremos una imagen como background de 1280 x 1280 px. Para ello, tras añadir la sección pulsamos el botón formado por tres rayas horizontales en la solapa azul que aparece en el lateral izquierdo del bloque de sección. Al desplegarse los elementos de configuración pulsaremos el botón “Upload an image” en el apartado “Background Image” para subir la imagen de fondo de la página web del contador.
Dentro de dicha sección vamos a colocar tres bloques:
a.- Bloque de texto (text): en este bloque escribiremos un texto que aparecerá por encima del contador.
b.- Bloque de cuenta atrás (Countdown Timer): este bloque mostrará el contador de cuenta atrás para el lanzamiento de la web. Para configurar este bloque hay que pulsar en las tres rayas horizontales que aparecen a la izquierda del bloque. En la configuración solamente habrá que incluir la fecha y hora del final de la cuenta atrás rellenando la etiqueta “Countdown To”.
c.- Bloque de texto (text): en este bloque pondremos saltos de línea para que la imagen de fondo cubra toda la pantalla. Los saltos de línea los incluiremos introduciendo el texto “ ” varias veces con el editor de texto pero con la pestaña “visual” no activada.
Realizado todo esto ponemos a la página el nombre “contador” y la publicamos.
4.- Ponemos la página contador como home
Para que al acceder a la url de la página web aparezca el contador en vez de la página de inicio actual debemos ir a “Ajustes > Lectura” en el menú lateral izquierdo de WordPress. En la opción que dice “Página frontal muestra” pondremos el check box en “Una página estática (seleccionar abajo)” y en “Página inicial” elegiremos en el desplegable la página con el nombre “contador”. Guardamos cambios.
5.- Trabajo terminado
A partir de ahora si alguien accede a la url de la página web, por ejemplo: “www.miweb.es“ verá la página denominada contador que hemos creado con una cuenta atrás hacia el día y hora en que se producirá el lanzamiento oficial de la página web. Pero si somos un miembro del equipo y queremos acceder a la web para ver las últimas modificaciones que se han realizado podremos hacerlo a través de la url “www.miweb.es/inicio “accediendo a la que será la futura página de inicio del sitio web y desde aquí a todas las páginas interiores del sitio.
Hemos creado una página de lanzamiento y cuenta atrás sin haber tenido que utilizar ningún plugin de mantenimiento o contador gracias a la potencia y flexibilidad del tema DIVI de Elegant Themes.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Buenas tardes.
Me gustaría hacerle una consulta si es tan amable.tengo entendido que divi es una plantilla excelente pero que es pesada y no posicionan bien las webs con divi.
Que opinas al respecto por favor? Muchas gracias
Hola Jorge,
no estoy de acuerdo con esa afirmación ni mucho menos. Acabo de realizar un test de velocidad con Google page speed Insights sobre esta web que utiliza Divi y los resultados son: Móvil: 77/100 y Escritorio: 90/100. Estos son resultados excelentes. También es cierto que el hosting también influye y bastante en la velocidad de carga de la web (yo utilizo el mejor :-)).
Aquí tienes un comparativo de velocidades de plantilla entre divi y las más conocidas de theme forest.
Como te digo esta web que estás viendo está hecha con Divi y la velocidad y posicionamiento son muy buenos. En cualquier caso, para el posicionamiento hay otros factores mucho más importantes que la velocidad de carga.
Un saludo
Gracias por la respuesta Joaquin. Me parece muy correcto lo que dices. Por matizar un poco mas, querria decir ¿si la web que se va a realizar es una web sencilla o una landing page quiza divi no tiene demasiado codigo y elementos innecesarios para una web de este estilo?
Muy amable un saludo.
Hola,
Para una landing page podrías usar una plantilla más sencilla que Divi, pero también es cierto que con una plantilla muy sencilla a lo mejor no dispones de los recursos de diseño adecuados para hacer algo en condiciones.
Para una web sencilla yo utilizaría Divi sin dudarlo. Además Divi, incluye recursos que te van a hacer instalar menos plugins. Te evitarás instalar plugins de formularios de contacto, o de crear botones, sliders, etc.
En cuanto a los tiempos de carga, yo estoy muy satisfecho con la velocidad de la plantilla. De hecho yo utilizo Divi, hoy en día, para el 100% de mis proyectos con WordPress y/o Woocommerce.
Un saludo
Hola Joaquín, tengo una pregunta. Soy pintor y quiero hacer un portofaolio con DIVI y después convertirlo en tienda virtual, Me gusta mucho el tema “Dorsey” ( http://madebyminimal.com/demo/dorsey ) pero cuesta 100 euros y el puglin de la tienda virtual se cobra aparte. ¿Podrias decirme si DIVI puede adaptarse hasta tener una imagen minimalista idéntica y además una fácil navegación y ligereza como «Dorsey»?
Muchas gracias por tu ayuda
Hola Julio,
No existen dos plantillas iguales. Por lo tanto la pregunta que me planteas: «¿Podrias decirme si DIVI puede adaptarse hasta tener una imagen minimalista idéntica…? la respuesta es no. Cada plantilla es diferente y tiene un aspecto diferente.
En cuanto a si se puede poner un menú lateral en Divi como se muestra en la plantilla de dorsey, la respuesta es si.
En cuanto a como se ve el portfolio en Divi, aquí tienes un ejemplo:
Portfolio filtrable por categorías: http://www.elegantthemes.com/preview/Divi/filterable-portfolio-grid/
Portfolio sin filtro: http://www.elegantthemes.com/preview/Divi/portfolio-grid/
Un saludo