Si acaba de adquirir la plantilla Darkbit X Webflow Ecommerce Template y está buscando los fundamentos de cómo empezar a editarla, empiece por aquí.
Gracias por comprar la plantilla Darkbit X. En esta breve guía cubrimos todo lo básico sobre cómo editar elementos básicos (es decir, colores, fuentes, contenido CMS, etc) de la plantilla Darkbit X Webflow.
Si no está muy familiarizado con Webflow, le recomendamos encarecidamente que realice el curso acelerado Webflow 101 de la Webflow University, ya que le enseñará todo lo básico para ponerse en marcha.
Empecemos con el estilo de la plantilla.
La plantilla Darkbit X está construida usando Muestras de Color, lo que significa que puedes editar fácilmente una muestra de color para que se actualice 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 a 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.
La plantilla Darkbit X utiliza una única fuente en todo el sitio, y está configurada en el selector Body (All Pages), 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 luego seleccionar Cuerpo (Todas las páginas). Una vez con esto, puedes ir a la sección de Tipografía de abajo y cambiar la fuente a cualquier fuente 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.
Algunos iconos o gráficos de la plantilla son imágenes/gráficos normales, por lo que notará que al actualizar todos los colores, estos 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 del CSS (estilo) de Webflow no les afectará. Si desea reutilizar estos gráficos, siempre puede descargarlos y editarlos con cualquier software de diseño (es decir, Photoshop, Illustrator, Sketch, Figma, etc.), o subir directamente sus propias imágenes/gráficos que coincidan con su marca.
Ahora es el momento de continuar con los siguientes pasos para editar las páginas de su sitio web. Por lo general, hay 2 tipos de contenido que se editará, que son los siguientes.
El contenido estático es todo aquel que no está basado en un 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 el navegador de la barra lateral izquierda, y muestra un borde azul cuando haces clic o pasas el ratón por encima.
Si quieres editar este tipo de contenido, puedes hacer doble clic en él y podrás escribir directamente allí.
El contenido dinámico es todo el contenido que es dinámico y será auto-generado basado en el contenido agregado en la sección de CMS en la barra lateral izquierda (justo debajo del icono de Páginas).
Puedes identificar fácilmente todo esto porque se muestra en color púrpura en el navegador de la barra lateral izquierda, y muestra un borde púrpura cuando haces clic o pasas el ratón por encima.
Este contenido debe actualizarse directamente en la sección CMS. Esto tiene como objetivo facilitar su actualización, ya que es muy probable que tenga que ser actualizado constantemente (Por ejemplo, añadiendo una nueva entrada en el blog)
Además, si desea editar una página completa autogenerada por el CMS (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.
Los productos o contenidos de eCommerce funcionan de manera similar a los contenidos dinámicos del CMS, sin embargo, esto está enfocado exclusivamente para los productos de eCommerce.
Puedes identificar el contenido de eCommerce de forma similar al contenido de CMS, porque también se muestra en color púrpura en el Navegador de la barra lateral izquierda, así como con un borde púrpura cuando haces clic o pasas el ratón por encima.
Este contenido debe actualizarse directamente en la pestaña de comercio electrónico de la barra lateral izquierda. Esto tiene como objetivo facilitar su actualización, ya que es muy probable que tenga que actualizarse constantemente (por ejemplo, cambiar el precio de un producto o añadir más existencias).
Además, si desea editar la página de comercio electrónico de productos autogenerada, encontrará 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 CMS.
Además de la explicación básica que compartimos más arriba, aquí compartimos algunos consejos y formas de proceder que provienen de las preguntas más comunes que recibimos.
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, abrirá la pestaña de Interacciones de la barra lateral derecha para este elemento, donde puede editar la interacción.
Cada vez que hagas un cambio (por ejemplo, que crees un nuevo diseño de sección), es una buena práctica ir a la navegación superior de tu Viewport y ver cómo se ve en Tablet y Móvil.
Si sólo editas una sección de la Plantilla con texto o imágenes actualizadas y no borras ninguna clase de la 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 para móviles y tabletas para asegurarte de que todo se ve perfecto.
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 de Páginas en la barra lateral izquierda, hacer clic en el pequeño icono de Configuración de la página que quieres personalizar, y aparecerán todos estos ajustes.
Por favor, tenga en cuenta que es importante cambiar esto en base a la página.
Si algo va mal, por ejemplo, si no te gusta hacia dónde va el sitio web, si borraste 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 puedes ver todas las copias de seguridad automáticas o manuales. Restaurar a la antigua copia de seguridad está a un clic de distancia.
Como pudo ver arriba, Darkbit X fue construido en Webflow usando las mejores prácticas para que sea muy fácil para usted editar la plantilla y personalizarla a sus necesidades.
Sin embargo, si alguna vez encuentras algún problema, necesitas ayuda o simplemente quieres saludar, no dudes en enviarnos un correo electrónico a darkbitx@brixtemplates.com - Estaremos encantados de ayudarte.
Por otra parte, si usted está buscando ayuda para construir una versión única y personalizada de Darkbit X, o simplemente un sitio web increíble diseñado y desarrollado desde cero en Webflow, no dude en ponerse en contacto con nuestra Agencia de Diseño y Desarrollo de Webflow. El increíble equipo detrás de Darkbit X Webflow Template puede ayudarle.
¿Busca una familia de iconos más amplia para utilizar en esta plantilla Webflow? Eche un vistazo a nuestras fuentes de iconos de BRIX Templates y obtenga una colección de más de 100 iconos para su plantilla.
¿Tiene una idea para otra plantilla de flujo web que le gustaría ver hecha realidad? Envíenos su idea de plantilla Webflow y gane un precio especial si la seleccionamos.
