Tutorial de Elementor: cómo crear un portafolio clasificado

Con este tutorial te ayudaremos a añadir una página de portafolio a tu sitio web con la ayuda del constructor web Elementor. Para hacer esto, primero debes instalar el complemento JetElements. Es un complemento de WordPress multifuncional que contiene el widget que necesitaremos hoy. Si todo está listo, empecemos.

  1. Abre Elementor y busca el widget de portafolio al escribir "Portfolio" en el campo de búsqueda a la izquierda.
  2. Arrástralo y suéltalo en una nueva sección.
  3. Obtendrás un layout básico de seis secciones.
  4. A la izquierda verás Content Settings (Configuración de contenido). Aquí tienes una serie de ajustes de layout: masonry, grid, justify y list (mampostería, cuadrícula, justificado y lista).

  5. Debajo de este bloque de ajustes verás la pestaña Items (Artículos) en la que puedes agregar imágenes.

  6. El siguiente paso es personalizar cada imagen dentro de la pestaña Items.
  7. Aquí puedes reemplazar imágenes, cambiar sus títulos y descripciones, así como hacer que se pueda hacer clic en cada imagen (es decir, hacerla cliqueable).
  8. A continuación podrás añadir enlaces y establecer dos opciones: abrir el enlace en una nueva ventana y añadir nofollow.
  9. También hay un campo de categoría en el que puedes escribir el nombre de categoría para este portafolio.
  10. Después de determinar esta categoría, verás un filtro que se emerge en la parte superior de tus imágenes. Ten en cuenta, por favor, que puedes añadir varias categorías a una imagen. Simplemente separa estas categorías con comas.
  11. Ahora vuelve a la pestaña Settings (Configuración).
  12. Encuentra la opción Preset. Te ayuda a elegir el estilo preestablecido que se aplica a los artículos de tu portafolio. Se puede ver una vez que se pasa el cursor sobre algún elemento. Este widget te ofrece cuatro opciones: prueba cada una de las opciones y elige la más adecuada.
  13. A continuación puedes proceder a otros campos del bloque. Dependiendo del tipo de layout que eliges, aparecerán diferentes configuraciones. Por ejemplo, para la mampostería y la cuadrícula puedes establecer un cierto número de columnas, para el estilo justificado puedes establecer la altura del elemento y para la lista no verás ninguna configuración adicional.
  14. El siguiente paso es el botón View More (Ver más). Es una función que te permite ocultar una serie de imágenes. Si tienes demasiadas imágenes y deseas ahorrar algo de espacio en la página, puedes establecer el número de elementos mostrados por página.
  15. Sin embargo, recuerda que no debe ser menor que el número total de artículos en tu portafolio.
  16. Además, puedes cambiar el texto del botón.
  17. Ahora puedes ir a la sección Style (Estilo) para personalizar tu portafolio.

  18. En el primer bloque puedes aumentar o disminuir el margen del elemento, establecer el radio del borde, el tipo de borde y el relleno.
  19. Luego procede a la configuración de los filtros.
  20. La última opción es elegir un icono de separador y editar sus parámetros.
  21. Abajo verás la configuración del estilo de enlaces (color, tipografía, etc.).
  22. La siguiente pestaña se llama Contenido. Te permite editar las imágenes de tu portafolio.
  23. Aquí puedes cambiar varios parámetros del contenedor, imágenes, títuloa,  descripciones, botones y establecer su orden. Además, hay configuraciones para la categoría, incluso la opción para mostrar la lista de categorías en los artículos del portafolio.
  24. Y la última pestaña de la sección Estilo es el botón Ver más. Se te permite personalizar su color, tipografía y tamaño.


Y eso es todo, ¡ya has terminado con el estilo de tu portafolio! Ahora sabes cómo añadir un portafolio y personalizarlo con la ayuda del complemento JetElements. Gracias por leer y esperamos que te guste esta entrada!

Fuente: "Elementor Tip: How to Create a Categorized Portfolio" por Victoria