¿Cómo personalizar el diseño de una tienda online?

En este tutorial te enseñamos cómo personalizar el diseño de tu tienda sin necesidad de tener conocimientos de CSS ni HTML.

Webered cuenta con una herramienta de diseño interna que permite personalizar el diseño de tu tienda en Webered sin necesidad de conocimientos de CSS ni HTML, a continuación enumeramos las distintas funciones que incluye la herramienta :

Para acceder a la herramienta de diseño se debe ingresar al panel de control de Webered y sobre el menú principal, hacer clic en la opción "Diseño".

Esta acción abrirá la herramienta de diseño en una nueva pestaña en tu navegador.

A continuación te explicamos como modificar el Diseño de tu Tienda desde la herramienta de Diseño de Webered

Desde el menú principal de tu panel de administrador, hacé clic en "πŸ–ŒοΈ Diseño" y se abrirá una nueva ventana con la herramienta de Diseño.

Una vez dentro de la Herramienta de Diseño vas a ver las siguientes secciones

  • Barra superior

  • Menú de opciones

  • Vista previa 

diseno-60baa17bb912d.jpg

Barra superior

  • Filtro de tipos de páginas: Permite seleccionar vistas de distintos tipos de páginas. 
    • Ver Todo : Permite ver todos los diseños de los distintos tipos de páginas.
    • Tienda Online : Filtra y permite ver solo una Vista Previa del diseño y opciones de la Tienda Online.
    • Páginas / Publicaciones : Filtra y permite ver solo una Vista Previa del diseño y opciones de las Páginas y las Publicaciones.
    • Formulario de Contacto : Filtra y permite ver solo una Vista Previa del diseño y opciones del Formulario de Contacto.
  • Dispositivos : Permite selección vista en distintos tipos de dispositivos.
    • Escritorio : Permite ver una Vista Previa del diseño de la Tienda en una PC u ordenador de escritorio.
    • Tableta : Permite ver una Vista Previa del diseño de la Tienda en una Tableta.
    • Celular : Permite ver una Vista Previa del diseño de la Tienda en un celular o teléfono móvil.
  • Link de Acceso a la Tienda : Vínculo que abre una nueva ventana para acceder a la Tienda.
  • Botón de Salir : Permite salir y cerrar la ventana de la Herramienta de Diseño.

Menú de opciones

Propiedades Generales

 Opciones de diseño 

  • Bordes : Permite definir los distintos tipos de radios para los bordes de los botones y los contenedores de texto.

 Tipos de Letra 

  • Tipos de Letra : Permite especificar la fuente o tipografía de letra que se utilizará en la Tienda..

 Redes Sociales 

  • Redes Sociales : Permite activar y especificar las direcciones de las Redes Sociales.

 Logo 

  • Logo : Permite cargar el logo principal, el logo para compartir en redes sociales y el favicon de la Tienda
Sectores

 Barra Superior 

  • Contenido :
    • Texto de notificaciones y URL : Cambia el mensaje que se mostrará en la Barra superior de la Tienda, incluye emoticons y opcionalmente un link o URL de destino.
    • Teléfono : Permite definir y mostrar un número de teléfono para contacto directo.
    • Email : Permite definir y mostrar una dirección de email para contacto directo.
    • Redes Sociales : Activa la vista de los íconos de redes sociales y su alineación.
  • Diseño:
    • Color de texto y relleno : Permite cambiar el color del texto y el color de fondo de la barra, haz clic en cada "Color" y selecciona el color que más te guste.

 Encabezado 

  • Contenido :
    • Mostrar logo : Activa la vista del logo en la Barra superior.
    • Mostrar nombre : Activa y permite definir la vista del nombre de la Tienda en la Barra superior.
    • Mostrar búsqueda : Activa la caja de búsqueda interna en la Barra superior.
  • Diseño:
    • Color de texto, relleno y enlaces : Permite cambiar el color del texto y el color de fondo de la barra, y el color de los links o enlaces a otras páginas (Normal, Señalado y Activo)
    • Altura : Permite especificar los distintos tamaños que puede tener la barra superior.
    • Ancho completo : Indica si se utilizará el ancho completo de la página o si se conservará el contenido dentro de un marco central con márgenes a ambos lados (recomendado)

 Menú Principal 

  • Contenido
    • Mostrar logo : Activa la vista del logo en el Menú principal.
  • Diseño
    • Color de relleno : Permite cambiar el color de fondo general de la barra.
    • Color de texto, relleno y enlaces : Permite cambiar el color del texto y el color de fondo de la barra, y el color delas opciones del menú (Normal, Señalado y Activo)
    • Tipo de Menú : Permite especificar el tipo de menú (Standard o Burguer) 
      • Standard : El clásico menú desplegable que anida cada una de los vínculos a las páginas y el catálogo de la tienda.
      • Burguer : A diferencia de un menú clásico, el menú hamburguesa web se compone de tres líneas horizontales en lugar de una lista vertical de enlaces. Al hacer clic en estas líneas, se despliegan los enlaces de navegación en una lista. La ventaja de un menú hamburguesa web es que es más fácil de navegar en dispositivos móviles.
    • Altura : Permite especificar entre distintos tamaños standard que puede tener la barra.
    • Ancho completo : Indica si se utilizará el ancho completo de la página o si se conservará el contenido dentro de un marco central con márgenes a ambos lados (recomendado)
    • Alineación : Ubicación de la barra ( Izquierda, centro o derecha)
    • Sombra : Agrega un efecto de sombreado en la parte inferior de la barra

 Carrusel de imágenes 

  • Contenido
    • Imágenes : Para cambiar las imágenes del carrusel haz clic en la opción "Agregar Imágen" y sube desde tu Pc, tablet o celular las nuevas imágenes que desees utilizar.
  • Diseño
    • Color de relleno : Permite cambiar el color de fondo general de la barra.
    • Ancho completo : Indica si se utilizará el ancho completo de la página o si se conservará el contenido dentro de un marco central con márgenes a ambos lados.
    • Altura en pixels : Permite especificar una altura específicada en pixels que puede tener el carrusel
    • Tiempo de retardo : Permite especificar el tiempo de retardo en segundos que debe transcurrir antes de pasar a mostrar la siguiente imágen.
    • Imagen de fondo : Agrega una imágen de fondo al carrusel, esta imágen solo será visible cuando para las el contenido del carrusel se utilizen imágenes en formato png con fondo transparente.
      • Repetición : Define la secuencia de repetición de la imágen (No repetir, Repetir, Repetir solo en forma vertical, Repetir solo en forma horizontal)
      • Fijación :
        • Fijar : La imágen queda fija sin efectos.
        • No fijar : Efecto Paralax (El efecto de parallax se basa en una ilusión óptica, ya que da la impresión al ojo humano de que los objetos o las personas se mueven. Así, esta característica del diseño web provoca la sensación de que las imágenes lejanas se mueven más lentamente que los objetos cercanos.)

 Fondo 

  • Diseño
    • Color de relleno : Permite cambiar el color de fondo general de la barra.
    • Imagen de fondo : Agrega una imágen de fondo al carrusel, esta imágen solo será visible cuando para las el contenido del carrusel se utilizen imágenes en formato png con fondo transparente.
      • Repetición : Define la secuencia de repetición de la imágen (No repetir, Repetir, Repetir solo en forma vertical, Repetir solo en forma horizontal)
      • Fijación :
        • Fijar : La imágen queda fija sin efectos.
        • No fijar : Efecto Paralax (El efecto de parallax se basa en una ilusión óptica, ya que da la impresión al ojo humano de que los objetos o las personas se mueven. Así, esta característica del diseño web provoca la sensación de que las imágenes lejanas se mueven más lentamente que los objetos cercanos.)

 Pie 

  • Opciones de diseño del sector inferior o pie de la Tienda.
Tipos de página

 Tienda Online 

  • Opciones de diseño de la Tienda 

 Página / Publicación 

Opciones de diseño de las Páginas y las Publicaciones.

 Formulario de contacto 

  • Opciones de diseño del Formulario de Contacto.

Propiedades Avanzadas

 Disposición 

Disposición : Permite seleccionar distintas configuraciones y disposiciones de los sectores de la Tienda .

 Avanzado 

  • Avanzado : Opciones avanzadas de diseño, se requieren conocimientos de Hojas de Estilo CSS y maquetado HTML.

Vista previa 

Refleja en tiempo real los cambios de diseño y opciones de configuración realizados desde el Menú de opciones.

Cada sector cuenta con un botón en la parte superior derecha con un botón de acceso directo a las opciones correspondientes del Menú de opciones.

πŸ‘‰ Entrá y probá el editor, jugá con las opciones de diseño y una vez que estes conforme hacé clic en Guardar

Personaliza la distribución: Para personalizar la distribución de los componentes, haz clic en la opción "Distribución" y elige la posición y tamaño de cada uno de ellos. Además, puedes agregar nuevas secciones para agregar más elementos a tu tienda.

Opciones avanzadas: Si eres un usuario avanzado y cuentas con conocimientos de CSS ni HTML, en la sección "Avanzado" podrás personalizar aún más el diseño de tu tienda utilizando código.

Vista previa: En todo momento puedes ver cómo quedará tu tienda haciendo clic en el botón "Vista previa", así podrás hacer ajustes y ver el resultado en tiempo real.

Guarda los cambios: Una vez que hayas personalizado todos los elementos de tu tienda, haz clic en el botón "Guardar cambios" para que se apliquen a tu tienda.

¡Listo! Con estos simples pasos podrás personalizar el diseño de tu tienda en Webered sin necesidad de conocimientos de CSS ni HTML. Si tienes alguna duda o necesitas ayuda, no dudes en contactar a nuestro equipo de soporte.

Creado con Webered WEBERED