Cuando se trata de promocionar un producto en línea, una landing page bien diseñada puede marcar la diferencia para el éxito de tu tienda. Con la plantilla de ventas de productos, puede contar una hermosa historia de producto jugando con colores y elementos visuales.

En este artículo, aprenderás a personalizar una landing page creada con la plantilla de ventas de productos:

  1. Pantalla Above-the-fold

  2. Product details

  3. Description sections

  4. Comentarios

  5. Pie de página

Pantalla Above-the-fold

Dado que la pantalla superior es lo primero que ven tus visitantes cuando llegan a tu landing page, tiene que destacarse. Utiliza los selectores de color para crear un hermoso color de fondo degradado lineal. Coloca el cursor sobre la sección y haz clic en el icono de engranaje.

Coloca el cursor sobre una imagen predeterminada para reemplazarla con la tuya. La imagen que viene con el contenido de demostración tiene un fondo transparente, pero puede cargar cualquier imagen. Agrega una sombra si es necesario en la configuración de la mayor sección Hero.

Edita el encabezado de la demostración: agrega tus propias palabras y usa el editor de texto en línea para darles estilo.

El botón se ancla a la sección de detalles del producto a continuación. En otras palabras, tus visitantes serán llevados al área de detalles del producto cuando haz clic en este botón. Coloca el cursor sobre el elemento botón para editarlo. Ajusta los colores y la redacción predeterminados. Puedes quitarlo si es necesario.

Debajo del botón, está el elemento de clasificación de Estrellas. Piensa en este elemento como una calificación promedio de producto. Utiliza los selectores de color para encontrar los colores perfectos y el elemento paso a paso para administrar el número. Puedes eliminar el recuento de calificación promedio deshabilitando la opción correspondiente. Si no necesitas esta sección EN ABSOLUTO, haz clic en el icono de la papelera para eliminarla de la página.

Sección de detalles del producto

Esta sección muestra los detalles de tu producto: título del producto, Una breve descripción, galería de imágenes, atributos, precios, descuentos por volumen y el botón Añadir al carrito.

La galería de imágenes, los atributos y los precios no se pueden editar con el generador de arrastrar y soltar. Para realizar cambios en tu producto, ve a tu panel de administración de WP → productos.

Esto es lo que puedes editar usando el creador de Landing Pages:

  • Título del producto. Utiliza el campo correspondiente para realizar cambios en el nombre de tu producto. Siéntete libre de cambiar el color negro predeterminado también.

  • Una breve descripción. Esta frase corta se puede encontrar encima del título de tu producto y puede ser cualquier cosa que desees.

  • DESCRIPCIÓN. En el área de texto, agrega tu propia copia que describa tu producto. Esta área de texto está adaptada al código, por lo que puedes seguir adelante y agregar etiquetas.

  • Colores. Utiliza los selectores de color correspondientes para crear la apariencia adecuada para la sección de detalles de tu producto.

  • Información adicional. Debajo del botón Agregar al carrito, encontrarás algunos detalles de envío y reembolsos. Cambia el texto predeterminado o elimínalo.

Con esta plantilla, puedes mostrar a tus visitantes un botón pegajoso de 'agregar al carrito' no solo en la versión móvil, sino también en la versión de escritorio de tu landing page. Utiliza la opción Activar el botón pegajoso 'añadir al carrito'.

Personalización de secciones de descripción

Con cada bloque de descripción, puedes cambiar fácilmente el color de fondo de la sección.

Coloca el cursor sobre la sección y haz clic en el icono de engranaje. Utiliza el selector de color para ajustar el color de fondo predeterminado según tus preferencias.

Selecciona un fragmento de texto que te gustaría editar. Usa el editor de texto en línea para cambiar el color del texto, el tamaño de la fuente, ponerlo en negrita, etc.

Puedes añadir nuevos elementos de contenido a tus secciones. Para hacerlo, abre la pestaña de Contenido, haz clic en un elemento y mantenlo presionado, y arrástralo a tu sección. Suelta el ratón para soltarlo.

Para reemplazar una de las imágenes predeterminadas, haz clic en el icono Configuración. Utiliza el botón Reemplazar para llamar a la ventana de medios. Elige otra imagen y haz clic en el botón Seleccionar.

Comentarios del producto

Debajo de las secciones de descripción encontrarás el área de comentarios de clientes. Por defecto, esta área se ve así:

  • Encabezado. No dudes en cambiar la redacción predeterminada y utilizar el editor de texto en línea para jugar con el estilo predeterminado.

  • Texto de descripción. Aquí es donde puedes agregar más detalles sobre tus comentarios de productos. Nuestros elementos de texto están optimizados para mostrar Emoji, ¡así que dale una oportunidad!

  • El elemento de comentario destacado. Este elemento tiene un aspecto prominente así que considéralo como el comentario más importante en la página. El elemento de comentario destacado se personaliza manualmente. Puedes cambiar prácticamente todo lo relacionado con él: cargar una nueva foto de cliente, editar el nombre predeterminado, escribir tu propio texto en el área del núcleo del comentario y cambiar el color de fondo.

  • Comentarios del producto Estos se importan automáticamente desde la página de un solo producto. Para editar estas reseñas, eliminarlas o agregar nuevos testimonios, ve a la configuración de la página de un solo producto.

Pie de página

En el área de pie de Página, hay enlaces a las páginas de utilidad que se abren en una ventana emergente:

  1. Política De Privacidad

  2. Términos y Condiciones

  3. Devoluciones y reembolsos

Estas páginas no se pueden cambiar en este momento. En otras palabras, no hay opción de reemplazar el enlace de Política de privacidad con, digamos, la página Acerca de nosotros.

Para editar el contenido de estas páginas, ve a tu área de administración de WP → páginas.

Para mostrar u ocultar el elemento conmutador de moneda, ve a la pestaña CONMUTADOR DE MONEDA. Habilita o deshabilitea la opción correspondiente.

Para obtener más información sobre la configuración de WP, consulta esta guía.

¿Encontró su respuesta?