Cómo crear referencia
Última actualización: 8 abril, 2025
Los elementos referenciados son clones que se actualizan automáticamente. Imagina que quieres usar un elemento determinado varias veces en todas tus subpáginas. ¿No sería genial poder hacerlo no solo en segundos, sino también sin tener que actualizar cada uno cuando solo necesitas cambiar un elemento? Sitejet ofrece una solución que te puede interesar: ¡crear elementos de referencia!
Conocimientos básicos
Una referencia convierte un contenedor con todo su contenido en una sola instancia. Esto significa que, una vez creada, ya no se puede seleccionar ningún elemento secundario dentro de ella.
- Cualquier clase personalizada establecida en el elemento padre referenciado permanecerá en la referencia. Esto adoptará todo el CSS válido para el elemento original.
- Las clases genéricas se reemplazan con la clase de referencia correspondiente. Por ejemplo, .ed-headline se convertirá en .ed-reference-headline, .ed-text se convertirá en .ed-reference-text , etc.
Nota: Esto puede deshabilitar los estilos aplicados cuando se ha escrito para .ed-text , pero no para .ed-reference-text . - Los objetos de referencia recibirán un ID individual.
Nota: Esto puede deshabilitar los estilos aplicados cuando se hayan escrito para un ID específico. - Las referencias tienen efecto dentro de un proyecto y todas sus subpáginas, pero no se pueden aplicar en diferentes proyectos.
- Las referencias se pueden convertir al elemento original y luego modificarse individualmente (elementos padre e hijo). Sin embargo, esto deshabilitará la actualización automática. Es básicamente lo mismo que duplicar un elemento.
Cómo crear una referencia
Para ilustrar su funcionamiento, utilicemos un banner preestablecido. Esto resulta útil si desea mantener el mismo encabezado en todas las subpáginas.
Puede crear referencias mediante:
- Haz clic derecho dentro de cualquier elemento que quieras referenciar y selecciona “Crear referencia” para duplicar este elemento como una nueva referencia justo debajo. Asegúrate de haber seleccionado el elemento correcto revisando las rutas de navegación en la parte inferior del editor. El elemento deseado suele ser el elemento más a la izquierda en las rutas de navegación o el contenedor principal de un preajuste (indicado por un icono de rompecabezas delante).
- Haz clic derecho y selecciona “Copiar elemento”. Luego, ve a donde quieras colocar la referencia, haz clic derecho de nuevo y selecciona “Pegar referencia”. Esto pegará el elemento copiado como referencia justo donde lo desees, incluso en diferentes páginas.
- Seleccione el elemento al que desea hacer referencia y haga clic derecho sobre el elemento en la ruta de navegación, lo que también abre el menú contextual donde puede seleccionar Crear referencia.
Consejo: Puedes usar atajos para crear estas referencias aún más rápido. Simplemente presiona [CTRL + C] para copiar el elemento deseado y [CTRL + MAYÚS + V] para pegarlo como referencia después del elemento seleccionado. Al presionar [CTRL + V] se pegará un duplicado del elemento copiado, pero no una referencia.
Observa cómo el contenedor en las migas de pan cambia a Reference . Así, puedes comprobar fácilmente si un elemento es original o referenciado. Observa también cómo las clases se mantienen sin cambios.
Configuración de referencia
Al hacer doble clic en el elemento de referencia, se abrirá su panel de configuración a la izquierda.
Aquí puedes encontrar su nueva ID y un par de configuraciones y acciones:
- Copiar configuración: marque esta casilla de verificación para duplicar ciertos efectos y animaciones para aplicarlos también a la referencia
- Convertir referencia: use esto para convertir esta referencia en un duplicado normal y deshabilitar todo comportamiento de actualización
- Mostrar elemento de origen: esto te lleva a donde se encuentra el elemento original.
Si hace clic en “Estilo”, puede ajustar la configuración de esta referencia como para cualquier otro elemento, como agregar animación, establecer una fecha de vencimiento o aplicar clases personalizadas.
Referencia parcial
A veces, no quieres que se haga referencia a todo el encabezado en una subpágina porque quieres cambiar el fondo del encabezado, pero el menú y la barra de información deben permanecer iguales. Si solo quieres hacer referencia a partes específicas, sigue estos pasos:
Comience copiando el preajuste completo. Revise la ruta de navegación para asegurarse de haber seleccionado el elemento contenedor correcto. A continuación, puede hacer clic derecho en el preajuste en la ruta de navegación para abrir el menú contextual donde puede seleccionar “Copiar” o usar las teclas Ctrl + C.
Ahora puedes pegar el encabezado en la subpágina. Es importante que lo pegues en este paso y no uses “pegar como referencia”.
Para nuestro ejemplo, suponemos que
- Queremos cambiar el fondo del encabezado y ajustar el texto en el medio.
- El menú y la barra de información deben ser los mismos en todas las subpáginas.
Ahora, solo haremos referencia a los elementos que deben permanecer iguales, es decir, la barra de información y la barra de menú. Para ello, volvemos a nuestro encabezado original y seleccionamos la barra de información. De nuevo, la ruta de navegación es una herramienta útil para comprobar si se ha seleccionado el elemento correcto. A continuación, hacemos clic derecho para seleccionar “copiar”. Volvemos a nuestra subpágina y usamos el atajo de teclado Ctrl + Cmd + V o hacemos clic derecho para seleccionar “pegar como referencia” y añadir la barra de información debajo de la barra de información copiada. En este caso, nuestra segunda barra de información es una referencia:
Ahora eliminamos la primera barra de información para que solo sea visible la barra de información referenciada. Revisa las rutas de navegación para asegurarte de eliminar o conservar la barra de información referenciada.
Ahora repita el mismo procedimiento para la barra de menú. Una vez hecho esto, tendrá una barra de información y una barra de menú referenciadas que cambian si cambian sus elementos originales, pero el fondo y el texto del encabezado se pueden ajustar según sus necesidades.
Puede repetir esto tantas veces como desee para garantizar una apariencia consistente en todas las subpáginas.
Mejores prácticas
Siempre es importante comprender qué tipo de elemento se desea referenciar y cómo se conecta con otros elementos. Las rutas de navegación son una excelente manera de identificar los elementos. Por ejemplo, a veces no se desea que el encabezado completo aparezca en las subpáginas, o se desea cambiar las palabras o imágenes del encabezado, manteniendo la coherencia en los menús y la información de contacto.
Es posible referenciar varios elementos conectados a la vez. Recomendamos usar el método de referencia, especialmente para la sección de encabezado, el menú y el pie de página. Estos elementos suelen ser los mismos en todas las páginas.
Si quieres que la barra de cookies se muestre en todas las páginas, puedes configurar el elemento de cookies en el pie de página, que ya está referenciado en todas las subpáginas, así que no tienes que preocuparte por hacerlo en todas partes. Si tienes dificultades para referenciar un elemento o necesitas asesoramiento especial, no dudes en preguntarnos a nosotros y a otros miembros de la comunidad de Sitejet.
Este artículo es una traducción del original en inglés titulado “How to create references” publicado por Sitejet.
