Empieza aquí

Estilismo

Comencemos con el estilo de la plantilla.

Colores

Web3 X La plantilla se crea con muestras de color, lo que significa que puedes editar fácilmente una muestra de color para actualizarla en todo el sitio.

Para ello, solo tienes que ir a la pestaña Estilo en la barra lateral derecha, luego desplazarte a la sección Colores en la tipografía y, si haces clic en el color, podrás ver todas las muestras de color y editarlas para actualizarlas en todo el sitio con el color que necesites.

Fuentes

Web3 X la plantilla usa una sola fuente de ancho lateral y está configurada en el Cuerpo (todas las páginas) selector, lo que significa que puede actualizar fácilmente la fuente en todo el sitio con un solo clic.

En cualquier página, solo tienes que hacer clic en la opción de selección naranja situada en la parte superior derecha de la pestaña Estilo y, a continuación, seleccionar Cuerpo (todas las páginas). Una vez con esto, puedes ir a Tipografía en la sección siguiente y cambie la fuente a cualquier fuente para la marca de su empresa.

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

Gráficos e iconos

Algunos íconos o gráficos de la plantilla son imágenes/gráficos normales, por lo que observará que al actualizar todos los colores, estos seguirán teniendo el color de la plantilla.

Esto ocurre porque estos gráficos son imágenes (PNG, JPG, SVG, etc.), por lo que la actualización del CSS (estilo) de Webflow no los afectará. Si quieres reutilizar estos gráficos, siempre puedes descargarlos y editarlos con cualquier software de diseño (p. ej., Photoshop, Illustrator, Sketch, Figma, etc.) o subir directamente tus propias imágenes/gráficos que coincidan con tu 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).

Puedes identificar fácilmente todo este contenido porque se muestra en gris en la barra lateral izquierda del Navegador y muestra un borde azul al hacer clic o pasar el ratón sobre él.

Si desea editar este tipo de contenido, simplemente haga doble clic en él y podrá escribir directamente allí mismo.

Contenido dinámico (CMS)

El contenido dinámico es todo el contenido dinámico y se generará automáticamente en función del contenido agregado en la sección CMS de la barra lateral izquierda (justo debajo del icono de páginas).

Puedes identificar todo esto fácilmente porque se muestra de color morado en la barra lateral izquierda del Navegador y muestra un borde morado al hacer clic en él o pasar el ratón sobre él.

Este contenido debe actualizarse directamente en la sección CMS. Esto tiene como objetivo facilitarte la actualización, ya que es muy probable que tengas que actualizarlo constantemente (por ejemplo, añadir una nueva entrada de blog)

Además, si quieres editar una página CMS completa generada automáticamente (por ejemplo, una entrada de blog), encontrarás 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 el contenido de comercio electrónico funcionan de manera similar al contenido dinámico del CMS, sin embargo, esto se centra exclusivamente en los productos de comercio electrónico.

Puedes identificar el contenido de comercio electrónico de forma similar al contenido del CMS, ya que también se muestra de color morado en la barra lateral izquierda del navegador, así como con un borde morado al hacer clic en él o pasar el ratón sobre él.

Este contenido debe actualizarse directamente en la pestaña de comercio electrónico de la barra lateral izquierda. Esto tiene como objetivo facilitarte la actualización, ya que es muy probable que tengas que actualizarlo constantemente (por ejemplo, cambiar el precio de un producto o añadir más existencias)

Además, si quieres editar la página de comercio electrónico de productos generada automáticamente, encontrarás esta página disponible para su edición casi en la parte inferior de todas las páginas, justo encima de las páginas de la colección de CMS.

Notas útiles

Además de la explicación básica principal que compartimos anteriormente, aquí compartimos algunos consejos e instrucciones que provienen de las preguntas más comunes que recibimos.

Interacciones

Si quieres editar cualquier interacción de plantilla (es decir, eliminar un efecto de aparición), puedes identificar fácilmente los elementos que tienen interacciones, ya que 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 realices un cambio (por ejemplo, creas un nuevo diseño de sección), es recomendable ir a la barra de navegación superior de Viewport y ver cómo se ve en tabletas y dispositivos móviles.

Si solo editas una sección de plantilla con texto o imágenes actualizados y no borras ninguna clase de plantilla, esto no debería ser necesario. Sin embargo, si personalizas la plantilla con más profundidad, editas clases o creas nuevas secciones, siempre es bueno editar constantemente las vistas de tu móvil y tableta para asegurarte de que todo se vea perfecto.

Edición de metatítulos, descripciones e imágenes destacadas

Si quieres personalizar el título, la descripción y la imagen que se muestran cuando compartes tu sitio web en cualquier lugar (por ejemplo, Facebook, Twitter, etc.), puedes ir fácilmente a la sección Páginas en la barra lateral izquierda, hacer clic en el pequeño icono de Configuración de la página que deseas personalizar y aparecerán todos estos ajustes.

Tenga en cuenta que es importante cambiar esto por página.

Respaldos

Si algo sale mal, por ejemplo, si no te gusta el sitio web, si eliminaste algunas clases críticas que eran necesarias para que la plantilla tuviera un buen aspecto o si simplemente quieres ir a una versión anterior por cualquier motivo, siempre puedes ir a la sección de copias de seguridad.

Puede encontrarlo en la sección Configuración en la barra lateral izquierda, y luego puede ver todas las copias de seguridad automáticas o manuales. La restauración a la copia de seguridad anterior está a solo un clic de distancia.