Domina el editor de temas: una guía completa

Tu escaparate es el aparador de todo lo que vendes, y en Dirora le das forma con el editor visual de temas: un espacio de trabajo de arrastrar y soltar donde creas páginas, defines los colores y las tipografías de tu marca y ves cada cambio aparecer al instante en una vista previa en directo. No hay que escribir código y no hay nada que se pueda romper: tú ordenas las piezas y el motor de maquetación se encarga del marcado adaptable y de alto rendimiento que hay debajo. Esta guía recorre todo el editor, desde el primer clic hasta un diseño listo para publicar.

Si aún dudas de si puedes crear una tienda sin un desarrollador, la respuesta breve es que sí, y nuestro artículo sobre si necesitas saber programar para abrir una tienda online lo explica con más detalle. El editor de temas es donde esa promesa se hace realidad.

Qué es realmente el editor de temas

Piensa en el editor como dos elementos que trabajan juntos. En la parte superior está un lienzo WYSIWYG: lo que ves es realmente lo que verán tus clientes. Debajo se encuentra el motor de maquetación, que toma las secciones y los widgets que sueltas en la página y los convierte en HTML limpio, renderizado en el servidor, que carga rápido y se ve correctamente en cualquier dispositivo. Nunca tocas esa capa directamente; trabajas por completo mediante controles visuales, y el motor mantiene el resultado impecable.

Todo lo que montas se guarda dentro de tu tema, así que tu diseño, tus colores, tus tipografías y la maquetación de tus páginas viajan juntos. Eso importa cuando quieres duplicar un tema para experimentar, o retomar un diseño más adelante sin perder tu trabajo.

Orientarte por la interfaz

Cuando abres el editor estás viendo tres zonas:

• El panel izquierdo es tu superficie de control: aquí es donde añades y reordenas widgets, abres los ajustes de un widget y alternas entre las partes de tu tienda que estás editando. El editor funciona por modos: Cabecera, Páginas y Pie para la estructura, además de los modos específicos de Tipografía, Recursos y CSS para el estilo global, la agrupación de imágenes y el código avanzado. La mayor parte del tiempo se pasa en los modos visuales; los tres últimos están ahí para cuando quieres un control más profundo.

• El lienzo central es una vista previa en directo de tu escaparate. Haz clic en cualquier elemento para seleccionarlo; cambia un ajuste y la vista previa se actualiza en tiempo real, así nunca tienes que adivinar qué hará un retoque.

• La barra de herramientas superior reúne tus herramientas globales: el selector de dispositivo para la vista previa adaptable, deshacer y rehacer, y los controles de guardar y publicar.

Como la vista previa es realmente en directo, la forma más rápida de aprender a usar el editor es cambiar algo pequeño y observar qué ocurre. Nada de lo que hagas en un borrador es público hasta que decides publicarlo, así que puedes explorar con total seguridad.

Crear páginas con widgets

Cada página se monta a partir de widgets: bloques de construcción independientes que arrastras al lienzo y luego apilas y reordenas para componer una página. Dirora incluye 41 widgets de escaparate que cubren los elementos que necesita una tienda real, así que en la mayoría de los casos estás eligiendo y ordenando en lugar de construir desde cero. Los que más usarás son:

• Banner principal (hero): un área de titular a todo el ancho con una imagen de fondo, texto de apoyo y un botón de llamada a la acción. Suele ser lo primero que ve un visitante, así que es lo que más atención merece.

• Productos destacados y cuadrículas de productos: extrae artículos directamente de tu catálogo a una cuadrícula ordenada, eligiendo cuántos productos y columnas mostrar. Combínalo con imágenes potentes siguiendo nuestros consejos de fotografía de producto y venderá mucho por sí solo.

• Listas de colecciones: muestra tus categorías de forma visual para que los compradores puedan navegar por su cuenta hacia lo que quieren.

• Texto con imagen: un bloque lado a lado para contar la historia de tu marca, con la imagen a la izquierda o a la derecha.

• Testimonios y reseñas: prueba social distribuida en columnas para dar confianza en el momento de la decisión.

• Suscripción al boletín: capta direcciones de correo para construir una audiencia propia en lugar de alquilada.

• Texto enriquecido, galerías de imágenes, cuentas atrás e insignias de confianza: el reparto de apoyo para lanzamientos, promociones y tranquilidad.

• HTML personalizado: un widget específico para introducir tu propio marcado cuando necesitas algo que los widgets estándar no cubren, como una herramienta de terceros incrustada o una integración a medida. Convive con los widgets visuales, así que solo recurres a él cuando realmente lo necesitas.

Para añadir uno, arrástralo desde el panel izquierdo hasta donde lo quieras en la página; para moverlo, arrástralo arriba o abajo; para configurarlo, haz clic en él y ajusta sus opciones. Cada widget es adaptable de fábrica, así que una cuadrícula que muestra cuatro columnas en el escritorio se reducirá con elegancia a una en un móvil sin ningún trabajo extra por tu parte.

La elección de widgets es diseño, pero también es conversión. Si quieres crear páginas que de verdad vendan, nuestras guías sobre páginas de producto de alta conversión y sobre cómo diseñar confianza en tu proceso de pago combinan bien con esta sección.

Definir tus colores y tipografías

Una paleta y una tipografía coherentes son lo que distingue a un escaparate que parece hecho a medida de otro que parece una plantilla. El editor te ofrece controles específicos para ambos:

• Colores: define los colores de tu marca una vez y aplícalos en fondos, textos, botones y detalles. Como los cambios son globales, un solo ajuste se propaga por toda la tienda de forma coherente, en lugar de dejarte buscando tonos que no encajan página por página.

• Tipografías: elige las fuentes para tus títulos y tu texto de cuerpo y ajusta sus tamaños y grosores para que tu tienda se lea con claridad y acorde a tu marca.

Las elecciones de color tienen más peso del que la mayoría espera: determinan cuán fiable, exclusiva o cercana parece una tienda antes de leer una sola palabra. Si no sabes por dónde empezar, nuestro artículo sobre la psicología del color en el comercio electrónico es una buena introducción. Como regla general: elige uno o dos colores de marca, un neutro para los fondos y un único color de acento para los botones, y luego resiste la tentación de añadir más.

Tipografía avanzada y fuentes personalizadas

Las tipografías hacen un trabajo silencioso y constante: marcan el tono de toda tu tienda, y una tipografía coherente es una de las señales más claras de una marca profesional. El modo específico de Tipografía va mucho más allá de una simple elección de título y cuerpo, y te permite definir la familia, el tamaño y el grosor de forma independiente para cada función de texto de tu tienda:

• Texto de cuerpo: la base que tus clientes leen más, así que aquí la legibilidad es lo que más importa.

• Títulos, de H1 a H6: controla cada nivel por separado para construir una jerarquía visual clara a lo largo de la página.

• Texto de los botones: ajusta la tipografía de tus llamadas a la acción para que se lean como algo deliberado y en lo que se puede hacer clic.

• Texto de navegación: mantén tus menús nítidos y acordes a tu marca en todas las páginas.

Puedes combinar estas funciones con total libertad: por ejemplo, una fuente de titulares con carácter frente a una fuente de cuerpo limpia y legible. Hay más de 50 Google Fonts seleccionadas entre las que elegir, así que no te limitas a las fuentes predeterminadas del sistema y puedes encontrar algo que encaje de verdad con tu marca. Tus ajustes de tipografía se aplican de forma que anulan de manera fiable los valores predeterminados a nivel de componente, lo que significa que las decisiones que tomas aquí se mantienen de forma coherente en todo el escaparate en vez de quedar sobrescritas sin más por el estilo integrado de un widget.

Recursos del tema: agrupar tus imágenes con el tema

Algunas imágenes pertenecen al diseño y no a un producto concreto: una textura de fondo, un patrón de marca, un gráfico de marcador de posición. El modo Recursos es donde viven esas imágenes. Aquí subes imágenes y quedan agrupadas con el propio tema, y luego las referencias desde los ajustes de tus widgets mediante una referencia de recurso en lugar de una URL puntual.

La ventaja es la portabilidad: como las imágenes viajan con el tema, puedes duplicar un tema para experimentar, o mover un diseño entre entornos, sin que tus imágenes se rompan o desaparezcan. Esa es exactamente la razón por la que los recursos importan si alguna vez quieres compartir o reutilizar un tema: el diseño llega completo, con las ilustraciones incluidas, en lugar de apuntar a archivos que se han perdido. Para la fotografía de producto y de estilo de vida que forma parte de tu catálogo en lugar de tu tema, el gestor de medios es el mejor sitio; las indicaciones de nuestros consejos de fotografía de producto se aplican a ambos.

CSS personalizado: control fino para quien lo quiera

El editor visual cubre la inmensa mayoría de lo que necesita un escaparate, pero a veces quieres afinar un detalle concreto que ningún ajuste expone. Para eso está el modo CSS: un editor de código completo y opcional para cualquiera que se sienta cómodo escribiendo unas líneas de CSS, y que se mantiene discretamente al margen de quienes no.

Apuntas a los elementos usando los selectores integrados del escaparate: por ejemplo .dirora-store para el contenedor general, .dirora-header y .dirora-footer para esas regiones, selectores por tipo de sección como .section-hero, o una sección concreta por su propio id. Tu CSS personalizado se carga después de todos los demás estilos, así que tiene prioridad y prevalece de forma fiable cuando lo necesitas. El editor incluye comodidades como un botón de formato para ordenar tu código y un modo de pantalla completa para ediciones más largas. Es totalmente opcional (nunca necesitas abrirlo para crear una tienda profesional), pero está ahí en el momento en que quieras ese último grado de control.

Vista previa en directo y diseño adaptable

Más de la mitad del tráfico del comercio electrónico llega desde el móvil, así que un diseño que solo se ve bien en un portátil es un diseño que está perdiendo ventas. El editor de Dirora te permite previsualizar tu tienda en escritorio, tableta y móvil con el selector de dispositivo de la barra de herramientas superior. Cada widget se adapta automáticamente, pero la vista previa te permite comprobar los detalles: cómo se ajusta el titular de un hero en una pantalla estrecha, si el espaciado parece apretado, cómo se reorganiza una cuadrícula de productos.

Adquiere el hábito de cambiar a la vista de móvil antes de publicar nada. Una maquetación que parece equilibrada en un monitor ancho puede verse vacía o incómoda en un teléfono, y la vista previa es la forma más rápida de detectarlo. La velocidad importa tanto como la maquetación; nuestra guía de optimización del rendimiento de la tienda explica cómo las imágenes y el peso de la página afectan a los tiempos de carga.

Trabajar con seguridad: borradores, deshacer y rehacer

Una de las ventajas silenciosas del editor es que experimentar no conlleva ningún riesgo. Tus cambios viven en un borrador hasta que los publicas activamente, así que tu escaparate en directo nunca cambia bajo los pies de tus clientes mientras estás a mitad de un rediseño. Cuando estás satisfecho, publicas; hasta entonces, los compradores ven la última versión que aprobaste.

Dentro de una sesión también tienes un historial completo de deshacer y rehacer. Si arrastras un widget al lugar equivocado, dudas de un color o borras una sección por error, retrocede con deshacer, o avanza de nuevo con rehacer. Entre los borradores y el historial de deshacer, no existe tal cosa como un error irreparable, que es justo la confianza que quieres tener cuando estás aprendiendo a usar la herramienta.

Personalizar tu cabecera y tu pie de página

Tu cabecera y tu pie de página aparecen en todas las páginas, así que hacen un gran trabajo de navegación y de generación de confianza. En el editor los editas igual que editas las páginas: añadiendo y ordenando bloques. Una cabecera típica lleva tu logotipo, la navegación principal, un punto de acceso a la búsqueda y el carrito; un pie de página suele contener columnas de enlaces, una suscripción al boletín, enlaces a redes sociales, iconos de pago y tus datos legales y de contacto. Tómate el tiempo de dejarlos bien pronto, porque enmarcan todas las demás páginas en las que aterriza un visitante.

Un flujo de trabajo sencillo para tu primer diseño

Si estás mirando un lienzo en blanco, este orden mantiene las cosas manejables:

1. Define primero lo básico de tu marca. Elige tus colores y tipografías antes de crear las páginas, para que todo lo que añadas herede el aspecto correcto desde el principio.

2. Ordena la cabecera y el pie de página. Coloca los elementos de navegación y de confianza para que el marco quede estable.

3. Construye la página de inicio de arriba abajo. Empieza con un hero, añade un bloque de productos destacados o de colecciones, y luego incorpora prueba social y una suscripción al boletín.

4. Comprueba el móvil sobre la marcha. Cambia a la vista previa de dispositivo tras cada sección importante, en lugar de solo al final.

5. Publica cuando todo encaje. Siempre puedes volver: el editor recompensa la iteración.

¿Eres completamente nuevo en la plataforma? Nuestra guía de primeros pasos recorre la configuración de la cuenta y la incorporación de productos, algo que combina de forma natural con el diseño del escaparate que se trata aquí.

Cuánto cuesta crear tu tienda así

El editor de temas y el motor de maquetación forman parte de la plataforma en todos los planes, incluido el nivel gratuito Starter: no hay un «complemento de diseño» aparte ni cargo alguno por usar el editor. Igual de importante, Dirora no cobra comisiones por transacción en ningún plan; lo único que se lleva es una pequeña comisión de plataforma que disminuye a medida que creces, del 1,5 % en Starter al 0,75 % en Pro, el 0,25 % en Business y el 0 % en Enterprise. Puedes ver el desglose completo en la página de precios, y si estás sopesando tus opciones, nuestra página de comparación muestra cómo se compara con otras plataformas. Cuando estés listo para publicar en tu propia dirección, la guía de dominios personalizados explica cómo conectar un dominio con SSL automático.