¿Qué son los elementos?
Última actualización: 26 marzo, 2025
Con elementos y ajustes preestablecidos, Sitejet te permite crear sitios web atractivos de forma rápida y sencilla, sin necesidad de código adicional. Los elementos proporcionan objetos individuales con los que puedes crear sitios web, como iconos, controles deslizantes, etc. Son la unidad más pequeña del editor web. Son como bloques de construcción y se utilizan para proporcionar funciones básicas como textos, titulares, botones, etc.
Recomendamos buscar primero un ajuste preestablecido, ya que son secciones prediseñadas del sitio web que constan de diferentes elementos con opciones de estilo predefinidas. Le mostraremos cómo trabajar con ajustes preestablecidos en nuestro artículo de ayuda sobre ajustes preestablecidos .
Para editar un elemento, haga doble clic en él con el botón izquierdo del ratón o pulse Intro si ya está seleccionado. Puede usar las flechas para navegar entre elementos.
Al hacer doble clic en un elemento, no solo se puede editar su contenido, sino también ajustar la configuración que se abrirá en el panel izquierdo del CMS. Cada elemento tiene su propia pestaña (indicada por su nombre; en nuestro ejemplo, “Título”), donde se pueden realizar ajustes específicos. Todos los elementos también tienen una pestaña “Estilo”, donde se encuentran las configuraciones universales para todos los elementos.
Añadir elementos
Para agregar un elemento, simplemente haga clic en la categoría “Elementos” en la barra lateral de contenido a la izquierda:
Junto a la barra lateral de contenido, aparecerá el panel “Añadir contenido”. Aquí puede seleccionar el elemento deseado y colocarlo en la posición deseada en el sitio web mediante la función de arrastrar y soltar. Una línea verde indicará dónde se añadirá el elemento.
Si ya ha seleccionado un elemento en el sitio web, también puede agregarlo desde el panel con un simple clic izquierdo del ratón. Si desea agregar varios elementos a la vez, pulse la tecla Ctrl mientras los selecciona todos. Si los arrastra y suelta en el sitio web, se agregarán en el mismo orden en que haga clic en ellos. También puede agregar elementos con nuestros atajos integrados. Por ejemplo, con Ctrl + 2 (o Cmd + 2) puede agregar un elemento de texto. Para ver todos los atajos, pulse Ctrl + K (o Cmd + K).
Mover elementos
Tienes diferentes opciones para mover elementos en el sitio web. Puedes usar atajos o usar la gestión de jerarquías . Por ejemplo, si usas la combinación de teclas Ctrl + flecha arriba, puedes mover el elemento hacia arriba. Con Ctrl + flecha abajo, puedes mover el elemento hacia abajo según corresponda.
Con la gestión de jerarquías, puede mover elementos haciendo clic en la etiqueta con el botón izquierdo del ratón, manteniéndolo pulsado y arrastrando el elemento a la posición deseada con el ratón. Preste atención a la línea verde, que indica dónde se colocará el elemento al soltarlo. Si desea colocar un elemento entre dos contenedores, pulse Ctrl.
Pestaña de estilo
En la pestaña Estilo, puede configurar las preferencias básicas de diseño. Estos ajustes son los mismos para todos los elementos. Además, la pestaña Estilo le permite cambiar a los ajustes preestablecidos si el elemento se encuentra en un contenedor preestablecido. Para más información, consulte el artículo de ayuda sobre ajustes preestablecidos .
Diseño (elemento de Flexbox)
El editor web organiza los elementos según el principio “Flexbox” . El eje principal (uno junto al otro o uno debajo del otro) se define para el contenedor principal y se realizan especificaciones adicionales de organización. Esto siempre define cómo se deben organizar los elementos y evita sorpresas desagradables al moverlos manualmente: el diseño es siempre predecible y estable en todos los dispositivos, resoluciones de pantalla y circunstancias.
Para este propósito, la configuración de “Flexbox-Item” especifica cómo debe comportarse el elemento dentro del contenedor principal:
- La “Base” especifica qué tan grande debe ser el elemento en el eje principal en relación con el contenedor principal.
- Con “Crecer” puedes especificar si el elemento también puede crecer si hay más espacio disponible
- “Reducir” define hasta qué punto se puede reducir el elemento para liberar más espacio
- Si tiene varios elementos uno al lado del otro y cambia a la vista móvil, por ejemplo, estos se mostrarán uno debajo del otro. Con “Ordenar”, puede decidir la posición en la que se mostrará un elemento sin modificar su estructura original.
Visibilidad
En la sección Visible, puedes decidir si un elemento debe mostrarse o no. Puedes ajustar esta configuración según el dispositivo seleccionando escritorio, tableta y móvil en la barra de navegación superior y ajustando la configuración según corresponda.
Además, puede reducir la opacidad y trabajar con transparencia. Además, puede especificar con “desbordamiento” si el contenido que excede los límites del elemento debe seguir mostrándose. Las flechas junto a la configuración de desbordamiento determinan si las barras de desplazamiento deben mostrarse en la parte inferior, a la derecha o automáticamente, según el tamaño de la ventana.
Espaciado
En Espaciado, puede definir el relleno (espaciado interno) y el margen (espaciado externo) de un elemento. Aquí puede especificar los valores para los lados superior, inferior, izquierdo y derecho. También puede introducir el mismo valor para todos los lados utilizando el campo de entrada junto a la etiqueta.
Fronteras
Los marcos ofrecen una forma interesante de resaltar ciertos elementos o separarlos del resto del contenido.
En Estilo, puede especificar si el marco debe ser una línea sólida, discontinua, punteada o doble. Además, puede establecer diferentes valores para el ancho del borde para los cuatro lados del elemento, similar al espaciado, o usar el campo de entrada junto a la etiqueta para establecer el mismo valor para todos. También puede especificar un color para el borde.
Si desea tener esquinas redondeadas, ingrese sus valores preferidos, ya sea para cada esquina o para todas las esquinas, utilizando el campo de entrada junto a la etiqueta.
Sombra
El sombreado crea una sensación de profundidad. Los elementos se pueden elevar o bajar para resaltarlos mejor. Puedes elegir entre:
- Por defecto
- Ninguno
- “Exterior”: este es el caso de uso típico para sombreado, donde se proyecta una sombra alrededor del elemento sobre los elementos “detrás” de él.
- “Dentro”: esto significa que los demás elementos alrededor del elemento seleccionado actualmente proyectan una sombra sobre el elemento seleccionado.
Después de seleccionar una opción en la parte superior, puede utilizar los campos correspondientes para ajustar el color de la sombra, su orientación y el desenfoque de la sombra y su propagación.
Sombra de texto
También puede administrar sus preferencias para la sombra del texto.
Posicionamiento
En Posicionamiento, puedes especificar la posición del elemento en el sitio web:
- Con el posicionamiento “Estático”, el elemento siempre se muestra exactamente donde se colocó en el editor.
- Los elementos “relativos” sirven como “puntos de anclaje” para otros elementos subordinados, que, por lo tanto, están “dentro” del elemento relativo; este posicionamiento es importante para los elementos contenedores; aquí también se especifica el “Índice Z”, que define la posición en el eje Z (desde la pantalla).
- Los elementos con posicionamiento “Absoluto” se posicionan en relación con el siguiente elemento de nivel superior, que tiene un posicionamiento “relativo”; aquí también se puede especificar un índice Z.
- Los elementos “fijos” son relativos a la ventana del navegador: de esta manera, puede garantizar que el elemento siempre se muestre en la misma posición en la ventana del navegador, sin importar si el visitante del sitio web se desplaza hacia arriba o hacia abajo.
- “Fijo” garantiza que un elemento esté “fijo” en una posición relativa a la parte superior de la pantalla después de que el visitante del sitio web se desplaza por él.
Transformar
Con Transformar, se puede modificar aún más la apariencia del elemento. Hay cuatro opciones disponibles:
- Con “Traducir”, mueves el elemento en el sitio web sin mover ni afectar de otro modo a los elementos restantes.
- “Escala” cambia el tamaño del elemento mediante un factor porcentual
- “Rotar” gira el elemento según el ángulo que especifique
- “Skew” distorsiona el elemento en los ejes X e Y, haciendo que el elemento en sí esté sesgado.
Identificación y clase
En la sección “ID y clase”, se asignan los ID necesarios para trabajar con enlaces y CSS. También se asignan clases a un elemento. Puede obtener más información sobre ID y clases en nuestro artículo sobre código personalizado .
Animación
Con Sitejet, puedes asignar fácilmente diferentes animaciones a cada elemento. Tienes una amplia gama de animaciones para elegir. Explicamos más sobre estas animaciones y sus opciones de configuración en nuestro artículo de ayuda sobre animaciones .
Cronograma
En Programación, puede especificar una fecha de inicio y/o finalización para cada elemento, después de la cual el elemento debe mostrarse o desaparecer.
Otro
En “Varios”, especifique el número mínimo y máximo de elementos. Esto resulta útil si permite a sus clientes editar ciertas secciones o elementos. El número mínimo y máximo de elementos define la frecuencia con la que sus clientes pueden duplicar o eliminar un elemento, por ejemplo, para garantizar que el diseño siga siendo atractivo.
Al duplicar un elemento, el campo del elemento de origen se completa automáticamente con el ID del elemento original para que sepa desde qué elemento se duplicó el elemento actual.
Ajustes preestablecidos
Como se mencionó anteriormente, los ajustes preestablecidos constan de diferentes elementos. Por lo tanto, si hace clic en un elemento que forma parte de un ajuste preestablecido, encontrará dos categorías en “Estilo”: la categoría del elemento y la categoría del ajuste preestablecido correspondiente, que tiene el mismo nombre que el ajuste preestablecido. En nuestro ejemplo, usamos el ajuste preestablecido “Tarjetas”.
Manejo de jerarquías
La gestión de jerarquías ofrece funciones adicionales además de la función “Mover” descrita anteriormente. Lo más importante es que proporciona una vista general intuitiva de todos los elementos anidados al pasar el cursor sobre una etiqueta. Para distinguir entre preajustes y elementos, puede observar el color de la etiqueta y el borde:
- Naranja: preestablecido
- Azul claro: elemento
Si hace clic en un elemento, también puede consultar la ruta de navegación en el pie de página del editor del sitio web para obtener otra descripción general rápida de la jerarquía.
Cada etiqueta consta de un icono único y correspondiente al elemento correspondiente, para que puedas ver de un vistazo de qué elemento se trata. El elemento sobre el que se encuentra el ratón también tiene su nombre en la etiqueta. Dependiendo del elemento, también podrías ver opciones adicionales junto a la etiqueta:
- Icono de puntos suspensivos para abrir el menú contextual
- Duplicado
- Borrar
- Subir
- Bajar
- Icono de estrella para indicar que el elemento está animado
Configuraciones responsivas
“Responsive” significa que el diseño se adapta según el dispositivo y la resolución para garantizar que el sitio web se muestre de la mejor manera posible. Tiene varias opciones para usar la configuración responsiva: en primer lugar, recomendamos usar ajustes preestablecidos con la mayor frecuencia posible, ya que están diseñados para ello. En segundo lugar, puede ajustar la configuración de colores, alturas, anchos, posicionamiento, etc., para la visualización en computadoras de escritorio, tabletas y dispositivos móviles.
Para hacer esto, utilice los tres íconos de dispositivos (que representan las ventanas gráficas de escritorio, tableta y teléfono inteligente) en la parte superior del CMS para cambiar a la vista deseada y cambiar el valor correspondiente para esa vista específicamente.
En el siguiente ejemplo, queremos ajustar el relleno a la izquierda y a la derecha. Para ello, proceda de la siguiente manera:
- Cambie a la vista de tableta haciendo clic en el ícono de tableta en la parte superior del CMS
- Asegúrate de estar en la pestaña Estilo en Elementos
- En Espaciado, haga clic en “Personalizado” junto a “Relleno” y escriba 3 en el campo de entrada derecho e izquierdo después de seleccionar rem
Ahora, ajusta la vista móvil seleccionando el icono correspondiente en la barra de navegación superior. En este ejemplo, cambiamos el relleno a 1 rem.
Los cambios en las vistas de otros dispositivos se aplican automáticamente a todos los dispositivos más pequeños: todos los ajustes que realice en la vista de escritorio se aplican a todos los tipos de dispositivo, a menos que se sobrescriban. Si modifica los ajustes de la vista de tableta, estos también se aplican a los dispositivos móviles, pero no a los de escritorio. Observará que, tras ajustar el relleno, como en el ejemplo anterior, el color de la etiqueta de ajustes ha cambiado de blanco a morado para la tableta y de amarillo para el móvil, según el color de los iconos de la barra de navegación superior.
Este artículo es una traducción del original en inglés titulado “What are elements?” publicado por Sitejet.
