Cómo crear una página de cartera en WordPress con Elementor

Publicado: 2025-08-15

Una página de cartera es una de las mejores maneras de mostrar su trabajo en línea. Esta página es importante no solo para individuos sino también para organizaciones y agencias. En esta página, cualquiera puede resaltar los proyectos que ha completado de manera cautivadora para que puedan atraer a más clientes y clientes.

Tener un sitio de cartera se ha convertido en una norma común en este mundo moderno, sin importar si usted es un empleado distinguido o un más fresco en el mercado laboral. De esta manera, los clientes en todo el mundo pueden encontrarlo, conectarse con usted y ofrecer nuevos proyectos. Por lo tanto, puede abrir oportunidades ilimitadas para usted.

Con WordPress y Elementor, crear una página web de cartera es muy fácil. Porque puedes hacerlo simplemente arrastrando y suelto, sin codificar. En esta publicación de tutorial, le explicaremos cómo crear una página de cartera en WordPress con Elementor. ¡Empiece!

¿Qué es una página web de cartera?

Una página web de cartera es una página dedicada donde puede mostrar su trabajo, habilidades y logros. Actúa como un escaparate digital, lo que permite a los visitantes ver qué puede hacer y lo que ha hecho en el pasado. Puede incluir imágenes, videos, estudios de casos, testimonios y otro contenido que demuestre sus habilidades.

Los sitios web de cartera son populares entre profesionales creativos como diseñadores, fotógrafos, escritores, desarrolladores y artistas. El objetivo principal de un sitio web de cartera es impresionar a clientes o empleadores potenciales y alentarlos a contratarlo o trabajar con usted.

Diferencias entre un sitio web de cartera y una página web de cartera

Muchas personas se confunden entre un sitio web de cartera y una página web de cartera. Aunque suenan similares, son diferentes en cómo presentan su trabajo en línea. Comprender estas diferencias lo ayudará a decidir cuál se adapta mejor a sus necesidades al construir su presencia en línea.

Característica Sitio web de cartera Página web de cartera
Definición Un sitio web completo dedicado a mostrar su trabajo, habilidades y servicios Una sola página dentro de un sitio web más grande que muestra una selección de su trabajo
Tamaño Cubre varias páginas (hogar, sobre, servicios, blog, contacto) Solo una página enfocada solo en su cartera
Contenido Más detallado con información adicional Contenido limitado, centrado principalmente en mostrar proyectos o muestras
Navegación Tiene un menú para navegar entre diferentes páginas Sin menú, o navegación mínima dentro de la página única
Objetivo Para construir una presencia completa en línea Para agregar una sección de cartera dentro de un sitio web existente, a menudo para un espectáculo rápido
Flexibilidad Más flexible para agregar nuevas secciones y contenido regularmente Menos flexible, ya que es solo una página, en su mayoría contenido estático

Verifique cómo crear un sitio web de cartera en WordPress con Elementor.

Elementos puede tener una página web de cartera

Elements a Portfolio Web Page May Have

Como ya saben que una página de cartera generalmente tiene menos contenido que un sitio web completo, debe centrarse en las partes más importantes que muestran claramente su trabajo. A continuación se presentan las cosas que puede considerar mostrar en la página web de la cartera.

1. Una breve introducción

Una breve introducción que le dice quién eres y qué tipo de trabajo haces. Esto ayuda a los visitantes a conectarse con usted de inmediato sin leer una larga biografía.

2. Galería de cartera

Esta es la sección principal para mostrar sus proyectos. Use imágenes o videos claros con títulos cortos o descripciones. Organice bien su trabajo, para que los visitantes puedan ver fácilmente sus mejores habilidades. Aprenda a usar la galería de imágenes Elementer.

3. Información o botón de contacto

Agregue una forma simple para que las personas se comuniquen con usted, como una dirección de correo electrónico, número de teléfono o un botón de contacto que vincula a un formulario o correo electrónico.

4. Llamado a la acción (CTA)

Guíe a los visitantes sobre qué hacer a continuación. Ya sea que lo contrate, pidiendo más detalles o viendo más trabajo, un CTA claro ayuda a convertir a los visitantes en clientes.

Cómo crear una página de cartera en WordPress con Elementor: guía paso a paso

How to Create a Portfolio Page in WordPress with Elementor: Step-by-Step Guide

Recuerde que una página de cartera es parte de un sitio web. Como ya se mencionó, se pueden crear páginas de cartera para cualquier sitio web. Por lo tanto, si desea diseñar una página de cartera, a menudo puede sentir la necesidad de diseñar o modificar otras páginas en su sitio web. Ahora, para diseñar su página de cartera con Elementor, necesitará los siguientes complementos.

  • Elemento
  • Elementor Pro
  • Happyaddons
  • Happyaddons pro

HappyAddons es un complemento bien conocido del complemento Elementor. Viene con más de 130 widgets adicionales y varias docenas de características potentes por las cuales puede superar las limitaciones del complemento Elementer y mejorar el diseño de su sitio web. Ambos juntos pueden crear posibilidades ilimitadas en su sitio.

Una vez que estos complementos se instalen y activen en su sitio, comience a seguir los pasos explicados a continuación.

Paso 01: decida los elementos que desea mostrar en la página de la cartera

Antes de comenzar a diseñar, es importante decidir qué desea incluir en su página de cartera. Dado que esta página debe estar limpia y enfocada, debe seleccionar solo los elementos más esenciales que resalten su trabajo de manera efectiva. Ya le hemos dicho qué incluir en la página.

  • Una breve introducción
  • Galería de cartera
  • Información o botón de contacto
  • Llamado a la acción

Paso 02: Abra una página con el lienzo Elementor

Ahora, abra una página con el lienzo Elementor. Aquí, debe arrastrar y soltar elementos y agregar contenido adecuado.

Nota: Ya creamos un encabezado con el constructor de temas que aparece en la parte superior.

Open a Page with the Elementor Canvas

Paso 03: Agregue una descripción breve

Seleccione un tamaño de columna adecuado para el lienzo basado en el ancho que su contenido puede requerir. Estamos seleccionando el contenedor de una sola columna.

Add a Short Description

Para alinear el diseño del contenedor con el encabezado, cambiaremos su color de fondo. Para hacer esto, presione el icono de seis puntos en la parte superior del contenedor, vaya a la pestaña Estilo y haga clic en la opción Color en la sección de fondo .

Ahora, elija un color para el contenedor.

change the background color of the container

Cuando su color deseado se aplique al fondo del contenedor, busque y agregue el widget de encabezado al contenedor.

Este widget creará un espacio donde podrá escribir un título o dirigirse a la página . Hazlo.

Add the heading widget

Puede ver que hemos escrito un título para la página 'Inspirarse en mis proyectos pasados'. Puede estilizar su tamaño, tipografía, color y muchas otras opciones de la pestaña de estilo.

Title written for the portfolio web page

Agregue el widget del editor de texto debajo del widget de encabezado como se muestra en la imagen adjunta a continuación. Esto le permitirá escribir una descripción breve.

Add the Text Editor widget to the portfolio page

De la misma manera, hemos agregado una descripción a la página de la cartera y establecemos una alineación, tipografía y color adecuados para el texto.

Description is added to the portfolio page

Paso 04: Agregue un botón a la página

Con un botón CTA, puede presionar a los usuarios para visitar otra página que desee. Por lo tanto, es mejor agregar un botón antes de crear la sección de cartera.

Add the button widget to the portfolio page

Desde la pestaña Contenido , puede agregar su copia deseada para el botón .

Write a copy for the CTA button

Stylize the button

Agregando relleno

Add padding to the container

Después del botón, he agregado un texto corto que brinda un ambiente de confiabilidad a los usuarios.

Added social proof to the portfolio page

Paso 05: crea la sección de cartera

Ahora, es hora de crear la sección de cartera donde exhibirá visualmente sus tareas. Para hacer esto, primero agregue un nuevo contenedor en la primera sección.

Add a container to creat the portfolio section

Agregue el widget de pestañas a la sección de cartera. Este widget le permitirá crear pestañas ilimitadas y luego agregar widgets adecuados a cada pestaña para que pueda mostrar cualquier tipo de contenido que desee por separado.

Add the tabs widget to the portfolio section

# Nombra las pestañas

Se supone que cada pestaña funciona como una categoría. Entonces, debes cambiarte el nombre de.

Para cambiar el nombre de las pestañas, seleccione el widget , vaya a la pestaña de contenido , haga clic para abrir una pestaña que desee y escriba un nombre para la pestaña en el título.

Name the tabs

De la misma manera, agregue nombres a todas las pestañas. Luego, si es necesario, haciendo clic en el botón de pestaña + Agregar , puede agregar más pestañas a la sección de cartera.

Add more tabs to the portfolio section

# Estilizar el widget de pestañas

Ahora, desde la pestaña de estilo , puede agregar un color de fondo a las pestañas, cambiar su tipografía , agregar un color de borde y más. Haga estas personalizaciones necesarias usted mismo.

Stylize the Tabs widget

Paso 06: comience a agregar contenido a las pestañas

Al igual que el lienzo de Elementer predeterminado, obtendrá una interfaz similar en cada pestaña para agregar widgets y mostrar contenido respectivo. Haga clic en el icono más (+) .

Start adding content to the portfolio tabs

Seleccione una estructura de columna adecuada para la sección de cartera. Estamos seleccionando la estructura de 3 columnas pero seis contenedores. Luego, puede agregar cualquier widget que pueda mostrar el contenido deseado.

Select a column structure for the portfolio page

# Mostrar contenido de cartera

Por ejemplo, hemos agregado los widgets de la imagen, el encabezado y el editor de texto en serie a un contenedor para crear nuestro diseño de contenido.

Usando estos widgets, puede mostrar visualmente los elementos de su cartera y acompañarlos con contenido textual tanto como sea necesario.

Display Portfolio Content

Puede ver que hemos agregado contenido al contenedor. Después de eso, hemos establecido un color para el encabezado y la descripción. Además, hemos agregado un radio al borde del widget y el contenedor. Espero que puedas hacer esto tú mismo.

Content added to the container

De la misma manera, agregue el contenido de su cartera a todos los contenedores.

Nota: Pero todo este contenido puede verse tan desordenado, ¿verdad? Es porque no tienen espacio en el medio.

Add portfolio content to all containers

# Agregar espacios entre contenedores en la página de cartera

Para agregar espacio entre ellos, seleccione el contenedor madre , vaya a la pestaña de contenido , venga a la opción GAPS e ingrese valores para agregar espacio entre los contenedores.

Puede ver la diferencia en la imagen adjunta a continuación.

Add spaces between containers on the portfolio page

Paso 07: Agregar contenido a la otra pestaña

No todas las pestañas deben seguir el mismo diseño de contenido. No es obligatorio. Puede crear diferentes diseños para diferentes pestañas.

Por ejemplo, agregaremos el widget de la galería a la segunda pestaña. Con este widget, puede mostrar los elementos de su cartera solo visualmente. No es posible mostrar información textual.

Add Content to the Other Tab

Puede ver que hemos agregado imágenes a la galería.

Gallery created to display the portfolio items

Al desplazar un poco la pestaña de contenido, obtendrá opciones para personalizar el orden de la imagen, el número de columna, el espacio, el tipo de galería y la resolución de imágenes .

Customize the gallery layout

De la misma manera, agregue contenido a las pestañas restantes. Por lo tanto, puede completar la creación de su sección de cartera.

Paso 08: Agregue un formulario al final de la página (opcional)

Entonces, su sección de cartera está lista. Puede finalizar su página aquí o agregar algunos elementos más, como un formulario de contacto, un llamado a la acción o de lo contrario.

Puede ver que hemos agregado un formulario de contacto al final de la página. Aprenda cómo crear una página de contacto en Elemoror.

Add a Form at the End of the Portfolio Page

Paso 09: Vista previa de la página de cartera

Cuando todo esté hecho, vaya a la página de la cartera para verificar si todo funciona bien o no. Puede ver en el breve video clip adjunto a continuación ese widget de pestañas, lo que significa que la sección de cartera principal funciona sin problemas. Espero que también funcione bien por tu parte.

Por lo tanto, puede crear una página de cartera en su sitio de WordPress con la ayuda de los complementos de Elementor y HappyAddons.

¡Final palabra!

Hemos presentado la demostración de una página de cartera básica en este tutorial. Obviamente, cuando sea su turno, definitivamente intentará crear una página de cartera integral y rica en contenido. Pero espero que puedas darte cuenta de que presentar todo en una publicación de blog/tutorial nunca es fácil.

Solo queríamos presentarle las herramientas y cómo usarlas para crear una página de cartera. Estamos seguros de que puedes hacer el resto tú mismo. Sin embargo, si necesita alguna sugerencia o consejo sobre Elementor, HappyAddons y el diseño de sitios web, puede mencionarlo en el cuadro de comentarios a continuación.

O puede darnos una charla. Nuestro equipo de apoyo se pondrá en contacto con usted muy pronto. Gracias por estar con nosotros hasta el final. ¡Que tengas un buen día por delante!