Cómo crear un portafolio con Elementor - Guía paso a paso

Los portafolios son un aspecto fundamental de cualquier sitio web creativo.

En esta guía, le mostraremos cómo crear una cartera con Elementor.

Si no has oído hablar de Elementor antes, es un constructor de páginas fácil de usar para WordPress. 

Empecemos.

Cómo crear un portafolio con Elementor

Paso 1: Preparación de la página

Antes de empezar, tiene que crear una nueva página en su sitio web a través de su wp-admin > páginas > añadir nueva.

 Si utiliza nuestro tema Astra, verá Ajustes Astra en la barra lateral derecha. Ahí tienes que:

• Desactivar el Título
• Desactivar el Imagen destacada
• Seleccione Sin barra lateral en la sección Sidebar
• Seleccione Ancho total/Extendido en Diseño de contenidos

Una vez finalizado este paso, publique la página y haga clic en Edita con Elementor.

Paso 2: Configuración del widget de cartera

Una vez abierto el editor de Elementor, haga clic en el botón icono de engranaje y seleccione diseño de página como Lienzo Elementor.

Ahora, desplácese hacia abajo y arrastre y suelte el icono Widget de cartera en una sección. Después de eso, se puede ver algunos ajustes de la cartera en la barra lateral de edición Elementor.

Antes de diseñar, debe conocer la configuración de cada cartera.

Contenido

Los ajustes de contenido te ayudan a configurar el diseño, la consulta y la barra de filtros de tu portafolio. En esta sección, exploraremos esas opciones con más detalle.

Diseño

Hay varias opciones para el diseño de su cartera en Elementor incluyendo:

• Columnas - Establezca el número de columnas que desea mostrar en el widget.
• Mensajes por página - Seleccione el número de entradas o imágenes que desea mostrar.
• Tamaño de la imagen - Establece el tamaño de las imágenes.
• Albañilería - Mostrar las imágenes en el diseño de mampostería.
• Item Ratio - Seleccione la proporción del artículo.
• Mostrar título - Seleccione si desea mostrar el título o no, Este título se mostrará al pasar el cursor sobre la imagen / post.
• Título Etiqueta HTML - Seleccione la etiqueta del título (h1 a h6, div o párrafo).

Paso 3: Creación de la consulta personalizada

Consulta

Elementor incluye una amplia gama de opciones para construir una consulta personalizada para mostrar lo que quieras dentro de tu portafolio. 

• Fuente. Fuente dará la opción de elegir el contenido a mostrar en el widget. Como posts, páginas, selección manual, consulta actual y relacionados. Dependiendo de la fuente que elijas para la consulta, se te darán opciones que te permitirán filtrar los resultados.

Incluya

• Incluido por - Esta opción le ayuda a mostrar las entradas por Término o Autor. Si eliges Término, puedes mostrar las entradas por categorías, etiquetas, formatos y taxonomías personalizadas.
• Fecha - Seleccione entre Todo, Día anterior, Semana anterior, Mes anterior, Trimestre anterior, Año anterior, Personalizado (Elija antes o después de la fecha).
• Ordenar por - Establece el orden de visualización de los mensajes. Ordenar por incluye: Fecha, Título, Orden del menú y Aleatorio.
• Pedido - Orden ascendente (ASC) o descendente (DESC).
• Ignorar mensajes pegajosos - Sí o No.
• ID de consulta - Asigne a su consulta un identificador único personalizado para permitir el filtrado en el servidor.

Excluir

• ID de consulta - Asigne a su consulta un identificador personalizado único para permitir el filtrado en el servidor.
• Excluido por - Excluir la entrada de la visualización. Tiene la opción de excluir la entrada según la Entrada actual, Selección manual, Término o Autor. Si selecciona Término manual, busque el título de la entrada y exclúyala de la visualización. 
• Evitar duplicados - Seleccione Sí para evitar que aparezcan mensajes duplicados. Esto sólo afecta al frontend.
• Offset - Utilice esta opción para omitir entradas (por ejemplo, "2" para omitir 2 entradas).
• Fecha - Seleccione entre Todo, Día anterior, Semana anterior, Mes anterior, Trimestre anterior, Año anterior, Personalizado (Elija antes o después de la fecha).
• Ordenar por - Establece el orden de visualización de los mensajes. Ordenar por incluye: Fecha, Título, Orden del menú y Aleatorio.
• Pedido - Orden ascendente (ASC) o descendente (DESC).
• Ignorar mensajes pegajosos - Sí o No.
• ID de consulta - Asigne a su consulta un identificador personalizado único para permitir el filtrado en el servidor.

Barra de filtros

• Mostrar - Elija si desea mostrar la barra de filtro por encima de la cartera. Ayudará a los usuarios a filtrar las publicaciones de la cartera a partir de los términos disponibles.

• Taxonomía - Seleccione Taxonomía para mostrar las entradas. Las opciones incluyen Categorías, Etiquetas y Taxonomías de cualquier tipo de entrada personalizada.

Paso 4: Estilizar su portafolio Elementor

Elementor facilita la creación de hermosas carteras con una amplia gama de opciones de estilo. 

Artículos

• Columnas Gap - Establece el espacio entre columnas de elementos.
• Filas Gap - Establece el espacio entre filas de elementos.
• Radio del borde - Establece el radio del borde de los postes.

Superposición de elementos

• Color de fondo - Seleccione el color de superposición de fondo.
• Color - Establece el color del encabezado de la entrada.
• Tipografía - En Tipografía, puede elegir la familia de fuentes, el tamaño, el peso, la transformación, el estilo, la decoración, la altura de línea y el interlineado para el título de la entrada.

Barra de filtros

Si habilita la opción Barra de filtro en la sección Contenido, entonces necesita darle estilo aquí.

• Color - Establezca el color real para el texto de la barra de filtros.
• Color activo - Establezca el color activo para el texto de la barra de filtros.
• Tipografía - En Tipografía, tiene la libertad de elegir Familia de fuentes, Tamaño, Peso, Transformar, Estilo, Decoración, Altura de línea, Espaciado entre letras para la Barra de filtro.
• Espacio entre - Establezca el espaciado exacto entre cada texto.
• Espaciado - Establezca el espaciado entre la Barra de filtro y los puestos de la Cartera. 

Paso 5: Configuración avanzada del portafolio de Elementor

Los ajustes avanzados te ayudan a hacer tu portafolio un poco más único y atractivo. Con la ayuda de estos ajustes, puede establecer el relleno y los márgenes, Efecto de movimiento, Color de fondo, y más para el widget de cartera.

Una vez finalizados todos estos ajustes, en última instancia obtendrá una cartera atractiva y de aspecto elegante.

He aquí un resumen de cómo creamos esta sencilla cartera:

1. En primer lugar, creamos una página para un portafolio.
2. Seleccionamos el diseño de contenidos Astra como Ancho total/Extendido y el diseño de página de Elementor como Lienzo Elementor(Como ya se ha mencionado).
3.  Widget de cartera insertado en una sección.
4. En Configuración del diseño, seleccionamos el número de columnas, las entradas por página, el tamaño de la imagen, la proporción de elementos y el título de la muestra.
5. En Configuración de la consultaSi seleccionamos entradas como fuente, las entradas se ordenan por fecha y en orden ascendente.
6. Elegido Barra de filtro para mostrar encima de las entradas y seleccionó Categorías como taxonomía de la barra de filtros.
7. Después de esto, empezamos estilizar la cartera añadiendo espacio entre columnas y filas, radio de borde, color de fondo de superposición y color de título, colores de barra de filtro.

Así es como puede crear fácilmente su propia cartera con el Elementor Widget de cartera. También hay una gama de plantillas de carteras prediseñadas disponibles tanto en Elementor como en otros desarrolladores. 

Estas plantillas están especialmente diseñadas para Elementor usuarios. Aquí están nuestros 5 mejores.

Top 5 Plantillas Elementor Portfolio

Si no quieres crear un portafolio desde cero, Elementor te ofrece plantillas gratuitas de portafolios prediseñados. Estas se pueden importar y editar fácilmente según tus preferencias.

Por si no lo sabes, Astra también incluye cientos de plantillas de inicio en las que puedes basar tu portafolio. Estas plantillas pueden ahorrarte tiempo y energía en la construcción de tu portafolio, ¡permitiéndote crear un portafolio completo en menos de una hora!

Éstos son nuestros favoritos plantillas de portafolio para Elementor.

1. Portafolio fotográfico - Astra

Portafolio fotográfico es un plantilla de sitio web de fotografía creado por el equipo de Astra. Hecho para fotógrafos. La plantilla viene con secciones de héroe de pantalla dividida para captar la atención de los usuarios. 

Con esta plantilla, los fotógrafos pueden mostrar fácilmente sus mejores fotos. 

Fuente de la plantilla: Plantillas de arranque Astra.

Ideal para: Fotógrafos.

Precios: Gratuito para los usuarios de Astra Pro.

2. Towercon - Elementor

TowerCon es un Elementor premium plantilla diseñada para la arquitectura y diseñar sitios web. 

Esta plantilla tiene un diseño altamente personalizable y flexible. Todos los colores, tipografía y elementos visuales trabajan juntos para crear una hermosa cartera con una experiencia de navegación suave.

Fuente de la plantilla: Recursos de Elementor.

Ideal para: Sitio web de arquitectura y diseño.

Precios: Gratis para Elementor Pro usuarios.

3. Servicios de transporte - Astra

La plantilla de servicios de transporte tiene una gran combinación de colores. Esta plantilla de cartera de aspecto elegante puede captar fácilmente la atención del usuario. 

La plantilla tiene todas las secciones esenciales como Quiénes somos, Servicios, Flota, Contacto, Testimonios e Información. 

Este diseño de páginas web de transporte es ideal para proveedores de servicios de transporte. Nuestra parte favorita de la plantilla es que los proveedores de servicios pueden mostrar fácilmente sus estadísticas en una sección sencilla y atractiva.

En resumen, "es la mejor plantilla de cartera jamás creada para sitios web de prestación de servicios de transporte".

Fuente de la plantilla: Plantillas de arranque Astra.

Ideal para: Servicios de transporte.

Precios: Gratuito para los usuarios de Astra Pro.

4. Plantilla de fotógrafo de moda - Elementor

Esta es una plantilla de portafolio de fotógrafo de moda, que viene con una sección de héroe de pantalla dividida, la pantalla dividida es una manera eficaz de atraer la atención del usuario. 

Esta plantilla de portafolio utiliza un diseño de cuadrícula de mampostería con imágenes de diferentes tamaños. Un diseño de cuadrícula de mampostería es una gran opción para transmitir interés visual. 

También hay una sección dedicada a los testimonios. Los testimonios son la mejor manera de mejorar los niveles de confianza y aumentar la probabilidad de que los visitantes conecten con usted como persona o con su empresa/marca.

Astra también tiene algunas plantillas para sitios web de modaCompruébelo.

Fuente de la plantilla: Biblioteca Elementor.

Ideal para: Fotógrafos.

Precios: Gratis para Elementor Pro usuarios.

5. Growth Marketer - Astra

Growth Marketer es otra plantilla de cartera de aspecto elegante para un vendedor de contenido o vendedor digital. 

La plantilla viene con todas las secciones esenciales que se requieren para un vendedor de contenido. Por ejemplo, la sección Servicio, Cómo funciona, Suscripción, Testimonios (opinión de los clientes) y Contacto.

Esta plantilla de portafolio fácil de usar ofrece toda la información a los usuarios y les anima a pasar a la acción.

Fuente de la plantilla: Plantillas de arranque Astra.

Ideal para: Marketing de contenidos/marketing digital.

Precios: Gratuito para los usuarios de Astra Pro.

Estas son algunas de las mejores opciones para crear tu propio portfolio con Elementor. Aunque son ideales para usuarios específicos, puedes editarlas según tus preferencias para cree el sitio web ideal para su cartera con Elementor.

Conclusión

Crear un buen portafolio requiere mucho tiempo y esfuerzo. Pero crear tu sitio de portafolio perfecto puede ser manejado en cuestión de horas gracias a la opción de portafolio de Elementor.

Tener un portafolio aumenta las posibilidades de conseguir contactos, gracias a que tu trabajo está a la vista de todo el mundo. Puede abrirte fácilmente la puerta a cientos de oportunidades y también ayudarte a destacar entre miles de competidores.

Crear un portafolio con el widget Elementor Portfolio no podría ser más fácil Puedes crear tu propio portafolio desde cero o simplemente importar las plantillas de portafolio disponibles de Elmentor o Astra. ¡Tú eliges!

Espero que con la ayuda de este artículo sepas cómo crear carteras con Elementor. 

Si tiene alguna duda sobre cómo crear una cartera o Astra de portafolio, ¡háganoslo saber en la sección de comentarios más abajo!