Page Builder Workspace

Última actualización: 14 de julio de 2024

Temas:

Creado para:

Principiante
Intermedio
Usuario

Cuando Page Builder está habilitado, la sección Content y el proceso de creación de contenido se modifican para aprovechar las herramientas avanzadas de Page Builder para las páginas de páginas, producto y categoría del CMS, bloques y bloques dinámicos. Esta sección incluye un campo_ Encabezado de contenido _, una vista previa del contenido y un acceso fácil al área de trabajo Page Builder de pantalla completa.

Sección de contenido con Page Builder vista previa

Encabezado de contenido

Dado que los motores de búsqueda buscan encabezados de nivel uno (H1), agregar un encabezado de nivel uno es una manera sencilla de garantizar que la página esté indexada correctamente.

NOTE

El campo Content Heading que aparece en la parte superior de la página es un campo heredado que admite contenido creado con versiones anteriores de Commerce. Sin embargo, no forma parte de Page Builder. Al Content Heading se le aplica el formato de encabezado H1 según la hoja de estilos asociada al tema actual. Se coloca justo encima del área de contenido activo definida por el escenario Page Builder.

Para tener el mejor control sobre el posicionamiento y el formato de los encabezados de todos los niveles, se recomienda dejar vacío el campo Content Heading y utilizar el tipo de contenido Page Builder Encabezado.

Encabezado de contenido y otros encabezados

Vista previa

Cuando expande la sección Content y hay contenido existente creado con Page Builder, muestra una vista previa del contenido tal como aparecería en una página. Haga clic en Edit with Page Builder o dentro del área de vista previa de contenido para abrir el área de trabajo Page Builder, donde podrá realizar las actualizaciones que sean necesarias.

Vista previa de la descripción del producto

NOTE

Para los formularios de producto y categoría, esta vista previa del contenido está habilitada de forma predeterminada, pero se puede deshabilitar. Si el rendimiento se ve afectado debido a la carga de la vista previa, puede deshabilitar la vista previa en la configuración de Administración de contenido.

Fase

Al abrir el área de trabajo Page Builder desde la vista previa, la fase es el área de trabajo principal donde puede crear y dar formato al contenido, e incluso realizar ediciones rápidas en el contenido activo. El escenario está inicialmente vacío, lo que proporciona la superficie de diseño en la que puede arrastrar filas, columnas y pestañas desde el panel izquierdo.

NOTE

A partir de la versión 2.4.1, la edición de contenido ahora es a pantalla completa solo para todas las áreas controladas por Page Builder: páginas de CMS, páginas de productos y categorías, bloques y bloques dinámicos. La edición a pantalla completa centra la atención en el contenido y proporciona una vista que se adapta mejor a la experiencia del usuario en la tienda.

Fase con contenido de página

NOTE

Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Ventanillas

Una ventanilla móvil es el área visible de una página web que ve un usuario. En el modo de diseño a pantalla completa, los botones de la ventanilla móvil se muestran encima del escenario Page Builder para mostrarle el contenido tal como lo ve el usuario del sitio en la tienda.

Botones de ventanilla

Page Builder también define puntos de interrupción para las ventanillas móviles. Los puntos de interrupción definen las anchuras mínima y máxima dentro de las cuales se aplican determinados estilos. Las ventanillas Page Builder proporcionan los siguientes puntos de interrupción de contenido:

Punto de interrupción del escritorio—min-width: 1024px. Este punto de interrupción aplica estilos definidos para anchuras de ventanilla que miden 1024 píxeles y más anchos.
Puntos de interrupción móviles—max-width: 768px, min-width: 640px. Estos puntos de interrupción aplican estilos definidos para anchos de ventanilla entre 768 píxeles y 640 píxeles.

Las ventanillas móviles Page Builder ofrecen dos características: vistas previas de contenido y configuración de punto de interrupción.

Previsualizaciones de contenido

De manera predeterminada, Page Builder proporciona dos vistas previas de ventanilla:

Escritorio: muestra la vista previa del contenido sin un ancho predefinido. Los estilos definidos por el escritorio (que utilizan la anchura mínima del punto de interrupción de 1024 píxeles) siguen aplicándose a la página. Sin embargo, la anchura de la ventanilla móvil del escritorio está definida por la configuración de los tipos de contenido de contenedor, como Filas. Al seleccionar la ventanilla móvil del escritorio, se muestra el estilo del contenido en la tienda cuando el ancho de la página del explorador es de 1024 píxeles y más ancho.
Móvil: muestra la vista previa del contenido con una anchura predefinida de 768 píxeles. A diferencia de la ventanilla móvil de escritorio, esta sí muestra el contenido de su página con una anchura de 768 píxeles, junto con los estilos definidos para las anchuras de los puntos de interrupción de 768 píxeles (máximo) y 640 píxeles (mínimo).

Configuración de puntos de interrupción

Los botones de ventanilla también proporcionan la opción de aplicar diferentes estilos de punto de interrupción a los tipos de contenido en función de la ventanilla seleccionada. De manera predeterminada, Page Builder proporciona la configuración de punto de interrupción para los campos Minimum Height de Filas, Columnas, Pestañas, Elementos de ficha, Banners, Reguladores y Diapositivas. Al seleccionar la ventanilla móvil y, a continuación, abrir el editor de uno de esos tipos de contenido, puede introducir valores de campo específicos de los puntos de interrupción de la ventanilla móvil. Los campos de tipo de contenido que permiten una configuración de punto de interrupción específica muestran un icono a la derecha del campo, similar al siguiente ejemplo para una fila:

Indicador de icono para la configuración del punto de interrupción

Panel

El panel Page Builder se encuentra a la izquierda del escenario y contiene tipos de contenido que se pueden arrastrar al escenario. A continuación, aparece un contenedor específico del tipo de contenido con una caja de herramientas de opciones. Los tipos de contenido se organizan en el panel de la siguiente manera:

Diseño

La sección Layout del panel Page Builder se usa para agregar filas, columnas o pestañas al escenario. Al arrastrar un tipo de contenido del panel al escenario, aparece un contenedor con una caja de herramientas de opciones específicas del tipo de contenido.

De manera predeterminada, el escenario Page Builder está vacío. A medida que arrastra tipos de contenido de diseño del panel al escenario, puede colocarlos encima, debajo o dentro de otros contenedores de diseño en la página. Las filas solo se pueden añadir directamente al escenario.

Page Builder panel con tipos de contenido de diseño y fase

Tipo de contenido de diseño

Descripción

Fila

Una nueva fila solo se puede arrastrar desde el panel al escenario y colocarse encima o debajo de otra fila, pestaña o grupo de columnas. También puede utilizar la opción Duplicar para realizar una copia de una fila existente.

Columna

Se puede arrastrar una columna desde el panel al escenario o a filas y pestañas. El número máximo de columnas que se pueden agregar viene determinado por el número de divisiones de cuadrícula especificado en la configuración.

Fichas

Se puede arrastrar una sola pestaña desde el panel hasta el escenario o hasta filas y columnas. Se pueden añadir pestañas adicionales desde la caja de herramientas.

Elementos

Utilice la sección Elements del panel Page Builder para agregar texto, encabezados, botones, divisores y código de HTML a cualquier contenedor de diseño en el Page Builder escenario. Cuando arrastra un tipo de contenido desde el panel a una fila o columna o a un conjunto de pestañas en el escenario, aparece un contenedor. Utilice la caja de herramientas de tipo de contenido para acceder a las opciones específicas del tipo.

Page Builder panel con tipos de contenido de elemento

Tipo de contenido de elemento

Descripción

Texto

Agrega un contenedor de texto y un editor al escenario.

Encabezado

Agrega un contenedor de encabezado al escenario.

Botones

Agrega un contenedor para un botón individual o un conjunto de botones al escenario.

Divisor

Agrega un contenedor para un divisor al escenario.

Código de HTML

Agrega un contenedor para el código de HTML al escenario.

Medios

Utilice la sección Media del panel Page Builder para agregar imágenes, vídeo, titulares, controles deslizantes y Google Maps a cualquier contenedor de diseño del Page Builder escenario. Cuando se arrastra un tipo de contenido multimedia del panel al escenario, aparece un contenedor con una caja de herramientas de opciones específicas del tipo de contenido.

Page Builder panel con tipos de contenido multimedia

Tipo de contenido de medios

Descripción

Imagen

Agrega un contenedor de imagen al escenario.

Vídeo

Agrega un contenedor de vídeo al escenario.

Titular

Agrega un contenedor de banner al escenario.

Regulador

Agrega un contenedor de deslizador al escenario.

Mapa

Agrega un contenedor Google Maps al escenario.

Añadir contenido

Utilice la sección Add Content del panel Page Builder para agregar contenido existente al Page Builder escenario. Cuando arrastra un tipo de contenido de medios desde el panel al escenario, aparece un contenedor. Use la caja de herramientas de tipo de contenido para tener acceso a_ Configuración _que son específicas del tipo.

Page Builder panel con Agregar tipos de contenido

Tipo de contenido

Descripción

Bloquear

Añade un bloque existente al escenario.

Bloque dinámico

Añade un bloque dinámico existente al escenario.

Productos

Añade una lista de productos a la fase.

Recommendations de producto

Agrega una unidad de recomendación a la fase.

Toolbox

Cada contenedor de contenido del escenario tiene una caja de herramientas de opciones. Las opciones varían según el tipo de contenido, pero generalmente incluyen Mover, Configuración, Ocultar/Mostrar, Duplicar y Quitar.

Mostrar la caja de herramientas

Pase el ratón sobre el contenedor para mostrar el cuadro de herramientas y elegir una opción.

Opciones de cuadro de herramientas de fila

Opciones del cuadro de herramientas

Opción

Icono

Descripción

Mover

Mueve el contenedor de contenido actual a otra posición del escenario.

Añadir

Agrega elementos secundarios como un botón, una diapositiva o una pestaña.

(etiqueta)

Identifica el tipo de contenido del contenedor.

Configuración

Abre las propiedades del contenedor de contenido en modo de edición.

Hide

Oculta el contenedor de contenido actual.

Mostrar

Muestra el contenedor de contenido actual.

Duplicar

Realiza una copia del contenedor de contenido actual.

Eliminar

Elimina el contenedor de contenido actual del escenario.

NOTE

Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

recommendation-more-help