Comience aquí

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

Cómo empezar

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.

Estilismo

Empecemos con el estilo de la plantilla.

Colores

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.

Colores - Plantilla Darkbit X Webflow

Fuentes

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.

Tipografía - Plantilla Darkbit X Webflow

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.

Tipografía personalizada - Plantilla Darkbit X Webflow

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

Iconos y gráficos - Plantilla Darkbit X Webflow

Edición de páginas

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.

Páginas estáticas

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

Contenido estático - Plantilla Darkbit X Webflow

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

Contenido dinámico (CMS)

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.

Contenido estático - Plantilla Darkbit X Webflow

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)

Colección CMS - Plantilla Darkbit X Webflow

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.

Página CMS - Plantilla Darkbit X Webflow

Productos (comercio electrónico)

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.

Contenido de eCommerce - Plantilla Darkbit X Webflow

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

Colección eCommerce - Plantilla Darkbit X Webflow

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.

Página de comercio electrónico - Plantilla Darkbit X Webflow

Notas útiles

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.

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, abrirá la pestaña de Interacciones de la barra lateral derecha para este elemento, donde puede editar la interacción.

Animaciones - Plantilla Darkbit X Webflow

Vista de móvil o tableta

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.

Diseño responsivo - Plantilla Darkbit X Webflow

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.

Editar el meta título, la descripción y la imagen destacada

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.

SEO - Plantilla Darkbit X Webflow

Por favor, 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 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.

Copias de seguridad - Plantilla Darkbit X Webflow

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.

Soporte de plantillas Darkbit X Webflow

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.

Diseño y desarrollo a medida

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.

Preguntas frecuentes

¿Cómo puedo conseguir más iconos para la plantilla?

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

¿Van a lanzar una plantilla para X?

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

Obtener plantilla