Define tus colores, tipografías y disposición
Usa la pestaña Diseño del sitio para definir una sola vez los colores, las tipografías, los tamaños de texto y el redondeo de las esquinas de tu tienda, y que se apliquen a todas las páginas a la vez.
Diseño del sitio reúne los ajustes que hacen que toda tu tienda parezca una sola marca: sus colores, tipografías, tamaños de texto y el redondeo de las esquinas. Defines cada uno una sola vez y todas las páginas lo siguen. Los bloques individuales pueden seguir sustituyendo estos ajustes cuando tú quieras.
Abre Diseño del sitio
- Abre el editor. Consulta El editor de un vistazo.
- En el panel de ajustes de la derecha, haz clic en la pestaña Diseño del sitio.
- Haz clic en un encabezado para abrirlo: Identidad, Colores, Tipografía o Disposición.
Los cambios se ven en la página al instante y se guardan automáticamente. Tu tienda en línea cambia cuando publicas.
Colores
Abre Colores para ver los siete colores con los que se construye cada página.
- Color principal: el color más importante de tu tienda. Lo usan los botones y los enlaces.
- Texto sobre el color principal: el color de las palabras que van sobre el color principal, como la etiqueta de un botón.
- Fondo de la página: el color que hay detrás de tus páginas.
- Superficie: el color de las tarjetas y los paneles, como las tarjetas de producto y los cuadros de formulario.
- Texto: el color de los encabezados y del resto del texto principal.
- Texto secundario: el color más discreto que se usa en los párrafos, las descripciones y la letra pequeña.
- Bordes: el color de las líneas finas y los contornos.
Elige un color
- Haz clic en un cuadro de color.
- En el selector que se abre, haz cualquiera de estas cosas:
- Haz clic o arrastra en el cuadrado grande para ajustar el brillo y la intensidad del color, y arrastra la franja de debajo para cambiar el color en sí.
- Escribe o pega en el cuadro un código hexadecimal, como
#2B2622. - Haz clic en una muestra de Colores del tema para reutilizar un color que ya tienes, o en una de Recientes para un color que elegiste hace poco.
- Haz clic en cualquier punto fuera del selector, o pulsa Esc, para cerrarlo.
Comprueba que tu texto se lee bien
Debajo de los siete colores, Payly comprueba que cada color de texto se lee con facilidad sobre el color que tiene detrás. Si todo está bien, verás Todas las parejas de colores se leen con facilidad. Si una pareja es demasiado tenue, la lista la nombra, muestra su relación de contraste y la que necesita, y ofrece un botón Corregir que ajusta el color del texto por ti.
Payly no te impide elegir una pareja con poco contraste, pero el texto gris claro sobre un fondo claro cuesta de leer, sobre todo en un móvil a pleno sol.
Tipografía
Abre Tipografía para elegir tus fuentes y los tamaños de texto.
- Tipografía del texto: la fuente de los párrafos, los menús y los botones.
- Tamaño de letra base: el tamaño del texto normal.
- Interlineado del texto: el espacio entre las líneas de texto. Un número mayor deja más espacio.
- Tipografía de los encabezados: la fuente de los encabezados. Elige Usar la tipografía del sitio para que los encabezados también usen la fuente del texto.
- Tamaño de los encabezados: hace todos los encabezados más grandes o más pequeños, como un porcentaje.
- Grosor de los encabezados: lo gruesas que son las letras de los encabezados.
- Espaciado entre letras de los encabezados: acerca o separa las letras de los encabezados.
Elige una tipografía
- Haz clic en el cuadro Tipografía del texto o Tipografía de los encabezados.
- Recorre la lista, que muestra cada nombre con su propia fuente. El grupo Recomendadas, al principio, tiene fuentes que van bien a la mayoría de las tiendas.
- Para buscar una fuente por su nombre, escribe en Buscar tipografías….
- Haz clic en una fuente para usarla.
La lista abarca toda la biblioteca de Google Fonts. Las fuentes que uses se incluyen en tu tienda cuando publicas. Si falta una fuente en la lista, escribe en el cuadro de búsqueda su nombre exacto de Google Fonts y elígela en Usar de todos modos.
Disposición
Abre Disposición para dos ajustes:
- Radio de las esquinas define lo redondeadas que son las esquinas de los botones, las tarjetas y las imágenes. Desliza hasta 0 para esquinas rectas y hacia la derecha para esquinas suaves. Los bloques cuyo radio de las esquinas es Automático siguen este ajuste.
- Dirección del texto es De izquierda a derecha para la mayoría de los idiomas. De derecha a izquierda invierte todo el diseño para árabe, hebreo, persa y urdu.
Identidad
Abre Identidad para definir tu Icono del navegador, la imagen pequeña que se muestra en la pestaña del navegador. Usa un símbolo sencillo en lugar de todo tu logotipo, porque se muestra a unos 16 píxeles. Haz clic en Subir imagen o en Ver lo subido, como se explica en Añade imágenes y usa la biblioteca de medios. Si lo dejas vacío, se usa tu logotipo.
Tu logotipo no está aquí. Está en tu encabezado, que es donde aparece. Consulta Personaliza la cabecera y el pie de página.
Cambia solo un bloque
Cada bloque de texto, encabezado y botón puede sustituir la tipografía, el tamaño y los colores del sitio. Selecciona el bloque y abre su grupo Tipografía o Apariencia. Consulta Edita textos, encabezados y botones.
Consejo: si quieres un aspecto totalmente distinto, puedes empezar de nuevo con uno de los diseños ya preparados. Consulta Cambia a otro diseño de sitio.