Bienvenidos y en esta ocasión os quiero presentar un tutorial de uno de los más poderoso diseñadores de páginas web en WordPress. Este creador de temas en WordPress es sumamente versátil y extremadamente poderoso. Las últimas tendencias de diseño web las encontraremos en esta herramienta. Los temas de diseño que se pueden producir son sin duda de alta calidad, y lo más importante, muy profesionales y elegantes.

Tutorial DIVI WordPress En Español

Se trata del diseñador DIVI, que pertenece a uno de los temas base de la aclamada agencia de diseño «Elegants Themes«, que es un tema para WordPress, probablemente de los temas más avanzados que podemos encontrar. Con divi básicamente podemos hacer lo que queramos con nuestra web y con nuestro blog, así que lo que voy a realizar en este tutorial es una revisión de divi y también os voy a mostrar cómo es por dentro divi y cómo estaríamos escribiendo nuestras páginas, vais a ver que es muy sencillo de utilizar.

Este tutorial es básicamente la descripción de lo que se narra en el video, la cual se ha expuesto aquí para que quede cómo referencia para futuras consultas. Se tratará de mostrar cómo hacer algunas configuraciones especiales como por ejemplo configurar y optimizar el formulario de contacto al máximo o el área de comentarios, como hacer destacar un elemento en el menú de navegación y muchos otros detalles.

Así que bien, que vamos a hacer ahora, os voy a mostrar algunas opciones de divi y a continuación os voy a mostrar cómo es el tema de divi por dentro y cómo lo estaríamos configurando y creando nuestra web y nuestro blog bien, entonces fijaros que aquí tenéis algunas opciones que nos ofrece el tema divi, cómo podemos cambiar el fondo de la pantalla, tenemos el menú de navegación y algunas opciones que vamos a estar viendo ahora fijaros que podemos hacer que el menú se quede fijado en la parte superior para que nuestra web y nuestro blog sea más fácil de navegar tenemos muchas opciones que podemos utilizar para configurar nuestro menú de navegación y nuestra cabecera, aquí vemos algunos contadores fijaros, todos estos efectos los podemos conseguir de forma muy fácil con divi theme podemos insertar esta especie de navegación por secciones que estamos viendo aquí en la parte derecha fijaros que aquí tenemos otro icono para volver a la parte superior de nuestra web si yo me encuentro por aquí abajo y quiero volver a la parte superior pueden hacer clic sobre esta opción o si quiero ir a una sección de la página puedo ir a través de estos puntos que encontramos aquí a la derecha que más opciones tenemos.

Ver DEMO de DIVI aquí

Creador de temas wordpress

Pues fijaros, tenemos esto para que las imágenes aparezcan con distintos efectos, desde la derecha, desde arriba, desde la derecha, lo que estamos viendo aquí es el constructor divi que os voy a mostrar por dentro cómo es en un caso real Fijaros que podemos crear esto elemento con iconos y accesos, vamos viendo un poquito más, aquí estamos viendo algunas configuraciones del menú podemos tener nuestro logotipo centrado y el menú debajo o nuestro logotipo aquí a la derecha, a la izquierda, perdón, y el menú en la derecha aquí podemos incluir un icono de buscar dentro de nuestro blog o nuestra web tenemos un menú secundario que podemos incluir también si queremos que se vea este menú secundario en la parte superior por ejemplo con nuestro número de teléfono, correo, redes sociales otro menú secundario a parte del menú principal fijaros que también podemos tener el menú de navegación aquí a la izquierda en lugar de en la parte superior como hemos estado viendo bueno, son algunas opciones que tienes, toda esta página está creada con divi fijaros que podemos tener distintos elementos, muy fácil de configurar tenemos aquí un elemento, aquí tenemos otro, aquí tenemos un icono un título, después tenemos una descripción.Después aquí podemos incluir otro elemento en este caso una imagen, podemos también incluir este tipo de botones podemos también configurar los botones al máximo, bien, en este caso está configurado para que cuando situamos el ratón encima desaparezca el borde exterior y aparezca esta flecha que estamos viendo aquí, pero todo esto lo podemos cambiar y configurar con mucha facilidad.

Fijaros, aquí estamos viendo una galería de ancho completo, que además de poder hacer clic sobre cada uno de estas imágenes que nos llevan a un sitio determinado podemos hacer que sea una especie de slider donde podemos ir pasando a través de nuestra galería. Aquí vemos más opciones que tenemos Son muchas las opciones que tenemos disponibles con el tema divi. Fijaros, aquí estamos viendo Una sección. La sección sería toda esta de aquí, donde podemos incluir un color plano, podemos incluir una imagen, podemos incluir incluso un vídeo. Fijaros que efecto tiene esto. El vídeo ahí queda perfectamente Muchas opciones, además tenemos cientos de iconos que podemos seleccionar directamente y que divi pone a nuestra disposición, fijaros los iconos aquí para este tipo de elementos que se llaman anuncios o «blurbs» esto lo vemos todo con detenimiento en el curso tutorial gratuito al que tenéis acceso debajo en la descripción de este vídeo Fijaros que efectos, aquí tenemos una sección donde hemos cambiado el color de fondo bien, tenemos aquí algunas imágenes incluidas, después tenemos una especie de biografía con una foto, una descripción, después incluso tenemos aquí abajo un enlace que puede por ejemplo ir a la página web de esta persona o a una página dentro de nuestro blog o página web bueno, son muchos los elementos que tenemos disponibles en divi fijaros, os voy a mostrar ahora un menú, podemos configurar el menú de diferentes formas en este caso está configurado para que se muestre con esta especie de caja donde aparece el título arriba Después también una descripción.

Podemos también hacer clic sobre el resumen de nuestro artículo o nuestro artículo e ir directamente al artículo o post completo podemos por ejemplo tener enlaces en la miniatura, podemos tener un slider o deslizador todo esto lo explico detenidamente cómo hacerlo en el curso al que tenéis acceso de forma gratuita de divi podemos tener simplemente una imagen, podemos tener una cita cómo en este caso de aquí. Esto de aquí es una cita Esto de aquí es un enlace. Esto de aquí es un slider Esto de aquí sería una imagen únicamente. Podemos incluso incluir un vídeo y reproducirlo desde la miniatura desde el resumen, podemos incluso incluir audios en el resumen. Haríamos clic aquí y ser reproduciría el audio.

Conseguir DIVI aquí

Todo esto muy configurable. Después fijaros podemos Tenemos multitud de opciones, fijaros, os voy a mostrar unas cuantas porque son muchas las que tenemos fijaros estas barras de contadores para llamar la atención las podemos configurar como nosotros queramos. Que más tenemos por aquí por ejemplo, de la misma forma que tenemos estas barras tenemos contadores que vienen en porcentajes o bien en números absolutos Después podemos crear galerías de imágenes con divi, aquí tenemos galerías de imágenes aquí tenemos otro tipo de galerías, tenemos sliders también El límite con divi de elegantthemes es nuestra imaginación os voy a mostrar alguna cosita más, por ejemplo tablas de precios muy fáciles de crear.

Podemos crearlas en ancho completo, o bien que ocupen un tercio y que aquí junto a la tabla de precios a la derecha tengamos una barra lateral o barra lateral. podemos destacar una de las tablas, podemos crear dos tablas juntas una de tres elementos y otra de un elemento con el botón accionable todo muy fácil de crear. Que más tenemos por ejemplo estas opciones de acordeón, donde hacemos clic sobre una y se expande mientras que las otras se cierran fijaros, aquí tenemos el mismo elemento ahora os mostraré cómo funciona Divi por dentro. Cuando creamos una página lo primero que hacemos es crear una sección Dentro de una sección creamos filas Y dentro de las filas tenemos columnas. En este caso tenemos una columna insertada. Sería esta de aquí donde tenemos este elemento de acordeón En cambio lo que tenemos un poco más abajo son dos columnas aquí tenemos una columna y aquí tenemos otra columna, pues bien. En esta columna de aquí lo que hemos hecho ha sido insertar el acordeón pero en esta columna de aquí podríamos estar insertando una imagen, un vídeo, un formulario de contacto, un slider una galería fotográfica, en definitiva podríamos estar insertando aquí lo que quisiéramos.

Os voy a mostrar alguna opción más de wordpress divi porque son demasiadas las que hay fijaros aquí tenemos una opción de portafolio. aquí sería de ancho completo cómo podemos presentar nuestros portafolios, incluso un portafolio lo podemos presentar en formato de slider en nuestro blog o web a ver si veo por aquí algo más que os pueda mostrar audios, fijaros, podemos insertar mapas con distintas formas con distintos formatos que tenemos para incluir nuestros mapas con divi tenemos líneas divisorias también, tenemos por ejemplo iconos sociales que podemos optimizar al máximo, que aparezca cada uno de un color que aparezcan todos del mismo color, que aparezcan cuadrados, que aparezcan redondos que aparezca el botón de seguir (follow) o que no aparezca alguna opción más que aparezca por aquí. Bueno, son muchas las opciones los contadores de cuenta regresiva En definitiva tenemos aquí multitud de elementos que podemos optimizar de una forma muy rápida aquí vemos algunos otros elementos además divi theme es responsivo se ve perfectamente en ordenadores, en computadoras, en tablets, en dispositivos móviles nosotros únicamente creamos una vez nuestra página y divi se encargar de que se visualice correctamente en cualquier dispositivo Bueno, os voy a mostrar cómo es el constructor de divi, veréis que es muy sencillo estamos en wordpress, voy a entrar en páginas, voy a añadir una nueva página.

Aquí le daría un título por ejemplo divi 10, bien. Y haría clic sobre esta opción que veis aquí, que pone usar el constructor de divi y a partir de aquí ya estoy dentro del constructor de divi elegant themes lo que puedo es empezar desde cero a crear y diseñar mi página o si lo prefiero puedo cargar una página de la biblioteca para no empezar desde cero, por ejemplo voy a hacer clic en este botón veis que tenemos multitud de plantillas ya prediseñadas voy a escoger por ejemplo una cualquiera, por ejemplo página de empresa voy a darle a cargar, a este botón de aquí, y fijaros que me carga ya una serie de elementos voy a guardar como borrado y voy a hacer una vista previa para que veáis cual es el aspecto que tiene esta página. ya tiene algunos elementos y módulos prediseñados que simplemente lo que tenemos que hacer es prediseñarlos a nuestro gusto voy a ir a este blur de aquí, hago clic sobre el botón y aquí empezaría a escribir el título que yo quiera, la url a la que quiero redireccionar a una persona cuando haga clic sobre este elemento si no quiero direccionarlo, que no sea accionable este elemento simplemente no escribo ninguna url, ninguna dirección web le diré si se abre en una ventana nueva o en la misma ventana si quiero utilizar algún icono aquí ya tengo multitud de iconos que puedo utilizar voy a escoger este por ejemplo, el color que quiero del icono, lo puedo seleccionar aquí si quiero que el icono sea circular o cuadrado.

Si quiero utilizar una imagen en lugar del icono, pues en ese caso aquí selecciono la imagen Simplemente haría clic en subir imagen escogería una imagen de la biblioteca multimedia o simplemente haría clic en este elemento de subir archivo y subiría una imagen de mi ordenardor es muy sencillo de ir añadiendo distintos elementos fijaros que nosotros en divi, en el constructor de divi tenemos diferentes elementos tenemos por un lado esto de aquí que se llama sección, dentro de la sección tenemos las filas, y dentro de las filas tenemos en este caso tres columnas, y dentro de las columnas tenemos los módulos. Fijaros, dentro de esta columna de aquí de la izquierda puedo añadir tantos módulos como quiera o duplicar este mismo módulo o por ejemplo quiero insertar ahora una imagen pues simplemente lo que haría sería seleccionar el módulo de imagen que quiera. Que quiero insertar por ejemplo un slider o deslizado, pues simplemente hago clic aquí y empiezo a configurarlo Realmente es muy sencillo. Que quiero añadir una sección nueva, bueno pues en este caso me vengo aquí donde dice sección nueva, sección estándar para añadir una nueva sección tenemos distintos tipos de secciónes, tenemos también en divi sección de ancho completo, una sección especial y añadir desde la biblioteca.

Todo esto se explica con detenimiento y con detalle en el curso tutorial de divi para wordpress al que tenéis acceso de forma totalmente gratuita que haría aquí, pues por ejemplo añadir una nueva sección, voy a a seleccionar cuantas columnas quiero tengo toda una galería de columnas, después tengo las secciones especiales donde tengo muchas más configuraciones de columnas y aquí voy añadiendo tantas columnas como quisiese ya tengo dos filas, aquí puedo insertar por ejemplo aquí quiero dos quiero dos columnas, bien, para empezar en cada columna los diferentes módulos os lo estoy explicando aquí de forma rápida porque tampoco quiero muy largo este vídeo simplemente quiero que tengáis una ligera idea de como funciona divi después tenemos las opciones de cada tema.

También explico cómo podéis guardar vuestras propias plantillas en la biblioteca de plantillas de divi para que podáis recuperárlas en cualquier momento y multitud de opciones extremadamente avanzadas, muy interesantes Después por ejemplo, opciones de tema, podemos ir a las opciones de nuestro tema Divi y configurarlo, aquí tenemos algunas opciones Después tenemos el personalizador donde vamos a encontrar diferentes ajustes generales De tipografía, de pie de página, de botones para nuestro blog combinación de colores, navegación, widgets, altamente customizable básicamente podemos hacer lo que queramos con nuestra página web y con nuestro blog podemos además crear todo tipo de páginas, vuestro blog con divi va a quedar sensacional, al igual que vuestra página web y todas las páginas que creéis dentro de vuestra web y vuestro blog Divi es el tema más avanzado que existe actualmente para wordpress gracias a los diseñadores, el equipo a realizado un trabajo sensacional a puesto mucho esfuerzo y la verdad es que elegant themes ha conseguido una maravilla con divi theme Divi es un tema para wordpress, el mejor tema, os permite flexibilidad y es fácil y sencillo de utilzar, ya habéis visto que es muy sencillo.

En el curso lo vemos todo en detalle para que no tengáis ninguna duda y bueno os hagáis con el tema divi en poco tiempo acordaros que como os he comentado debajo en la descripción del vídeo tenéis acceso tanto a ese curso tutorial en español en vídeo donde se explica a usar divi con todo tipo de detalles y además acceso a este bono regalo donde se dan algunos trucos avanzados para que los pongáis en práctica y llevéis más haya vuestro blog y página web y que sea y vuestro blog sea algo realmente y que consigáis aquello que queréis diseñar animo, aquí me despido.