Utilice código HTML, CSS y JavaScript personalizados
Última actualización: 8 abril, 2025
Con las plantillas y ajustes preestablecidos de Sitejet , puedes superar la mayoría de los desafíos de diseño sin necesidad de conocimientos de programación o diseño. También puedes insertar código personalizado. En este artículo, explicamos qué tipos de código puedes insertar y cómo hacerlo.
Conocimientos básicos
Sitejet le permite no solo escribir y usar su propio código, sino también integrar herramientas de terceros mediante fragmentos de código en HTML, CSS o Javascript. Tenga en cuenta que algunas herramientas podrían no funcionar o mostrarse correctamente si utiliza el ajuste preestablecido de la barra de consentimiento de cookies. Por seguridad, Sitejet prefiere bloquear demasiados scripts a no suficientes para cumplir con los requisitos legales. Pueden surgir problemas con la visualización y la funcionalidad de algunas herramientas, por ejemplo, cuando se carga un script desde fuentes externas y un segundo script accede a él. Si el proveedor no garantiza que el segundo script solo acceda al primero después de que este se haya cargado, la herramienta no funcionará correctamente.
Mira el video
Editor de código
El código CSS, JavaScript y HTML se puede editar desde el editor de código. Para acceder a él, haga clic en “<> Código” en la esquina inferior derecha del Creador de Sitios Web (CMS). También puede abrir el editor de código con la combinación de teclas [Ctrl] + [Alt] + [C].
Desde aquí, también tienes acceso a las otras pestañas “CSS”, “JavaScript”, “HTML”, “Config” y “Boilerplate”.
Configuración básica
“Configuración” es una pestaña del editor de código. Aquí puede configurar su sitio web definiendo variables de color, tamaño de fuente, características, etc. Todos los ajustes preestablecidos utilizados en su sitio web se proporcionan como “mixins”. El Creador de Sitios Web (CMS) inserta automáticamente estos mixins en la pestaña “Configuración”. Esto le permite ajustar las propiedades CSS según corresponda una vez insertado el primer ajuste preestablecido. Tenga en cuenta que eliminar un ajuste preestablecido en el Creador de Sitios Web (CMS) no elimina automáticamente el código CSS o JavaScript incrustado.
Consejo: Si no estás familiarizado con CSS, ¡no te preocupes! Casi todos los valores de CSS se pueden ajustar mediante la configuración del tema y los ajustes preestablecidos. Para ello, tienes tres opciones:
- Ajustes preestablecidos: se puede acceder a ellos haciendo clic en el icono del rompecabezas en el elemento o haciendo clic derecho en el elemento y luego haciendo clic en “Ajustes preestablecidos”.
- A través del elemento de menú “Diseño” del Creador de sitios web (CMS)
- Presionando la combinación de teclas [CTRL] + [ALT] + [Y]
Texto repetitivo (solo lectura)
Todo el código estándar se almacena en un “boilerplate”, que se integra automáticamente en el sitio web y puede usarse en otros lugares. ¿Quiere ver el funcionamiento interno de su sitio web? Entonces, el “Boilerplate” es el lugar ideal. También puede ver el código en el Editor de Código, en la pestaña “Boilerplate”. Aquí puede ver todas las variables predefinidas, tanto los valores predeterminados de ciertos elementos como ciertas propiedades y efectos de diseño. También puede usar estas variables para su diseño con otros elementos para crear un diseño lo más uniforme, profesional y fácil de mantener posible.
(S)CSS
El constructor de sitios web (CMS) Sitejet ofrece un potente editor de (S)CSS que le permite personalizar su sitio web de la forma que desee.
Si la pestaña “CSS” no está preseleccionada, ahora puede hacer clic en ella para ver y editar todo el código CSS.
Aquí puede asignar las propiedades de diseño adecuadas a sus clases estándar, tanto propias como existentes (p. ej., “.ed-button”). Por defecto, el código de cada clase está “contraído”, es decir, no visible, para ahorrar espacio y ofrecer una mejor visión general. Al hacer clic en la flecha pequeña junto al número de línea, a la izquierda del editor, puede desplegar la clase y hacer visibles todas las propiedades.
Aquí puedes añadir tus propios estilos CSS, que luego se aplicarán al sitio web. Si usas ajustes preestablecidos, se guardarán aquí y podrás añadir sus modificaciones a las secciones correspondientes. Puedes usar todas las variables definidas en las pestañas “Boilerplate” o “Config”.
El Creador de Sitios Web también comprende tu código CSS. Puedes encontrar las reglas CSS aplicables a un elemento de tu sitio seleccionando un elemento y presionando simultáneamente [Ctrl] + [Alt] + [C]. Esto abre el Editor CSS y resalta las líneas que se aplican a los elementos seleccionados.
También puede utilizar el botón “Optimizar” para encontrar reglas no utilizadas y limpiar su código.
También puedes utilizar archivos CSS/JS desde el administrador de archivos a través de “Pegar archivo”.
Al hacer clic en “Selector de color”, puede seleccionar el color deseado en la ventana de selección de color de su sistema. Esto le facilita encontrar los valores correctos para el color deseado o, por ejemplo, en sistemas Mac y Linux, seleccionar un color en cualquier lugar de la pantalla.
Uso de identificaciones y clases
Dentro de Sitejet, los elementos se pueden direccionar de varias maneras.
Cada elemento de Sitejet tiene su propio ID único. Este ID siempre tiene el formato #ed-xxxxxx. Puede encontrarlo en las propiedades del elemento, a las que se puede acceder mediante los siguientes métodos:
- Haga clic en el elemento y luego haga doble clic en las migas de pan en la parte inferior de la pantalla.
- Haga doble clic en el elemento
- Seleccione el elemento y presione [ENTER]
En las propiedades del elemento, en el lado izquierdo de la pantalla, el ID se muestra en la pestaña “Opciones” en la sección “ID y clase”.
Los ID de los elementos <div> no se pueden cambiar en Sitejet. Sin embargo, sí se puede asignar un ID a los subelementos.
Clases
Las clases son la forma más conveniente de personalizar y diseñar elementos. Además, permiten a otros desarrolladores y diseñadores crear código comprensible o reutilizable en otros proyectos.
Para asignar clases a un elemento, proceda de la siguiente manera:
- Abra las propiedades del elemento de una de las formas descritas anteriormente.
- En “ID y clase”, en la pestaña “Opciones”, se muestran las clases individuales asignadas a este elemento. El elemento preseleccionado es el elemento contenedor (en la imagen, un elemento <div>). Sin embargo, también puede personalizar los elementos secundarios de este elemento haciendo clic en la pestaña correspondiente; por ejemplo, en “Botón (a)” para personalizar el elemento de enlace del botón.
- Se pueden asignar varias clases a cada elemento para lograr una mayor especificación en el código CSS. Encontrará más detalles en este artículo sobre clases CSS .
En “Clases CSS” puedes agregar tantas clases como quieras separándolas con un espacio.
Consejo: Puedes seleccionar varios elementos manteniendo pulsada la tecla [Mayús] mientras haces clic. También puedes usar la combinación de teclas [Ctrl] + [A] para seleccionar todos los elementos a la vez. De esta forma, puedes asignar clases específicas a varios elementos a la vez.
Identificaciones
Usar identificadores para diseñar elementos específicos permite tomar decisiones de diseño más específicas que las que permiten las clases. Las clases proporcionan propiedades de diseño para múltiples elementos, mientras que un identificador solo se aplica a ese elemento específico. Por lo tanto, los valores predeterminados especiales del identificador anulan los valores predeterminados generales de la clase.
Ejemplo: Un elemento de botón incluye un elemento <div> y un elemento <a>. El elemento <div> es el elemento padre porque encierra al elemento <a>. En este ejemplo, al elemento <div> se le asigna el ID #ed-1234567 y la clase predeterminada .ed-button. Si ahora agrega diferentes valores predeterminados de diseño para la clase .ed-button y el ID #ed-1234567, las propiedades CSS del ID siempre sobrescribirán las de la clase.
Especialmente para las animaciones, los identificadores son útiles, porque las animaciones generalmente hacen referencia a determinados elementos.
Los ID se asignan automáticamente a un proyecto específico. Si copia código CSS existente en otro proyecto, no tendrá ningún efecto, ya que los ID utilizados no corresponden a este. En este caso, trabaje con clases.
Para copiar los ID, haga clic derecho en el elemento y seleccione “Copiar ID de elemento”. También puede hacer lo mismo presionando [ Ctrl] + [I].
HTML
Para insertar código HTML directamente, tienes dos opciones:
- Usando un elemento HTML
- Usando el editor
Elemento HTML
El elemento HTML es ideal, entre otras cosas, para integrar ciertos módulos y herramientas de proveedores externos. Puede incrustarlo en su página arrastrando y soltando como se indica a continuación:
- Haga clic en la categoría “Elementos” en la barra lateral izquierda.
- Esto abrirá un panel donde puedes seleccionar “HTML” y arrastrarlo al lugar donde deseas incluir elementos HTML adicionales.
HTML en el editor
Puede acceder al editor de código haciendo clic en:
- “<> Código” en la esquina inferior derecha del Creador de sitios web (CMS)
- Luego haga clic en la pestaña “HTML”
Normalmente, solo verá el marcador {{content}} aquí, a menos que haya insertado código adicional. Todo lo almacenado aquí se mostrará en el sitio web. El marcador {{content}} representa todo el contenido que puede administrar con el Creador de Sitios Web (CMS), es decir, todos los elementos que edite, mueva, añada o elimine en la vista principal del Creador de Sitios Web (CMS). Si es necesario, puede agregar su propio HTML o fragmentos de terceros alrededor de este marcador. Actualmente, no es posible editar el HTML que ya está en el sitio web para garantizar el correcto funcionamiento de las estructuras existentes.
JavaScript
También puede usar el elemento HTML para incluir JavaScript en las etiquetas <script>. Sin embargo, estos elementos no se ejecutan en el Creador de Sitios Web (CMS). Para ver el efecto, debe cambiar a la vista en vivo. Esta vista muestra el sitio web tal como se vería sin usar el Creador de Sitios Web (CMS) de Sitejet. Puede hacerlo haciendo clic en el enlace de vista previa del sitio web. El sitio web se abrirá en una nueva pestaña.
El Editor de Código es otra opción disponible. Puede acceder a él como se describe en la sección ” HTML en el editor “, en la pestaña “JavaScript”. jQuery, una biblioteca de JavaScript ampliamente utilizada, se integra automáticamente en todos los sitios web de Sitejet para que pueda usarla en su JavaScript. El código utilizado en el Editor de Código es global, por lo que se ejecutará en todas las páginas.
Píxeles, códigos de seguimiento, etc.
Los píxeles se utilizan para recopilar datos con fines publicitarios. Son código JavaScript. Los píxeles más conocidos provienen de Google y Facebook. Generalmente, se utilizan para la optimización de motores de búsqueda y marketing, y se insertan en el área <head> del sitio web.
Para insertar código en el área <head> de su sitio web, vaya a “Más” en el menú superior y seleccione “SEO”:
Aquí puedes introducir toda la metainformación relevante sobre tu sitio web, como títulos, palabras clave o una breve descripción. Encontrarás más información sobre SEO en nuestro artículo sobre SEO .
Para insertar el código de seguimiento en el área <head> del sitio web, se puede utilizar el campo denominado “Meta tags”.
Para usar Google Analytics, basta con insertar el ID de seguimiento en el campo “ID de seguimiento de Google Analytics”. Este artículo de Google explica cómo encontrar el tuyo.
Asegúrate de tomar el TRACKING_ID (o Pixel ID para Facebook) de tu panel respectivo y completar tu política de privacidad en consecuencia.
Si necesita código adicional para otras herramientas, también puede insertarlo en “Metaetiquetas”. Normalmente, las etiquetas <meta> se insertan aquí, pero también se pueden insertar etiquetas <script>. Si el código se coloca justo antes de la etiqueta de cierre </body>, se recomienda insertarlo como se describe en la sección ” HTML en el editor “, en “{{content}}” de la pestaña “HTML”.
Por ejemplo, para Google Tag Manager, tendrá dos tipos de código. Uno para la sección de encabezado, que se implementa en la sección “metaetiquetas”. El segundo fragmento debe pegarse inmediatamente después de la <body> etiqueta de apertura (abra el editor de código, cambie a HTML e inserte el código allí). Para más información, consulte una guía rápida de Google.
Manteniendo el código limpio
Añadir código rápidamente en el editor de código a veces puede ser confuso. Simplemente presione [Ctrl] + [I] para formatear automáticamente todo el código en la ventana activa. Esto funciona tanto con CSS, JS como con HTML. Esto le permite realizar un seguimiento de las áreas individuales de su código, sus variables y sus definiciones.
Hormiga
Emmet es un plugin para diversos editores de texto y código que puede usarse para mejorar tu flujo de trabajo de HTML y CSS. Puedes crear sitios web fantásticos en un abrir y cerrar de ojos con Sitejet, incluso sin conocimientos de Emmet. Sin embargo, Emmet tiene algunas ventajas que no queremos dejar de mencionar.
Por ejemplo, las abreviaturas pueden ahorrar mucho tiempo, pero esto solo tiene sentido si usted mismo escribe mucho código y ya sabe cómo escribir código HTML y CSS.
Todos los editores de Sitejet son compatibles con Emmet, así que puedes aprovecharlo al máximo. Para ello, pulsa la tecla [Tab] en la ventana del editor correspondiente.
Si no conoces Emmet, pero escribes mucho código personalizado, sin duda deberías probarlo. Aquí tienes algunos ejemplos:
En CSS:
m0 -> [TAB] -> margen: 0; p1 -> [TAB] -> relleno: 1px; h80px -> [TAB] -> altura: 80px; c#333 -> [TAB] -> color: #333; fs -> [TAB] -> tamaño de fuente: ; ! -> !importante;
En HTML:
ul>li.test*3 -> [TAB] -> <ul> <li></li> <li></li> <li></li> </ul><br>
Puede encontrar la documentación completa aquí: http://emmet.io/
Este artículo es una traducción del original en inglés titulado “Use custom HTML, CSS, and JavaScript code” publicado por Sitejet.
