Posiciones y Módulos

Toda página web profesional debe estar estructurada en secciones bien definidas que permitan segmentar el contenido para presentar la información a los usuarios de la manera más clara y eficiente.

Pensando en esto, en MGPanel hemos desarrollado un modelo de estructuración que permita a los programadores tener control sobre las diferentes secciones que conforman su página web. Este modelo está compuesto por dos elementos denominados como “Posiciones” y “Módulos”.

Los conceptos de ambos se encuentran estrechamente enlazados pues los módulos dependen de las posiciones para existir, pero esto se entenderá mejor más adelante.


¿Qué son las Posiciones?

Las posiciones son la estructura base del sitio web, sirven para organizar las diversas secciones en módulos que estarán agrupados dentro de etiquetas HTML definidas, además permiten seleccionar a que partes de la página pertenecerán esos módulos y en qué orden.

Imagina que el Home de tu sitio web es como un edificio, las posiciones serán los pisos de ese edificio. Cada piso tiene varias salas o "secciones", éstas secciones serían los módulos. Los módulos te permiten organizar tu HTML en bloques de código dentro de una posición.

En MGPanel V11 dispones de 30 posiciones para armar tu sitio web, sin embargo, cada una puede contener una ilimitada cantidad de módulos.

Las posiciones también presentan la ventaja de que pueden activarse y desactivarse rápidamente para que éstas se muestren o no dentro del sitio web.

Para que se entienda mejor, digamos que armaste el Home usando solo 8 posiciones, tu edificio tendría tan solo 8 pisos y la cantidad X de módulos que hayas creado para cada uno. Por lo tanto, las otras 22 posiciones que se encuentran desactivadas no se tomarán en cuenta.

Gestor de Posiciones

En el Gestor de Posiciones se encuentran las 30 posiciones enumeradas de las que se dispone en MGPanel V11 junto con la descripción, vista y el status de cada una. Desde allí es posible editar el funcionamiento de la posición, a través de los siguientes campos:

Campos Descripción Tipo
Título de la posición Nombre asignado a la posición para diferenciarla del resto. String
Etiquetas de Apertura Etiqueta HTML que da inicio al cuerpo de la posición. Por defecto será un <div class=”row”>. Se recomienda agregar un id. Se puede agregar más de una etiqueta de apertura. Code HTML
Etiquetas de cierre Etiqueta HTML que cierra la/las etiqueta/as de apertura, indicando que es dónde finaliza el cuerpo de la posición. Por defecto </div>. Code HTML
Vista en Página Permite indicar en cuales páginas debe mostrarse la posición y su contenido. Select

Nota: Las posiciones en MGPanel NO pueden crearse ni eliminarse, solo se pueden editar sus atributos. Una vez familiarizado con ellas, las encontrarás muy útiles para el desarrollo de tu sitio web.

Posiciones Especiales

La primera vez que entres a tu MGPanel encontrarás 4 posiciones configuradas por defecto:

  • Posición 1: Header
  • Posición 2: Banner Principal
  • Posición 12: Interactivo
  • Posición 29: Footer

Estas posiciones son las usadas para la estructura del sitio web de Bienvenida, de modo que tengas una idea de cómo funcionan para que puedas desarrollar el tuyo luego.

Aunque todas las posiciones se pueden editar, la posición 12 es particularmente especial y recomendamos no cambiarla si no dominas todavía el concepto de posiciones, debido a que esto podría provocar que su blog y tienda no funcionen correctamente.

Contenido Interactivo

La posición 12 contiene el módulo especial de “Contenido Interactivo” el cual se encarga de proporcionar los contenedores de las vistas del blog y tienda que MGPanel genera automáticamente. Sin embargo, puedes editar algunos de sus atributos sin que esto signifique una mala consecuencia.

Si deseas cambiar la ubicación de tu posición interactiva, sigue los siguientes pasos:

  • Habilita una nueva posición: ten en cuenta que debes agregar las etiquetas de apertura y cierre, y en la vista debe estar seleccionada la opción “Todo”.
  • Dirígete al Gestor de Módulos.
  • Ubica el módulo “Interactivo” y selecciona la opción Editar.
  • En el tab “General” edita la opción de “Posición” y selecciona la posición que creaste en el paso 1.

¿Qué son los Módulos?

Los módulos representan el segundo nivel en la estructura del sitio web, su función es almacenar los bloques de código que conforman las secciones de tu página.

En el código fuente de tu página, verás los módulos representados por etiquetas <div></div> que serán contenedores del código que introduzcas en el Editor de Código HTML del módulo.

Estas etiquetas pueden tener clases, id, estilos especiales y otros atributos que mencionaremos más adelante.

Los módulos se organizan dentro de sus respectivas posiciones asignándoles un orden numérico.

A diferencia de las posiciones, los módulos pueden ser creados y eliminados desde el Gestor de Módulos, y puedes tener tantos como tu sitio lo requiera.

Gestor de Módulos

En el Gestor de Módulos se encuentran todos los módulos de tu sitio web ordenados según el número de su posición asociada y el orden que hayas asignado a cada uno.

Desde aquí podrás crear nuevos módulos, así como ver la información básica de tus módulos como el nombre, posición, orden y status, y realizar acciones tales como editar y eliminar.

Crear Nuevo Módulo

Los módulos se crean desde el Gestor de Módulos, en la opción “Nuevo Módulo”. Una vez dentro, encontrarás una serie de tabs con algunos campos para rellenar. En el siguiente cuadro los explicamos con más detalle:

Configuración General
Campos Descripción Tipo
Título del módulo Nombre asignado al módulo para diferenciarlo. String
Posición del módulo Posición asignada para contener al módulo. Select
Orden Número que define el orden de los módulos dentro de la posición Number
Estatus Indica si el módulo debe mostrarse o no en el sitio web mediante un interruptor de dos estados: Activa e Inactiva. Switch
Editor de Código HTML Interfaz destinada a la programación del código HTML que corresponde al cuerpo del módulo o sección. Code HTML
Código Javascript
Campos Descripción Tipo
Editor de Código Javascript Interfaz destinada a la programación de código Javascript para dar funcionalidades especiales al módulo o su contenido. Code Javascript
Adicionales
Campos Descripción Tipo
ID Atributo id=”” específico del módulo. String
Clases Atributo class=”” para agregar una o más clases al módulo. String
Estilos Atributo style=”” para agregar estilos específicos al módulo. Code CSS
Módulo Especial Selector para el tipo de módulo según el uso final que tendrá. Select
URL del módulo especial Dirección o enlace específico para el módulo especial. String

¿Quieres programar como un experto?

Máster en programación web

¡Quiero comenzar!

¿Ya revisaste todo y aún tienes dudas?

Contáctacta a nuestro equipo de soporte para una mejor atención


Contactar con Soporte