EasyWebshop

Configuración del diseño

Lay-out design Con EasyWebshop, usted mismo podrá configurar el diseño de su tienda online. Nuestro editor de diseño le brinda muchísimas combinaciones para que pueda diferenciar su tienda del resto. Podrá ver los cambios al instante. Para acceder a la edición del diseño, haga clic en Configuración > Diseño.

Editar el diseño paso a paso:

1.Seleccionar una plantilla de diseño

Dentro del editor de diseño, haga clic en el menú Diseño > Plantilla. Se mostrará un listado con todas las plantillas de diseño disponibles, utilice las flechas para desplazarse cómodamente por el listado de plantillas. Para ayudarle a decidir, cada plantilla se muestra en miniatura. AL pasar el cursor sobre las diferentes plantillas podrá ver algunas de sus características, las plantillas optimizadas para dispositivos móviles lo dicen claramente. No tenga miedo de experimentar, los cambios que realice sobre el diseño no eliminarán los datos que tenga añadidos hasta el momento.

Plantillas optimizadas para dispositivos móviles
Las plantillas con este logotipo indican que están optimizadas para dispositivos móviles (teléfonos móviles, smartphones y tablets ). Estas plantillas permiten acceder a tu tienda desde cualquier dispositivo, se adaptan al tamaño de la pantalla de tus visitantes.

2. Seleccionar la combinación de colores

Haga clic en el menú Diseño > Paleta de colores. Podrá seleccionar una de las combinaciones de colores que ya hemos creado, o si lo prefiere podrá modificar los colores a su gusto desde el menú de diseño Avanzado. Las combinaciones de colores que le ofrecemos creadas están contrastadas adecuadamente. Verá que cada combinación de colores está compuesta por 4 colores, a continuación le explicamos a que parte corresponde cada uno de estos colores de izquierda a derecha:

Color superior izquierda- Fondo de las páginas
Corresponde al fondo de todas las páginas. Este color no se verá si utiliza una imágen para el fondo.
Color superior derecha - Fondo del menú
Corresponde a los colores de fondo de los elementos de las página como son: el encabezado de la página, la barra de navegación, las columnas de izquierda o derecha (el menú), la barra inferior y el pie de página.
Color inferior izquierda- Color de los textos del menú
Corresponde al color de las letras (textos) que existan sobre los diferentes elementos. Por ejemplo los nombres de las categorías del menú. Debe existir un buen contraste entre las letras del menú y el del menú.
Color inferior derecha- Mouse over sobre el menú
Corresponde al color que se verá al desplazar el puntero del ratón (mouse) sobre los elementos del menú.

Para determinar la combinación de colores correcta no existe una regla en concreto que permita decidir cuál es la combinación perfecta. Por eso, no tenga miedo de probar, si se equivoca siempre podrá deshacer los cambios. Garantice un resultado final que no sea demasiado llamativo y que tenga un contraste adecuado entre los textos y el fondo. Garantice la legibilidad de los textos sin cansar la vista de sus visitantes. Elija una gama de colores que se adecue a lo que quiere reflejar.

Las siguientes páginas también pueden ayudarle a escoger una combinación de colores:

Cada color tiene asociado un código de color en HTML. Con los códigos de color se puede establecer el color de fondo de su página web, o el color de los textos, los menús, etcétera. Si decide crear su propia combinación de colores, vaya al menú Avanzado > Configuración y seleccione el elemento al que desea cambiarle el color, por ejemplo Paletas de colores -Avanzado. Cada código de color está compuesto por el símbolo # y 6 letras o números o la combinación de ellos. El código se expresa en el sistema de numeración hexadecimal. Por ejemplo: al color rojo corresponde el código: #FF0000. Al hacer clic sobre el código del color se mostrará una tabla de colores en la que podrá seleccionar el color deseado desplazando el puntero del mouse sobre los colores disponible. También en esta ventana podrá introducir directamente el código del color haciendo clic nuevamente sobre el código de color que se esté mostrando. Las páginas web que mencionamos anteriormente pueden ayudarle a encontrar el color que está buscando o la combinación de colores. Recuerde, sólo debe copiar y pegar el código del color para obtener el color deseado.

También pueden ser personalizados los textos y títulos. Los valores que se muestran por defecto son los que comúnmente se utilizan en Internet. Si no existe una razón para cambiarlos, le recomendamos que deje estos valores por defecto.

Tipo de letra: Sans-Serif, Tamaño de letra: 1 em, Color del texto: Negro.

Esta configuración afecta a todos los textos de la tienda, permitiendo que todo quede perfectamente coordinado. Este tipo de letra ofrece una óptima legibilidad de los textos. Sin embargo las fuentes caligráficas no, debido a que en textos largos causarían fatiga visual. Si desea realizar excepciones en algunos textos, por ejemplo modificar el tipo de letra, el tamaño de letra o color del texto debe utilizar el Sistema de gestión de contenidos CMS.

Las tipos de letras que les ofrecemos se limitan a los tipos de letras más utilizados en diseño web. Estas fuentes son compatibles con todos los dispositivos utilizados. Con el módulo de diseño personalizado es posible utilizar otros tipos de letras. En el epígrafe correspondiente a este módulo explicaremos cómo hacerlo e introduciremos más consejos porque no todos los tipos de letras son visibles en todos los dispositivos.

Una pregunta frecuente a nuestro equipo de soporte es:"¿Por qué los textos de mi tienda no se ven, se han borrado, no están, no se muestran...? Estimado cliente, sus textos no se ven porque ha seleccionado el color de sus textos igual que el color del fondo. Cambie el color de las letras o bien el color del fondo para solucionarlo.

El color de los botones también puede ser personalizado.

3. Seleccionar un fondo para las páginas

Puede subir una foto propia.
Una foto personalizada exclusivamente para usted, hará que su su tienda sea única.
Repetir el fondo
Puede optar por repetir un patrón de diseño o subir una foto grande que será expandida hasta cubrir el fondo.
Opacidad
Permite hacer transparente el contenido de su página de forma que el fondo se ilumina y se pueda ver a través del contenido. 50% = muy transparente, 100% (predeterminado) = sin transparencia. Al utilizar esta opción debe garantizar suficiente contraste entre el contenido y el fondo.
Patrones de diseño
En el editor de diseño podrá encontrar patrones listos para utilizar. En los siguientes enlaces podrá encontrar más patrones de diseño:

Imagen de fondo
Puede escogen alguna de las imágenes que ponemos a su disposición o puede subir una propia.

4a. Cargar un logotipo (imagen de su negocio)

Al cargar un logotipo, el título y el eslogan de su tienda se sustituyen por este logotipo.

Los siguientes programas gratuitos de diseño gráficos podrán ayudarle a crear su propio logotipo:

Sugerencia:Puede subir imágenes transparentes. Recomendamos que las imágenes tengan el formato .png.

4b. Configurar el icono del navegador: favicon

Esta opción permite subir un favicon. Es una pequeña imagen que será visible a la izquierda en la barra de direcciones.

El formato de esta pequeña imagen debe ser .ico, con las dimensiones 16x16 pixeles y tamaño máximo de 150Kb.

Favicon

El favicon se mostrará:

5. Página de inicio

La página de inicio es la página principal de su tienda online, puede escoger que mostrar y que ocultar en su página de inicio. Existen varios objetos para mostrar en la página principal:

Por defecto los últimos 12 productos añadidos se mostrarán en su página de inicio, cambie está opción a 0 si no desea mostrar productos en su página principal. También puede definir en cada producto si desea mostrarlo o no en la página principal. Para hacerlo, consulte el epígrafe gestión avanzada de productos.

Ver tienda online

Las modificaciones o cambios que realice en su tienda online, se hacen efectivos después de hacer clic en Guardar. Haga clic en Ver tienda onlie, para ver los resultados.

Preguntas frecuentes sobre el diseño

Hay un espacio libre en la izquierda y la derecha de mi página, ¿Puedo poner alguna información allí?
No, nuestras plantillas de tiendas online tienen un ancho de hasta 1000 píxeles. Esta dimensión posibilita que dichas plantillas se vean perfectamente en la mayoría de pantallas de ordenadores, ultrabooks, netbooks y tabletas.

En una pantalla muy grande, verá este espacio libre a la izquierda y a la derecha. Pero no se trata de un espacio libre, sino más bien de un "espacio flexible" que cambia dependiendo del ancho de la pantalla. Colocar banners o textos en estos espacios, hará que en muchos ordenadores aparezca una barra de desplazamiento horizontal. Sus visitantes se verán obligados a desplazarse horizontalmente para poder leer toda la información.

Si desea crear un sitio web más ancho, le recomendamos que utilice una plantilla de diseño personalizada por usted o por algún diseñador web.

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).

Con una de estas acciones debería cargar la versión más resiente de su tienda online.

Otras posibles razones por las que no ve los cambios:
- La página que estas visitando no es la correcta
- Hay un módulo de diseño avanzado activo (diseño CSS o diseño personalizado).
Mi logotipo se repite o tiene un espacio en blanco al lado
Esto se debe a que su logotipo no tiene las dimensiones correctas o las dimensiones que tiene son inferiores a las que recomendamos con la plantilla seleccionada. Cargue un nuevo logotipo con las dimensiones correctas.
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 EasyWebshop si su tienda no esta conectada a un nombre de dominio propio.

Tamaños de logotipo

Usted puede elegir las dimensiones de su logotipo. La siguiente tabla muestra las dimensiones disponibles para el logotipo. Los logotipos más grandes se escalarán de forma proporcional automáticamente.

ModeloDimensiones en píxeles
Vitality300x100
Carefree300x100
Soft Touch200x50
Soft Link200x50
Easy Mobile330x50
Clean330x50
Clean & Smooth330x50
Streamlined1120x200
Streamlined Wide2000x200
Elementary330x50
Elementary Reverse330x50
Fluid1080x200
Flex1080x200
Fluid Classic1080x200
Flex Classic1080x200
Fluid Edge1080x200
Flex Edge1080x200
Fluid Edge Classic1080x200
Flex Edge Classic1080x200

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

Vista general

Información

Documentación