Empieza aquí

Estilismo

Empecemos con el estilo de la plantilla.

Colores

La plantilla Suite X se ha creado utilizando muestras de color, lo que significa que puede editar fácilmente una muestra de color para actualizarla en todo el sitio.

Para ello, sólo tiene que ir a la pestaña Estilo en la barra lateral derecha, a continuación, desplácese hasta Colores en la sección Tipografía, y si hace clic en el color, usted será capaz de ver todas las muestras de color y editarlos para ser actualizado en todo el sitio a cualquier color necesario.

Fuentes

La plantilla Suite X utiliza una única fuente en todo el sitio y está configurada en el selector Body (Todas las páginas), lo que significa que puedes actualizar fácilmente la fuente en todo el sitio con un solo clic.

En cualquier página, sólo tienes que hacer clic en la opción del selector naranja en la parte superior derecha de la pestaña Estilo y, a continuación, seleccionar Cuerpo (Todas las páginas). Una vez hecho esto, puedes ir a la sección Tipografía más abajo y cambiar la fuente a cualquier tipo de letra para la marca de tu negocio.

En caso de que necesite una fuente personalizada o premium que no esté disponible en Webflow, siempre puede ir a Configuración del proyecto > Fuentes y podrá cargar fuentes personalizadas, o conectar su cuenta de Adobe Fonts.

Gráficos e iconos

Algunos iconos o gráficos de la plantilla son imágenes/gráficos normales, por lo que notará que al actualizar todos los colores, éstos seguirán teniendo el color de la plantilla.

Esto sucede porque estos gráficos son imágenes (PNG, JPG, SVG, etc), por lo que la actualización de la CSS Webflow (estilo) no les afectará. Si desea reutilizar estos gráficos, siempre puede descargarlos y editarlos utilizando cualquier software de diseño (es decir, Photoshop, Illustrator, Sketch, Figma, etc.), o cargar directamente sus propias imágenes/gráficos que coincidan con su marca.

Páginas estáticas

El contenido estático es todo el contenido que no está basado en CMS, lo que significa que no es dinámico (como una entrada de blog, por ejemplo).

Puede identificar fácilmente todo este contenido porque aparece en gris en el navegador de la barra lateral izquierda y muestra un borde azul cuando hace clic en él o pasa el ratón por encima.

Si quieres editar este tipo de contenido, puedes hacer doble clic en él y podrás escribir directamente allí.

Contenido dinámico (CMS)

Contenido Dinámico es todo el contenido que es dinámico y será auto-generado basado en el contenido añadido en la sección CMS en la barra lateral izquierda (justo debajo del icono Páginas).

Puede identificar fácilmente todo esto porque se muestra de color púrpura en el Navegador de la barra lateral izquierda, y muestra un borde púrpura cuando hace clic en él o pasa el ratón por encima.

Este contenido debe actualizarse directamente en la sección CMS. Esto se hace para que sea muy fácil para usted para actualizarlo, ya que es muy probable que tendrá que ser actualizado constantemente (Por ejemplo, la adición de una nueva entrada de blog)

Además, si desea editar una página CMS autogenerada completa (por ejemplo, una entrada de blog), encontrará esta página disponible para su edición en la parte inferior de todas las páginas en la sección Páginas de la barra lateral izquierda.

Productos (comercio electrónico)

Los productos o contenidos de eCommerce funcionan de forma similar a los contenidos dinámicos del CMS, sin embargo, esto está enfocado exclusivamente para los productos de eCommerce.

Puede identificar el contenido de comercio electrónico de forma similar al contenido CMS, porque también se muestra de color púrpura en el Navegador de la barra lateral izquierda, así como con un borde púrpura cuando hace clic en él o pasa el ratón por encima.

Este contenido debe actualizarse directamente en la pestaña eCommerce de la barra lateral izquierda. De este modo, le resultará muy fácil actualizarlo, ya que es muy probable que tenga que hacerlo constantemente (por ejemplo, cambiando el precio de un producto o añadiendo más existencias).

Además, si desea editar la página de comercio electrónico del producto autogenerado, encontrará esta página disponible para editar casi en la parte inferior de todas las páginas, justo encima de las páginas de colección CMS.

Notas útiles

Además de la explicación básica que hemos dado más arriba, aquí compartimos algunos consejos y procedimientos que se derivan de las preguntas más habituales que recibimos.

Interacciones

Si desea editar alguna Interacción de la plantilla (por ejemplo, eliminar un efecto de aparición), puede identificar fácilmente los elementos que tienen interacciones, ya que éstos tienen un pequeño icono de Interacciones (un pequeño trueno) en el Navegador de la barra lateral izquierda.

Si hace clic en este pequeño icono de Interacciones, se abrirá la pestaña Interacciones de la barra lateral derecha para este elemento, donde podrá editar la interacción.

Vista móvil o tableta

Cada vez que realice un cambio (por ejemplo, si crea un nuevo diseño de sección), es una buena práctica ir a la navegación superior de su Viewport y ver cómo se ve en Tablet y Móvil.

Si sólo editas una sección de Plantilla con texto o imágenes actualizadas y no borras ninguna clase de Plantilla, esto no debería ser necesario, sin embargo, si personalizas la plantilla más profundamente, editas clases o creas nuevas secciones, siempre es bueno editar constantemente tus vistas de móvil y tablet para asegurarte de que todo se ve perfecto.

Editar meta título, descripción e imagen destacada

Si desea personalizar el Título, la Descripción y la Imagen que se muestran cuando comparte su sitio web en cualquier lugar (es decir, Facebook, Twitter, etc.), puede ir fácilmente a la sección Páginas de la barra lateral izquierda, hacer clic en el pequeño icono de Configuración de la página que desea personalizar y aparecerán todos estos ajustes.

Tenga en cuenta que es importante cambiar esto en base a la página.

Copias de seguridad

Si algo va mal, por ejemplo, si no te gusta hacia donde va la página web, si has borrado algunas clases críticas que eran necesarias para que la Plantilla se viera bien, o si simplemente quieres ir a una versión anterior por cualquier razón, siempre puedes ir a la sección de Copias de Seguridad.

Puedes encontrarlo en la sección de Configuración en la barra lateral izquierda, y entonces podrás ver todas las copias de seguridad automáticas o manuales. Restaurar a la copia de seguridad anterior es sólo un clic de distancia.