3 consejos para usar código personalizado en Webflow

¡No temas! No hace falta ser un mago de la programación para usarlo en tus proyectos. Tener una base sobre las mejores prácticas te dará la confianza necesaria para investigar y manejar esa varita como un profesional.

Empecemos con el primer consejo para usar código personalizado correctamente.

Consejos para usar código personalizado en Webflow

1. Entiende estos 3 tipos principales de código

Quizás hayas oído hablar de HTML, CSS y JavaScript. Vamos a desglosarlos en sus definiciones más sencillas.

¿Qué es el HTML?

El HTML consiste en los elementos que componen tu página. Las imágenes, vídeos, enlaces, botones, encabezados y más son elementos HTML. Cuando arrastras elementos desde el panel Añadir elementos en Webflow, estás añadiendo elementos HTML a tu página.

Como Webflow nos da acceso a una gran cantidad de elementos HTML, normalmente no tendrás que programar tus propios elementos HTML. En código, la mayoría de los elementos HTML consisten en una etiqueta de apertura y otra de cierre que contienen el nombre del elemento. Por ejemplo, un encabezado H1 se escribiría así.

<h1>Tu encabezado aquí</h1>

¿Qué es el CSS?

El CSS es el aspecto visual.

Afecta al estilo de nuestros elementos HTML. Cuando usas el panel de Estilo en Webflow, estás ajustando el CSS de un elemento o su apariencia. Al escribir CSS, todos los estilos van dentro de una etiqueta de apertura y cierre de estilo. Si te diriges a una clase, debes empezar el nombre de la clase con un punto. Este es un ejemplo de CSS que podrías usar en Webflow para crear un contorno de texto.

<style>

.tu-clase {
-webkit-text-stroke: 2px #000;
}

</style>

Consejo profesional: En los nombres de clase de un sitio publicado, Webflow convierte los espacios en guiones y las letras mayúsculas en minúsculas. Usar minúsculas y guiones en los nombres de tus clases desde el principio ayudará a asegurar que coincidan con la forma en que están escritos en tu código personalizado.

¿Qué es JavaScript?

JavaScript es el funcionamiento.

Cuando usas el panel de Interacciones en Webflow, estás añadiendo JavaScript a tu sitio web. Dado que el potencial de JavaScript es casi ilimitado, escribir JavaScript personalizado puede añadir mucha funcionalidad nueva a tu sitio. Todo el JavaScript va dentro de una etiqueta de apertura y cierre de script.

Webflow también incluye una versión más sencilla de JavaScript llamada jQuery. jQuery se puede usar junto con JavaScript para que las cosas sean aún más fáciles de escribir y entender. Este es un ejemplo de jQuery que podrías usar para añadir una clase combinada a un elemento cuando un usuario hace clic en un botón.

<script>

$( ".button-class" ).click(function() {
       $( ".card-class" ).addClass("card-shadow");
});
‍
</script>

2. Mantén el orden al añadir código

Uno de los pasos más importantes al usar código personalizado es mantener el orden. Estas son las preguntas más frecuentes al intentar organizarse.

¿Debo usar el área de código personalizado en la configuración de la página o en la del proyecto?

La respuesta es sencilla. Cualquier código que quieras aplicar a todas las páginas del sitio web debe ir en la configuración del proyecto. Cualquier código que solo quieras aplicar a una o varias páginas específicas debe ir en la configuración de la página.

¿Debo añadir código a la sección de la etiqueta <head> o </body>?

La mayoría de las veces, querrás añadir JavaScript en la sección antes de la etiqueta </body> en la configuración de la página o del proyecto. Esto significa que el código que añadas estará casi al final de la página. Si colocas JavaScript en la sección dentro de la etiqueta <head>, es probable que el JavaScript se ejecute antes de que se cargue el elemento al que afecta, lo que hará que tu código no muestre resultados. La mejor práctica para CSS es añadirlo dentro de la etiqueta <head>.

¿Tengo que publicar y revisar el sitio web en vivo para ver los resultados de mi código?

Cualquier JavaScript no afectará a los elementos en el Diseñador. Debes publicar para ver qué hace. Sin embargo, si el CSS se coloca en un elemento incrustado en la página real, puedes ver los resultados del CSS en vivo en el Diseñador.‍

Consejo profesional: Para usar estilos CSS y ver los resultados en vivo en el Diseñador, mantén tu CSS dentro de un bloque de código incrustado en un símbolo. Los cambios realizados en una página se aplicarán en todas las páginas del sitio.

¿Necesito crear una nueva etiqueta de script o estilo para cada nuevo código que añada?

No, puedes añadir fácilmente nuevo CSS o JavaScript dentro de tus etiquetas existentes. Lo mejor es añadir el código por encima o por debajo del código existente. Insertarlo en medio del código actual podría estropearlo.

¿Cómo puedo añadir comentarios para llevar un registro de lo que hace mi código?

Añadir comentarios dentro de tu CSS y JavaScript puede ser muy útil para recordar qué hace ese código cuando vuelvas a él más tarde o cuál es su propósito. Los comentarios no aparecerán en el diseño de la página web, pero estarán disponibles en el código para que los consultes.

En JavaScript, dentro de las etiquetas script, puedes crear una nueva línea en cualquier momento y escribir dos // seguidos de tu comentario.

<script>

// Tu comentario va aquí
‍
</script>

En CSS, dentro de las etiquetas style, puedes escribir un comentario encima de cualquier línea de código, como en el ejemplo siguiente, donde tu comentario comienza con /* y termina con */.

<style>

/* Tu comentario va aquí */

</style>

3. Prueba y soluciona los problemas de cualquier código que añadas

Al usar código personalizado, un pequeño detalle puede afectarlo todo. Si falta un carácter o está fuera de lugar, puede hacer que el resto del código no funcione. Esta puede ser una de las partes más complicadas de usar código en tus proyectos. Afortunadamente, existen herramientas para facilitar la prueba de tu código.

Usa un editor de código para detectar errores en tu programación

Una de las formas más sencillas de probar tu código es usar un editor. Por lo general, te indicará exactamente en qué línea y carácter se encuentra el error para que puedas corregirlo.

Inspecciona el código del sitio web desde tu navegador

En la mayoría de los navegadores, si haces clic derecho en cualquier sitio y seleccionas Inspeccionar, podrás ver el código de la página. Al elegir ciertos elementos, verás si hay estilos CSS que se solapan o cómo el navegador gestiona los estilos para detectar fallos. Si haces clic en la pestaña Consola, verás los errores de JavaScript y sabrás qué línea de código los provoca.

El "no-code" es mejor cuando sabes (un poco de) código

Entender los fundamentos de la programación te ayudará a exprimir al máximo tus proyectos no-code. Por lo general, encontrar el código que necesitas es cuestión de una búsqueda rápida en Google; el truco está en saber cómo implementarlo en tu sitio web.

Este artículo no cubre todo lo que hay que saber sobre programación, pero esperamos que te haya servido para adquirir una base sólida y que te sientas con más confianza al usar código en tus futuros proyectos.