Cómo crear una página de inicio de cartera mínima con Divi

Resultado final de hoy: una página de inicio de cartera mínima

Para lograr este resultado final en su propio sitio web Divi, tendrá que hacer tres cosas: modificar los estilos de su menú principal (así como agregarle íconos sociales), crear un pie de página personalizado y configurar correctamente el módulo Divi Portfolio. Estas son las tres cosas que repasaré en el tutorial a continuación.

El concepto y la inspiración

He tenido esta idea durante mucho tiempo. Desde que publicamos esta publicación en sitios web de cartera para modelar la suya propia después de . Específicamente, pensé que el sitio web de la cartera de Mike Kus era particularmente bueno. Era sólo lo que tenía que ser y nada más. Quizás aún más importante, su enfoque mínimo puso toda la atención del visitante en su trabajo, ¡que es el punto central!

Supe de inmediato que esto era algo que los usuarios de Divi también podían hacer, así que planeé esta miniserie para mostrarles a todos cómo hacerlo. Comenzaremos imitando su página de inicio y luego, en las siguientes publicaciones, expandiremos desde allí (sin perder de vista la simplicidad del diseño central), pero también aprovecharemos la funcionalidad avanzada que proporciona Divi para aumentar la efectividad.

Preparación de los elementos de diseño

Para este tutorial, querrá poder llenar su página de inicio con proyectos de cartera. En total usé un poco más de 100 imágenes de unsplash.com para crear 20 proyectos con al menos cinco imágenes cada uno. Sin embargo, para este tutorial solo necesitará 20 imágenes, para usar como imágenes destacadas en 20 proyectos, que recomiendo cambiar el tamaño a un ancho de 1920px. También recomendaría usar imágenes apaisadas como imágenes destacadas de su proyecto, ya que se verán mejor en el futuro cuando diseñemos las páginas de nuestro proyecto usando Divi Builder .

Implementando el Diseño con Divi

Suscríbete a nuestro canal de Youtube

Como mencioné anteriormente, hay tres secciones en este tutorial: Encabezado/Navegación, Pie de página y Módulo de cartera. En las tres secciones a continuación, lo guiaré paso a paso a través de cada una. Pero antes de hacer eso, ocupémonos de algunas configuraciones en todo el sitio que necesitan configuración.

Navega en tu administrador de WordPress a Divi > Personalizador de temas . En Configuración general > Fondo, configure el fondo de su sitio en blanco (#ffffff). Luego, en Configuración general > Tipografía, configure su Estilo de fuente de encabezado en negrita (B) y mayúsculas (TT). Luego configure su fuente de encabezado en Open Sans y su fuente de cuerpo en Georgia. De acuerdo con nuestro motivo mínimo, establezca el color del enlace del cuerpo en negro (# 000000) y el color del texto del cuerpo, así como el color del texto del encabezado, en gris (# 666666).

Haga clic en el botón azul «Guardar y publicar» en la parte superior del personalizador antes de continuar.

Creación de su encabezado/navegación mínimos

Para comenzar, abordemos el encabezado mínimo que he creado. Comenzaremos con las partes más fáciles y progresaremos a los íconos sociales, que requieren una pequeña cantidad de código.

Primero, ve a Páginas > Agregar nuevo y crea/publica dos páginas: Portafolio y Acerca de. Puede dejarlos en blanco por ahora, ya que los completaremos con contenido más adelante. Luego, navega en tu administrador de WordPress a Divi > Personalizador de temas .

Lo primero que debemos hacer es asegurarnos de que su menú muestre las dos páginas que acaba de crear. Así que navegue en su Personalizador de temas a Menús > Menú principal . Si la opción del menú principal no está disponible, haga clic en el botón azul «Agregar menú» y cree un menú llamado «Menú principal».

Dentro del menú llamado Menú principal, haga clic en el botón azul «Agregar elementos». Seleccione la página de su cartera y la página acerca de en la sección Páginas. Haga clic en el elemento de la página Acerca de en el menú principal y cambie la etiqueta de navegación para que diga «Acerca de y contacto».

Finalmente, en «Mostrar ubicación», asegúrese de que la casilla de verificación junto a «Menú principal» esté marcada. Haga clic en el botón «Guardar y publicar» en la parte superior antes de continuar.

Ahora podemos comenzar a diseñar nuestro nuevo menú principal. Navegue desde el menú principal del personalizador hasta Encabezado y navegación > Barra de menú principal .

Realice los siguientes cambios:

• Altura del menú: 66
• Altura máxima del logotipo: 54
• Tamaño del texto: 24
• Espaciado entre letras: 0
• Fuente: Open Sans Light
• Color del texto: rgba (0,0,0,0,55)
• Color de enlace activo: #000000
• Color de fondo: #ffffff
• Color de fondo del menú desplegable: #ffffff
• Color de la línea del menú desplegable: #000000
• Color del texto del menú desplegable: rgba (0,0,0,0.55)

Cuando se realicen estos cambios, haga clic en el botón azul «Guardar y publicar» antes de continuar.

Ahora tenemos que configurar la configuración del menú fijo para que coincida con nuestra nueva configuración del menú principal para que las cosas se vean igual cuando los visitantes de su sitio se desplazan hacia abajo en la página. Para hacer esto, navegue de regreso a su submenú Encabezado y Navegación y seleccione Configuración de Navegación Fija.

Realice los siguientes cambios:

• Altura fija del menú: 40
• Tamaño del texto: 24
• Color de fondo del menú principal: #ffffff
• Color del vínculo del menú principal: rgba(0,0,0,0.55)
• Color del vínculo del menú principal activo: #000000

Cuando se realicen estos cambios, haga clic en el botón azul «Guardar cambios».

Ahora debería tener un menú principal que se parece a la imagen de arriba. El toque final que vamos a hacer es agregar nuestros íconos sociales. De forma predeterminada, Divi está diseñado para mostrar los íconos sociales en su menú secundario, pero queremos colocar todo en un menú para que todo sea lo más simple y mínimo posible.

Lograr esto es fácil y no requiere imágenes o recursos externos. Divi viene con una familia de fuentes de íconos llamada «ETmodules» que vamos a usar para mostrar nuestros íconos sociales como elementos de menú.

Para hacer esto, tendremos que regresar a Menús> Menú principal en el personalizador de temas. Haga clic en el botón azul «Agregar elementos» y haga clic en la opción Enlaces personalizados en el segundo menú emergente.

En el campo URL pon la url de tu cuenta de twitter. En el campo Texto del enlace, escriba el siguiente tramo html:

Cuando haya terminado, haga clic en el botón «Agregar al menú». Ahora repita este proceso para Instagram usando este espacio html en el campo Texto del enlace de ese enlace personalizado:

Una vez que se hayan agregado ambos enlaces personalizados a su menú principal, haga clic en el botón azul «Guardar y publicar» antes de salir del personalizador de temas.

Ahora necesitamos agregar un CSS personalizado. Para hacer esto, vaya a Divi > Opciones de tema y desplácese hacia abajo hasta el panel CSS personalizado.

Agregue el siguiente css:

Cuando haya terminado, haga clic en el botón verde «Guardar cambios» en la parte inferior de la página de opciones del tema. Ahora debería tener un encabezado mínimo que se vea así.

Si desea usar diferentes redes sociales, simplemente puede cambiar la clase css para reflejar el ícono social y usar uno de los siguientes códigos de contenido:

Facebook = contenido: “e093”;

Google Plus = contenido: “e096”;

Pinterest = contenido; “e095”;

LinkedIn = contenido: “e09d”;

Tumblr = contenido: “e097”;

Skype = contenido: “e0a2”;

Flikr = contenido: “e0a6”;

Myspace = contenido: “e0a1”;

Regate = contenido: “e09b”;

YouTube = contenido: “e0a3”;

Vimeo = contenido: “e09c”;

RSS = contenido: “e09e”;

No olvide cambiar la clase css tanto en el tramo de enlace personalizado como en el css personalizado.

Creando tu pie de página mínimo

Ahora vamos a crear nuestro pie de página mínimo. Pero primero, debemos deshacernos del pie de página predeterminado de Divi. Para hacerlo, ve a Divi > Opciones de tema y desplázate hacia abajo hasta el panel CSS personalizado.

Coloque el siguiente fragmento de CSS dentro:

Cuando guarde sus cambios y actualice su sitio web, debería verse como la imagen a continuación.

Ahora vamos a reemplazar el pie de página anterior con una nueva sección de pie de página global. Para ello, active el constructor visual en la página de su cartera.

Agregue una fila de una sola columna a su sección predeterminada. Luego, agregue un módulo de texto dentro.

Cambia la orientación del texto a Centro. Y agregue sus créditos de pie de página en el área de contenido.

Agregue un segundo módulo de texto debajo del primero. Aquí es donde vamos a agregar nuestros íconos sociales en el pie de página usando el mismo método que usamos para el menú principal.

Cambia la orientación del texto a Centro y escribe el siguiente html en la sección de contenido:

Haga clic en el botón verde Guardar para cerrar la configuración del módulo de texto. Notarás que los íconos aún no están visibles. Esto se debe a que hemos cambiado la clase asociada para que podamos agregar sutilmente diferentes estilos solo a nuestros íconos de pie de página.

Para que aparezcan sus nuevos íconos, deberá navegar de regreso a Divi> Opciones de tema y bajar al panel CSS personalizado.

Coloque este fragmento dentro:

Esto usa los mismos códigos de contenido que usamos en el encabezado, pero cambia la opción de visualización de bloque a en línea. También agrega un poco de relleno necesario entre los dos íconos.

Cuando haya terminado, haga clic en el botón verde «Guardar cambios». Su nuevo pie de página mínimo debería verse como la imagen a continuación.

Finalmente, recomiendo guardar esta sección como un elemento global en su Biblioteca Divi. Esto no solo le facilitará agregarlo a todas sus páginas futuras, sino que si necesita editarlo, solo tendrá que realizar los cambios una vez en lugar de en cada página.

Para hacer esto, haga clic en el icono de guardar en la biblioteca para la sección. Asigne un nombre a su pie de página, marque la casilla «Hacer de este un elemento global» y haga clic en el botón azul «Guardar en la biblioteca».

Configuración de su módulo de cartera Divi

Ahora que tenemos nuestro encabezado y pie de página mínimos cuadrados, podemos crear nuestra cartera. Mencioné en la sección anterior «Preparación de elementos de diseño» que necesitará un mínimo de 20 imágenes para este ejercicio, todas en orientación horizontal y redimensionadas para tener un ancho de 1920px. No es necesario tener una altura uniforme, pero algunos de ustedes pueden preferir tener una imagen destacada uniforme en cada página del proyecto.

Obviamente, si tiene su propia obra de arte para usar, simplemente tendrá que elegir una imagen destacada para cada proyecto que desee presentar. Si simplemente sigue este tutorial como un ejercicio de diseño, puede obtener imágenes gratuitas de unsplash.com y cambiar su tamaño en consecuencia.

Antes de que podamos hacer algo significativo con el módulo Portafolio, deberá crear algunos proyectos de portafolio. Navegue en su administrador de WordPress a Proyectos > Agregar nuevo y cree/publique 20 nuevos proyectos. No tienes que poner ningún contenido en ellos en este momento. Simplemente agregue una imagen destacada a cada uno para que podamos manipular los elementos de diseño de nuestro módulo Portafolio y ver los resultados.

Ahora podemos regresar a nuestra página de inicio y crear una nueva sección con una sola columna. Continúe y agregue el módulo de cartera.

Cuando aparezca el modal de configuración, realice los siguientes cambios.

Configuración general del módulo de cartera:

• Diseño: Cuadrícula
• Número de publicaciones: 20
• Mostrar título: No
• Mostrar Categorías: No
• Mostrar paginación: No

Configuración de diseño del módulo de cartera:

• Color del icono de zoom: #ffffff
• Color de superposición de desplazamiento: rgba (0,0,0,0.76)
• Hover Icon Picker: cualquier icono que prefieras. Elegí una cámara ya que mi portafolio es para fotografía.

Una vez realizados estos cambios, haga clic en el botón verde Guardar. Arrastre la sección de cartera sobre la sección de pie de página. Tu página debería verse así ahora.

Para lograr el aspecto de cuadrícula cerrada de ancho completo que deseamos, necesitaremos modificar la configuración de la fila y la sección. Comencemos con la configuración de la fila.

Ajustes generales de fila:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Relleno personalizado: 0px superior

Configuración de diseño de fila:

• Margen personalizado: 0px superior

Cuando haya terminado, haga clic en el botón verde Guardar. Notará que todavía tiene un espacio en blanco entre la parte superior de su cartera y el menú.

Para arreglar eso, necesitamos modificar la configuración de la sección.

Sección Ajustes generales:

• Relleno personalizado: 0px superior

Guardar cambios.

Ahora tenemos nuestro resultado final deseado. Una hermosa y minimalista página de inicio de cartera divi.

Mañana: uso de filtros, secciones destacadas y llamadas a la acción para ampliar su cartera mínima

Mañana vamos a crear algunas versiones alternativas de esta página de inicio utilizando el módulo de cartera filtrable, las llamadas a la acción y las secciones de héroes. Esto no solo le brinda más opciones para elegir personalmente, sino que más adelante en la serie le mostraré cómo probar estos diseños entre sí usando Divi Leads. Demostrando objetivamente qué diseño es más efectivo para lograr sus objetivos.

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!