Producto destacado de Divi: el kit de interfaz de usuario del módulo Divi definitivo
Publicado: 2023-03-27El kit de interfaz de usuario Ultimate Divi Module es un producto de Divi Marketplace que ofrece más de 2000 diseños prefabricados para que el diseño de su próximo sitio web Divi sea muy fácil. El producto ofrece secciones sobre nosotros, estilos de tablas de precios, diseños de formularios de contacto, estilos de botones e incluso algunos diseños de sitios web de una página que se pueden personalizar por completo. En este producto destacado, analizaremos más de cerca el kit de interfaz de usuario The Ultimate Divi Module y lo ayudaremos a decidir si es el producto adecuado para su próximo proyecto.
¡Empecemos!
- 1 Instalación del kit de interfaz de usuario del módulo Ultimate Divi
- 2 El kit de interfaz de usuario del módulo Ultimate Divi
- 2.1 Módulos de pestañas
- 2.2 Módulos de publicidad
- 2.3 Módulos de persona
- 2.4 Módulos de blogs
- 2.5 Secciones Acerca de nosotros
- 2.6 Módulos de precios
- 2.7 Módulos de Testimonios
- 2.8 Secciones del formulario de contacto
- 2.9 Secciones del boletín
- 2.10 Módulos de acordeón
- 2.11 Módulos deslizantes
- 2.12 Secciones de la línea de tiempo
- 2.13 Diseños de una página
- 2.14 Módulos de Portafolio
- 2.15 Secciones de pie de página
- 2.16 Módulos de barra de bar
- 2.17 Secciones de información de la caja
- 2.18 Secciones de habilidad
- 2.19 Botones
- 3 Compre el kit de interfaz de usuario del módulo Ultimate Divi
- 4 pensamientos finales
Instalación del kit de interfaz de usuario del módulo Ultimate Divi
El kit de interfaz de usuario Ultimate Divi Module viene como un archivo ZIP que contiene archivos Divi Library .json. Para instalar los diseños, comience por descomprimir el archivo. Luego, abra su tablero de WordPress y navegue a la página de la Biblioteca Divi.
Haga clic en Importar y exportar en la parte superior, luego seleccione la pestaña de importación. Elija el archivo de diseño, luego seleccione Importar diseños de Divi Builder.
Una vez que se haya importado el diseño, abra su página en Divi Builder. Haga clic en el ícono azul más para agregar una nueva sección, luego seleccione Agregar de la biblioteca.
Localice su diseño, luego haga clic en el botón Usar esta sección para cargar el diseño.
El kit de interfaz de usuario del módulo Ultimate Divi
El kit de interfaz de usuario Ultimate Divi Module viene con más de 2000 diseños, por lo que no podremos cubrir todo. Echaremos un vistazo a algunos diseños de cada categoría para que pueda tener una mejor idea de lo que este producto tiene para ofrecer y si es la compra adecuada para usted.
Módulos de pestañas
Hay 400 estilos de módulos de pestañas diferentes, con 100 estilos de pestañas inferiores, 100 estilos de pestañas predeterminados, 100 estilos de pestañas horizontales y 100 estilos de pestañas verticales. Todos los módulos de pestañas cuentan con animación flotante en los títulos de las pestañas y un efecto de transición de pestañas. Te mostraré un par de ejemplos de cada estilo de pestañas.
Aquí están los estilos de pestañas inferiores 1 y 79.
Este es el estilo 9 y 38 en el diseño de pestaña predeterminado.
El siguiente es el diseño vertical derecho, con los estilos 14 y 52. Este diseño está etiquetado como Horizontal en los archivos del producto.
Finalmente, este es el diseño vertical izquierdo, etiquetado como Vertical en los archivos del producto. Este es el estilo 71 y el estilo 95.
Hay una amplia variedad de estilos y diseños para elegir, y todas las pestañas se pueden personalizar fácilmente con su propio contenido y opciones de diseño.
Módulos de Blurb
Hay 100 estilos publicitarios en total. Cada estilo de publicidad presenta algún tipo de efecto de desplazamiento. Echemos un vistazo a algunos en detalle.
Este es el estilo de publicidad 4. Al pasar el mouse, las dos barras rosadas se vuelven verticales, el fondo del icono se vuelve rosa y hay un borde de sombra rosa.
El estilo 9 de Blurb tiene dos barras de fondo que cambian de color y ángulos al pasar el mouse por encima. El fondo del icono también cambia al pasar el mouse por encima.
Blurb 40 presenta un borde verde grueso y un ícono que gira al pasar el mouse.
Finalmente, el estilo de publicidad 50 cambia a rojo al pasar el mouse por encima y la pestaña en la parte superior con el icono se desplaza hacia la derecha.
Módulos de persona
Hay 150 estilos diferentes de módulos de personas.
El estilo de módulo de persona 7 tiene un esquema de color verde e íconos de redes sociales que se mueven hacia arriba en una formación de cuadrícula sobre una superposición verde al pasar el mouse.
El estilo 34 presenta el nombre y la posición con un borde naranja. Al pasar el mouse, la información se mueve hacia arriba y sobre la foto y se revelan los íconos de las redes sociales.
Este es el diseño 46. Presenta el nombre y la posición en un cuadro blanco debajo de la foto. Al pasar el mouse, el cuadro se expande para revelar íconos de redes sociales.
El diseño 127 tiene un diseño de imagen simple. Al pasar el mouse, se revelan el nombre, la posición y los íconos de redes sociales.
Módulos de blogs
Hay 100 módulos de blog en total, con 50 estilos de vista de cuadrícula y 50 estilos de vista de lista. Echemos un vistazo a un par de cada estilo.
El diseño de cuadrícula 3 presenta la imagen de la publicación y los detalles en una tarjeta con la fecha en una pestaña en la parte superior. Al pasar el mouse, se revela un botón de leer más y aparece una superposición con un ícono sobre la imagen.
El diseño de cuadrícula 40 presenta una tarjeta con información de la publicación y un botón para leer más que se superpone a la imagen destacada. Al pasar el mouse, aparece una superposición oscura sobre la imagen.
El diseño de vista de lista 7 presenta la información de la publicación y un botón de leer más en una tarjeta con la imagen a la izquierda. La fecha está en un cuadro azul sobre la imagen.
El diseño de vista de lista 18 presenta un diseño más oscuro con una imagen a la izquierda e información de publicación a la derecha. Al pasar el mouse, la tarjeta se mueve ligeramente hacia arriba y la imagen se expande.
Sobre nosotros Secciones
Hay 100 diseños de sección acerca de nosotros.
Este es el estilo de diseño 7. Presenta algo de texto a la izquierda, junto con algunas características marcadas con íconos. Hay un botón de contacto debajo de este y una imagen a la derecha.
Esta sección de ancho completo presenta texto en la parte superior, un botón CTA, tres contadores de números y una imagen a la derecha.
Este diseño de viaje es el estilo 17. Presenta una imagen grande a la izquierda y algo de texto y un ícono a la derecha. A continuación hay cuatro imágenes que se amplían al pasar el mouse por encima y se abren en una caja de luz cuando se seleccionan.
El estilo 61 presenta texto a la izquierda, tres funciones resaltadas con un ícono de marca de verificación y una imagen en el centro. A la derecha, puede encontrar un cuadro amarillo con horas y un botón para reservar una cita.
Módulos de precios
Hay 150 estilos de módulos de precios en total.
El estilo de módulo de precios 3 utiliza un esquema de color negro y verde. Al pasar el mouse, el cuadro de precios se expande y el encabezado se vuelve verde.
Este es el módulo de precios 29. Al pasar el mouse, aparece una flecha roja a la derecha del precio y el título del nivel se resalta en rojo.
El estilo de módulo de precios 66 presenta un encabezado que se vuelve morado al pasar el mouse sobre él.
El diseño 72 presenta un fondo degradado.
Módulos de Testimonios
Hay 75 estilos diferentes de módulos de testimonios que vienen con el kit de interfaz de usuario. Aquí hay algunos.
Este es el diseño de testimonio 5. Presenta un borde naranja y un ícono de cotización en la parte superior, seguido de la imagen de perfil, el testimonio, el nombre y la información del trabajo.
El diseño 33 presenta una tarjeta que contiene el testimonio, el nombre, la posición y una imagen en el lado izquierdo. Al pasar el mouse, la tarjeta se destaca en verde, la fuente del nombre se vuelve verde y la imagen se voltea.
El diseño 71 presenta una imagen a la izquierda sobre un fondo de imagen grande. A la derecha hay un control deslizante de testimonios dentro de un cuadro de cotización.
Secciones del formulario de contacto
Hay 100 secciones de formulario de contacto para elegir. Éstos son sólo algunos.
El diseño 1 es un diseño simple con texto a la izquierda, información de contacto con algunos íconos, íconos de redes sociales y un formulario de contacto con un botón azul.
El diseño 29 presenta un mapa grande en la parte superior, seguido de la dirección, el teléfono y la información de correo electrónico a la izquierda. A la derecha hay un formulario de contacto.
El diseño de la sección de contacto 41 presenta una imagen con una superposición amarilla. Hay texto a la izquierda con un botón CTA que incluye un número de teléfono. El formulario de contacto está a la derecha, sobre una superposición blanca.
El diseño 75 presenta tres cuadros con información de contacto e íconos amarillos. Debajo de este se encuentra el formulario de contacto, con un botón amarillo. Esto está en un fondo de imagen que se está desvaneciendo en blanco.
Secciones del boletín
Hay 25 secciones de suscripción al boletín.
El estilo 2 presenta un texto de encabezado y un formulario de registro de correo electrónico en un fondo de imagen de paralaje.
El estilo 5 tiene una imagen a la izquierda y un texto de encabezado a la derecha, seguido de un formulario de registro.
Este es el diseño 15 del boletín informativo. Presenta un texto de encabezado a la izquierda, seguido de un formulario de registro y algunos enlaces de redes sociales. Hay una imagen redonda a la derecha.
El diseño 20 es un diseño tipo tarjeta, con dos imágenes tipo tarjeta en cada lado y el formulario de registro en una tarjeta en el medio. Hay un icono en la parte superior, seguido de un texto de encabezado y el formulario. En la parte inferior hay un pequeño texto de exención de responsabilidad con un icono.
Módulos de acordeón
Hay 40 estilos de acordeón en total.
El estilo 2 presenta un título verde y el contenido de acordeón en un cuadro gris. El botón para cada pestaña está a la derecha.
El estilo de acordeón 8 utiliza pestañas naranjas y cuadros de contenido blancos. Hay flechas negras que apuntan a la pestaña abierta.
El estilo de acordeón 14 presenta una pestaña de estilo redondeada con una sección de contenido blanca.
Finalmente, el estilo 36 presenta íconos morados con cada pestaña y tiene un borde morado que subraya la pestaña activa.
Módulos deslizantes
El kit de interfaz de usuario Ultimate Divi Module viene con 100 estilos de módulos deslizantes.
El control deslizante 2 presenta un texto de encabezado grande y un botón CTA sobre una imagen de paralaje grande con una superposición oscura.
El estilo de control deslizante 31 también presenta texto de título y un botón CTA en una imagen con una superposición oscura. Hay un círculo rojo detrás del texto del título.
El control deslizante 72 tiene más contenido, con un control deslizante que cambia el contenido del texto en la parte superior y un botón CTA debajo. Hay tres cuadros de contenido debajo de este con un icono y un texto de descripción.
Finalmente, el diseño de diapositivas 86 presenta contenido de texto a la izquierda que cambia cada diapositiva, así como dos botones CTA. Hay un video a la derecha, seguido de otro botón CTA.
Secciones de la línea de tiempo
Hay 100 estilos de línea de tiempo diferentes para elegir.
El estilo de línea de tiempo 4 presenta tarjetas con un ícono y texto para cada paso de la línea de tiempo.
A continuación, la línea de tiempo 12 tiene el ícono de la línea de tiempo en un lado y el texto de descripción de la línea de tiempo en el otro lado.
El estilo de línea de tiempo 32 presenta una línea de puntos con íconos para cada paso. El texto de la descripción está contenido dentro de un cuadro que apunta al icono correspondiente.
Timeline 91 es un diseño simple con iconos en el centro y texto de descripción de la línea de tiempo a cada lado.
Diseños de una página
El UI Kit también viene con 42 diseños de sitios web diferentes de una página que cubren una amplia variedad de industrias y casos de uso. Echaremos un vistazo a un par de ellos.
Este es el diseño de viajes y turismo. Comienza con una barra de menú secundaria que enumera el logotipo, la dirección, el horario y la información de contacto. La barra de menú principal tiene elementos de menú y un botón para iniciar sesión o registrarse. El encabezado es una imagen grande con algo de texto y un botón CTA. A esto le siguen algunas secciones numeradas con imágenes y texto que describen destinos de viaje. Hay algunos módulos contadores de números en la sección con fondo amarillo, y la siguiente sección presenta algunos módulos con íconos.
A continuación se muestra un control deslizante de testimonios, seguido de una tabla de precios. Lo siguiente es una sección de equipo con enlaces de redes sociales, seguida de una sección con texto y logotipos de la empresa, y luego otra sección con texto e íconos. El pie de página presenta algo de texto, información de contacto y un formulario de contacto.
Este es el diseño de la agencia de inicio. Cuenta con una barra de menú con un logotipo, elementos de menú y un botón CTA. El encabezado presenta algo de texto, una ilustración a la derecha y dos botones CTA. A continuación se muestran algunos logotipos de empresas y tres funciones resaltadas con algunos iconos. Una sección de CTA sigue a esto con dos botones, luego una sección de equipo con fotos e íconos de redes sociales. Después de esto, hay dos secciones con texto, ilustraciones y algunas características distinguidas con marcas de verificación.
A continuación se encuentran algunas reseñas de clientes, luego otra sección de características con íconos y texto descriptivo. Hay una tabla de precios, una sección de preguntas frecuentes, otra sección de CTA con una ilustración y algunas publicaciones recientes.
Finalmente, hay un formulario de contacto y otro cuadro con información de contacto y enlaces de redes sociales sobre un mapa grande, seguido del pie de página con un logotipo, enlaces de redes sociales, elementos de menú e información de contacto.
Módulos de cartera
Hay un total de 120 estilos de cartera: 40 estilos de módulo de cartera predeterminados, 40 estilos de cartera filtrables y 40 estilos de cartera de carrusel. Echemos un vistazo a un par de cada estilo.
El primer módulo de cartera predeterminado presenta un diseño de cuadrícula simple y una superposición que aparece sobre las imágenes que presentan dos barras de borde verde, el título y el año.
El diseño de cartera 29 utiliza un diseño de cuadrícula similar y presenta una superposición que aparece al pasar el mouse con una flecha rosa y el título y el año del proyecto.
El diseño de cartera filtrable 2 presenta una barra de filtro naranja en la parte superior y una barra de navegación negra en la parte inferior. Al pasar el mouse, aparece una superposición oscura con el título y el año del proyecto.
El diseño de cartera filtrable 14 presenta una barra de filtro con botones azules y una barra de navegación negra en la parte inferior. Al pasar el mouse, se revela una superposición azul y el título y la fecha se encuentran dentro de un borde blanco.
El diseño de cartera de carrusel 7 presenta dos flechas azules en cada lado para navegar. Al pasar el mouse, hay una superposición en forma de azul y la información del proyecto.
El diseño de carrusel 11 presenta flechas naranjas para navegar y una diapositiva naranja que contiene la información del proyecto que se revela al pasar el mouse por encima.
Secciones de pie de página
Hay 100 secciones de pie de página que vienen con el kit de interfaz de usuario.
El diseño de pie de página 3 presenta la información de contacto en la parte superior con algunos íconos grandes. Puede encontrar algunos sobre texto, íconos de redes sociales, enlaces de menú y horarios. Hay una barra de pie de página secundaria en la parte inferior que contiene información de derechos de autor y un enlace a los términos y condiciones.
Este es el diseño de pie de página 26. Tiene dos módulos en la parte superior con iconos grandes, seguidos de un formulario de contacto e información de contacto. En la parte inferior hay algunos enlaces, seguidos de información de derechos de autor.
El pie de página 43 tiene un formulario de registro de correo electrónico en la parte superior. Hay varias columnas para elementos del menú, información de contacto, logotipos de pago e información de derechos de autor.
El estilo de pie de página 84 tiene una imagen de fondo con una superposición oscura. El logotipo está a la izquierda, junto con los íconos de las redes sociales. Hay varios elementos del menú, luego un formulario de suscripción al boletín. La información de contacto se encuentra a la derecha y, por último, la información de derechos de autor se encuentra en la parte inferior.
Módulos de barra de bar
Hay 50 estilos diferentes de barra de bar para elegir.
El estilo 3 presenta líneas de barras azules con un indicador de porcentaje negro.
El estilo 13 presenta un título en el extremo izquierdo y el porcentaje se resalta con un fondo rojo más oscuro al final de la barra.
El estilo de barra de bar 32 tiene un diseño redondeado con un título a la izquierda y el porcentaje dentro de la barra.
Finalmente, el diseño 37 tiene un título sobre la barra, extremos redondeados y una sección redondeada al final de cada barra que contiene el porcentaje.
Secciones de información de la caja
Hay 50 estilos de información de cuadro.
El diseño de la sección de información del cuadro 2 presenta una imagen con un borde blanco, texto de encabezado azul, texto de descripción y un botón CTA. La sombra alrededor de la caja se fortalece al pasar el mouse sobre ella.
El estilo 6 presenta una imagen con esquinas redondeadas, un ícono, dos estilos de texto de encabezado y un botón para leer más. Al pasar el mouse, la caja se desplaza hacia arriba.
El estilo de cuadro 11 presenta un ícono en la parte superior sobre una imagen grande y una tarjeta con el encabezado y el cuerpo del texto. Al pasar el mouse, aparece una superposición oscura sobre la foto, el color del borde inferior cambia a negro y aparece un botón más.
El diseño 47 presenta una imagen, un icono y texto. Al pasar el mouse, se revelan una superposición negra y un borde blanco sobre la imagen y la imagen se acerca con un ligero ángulo. El contenedor de iconos se vuelve hacia abajo y el fondo cambia a negro. Finalmente, el fondo del texto se vuelve naranja.
Secciones de habilidad
Hay un total de 50 secciones de habilidades.
El diseño 7 de la sección de habilidades presenta una imagen grande a la derecha y algo de texto, una barra de habilidades y contadores numéricos a la izquierda.
La sección de habilidades 17 presenta texto, una barra de habilidades y dos secciones publicitarias con íconos a la izquierda. A la derecha hay dos imágenes.
El diseño de habilidades 21 presenta una imagen, algo de texto y un botón a la izquierda. A la derecha hay dos secciones de texto más, seguidas de la barra de habilidades.
Este es el diseño 38. Presenta una imagen con un cuadro de texto superpuesto a la izquierda. A la derecha, puede encontrar texto de título, texto del cuerpo y barras de habilidades con flechas.
Botones
Finalmente, hay 150 estilos de botones en total, con 100 estilos de botones regulares y 25 estilos de botones dobles.
Este es el estilo de botón normal 30. Al pasar el mouse, aparece un fondo rosa y el color del texto cambia a blanco.
El estilo de botón regular 116 presenta un pequeño cuadro rosa que se expande al pasar el mouse para llenar el fondo del botón. El texto también cambia a rosa al pasar el mouse por encima.
El estilo de botón doble 3 presenta una barra que se mueve hacia arriba o hacia abajo al pasar el mouse por encima.
El estilo de botón dual 7 presenta un fondo oscuro que se mueve hacia abajo al pasar el mouse y se convierte en un borde inferior. También se revela un ícono al pasar el mouse.
Compre el kit de interfaz de usuario del módulo Ultimate Divi
El kit de interfaz de usuario Ultimate Divi Module está disponible en Divi Marketplace. Cuesta $ 49.59 para uso ilimitado del sitio web y actualizaciones de por vida. El precio también incluye una garantía de devolución de dinero de 30 días.
Pensamientos finales
El kit de interfaz de usuario Ultimate Divi Module viene con una cantidad impresionante de diseños con una amplia variedad de estilos y casos de uso. Todo se puede personalizar con las opciones de Divi, y cualquiera de los diseños se puede modificar para adaptarse al diseño de su próximo proyecto. Si está buscando un paquete de diseño extenso que pueda ayudarlo a ahorrar tiempo con su próximo diseño, este producto podría ser adecuado para usted. ¡Nos encantaría saber de usted! ¿Has probado The Ultimate Divi Module UI Kit? ¡Háganos saber lo que piensa al respecto en los comentarios!