Hoy, estamos proporcionando a nuestra comunidad Divi otro diseño gratuito. Este diseño ayudará a las personas que deseen configurar un sitio web Divi para una universidad o colegio. Usar este diseño como su página de inicio es la manera perfecta de mostrar a los estudiantes actuales y futuros de qué se trata la universidad o colegio. Y, por supuesto, también les muestra que la universidad o colegio que están explorando tiene un gran sentido del estilo y presencia digital.
Al diseñar un sitio web para universidades y colegios, hay una cosa que debe recordar; mantenlo visual. Las universidades y los colegios no solo confían en la calidad de su sistema educativo para atraer nuevos estudiantes, sino que también intentan desencadenar emociones. Una forma sencilla de desencadenar esta implicación emocional es a través de una de las mayores necesidades de los alumnos; contacto social.
Para mostrar el compromiso que tiene con su colegio o universidad, y para desencadenar ese compromiso emocional, le recomendamos que use imágenes de la vida real. Elija imágenes de alta calidad de los profesores y estudiantes de su universidad o colegio. Hicimos lo mismo para el diseño gratuito que vamos a compartir con ustedes en esta publicación.
El diseño de la página de inicio gratuita que puede descargar de inmediato se ve así:
Suscríbete a nuestro canal de Youtube
Descargue el diseño de la universidad y la universidad
Si le gusta el diseño y desea descargarlo de forma gratuita, continúe e ingrese su correo electrónico en el formulario a continuación. Continúe haciendo clic en el botón de descarga y obtendrá los archivos necesarios de inmediato.
Al ingresar su dirección de correo electrónico, se suscribirá a nuestro boletín. Recibirás información sobre nuevas publicaciones interesantes y relacionadas con Divi en nuestro sitio web y serás uno de los primeros en recibir regalos. Si ya está suscrito, sepa que ingresar su dirección de correo electrónico no hará que se «vuelva a suscribir» ni que reciba correos electrónicos adicionales. Simplemente hará que la descarga esté disponible para usted.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¿Qué hay en el ZIP?
Obtendrá los siguientes archivos al descargar el diseño gratuito:
- university-college-master-layout.json : al importar este archivo, se agregará el diseño completo y todas las secciones individuales a su Biblioteca Divi.
- university-college-full-layout.json : este es solo el diseño completo de la universidad y la universidad.
- Carpeta de secciones : esta carpeta contiene todos los archivos JSON para las siete secciones individuales del diseño de la universidad y la universidad.
Tu obsequio de University & College aparecerá en tu carpeta de descargas como una carpeta comprimida. Le daremos una guía rápida sobre cómo cargar el diseño en la siguiente parte de esta publicación.
Configuración del diseño de la universidad y la universidad
Cuando haya localizado la carpeta comprimida descargada, puede continuar y descomprimirla. Encontrarás los archivos mencionados anteriormente y dependiendo de las secciones que quieras usar. Puedes subirlos a tu biblioteca Divi.
Vaya a Divi > Biblioteca Divi > Importar y exportar > Importar > Seleccione el archivo maestro de Universidad y Colegio
Continúe agregando una nueva página a su sitio web. Active el Divi Builder y acceda a la Biblioteca Divi en su página yendo a:
Biblioteca Divi (el símbolo «+» en la interfaz)> Agregar desde biblioteca> Universidad y colegio
Después de haber seleccionado el diseño de Universidad y Colegio para su página, verá que el diseño aparecerá en la página en Divi Builder.
El propósito del diseño es para ser utilizado como página de inicio. Si desea que las personas lleguen a esta página cuando visiten su sitio web directamente, no olvide establecerla como su página principal en la configuración de WordPress.
Vaya a Configuración> Lectura> Portada> Seleccione la página que creó recientemente
Uso del diseño
El diseño tiene 7 secciones principales que brindan al visitante información diferente. Nos enfocamos principalmente en un color azul porque a menudo está relacionado con el profesionalismo en la mente de las personas. Además de eso, decidimos usar la familia de fuentes ‘Montserrat’ en toda la página. En la siguiente parte de esta publicación, lo guiaremos a través de las diferentes secciones.
La sección del héroe
La Sección de Héroes de este diseño es bastante limpia, como puede ver. Hemos usado un módulo de texto y un módulo de botones para mantenerlo simple. También agregamos un estilo divisor a la imagen que se usa como fondo en la sección. Para echar un vistazo al código; vaya a la pestaña CSS personalizado de su sección y desplácese hacia abajo hasta el elemento principal. Creamos una ruta de recorte que hace que el estilo divisor se vea como una curva.
La sección del contador de números
Inicialmente, parece que esta segunda sección es parte de la sección de héroes. Ese efecto se creó principalmente con el módulo de llamada a la acción que interfiere y que se usa en la segunda columna de la fila. El módulo parece flotar sobre la sección principal y llama la atención sobre lo que está escrito allí. Si desea que el Módulo de llamada a la acción esté separado de la sección anterior, vaya a la pestaña Configuración de diseño avanzado y elimine el margen superior.
Si desea que el Módulo de llamada a la acción esté separado de la sección anterior, vaya a la pestaña Configuración de diseño avanzado y elimine el margen superior.
Sección de introducción
Para esta sección, queríamos mantener la curva así que también hicimos una en la parte superior de esta sección. Al hacer esto, creamos una conexión entre las diferentes secciones y también se ve bien.
Sección de Campos de Estudio
En la sección de campos de estudio, decidimos usar el mismo efecto flotante que usamos en la sección de contador de números. Esto da a los visitantes la idea de que uno de los campos de estudio mencionados es especial. Puede cambiar ese campo de estudio en cualquier momento, según el público al que se dirija en ese momento.
Si actualmente está realizando todo tipo de actividades de marketing para atraer estudiantes para el campo de estudios médicos, elija resaltar ese campo de estudio durante ese mismo período. También agregamos una flecha de énfasis adicional, que está oculta en teléfonos y tabletas.
No usamos módulos de Blurb para esta sección porque queríamos tener imágenes que se enfocaran específicamente en el campo de estudio. Para los íconos dentro de este diseño, usamos la nueva herramienta AutoDraw y los convertimos en imágenes PNG transparentes en Photoshop con la herramienta varita mágica. Usar AutoDraw es la salida fácil si no quiere perder demasiado tiempo buscando íconos para descargar, pero sabe que los dibujos que proporcionan son limitados.
Usar AutoDraw es la salida fácil si no quiere perder demasiado tiempo buscando íconos para descargar, pero sabe que los dibujos que proporcionan son limitados.
Sección Estudiantes
Había dos formas de dar a conocer sus historias a los estudiantes; utilizando el Módulo de Testimonios o el Módulo de Persona. En este caso, elegimos el módulo de persona para asegurarnos de que el foco principal esté en la imagen. Como he dicho antes; las personas no solo eligen una determinada universidad o colegio por su campo de estudio, sino también por el contacto social y las experiencias de los demás. Somos criaturas visuales, por lo que nos gusta asociar testimonios, declaraciones y palabras con una cara. Hace que sea más fácil confiar y creer en la calidad de una universidad o colegio.
Sección Formulario de contacto
Usamos suficientes imágenes en todo el sitio web, por eso decidimos mantener el formulario de contacto limpio y simple.
El pie de página también es muy limpio. Hemos usado un color de fondo más oscuro para esta sección para enfatizar la seriedad que debe expresar una universidad o facultad. Hemos puesto toda la información práctica que un visitante del sitio web puede necesitar, como botones para los canales de redes sociales, la dirección, el número de teléfono y la dirección de correo electrónico.
Terminando
Esperamos que todos los miembros de nuestra comunidad puedan comenzar fácilmente a crear sitios web para universidades y colegios con este diseño, ya sea para ellos mismos o para sus clientes. Recomendamos usar el mismo estilo, familia de fuentes y colores en las demás páginas del sitio web.
Cualquier comentario o pregunta es bienvenido en la sección de comentarios a continuación. Estaré a la espera y trataré de responder a todas sus preguntas de la mejor manera posible. Además de eso, si tienes alguna sugerencia sobre tutoriales que te gustaría ver para Divi, ¡dispara!
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.