Hoy en día los videos son elementos que funcionan muy bien para el marketing, pero a la hora de colgarlo en una web, hay que tener determinadas consideraciones si no queremos desesperar a nuestra audiencia potencial.

 

Ahora 20% de descuento Plantilla DIVI

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.

Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.

DESCUENTO PLAN YEARLY ACCESS

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.

Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO PLAN LIFETIME ACCESS

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

Todo sobre la plantilla DIVI, la mejor para WordPress: Plantilla Divi

 

 

 

 

1.- Ventajas de tener un video en la home

 

Poner un vídeo en la página de inicio de una web es un recurso que todavía no se utiliza demasiado. Por ello, es algo que puede ser innovador y bien valorado por los visitantes potenciales del sitio web.

 

Aprende en este post a crear un slider de Vídeos cargados de youtube con WordPress y Divi: Slider de Vídeos

 

Un vídeo de calidad, habitualmente producirá sorpresa y reconocimiento en el cliente que visita el sitio web.

Haz clic en la siguiente imagen para ver un ejemplo de un vídeo tipo background o fondo en la página de inicio o home de una web. En este caso, es el sitio web de una Escuela de Negocios (Antigua Escuela Europea de Negocios, ahora conocida como EBF)

 

Ejemplo de vídeo background fondo en la home

Ejemplo Vídeo de fondo en la página de inicio

VER VÍDEO

SUPER DESCUENTO DIVI

 

 

2.- Inconvenientes de tener un vídeo en la página de inicio

 

Si el vídeo es pesado y se carga lentamente puede llegar a producir que los potenciales visitantes acaben abandonando nuestra página web.

Es decir, si no tomamos algunas precauciones podemos conseguir el efecto contrario, pasando de la sorpresa y reconocimiento a la impaciencia y hostilidad hacia el sitio.

 

 

2.1.- Ojo con los dispositivos móviles y los vídeos

 

Cada vez se usan más los dispositivos móviles para acceder a página web. Tenemos que tener en cuenta que los dispositivos móviles cuando estamos fuera del alcance de la red WIFI de nuestra casa u oficina, a la hora de descargar un vídeo lo harán mucho más lentamente que un ordenador con una conexión a internet estándar en el interior de una vivienda u oficina.

También es cierto que las redes móviles cada vez tienen más potencia. Pero hoy en día sigue siendo insuficiente, por lo que mi recomendación es sustituir el vídeo por una imagen de fondo cuando se visualiza la web a través de un dispositivo móvil.

Intentar cargar el vídeo de fondo en un dispositivo móvil puede producir frustración, desesperación y finalmente el abandono de la página por parte del visitante.

La plantilla Divi y ya incluye de manera automática este funcionamiento.

 

 

2.2.- Vídeos y textos en la home

 

En algunos sitios web, el poner un vídeo en la home o página de inicio suele estar acompañado de la supresión casi total de contenido de texto. Para el tema del posicionamiento web SEO, no es nada beneficioso.

Por lo que mi recomendación es que, aunque pongamos un vídeo de fondo, no olvidemos incluir otros recursos de texto e imágenes en la página de inicio. Así como las etiquetas H1, H2, etc.

Tenemos recursos como acordeones (módulo de Divi y otras plantillas) para poder incluir texto en una página de una manera limpia.

 

Si quieres que te hagas tu página web aquí tienes el PAQUETE WEB BÁSICO y el PAQUETE WEB AVANZADO, si tienes cualquier duda contacta conmigo

SUPER DESCUENTO DIVI

 

 

3.- A qué me refiero, cuando hablamos de un vídeo background o de fondo en la home

 

Voy a intentar aclarar ahora a que me refiero cuando hablo de un vídeo tipo background o de fondo en la web.

 

 

3.1.- No estamos hablando de la títpica intro previa a la visualización de la web

 

Habréis visto en algunas páginas web el típico vídeo corporativo introductorio del sitio que podemos saltar pulsando un botón para poder navegar por la página web.

Cuando hablamos de un vídeo tipo background o de fondo en la web, no hablamos de este tipo de vídeo introductorio.

Este tipo de webs muestran un vídeo introductorio previo a la visualización de la home. Es fácilmente detectable que esa primera página no es la home, ya que esa primera página no tiene header con su menú ni footer.

Es cierto, que cada vez se ven menos sitios web de este tipo. Ya que tiene muchos inconvenientes a nivel de SEO. No tener en la primera página enlaces para que los boot de Google puedan acceder a toda la web es bastante negativo.

Si quieres poner un vídeo corporativo, pues ponlo en la home o en la página de “nosotros” (la empresa o quienes somos)

 

curso online wordpress con la plantilla Divi

CURSO ONLINE WORDPRESS + DIVI 3.0

Curso WordPress online

 

 

3.2.- No estamos hablando de un vídeo incrustado de Youtube o Vimeo

 

No estamos hablando de un vídeo subido a youtube o Vimeo e incrustado en la web.

Un vídeo incrustado es un vídeo subido a una plataforma especializada como youtube o vimeo y que luego a través de un código de inserción se incluye en una entrada de blog o página.

El vídeo suele aparecer con los iconos de reproducción y un enlace a la página del vídeo en Vimeo o Youtube. Es un vídeo que no suele aparecer a tamaño completo y que no se reproduce de manera automática.

 

Video de youtube incrustado en post

Ejemplo de vídeo de Youtube incrustado en entrada de blog

 

Esta es una forma muy interesante para ofrecer vídeos en post o entradas de blog. De hecho, yo uso este sistema habitualmente. Pero como digo, en este post no estamos hablando de los típicos vídeos incrustados de youtube. Sino de vídeos de anchura completa que se inician con la carga de la página y se repiten indefinidamente.

La principal ventaja de utilizar vídeos incrustados es que la carga la realiza la plataforma de vídeos y no nuestro hosting.

 

 

3.3.- Estamos hablando de un background o fondo en movimiento.

 

Habitualmente utilizamos imágenes a modo de background en algunas páginas web. En este artículo estamos hablando de vídeos en bucle que actúan como un backgroungd móvil de la página de inicio o home. Por supuesto este background móvil debe decir algo tiene que tener un mensaje.

El vídeo como buen background que queremos que sea no puede pararse, debe estar funcionando en bucle. Por lo que trabajaremos con videos no demasiado largos, para que tengan poco peso y se carguen fácilmente.

SUPER DESCUENTO DIVI

 

 

4.- Elementos a tener en cuenta para poner vídeo de fondo.

 

a.- Duración y peso del vídeo: La duración del vídeo tiene una relación directa con el peso del mismo. Por lo que deberemos utilizar un vídeo de corta duración y ponerlo en bucle para que no finalizce. Yo recomiendo utilizar vídeos de menos de 30 segundos

Añade más de 90 nuevas funcionalidades a la plantilla Divi con el fabuloso plugin: Divi Booster

El vídeo no puede tener una alta calidad ya que si no será imposible reproducirlo adecuadamente en una página web.

Yo utilizaría vídeos con pesos inferiores a los 25 mb (Aunque la capacidad de reproducción del vídeo va a depender mucho del hosting en el que esté hospedada la web). Cuanto menos ocupe el video y mejor sea el hosting será mejor, ya que podrá ser reproducido sin “parones” por más visitantes potenciales de la web.

 

b.- Formatos del vídeo: El video es descargado y reproducido por el navegador web de cada visitante de la página, por lo que para tener el mayor grado de compatibilidad con el máximo número de navegadores web el formato del vídeo debe ser .MP4 o .WEBM.

 

c.- Hosting: Para que los tiempos de espera debidos a la respuesta del servidor en la descarga inicial del vídeo sean pequeños debemos contratar con una buena empresa de hosting.

Como la página inicial de la web va a contener un vídeo, la home va a tener un peso mayor del que suele ser habitual por lo que será importante disponer de un hosting que nos permita una transferencia mensual elevada y una buena respuesta ante varios visitantes simultáneos.

Por ambas consideraciones te recomiendo el hosting Webempresa un hosting de calidad, con discos duros SSD de alta velocidad y amplia transferencia mensual.

 

d.- Imagen en móviles: debemos sustituir el vídeo por una imagen de fondo cuando el acceso a la página web se realice a través de un móvil, ya que actualmente las líneas móviles aún no tiene un ancho de banda suficiente para que este tipo de descargas se haga de manera fluida cuando el móvil no tira de conexión Wifi.

 

e.- Plugin de cache: es muy interesante disponer de un plugin de caché que ayude a una carga de páginas más fluida y rápida.

SUPER DESCUENTO DIVI

 

 

5.- Como implementar el vídeo con el tema DIVI de Elegant Themes

 

Como implementar el vídeo dependerá de la plantilla y page builder utilizado.

Vamos a ver como podemos implementar un vídeo de fondo utilizando mi plantilla favorita, la mejor plantilla para wordpress, la plantilla Divi.

 

Antes de colocar el vídeo, debemos crear la página en la cual posteriormente pondremos el vídeo.

Utilizaremos el Divi builder o constructor de Divi para ello.

 

i.- ¿Dónde podemos poner el vídeo de fondo?: el vídeo que queremos que se muestre como fondo o background podremos ponerlo como fondo de una sección estándar, sección de anchura completa o como fondo de una sección especial.

En cualquiera de los 3 casos hay que seguir el mismo procedimiento.

Nota: las secciones son los contenedores más grandes de que dispone el divi builder. En este post te hablo un poco sobre la estructura del constructor de Divi y sus diferentes partes para que entiendas mejor de lo que estamos hablando: Divi builder

 

ii.- Configuración de la sección: Haremos clic en el botón de configuración de la sección en la cual queremos añadir el vídeo de fondo.

En la pestaña “Contenido” buscaremos el apartado “Fondo”. En este apartado tenemos la opción de añadir diferentes tipos de fondo: color continuo, degradado, imagen o Vídeo (en este orden)

 

cómo añadir un video de background con divi

Añadir un vídeo de fondo con Divi

 

iii.- Subir vídeo: para subir el vídeo haremos clic en la pestaña de vídeo (la última) y debajo haremos clic en el botón “+” para subir el vídeo.

Verás que hay dos bloques: Vídeo .MP4 de fondo y Vídeo .WEBM de fondo.

Según el formato de nuestro vídeo haremos clic en uno u otro.

A continuación, procederemos a subir el vídeo.

 

iv.- Tamaño del vídeo: lo normal es que el vídeo se adapte a la pantalla completa, pero en caso de que tengas problemas con las dimensiones puedes intentar solucionarlo con los dos apartados que aparecen debajo de la carga del vídeo.

Las opciones son “Anchura de vídeo de fondo” y “altura de vídeo de fondo”. Las dimensiones deben ser introducidas en píxeles.

 

v.- Permitir que otros reproductores pausen el vídeo cuando comience a reproducir: he utilizado esta opción en sus dos variantes y lo cierto es que no he encontrado diferencia alguna en la reproducción del vídeo. En ambos casos el vídeo entra en bucle o loop y cuando termina vuelve a comenzar de manera automática.

 

vi.- Imagen de fondo para móviles: antes hemos comentado que es muy interesante subir una imagen de fondo que se cargue en vez del vídeo cuando la web se visualiza a través de un dispositivo móvil.

Para ello iremos a la pestaña de “imagen”, que es la tercera, y haremos clic en el botón “+” para subir la imagen.

 

imagen en vez de vídeo en dispositivos móviles

Imagen de fondo que se carga en vez del vídeo en dispositivos móviles

SUPER DESCUENTO DIVI

 

 

 6.- ¿Interesa poner un header o cabecera semitransparente? ¿qué implicaciones puede tener?

 

Poner un header semitransparente o traslúcido con el vídeo de fondo detrás, crea una integración total de los elementos de navegación en el vídeo y esto es algo que llama gratamente la atención a los visitantes.

En el caso de la plantilla Divi, si hacemos que el header sea traslúcido (no opaco), el vídeo de fondo subirá y parte de este se colocará detrás del header o cabecera de la web.

Habitualmente esto hará que tengamos que utilizar un color claro en los ítems o elementos del menú, debido a que el vídeo + la capa translucida del header suelen crear una capa algo oscura.

 

En este post tienes más información sobre los diferentes tipos de diseños de header con Divi: Diseños header Divi

 

El principal problema que puede provocar el utilizar un color claro para los ítems del menú, es que en el resto de páginas donde no tengamos el vídeo tendremos un header semitransparente con un fondo blanco y los ítems de menú no se verán.

Ante esta situación os propongo dos opciones:

 

i.- poner una imagen de fondo en todas las cabeceras de todas las páginas

Esta es la solución que se ha adoptado en la página de EBF Murcia que estamos viendo en los ejemplos.

Si te fijas, en todas las páginas de la web se ha utilizado una imagen que hace las veces del vídeo, y de esta manera se consigue que los ítems de menú se vean bien en todas las páginas.

 

ii.- Opción de crear una blank page con menú y hacerlo transparente solo en esa página con Divi

Otra opción, en el caso de utilizar la plantilla Divi, podría ser crear una home especial con un menú especial. Me refiero a utilizar una “blank page” para la home.

Es decir, una página sin header ni footer. En esta página utilizaremos el “módulo menú” dentro de una sección de ancho completo.

Pondremos el vídeo como fondo de esa sección y el módulo menú con diseño semitransparente. Pero este menú será único en la home.

En el resto de páginas podremos usar un diseño de menú normal con ítems de menú oscuros.

SUPER DESCUENTO DIVI + REGALO

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
4.- CURSO MEMBERSHIP SITE (14 Clases)
5.- CURSO ELEMENTOR (14 Clases)
6.- CURSO ASTRA PRO (17 Clases)
7.- CURSO BLOOM + MAILCHIMP (7 Clases)
8.- CURSO SEO (19 Clases)
9.- CURSO BLOG WORDPRESS (32 Clases)
10.- CURSO WOOCOMMERCE (39 Clases)
11.- CURSO FLATSOME WORDPRESS (36 Clases)
12.- CURSO COLORES WEB (9 Clases)
13.- CURSO ANALYTICS (10 Clases)
14.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
15.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre la compra de mis cursos?
🙋🏻‍♂️** ¿Alguna duda sobre la compra de mis cursos? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com