Diseñador

Aumentar textoReducir texto

Diseño del layoutEl diseñador permite personalizar la plantilla o el tema elegido. El diseñador ofrece muchas posibilidades de personalización y, por lo tanto, es menos fácil de usar que la gestión de la plantilla estándar. Esta página describe las características del diseñador.

Navegue hasta Configuración > Diseño y haga clic en la pestaña Diseñador. A continuación, haga clic en Iniciar. Se recomienda utilizar una pantalla grande (al menos 1920x900 píxeles) para trabajar de forma óptima con el diseñador.

El diseñador se compone de la vista previa en el fondo, una ventana con la vista móvil de su sitio web y la ventana de diseño.

Vista móvil

La mayoría de la gente visitará su sitio web con un smartphone. La vista móvil le da un ejemplo de cómo se verá su sitio web en una pantalla pequeña. Asegúrese de que el sitio web no se hace demasiado ancho para que no aparezca una barra de desplazamiento horizontal. Todas las plantillas son amigables con los móviles por defecto, pero el diseñador da mucha libertad para que esto pueda ser interrumpido.

Los iconos de la parte superior permiten ver en diferentes resoluciones.

El icono Refrescar permite refrescar los scripts de la web para ver la última versión.

Ventana de diseño

Diseños

El primer botón te da una visión general de tus diseños personalizados.

Añadir diseño
Con este botón puedes añadir un nuevo diseño o copiar un diseño de otra tienda web.
Publicar
Después de publicar, el diseño estará en vivo y visible para sus visitantes.
Personalizar
Esto le permitirá editar el nombre, los comentarios y los derechos de copia del diseño.
Borrar
Esta acción le permite eliminar el diseño. Esta acción no se puede deshacer.

Elementos

Los elementos forman la estructura HTML de su sitio web. Después de elegir un elemento, se le presentará un formulario web que le permitirá modificar las propiedades del elemento.

Hay muchos elementos y propiedades que se pueden personalizar con el formulario web. El elemento principal es la página web. Este formulario modificará automáticamente el selector CSS subyacente.

Las propiedades que ya han sido personalizadas se indican con un fondo verde en el campo del formulario. Si se deja el valor de una propiedad en blanco, se eliminará la propiedad.

Subelementos

Algunos elementos contienen subelementos. Al hacer clic en los enlaces aparecerá un nuevo formulario que puede utilizarse para modificar las propiedades del subelemento.

Medios

Es posible que las propiedades de los elementos sólo se apliquen para determinados tamaños de pantalla o en la versión impresa. Al hacer clic en los enlaces se ajustan las propiedades del elemento para un medio concreto.

Guardar

Utilice este icono para guardar el diseño. Esto no publicará el diseño.

Estructura

Permite modificar la estructura HTML del sitio web. Puedes añadir, mover y eliminar objetos.

Hay objetos visibles (función de búsqueda, carro de la compra, selección de idioma, navegación) y contenedores invisibles que se utilizan para estructurar el sitio web. Los contenedores se suelen utilizar para agrupar elementos o añadir fondos.

Puede realizar ajustes en la estructura arrastrando elementos o utilizando las flechas Arriba/Abajo. Puede añadir un nuevo elemento haciendo clic en Añadir en la parte inferior. Para eliminar un elemento, haga clic en el icono Borrar.

La estructura se ajusta automáticamente en los ejemplos de diseño. Si el ajuste no se produce automáticamente, haga clic en Guardar en la ventana de diseño y luego en Recargar en la vista móvil.

Personalización del CSS

Permite modificar los códigos de maquetación (Código CSS) de la web.CSS - Cascading Style Sheets no es un lenguaje de programación, sino un lenguaje de estilo que se puede utilizar para definir el formato de los elementos del sitio web.

Personalizar CSS, ¿es algo para un profano?

El CSS se puede aprender fácilmente. Recomendamos este método para los usuarios que quieran personalizar su propio sitio web e invertir tiempo en aprender sobre CSS.

Enlaces útiles con información sobre CSS:

  • W3Schools - tutoriales para aprender CSS
  • CSS-Tricks - nuestro favorito con mucha información sobre CSS

Ayuda en la personalización de CSS

Para las modificaciones del código CSS, nuestro servicio de ayuda no puede proporcionar soporte. Añadir soporte para CSS significaría hacer un diseño web a medida y eso haría que que.tienda fuera mucho más caro. Sin embargo, tenemos algunos buenos contactos con diseñadores web que pueden ayudar con la personalización de CSS por una tarifa.

No recomendamos dejar que los diseñadores web entren en su tienda web directamente o con una cuenta de administrador. Esto a veces lleva a discusiones sobre cambios que no eran deseados. ¡Sólo deje que las personas inicien sesión en su tienda que usted confía! En su lugar, el diseñador web puede crear una tienda web básica y diseñar el diseño en esta tienda web. A continuación, puede copiar el diseño a su tienda web con la función de copia.

Preferencias

Aquí puedes activar y desactivar el modo oscuro, la pantalla completa y el resaltado de sintaxis del código CSS. También hay una opción para que la ventana de diseño sea transparente. Las preferencias se refieren a la ventana de diseño; por lo tanto, no al sitio web.

¿Cómo puedo cambiar la propiedad X?

Cambiar el fondo

Elige el elemento que quieras, por ejemplo Página Web. En Imagen de fondo, haz clic en el icono Editar imagen. Elija una imagen de la lista o Cargue una nueva imagen.

También puede comprar una imagen utilizando la Galería. Si quieres utilizar la imagen en una página, te recomendamos el formato web. Para los fondos, recomendamos el formato Grande.

Haga clic en Insertar para establecer la imagen como fondo. Después de establecer la imagen de fondo, también aparece un icono Borrar imagen.

Cambiar botones

Elija el elemento Página web y el subelemento Botones. En el formulario se pueden ajustar propiedades como el color, el tamaño, el estilo del borde, etc.

El subelemento Botones mouse-over permite cambiar el estilo de los botones cuando se pasa el ratón por encima de ellos. Por ejemplo, se puede dar al botón un color más claro.

Personalizar los colores

La forma más fácil de cambiar los colores es en el código CSS. Los códigos de color se parecen a #ffffff o rgba(255, 255, 255, 0,5). Con esta última notación, el último parámetro (0,5 en el ejemplo) es la transparencia.

Enlaces útiles para componer colores:

Personalización de fuentes

Puedes cambiar la fuente seleccionando un elemento y ajustando Font en el formulario.

Por defecto, todas nuestras plantillas tienen un tipo de letra establecido para el elemento principal Página Web. Es posible establecer diferentes fuentes para diferentes elementos. No recomendamos esto para mantener las cosas despejadas.

Posibles problemas

Todavía veo la versión antigua de mi tienda online
Normalmente esto se debe a que las imágenes antiguas están todavía cargadas en la caché de su navegador. Los navegadores web (Internet Explorer, Firefox, Google Chrome ...) guardan las páginas web y las imágenes en el disco duro para que en su próxima visita, estas páginas carguen más rápido. Si al visitar su tienda online ve la versión antigua es porque ha cargado la versión guardada esn su disco duro y no la versión en vivo de su tienda online.

Para resolver este problema: navegue hasta su tienda online y haga clic en Actualizar página o en Volver a cargar / Refrescar página.

También puede utilizar las siguientes combinaciones de teclas: F5 o CTRL + R (Command + R en Mac).
El favicon no se muestra
Utilice un navegador reciente. En algunas versiones antiguas de Internet Explorer no se muestran los favicon.
También recomendamos conectar su tienda con un nombre de dominio. Algunos navegadores muestran el favicon de que.tienda si su tienda no esta conectada a un nombre de dominio propio.

Página siguiente: Edición de textos y páginas web (CMS)

Wiki de inicio



Preguntas frecuentes Contacto