Base de Conocimiento

Bienvenido al centro de conocimiento OZ

Configuración General

Cuerpo Drag and Drop

Interfaz Fácil de Usar en OZ Studio: estructura modular con sistema Drag and Drop

Last updated on 25 Nov, 2025

El cuerpo de una página es el área central donde sucede todo: donde se despliega el contenido, se muestran los productos, se cuentan historias o se activan conversiones. El CMS de OZ Studio, esta sección se construye mediante un sistema visual drag and drop basado en contenedores, filas y columnas, lo que permite controlar cada parte del diseño sin necesidad de escribir una sola línea de código.

En términos funcionales, el cuerpo es una secuencia de secciones (contenedores) que agrupan y organizan la información. Estas secciones se diseñan mediante bloques visuales, y dentro de cada una se insertan los componentes necesarios: textos, imágenes, videos, botones, formularios, galerías, sliders, mapas, productos, etc.


Estructura principal: Header, Cuerpo y Footer

El diseño en el CMS de OZ Studio se organiza en tres secciones estructurales principales que aparecen en todas las páginas:

1. Header (encabezado):
Es la parte superior del sitio. Comúnmente incluye el logotipo, menú de navegación, datos de contacto, botones de acción rápida o enlaces a redes sociales. Puede ser fijo o desplazable y admite personalización en colores, tipografía y comportamiento.

2. Cuerpo:
Es el espacio central y dinámico del sitio, donde se ubican los bloques de contenido principales: imágenes, texto, formularios, productos, sliders, testimonios, galerías, llamadas a la acción, videos, etc. Todo el contenido visual se construye en esta zona utilizando contenedores, filas y columnas.

3. Footer (pie de página):
La parte inferior. Aquí se colocan enlaces complementarios como políticas de privacidad, aviso legal, contacto, redes sociales y otros accesos rápidos. También es completamente editable y puede replicarse en todas las páginas del sitio para mantener coherencia.


Cómo se estructura el cuerpo de una página en OZ CMS

El diseño del cuerpo se basa en tres niveles jerárquicos principales:

1. Contenedores

Son los bloques estructurales que dividen la página en secciones. Cada contenedor representa una parte del contenido: por ejemplo, una introducción, una lista de servicios, una sección de testimonios o un formulario de contacto.

2. Filas

Dentro de cada contenedor, se pueden crear una o varias filas para organizar el contenido de manera horizontal.

3. Columnas

Cada fila puede dividirse en hasta cinco columnas. Estas columnas sirven para colocar contenido lado a lado: por ejemplo, una imagen en una columna y un texto explicativo en la otra.


¿Cómo se construye el cuerpo de una página paso a paso?

Todo este sistema es completamente visual, editable y reordenable en tiempo real desde el editor de OZ CMS.

Paso 1: Agrega un bloque de header

  • Desde el editor, haz clic en “Agregar bloque” en la parte superior de la página.

  • Selecciona la categoría “Header”.

  • Elige entre varios diseños prediseñados (con menú, logotipo al centro, barra de contacto, etc.) o selecciona una plantilla en blanco.

Paso 2: Añade contenedores y columnas si necesitas

  • Puedes dividir tu encabezado en varias filas y columnas para colocar diferentes elementos (por ejemplo, logotipo a la izquierda, menú al centro, y botón a la derecha).

  • Usa el sistema de columnas ajustables para alinear con precisión los elementos.

Paso 3: Inserta los widgets necesarios

Los widgets más utilizados en un header son:

  • Widget de imagen o logo: coloca el logotipo de tu marca, con enlace a la página principal.

  • Widget de menú: agrega la barra de navegación principal. Puedes configurarla para que sea horizontal, vertical o tipo “hamburguesa” para móviles.

  • Widget de botón: ideal para llamadas a la acción, como “Agenda tu cita”.

  • Widget de iconos: útil para mostrar redes sociales o accesos rápidos.


Personalización visual del cuerpo

Cada contenedor (y también cada columna) puede personalizarse visualmente de forma precisa:

  • Fondos: puedes aplicar un color sólido, un degradado, una imagen o un video de YouTube en bucle.

  • Relleno y márgenes: ajusta el espacio interno (padding) o externo (margen) para separar los elementos.

  • Sombra y bordes: agrega profundidad o estilo visual mediante sombras internas o externas, bordes redondeados y estilos decorativos.

  • Separadores visuales: entre un contenedor y otro puedes insertar divisores de forma para lograr una transición visual estética y fluida (curvas, pinceles, grunge, triángulos, etc.).

  • Anclas internas: puedes asignar puntos de anclaje a cualquier sección para permitir la navegación interna o enlaces directos desde el menú.

Además, todos los elementos dentro del cuerpo pueden mostrarse u ocultarse por tipo de dispositivo (desktop, móvil, tablet), permitiendo versiones adaptadas según la pantalla del usuario.


Conclusión

La interfaz del CMS de OZ Studio está diseñada para empoderar al usuario. Su sistema drag and drop, combinado con una estructura lógica de contenedores, encabezados, cuerpo y pies de página, permite construir sitios web profesionales sin barreras técnicas. Todo esto sin depender de plugins externos, plantillas de terceros ni código personalizado.

Más allá de facilitar el diseño, esta metodología garantiza que cualquier cambio pueda realizarse en tiempo real, desde cualquier dispositivo, con control total sobre cada detalle del sitio.

¿Te ayudo este articulo?
Previous

Footer Drag and Drop

Next

Soporte al cliente disponible a través del dashboard del cliente.