Diseñador de la tienda

En Diseño de la tienda se abre el diseñador. A la izquierda elige los bloques, en el centro ve su tienda y a la derecha edita el elemento seleccionado.

Ampliar

1. 1Zonas: Página de inicio, Cabecera, Cabecera móvil, Pie de página y Diseño. Una página propia aparece aquí como pestaña adicional.
2. 2Panel izquierdo: Bloques, Elementos y Estructura.
3. 3Dispositivo: vista previa para escritorio, tableta y móvil.
4. 4Guardar y Publicar: el estado al lado indica si todo está guardado.
5. 5Restablecer de fábrica: restablece todo el diseño del tema activo. Más abajo.

Un bloque es una sección terminada, como una imagen de portada con tarjeta de código de acceso o una galería. A la izquierda están los más usados. Más bloques… abre la Biblioteca de bloques con todos.

Ampliar

La biblioteca ordena por categorías como Hero, Tienda, Imágenes y galería, Precios y paquetes, Contacto y Redes sociales. Un clic añade el bloque al final de la página. En la cabecera y el pie solo aparecen los bloques adecuados.

Haga clic en un elemento de la vista previa. Aparece un marco con una pequeña barra de herramientas y a la derecha se abren sus ajustes.

Ampliar

1. 1Contenido, Estilo, Avanzado: textos e imágenes, después márgenes, tamaño, alineación, fondo y borde, por último la visibilidad.

• Barra de herramientas: mover, duplicar, eliminar. En los textos, el lápiz abre la edición directamente en la vista previa.
• Estilo: los grupos con un punto verde contienen valores propios.
• Imágenes: cada campo de imagen abre su biblioteca de medios. JPG, PNG y WebP hasta 10 MB.
• Estructura: muestra todos los elementos como árbol. Allí cambia el orden arrastrando.

En Elementos añade piezas sueltas. Arrastre un elemento a la vista previa o haga clic en él.

Ampliar

1. 1Elementos: ordenados en grupos.

En los textos, {{year}} inserta el año actual y {{tenant}} el nombre de su estudio. Útil para la línea de copyright.

La cabecera existe dos veces: Cabecera para pantallas grandes y Cabecera móvil para tableta y móvil. Así cada una encaja con su dispositivo.

Ampliar

1. 1¿Con scroll? y ¿Subpágina? simulan cómo se ve la cabecera al desplazarse y en subpáginas.

• Elementos de cabecera: barra, logotipo, navegación, botón del carrito, código de acceso y botón de cuenta.
• El logotipo procede de sus ajustes. Con Origen del logo puede elegir también una imagen propia.
• Un bloque de cabecera nuevo se añade además del existente. Elimine después la cabecera antigua.

Con el selector de dispositivo ve su tienda como la ven las familias en ese dispositivo.

• Si ajusta márgenes o tamaños de letra en la vista de tableta o móvil, solo valen allí.
• Un punto naranja indica que un valor difiere del escritorio. Un clic sobre él recupera el valor del escritorio.
• En Avanzado oculta un elemento en dispositivos concretos.

Las familias ven siempre la última versión publicada. Su trabajo sigue siendo un borrador hasta que publica.

1. 1Guardar conserva el borrador. El estado pasa a Guardado.
2. 2Publicar pide una breve confirmación y pone en vivo el borrador de esta zona.
3. Repita esto en cada zona que haya cambiado.

• Si cambia de zona con cambios abiertos, Pixalo guarda el borrador automáticamente.
• Si cierra la ventana con cambios abiertos, el navegador pregunta antes.
• Solo el titular puede publicar. Los miembros del equipo con acceso a Diseño de la tienda pueden guardar.

En la pestaña Diseño define el aspecto de toda la tienda, también de la galería, el carrito y el checkout.

Ampliar

1. 1Aviso: estos valores valen en toda la tienda.
2. 2Colores del sitio: color primario, secundario y de acento con vista previa.

• Fondo y colores del sitio.
• Botón primario y secundario: colores, color al pasar el ratón, borde y radio de esquina.
• Campos y estilo de tarjeta: colores, bordes, sombras y colores de etiqueta.
• Fuentes: una para títulos y otra para el texto, de Google Fonts.

En Ajustes › General elige en Selección de tema el diseño base de su tienda.

• Pixalo guarda su diseño por tema. Si vuelve a un tema, su diseño anterior sigue ahí.
• Un tema que nunca ha usado empieza con su plantilla. Queda en vivo al instante.
• Los colores de la pestaña Diseño también pertenecen a cada tema.