Creando Mi Primera Sección

Al desarrollar sitios web, debemos segmentar la información que queremos mostrar al usuario para que esta sea clara y fácil de entender. La forma tradicional de hacerlo es dividiendo la página en secciones bien definidas que traten un tema en específico para no acabar mezclando las cosas.

Cada sección debe ser planificada para cumplir un objetivo que genere interés a los usuarios, como mostrar un banner de productos, unas tarjetas de información sobre tus servicios, un formulario de contacto, etc.

En este artículo te mostraremos paso a paso cómo puedes crear tu primera sección en MGPanel a través de un recorrido guiado, donde aprenderás las bases para que luego puedas hacer tus propias secciones y darle forma a tu sitio web.

¡Vamos a ello!

Adecuaciones Iniciales

Para iniciar con este tutorial debes Ingresar a tu cuenta de MGPanel, si no tienes una puedes crearla en app.mgpanel.org/signup.

Una vez que hayas ingresado a tu MGPanel puedes visualizar tu sitio web dando click en la opción “Ir a web” ubicada en el menú superior. Inicialmente veras una página web sencilla de bienvenida para indicarte que todo está funcionando correctamente.

Si todo esta ok, continuemos haciendo algunos cambios antes de crear tu primera sección.

Desactivar una posición

Primero necesitamos desactivar la posición "Banner Principal", para ello sigue estos pasos:

• Dirígete al menú de Desarrollador y selecciona la opción “Posiciones”.

• Ubica la posición 3 y verifica que esta se llame “Banner Principal” (De no ser esa la posición, ubica la que coincida con el nombre).

• Si esta posición se encuentra activa, debes desactivarla ingresando al botón “Editar” ubicado a la derecha en la columna “Acciones”. Al darle click se desplegará una ventana modal con varios campos, debes seleccionar una especie de switch ubicado en la parte superior derecha de la ventana modal y verificar que sea color gris, finalmente dale “Guardar” y listo, habrás desactivado la posición.

Al desactivar la posición también dejarán de ser visibles los módulos que estaban contenidos dentro de ella.

Si vuelves a ingresar a tu sitio web deberás notar que el mensaje de bienvenida ha desaparecido. ¿Salió bien? Si la respuesta es sí, continuemos con el siguiente paso.

Activando Una Posición

En este punto haremos algo similar a lo que hicimos antes, pero en lugar de desactivar una posición, activaremos otra, la cual usaremos para agregar la nueva sección al sitio web.

Las posiciones vienen con una serie de campos editables. ¿Los recuerdas? Estos campos traen una configuración por defecto que debemos editar al activarlos para identificarlos dentro de MGPanel.

Por ahora no nos centraremos de forma teórica en cómo funcionan las posiciones sino en cómo puedes usarlas para este ejemplo. Si quieres saber más, échale un vistazo a la sección de Posiciones.

Pasos para activar una posición

Para activar la posición que necesitamos, sigue los siguientes pasos:

• Dirígete al menú de Desarrollador y selecciona la opción “Posiciones”.

• Ubica la posición 5 (Puedes usar cualquier otra posición, pero de momento te sugerimos comenzar con esta).

• Ingresa en la opción “Editar” y espera que se abra la ventana Modal.

• En el campo “Título de la posición” coloca: "Mi primera posición".

• En el campo “Etiqueta de apertura” coloca el siguiente código:

  <div class="primera-sec row">

  Este campo abre la/las etiquetas que van a contener a los módulos que coloques dentro de esa posición. Si no comprendes bien el tema de las posiciones y quieres reforzar esta parte te sugerimos revisar la sección La estructura del sitio web.

• Luego, en el campo “Etiquetas de cierre” debes colocar el siguiente código:

  </div>

  Probablemente ya lo habrás notado, pero por si no lo has hecho aún, esta etiqueta cierra el div que colocamos en las etiquetas de apertura. En este campo debes cerrar todas las etiquetas que abras dentro de las etiquetas de apertura.

• Ahora, en el campo “Vista en Página” selecciona la opción “Solo el HOME”.

• Finalmente, activa la posición seleccionando el switch con texto “Activa” ubicado arriba y a la derecha de la ventana modal.

• Dale Guardar y espera unos segundos para confirmar que todo haya salido correctamente.

Verifica que el status de la posición que escogiste sea “Activo” y habremos terminado por esta parte. Continuemos creando un nuevo módulo.

Creando un Nuevo Módulo

Para agregar contenido que sea visible dentro de tus posiciones, debes agregar algo de código HTML y esto se hace a través de los módulos.

Los módulos te permiten agregar bloques de código HTML a una determinada posición. Como habrás visto anteriormente, las posiciones se componen de etiquetas HTML que serán las etiquetas padre del o los módulos que coloques dentro de esa posición.

Pasos para crear un módulo

En esta sección agregaremos un módulo a la posición que activaste anteriormente, solo debes seguir los siguientes pasos:

• Dirígete al menú de Desarrollador y selecciona la opción “Módulos”.

• Haz click en el botón “Nuevo Módulo”.

• En el campo “Título del Módulo” coloca un título al módulo para identificarlo.

• En el campo “Posición” selecciona la posición que activaste.

• En el campo “Orden” coloca Orden 1.

• Ahora, debajo de estos campos verás un recuadro negro el cual funciona como editor de código HTML. Dentro de este editor vas a pegar el siguiente código:

  <div class="lottieBox"><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_REOnx3.json" background="transparent" speed="1" style="" autoplay=""></lottie-player></div><h1>¡FELICIDADES!</h1>
  <h5>Acabas de crear tu primera sección en MGPanel ¿Verdad que fue fácil?</h5>
  <hr>
  <p>Este es el proceso que debes seguir para crear cada una de las secciones del Home de tu sitio web. A partir de este momento puedes agregar algunas más para practicar y memorizar los pasos.</p>
  <a class="btn btn-primary" href="https://app.mgpanel.org">¡Continuemos!</a>

• Luego, dirígete a la pestaña “Adicional” de la configuración de módulo ubicada en la parte superior, debajo del título “Editar Módulo”.

  En el campo “Clases” coloca col-md-12.

• El módulo debe estar activado por defecto, pero verifica que lo esté antes de guardar.

• Finalmente dale al botón “Guardar” y espera que el sistema confirme que todo se guardó correctamente. De ser así, te redirigirá al Gestor de Módulos.

Si todo ha salido bien, habremos terminado con esta sección y ahora podremos agregar algunos estilos a nuestro código HTML.

Agregando Estilos CSS a Mi Sección

En teoría ya has creado tu primera sección, pero no podría estar lista si no agregamos algo de estilos CSS para hacerla un poco más atractiva visualmente.

Este último paso es bastante sencillo, para hacerlo sigue las siguientes indicaciones y habremos terminado el tutorial:

• Copia estos estilos CSS:

  .primera-sec{height: calc(100vh - 60px);position: relative;overflow: hidden;}
  .primera-sec:before{content: '';position: absolute;top: 0;left: -150px;width: 300px;height: 300px;border: 6px solid #ff3451;transform: rotate(30deg);}
  .primera-sec:after{content: '';position: absolute;bottom: -200px;right: -200px;width: 400px;height: 400px;border: 10px solid #ff3451;border-radius: 50%;}
  .primera-sec .col-md-12{display: flex;flex-direction: column;justify-content: center;align-items: center;}
  .primera-sec h1{font-weight: 800;font-size: 60px;margin-bottom: 15px;}
  .primera-sec hr{background: #ff3451;height: 4px;width: 5%;margin: 20px auto;}
  .primera-sec p{width: 60%;text-align: center;margin-bottom: 30px;}
  .primera-sec .btn{padding: 10px 20px;background: #ff3451;border: 1px solid #ff3451;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);}
  .primera-sec .btn:hover{background-color: #ff1738;border-color: #ff1738;box-shadow: 0 0 0 0rem rgb(38 143 255 / 50%);}
  @media screen and (max-width: 585px) {#header > .container > .row > .col-md-8{position: relative;margin-top: -40px !important;}.primera-sec{padding: 20px;}.primera-sec:before{display: none;}.primera-sec .col-md-12 .lottieBox {top: -50px;left: -25%;}.primera-sec .col-md-12 lottie-player{width: 140%;}.primera-sec h1{font-size: 36px;}.primera-sec h5{text-align: center;font-size: 18px;}.primera-sec hr{width: 30%;}.primera-sec p{width: 100%;font-size: 16px;text-align: justify;}.primera-sec:after{display: none;}}

• Dirígete al menú de Desarrollador y selecciona la opción “Editor CSS”. Esto debería desplegar el editor desde la parte derecha de la ventana.

• Una vez dentro del Editor CSS, pega estos estilos del /* BANNER */.

• Haz click en Guardar y como siempre, espera la confirmación de que todo ha salido bien.

¡TODO LISTO!

Ahora, dirígete de nuevo a tu sitio web y ve el resultado final.