El día de hoy te enseñaré a como crear la sección HEADER de tu sitio web. Para este ejemplo vamos a replicar el HEADER del sitio oficial de WhatsApp, el cual está compuesto por el logo y su menú principal.
Paso 1
Ingresamos a nuestro panel de MGPanel damos clic en Desarrollador e ingresamos a Posiciones.
Paso 2
Estando allí editaremos la Posición #1 dando clic al botón de editar. La configuraremos de la siguiente manera *:
- Título de la posición: Header
- Verificamos que esté marcada como ACTIVA
- Etiquetas Apertura:
<!-- Bloque de código eliminado por incompatibilidad -->- Etiquetas Cierre:
<!-- Bloque de código eliminado por incompatibilidad -->- Vista en página: Todo
Y damos clic a Guardar.
* Al crear tu sitio web esta posición viene configurada por defecto para colocar allí nuestro HEADER, solo verifica que todo este igual a lo mencionado en el paso 2 para que puedas continuar.
Paso 3
Damos clic en Desarrollador e ingresamos a Módulos. Crearemos un nuevo módulo para el LOGO. Este lo configuraremos de la siguiente manera *:
- Título del módulo: Logo
- Posición: Header
- Orden: 1
- Verificamos que esté marcado como ACTIVO
- En la pestaña ADICIONAL en Clases: col-xs-12 col-md-4
- En la pestaña MULTIMEDIA: Damos clic sobre subir archivo y seleccionamos nuestro logo de WhatsApp. Esperamos que termine de cargar, pulsamos sobre la imagen cargada y damos clic en Obtener URL
- Volvemos a la pestaña GENERAL y en Código HTML vamos a colocar el siguiente código:
<!-- Bloque de código eliminado por incompatibilidad -->Y damos clic a Guardar.
* Al crear tu sitio web este módulo viene configurado por defecto para colocar el logo en el HEADER, solo verifica que todo este igual a lo mencionado en el paso 3 para que puedas continuar.
Paso 4
Estando en Módulos, crearemos un nuevo módulo para el MENÚ. Este lo configuraremos de la siguiente manera *:
- Título del módulo: Menú
- Posición: Header
- Orden: 2
- Verificamos que esté marcado como ACTIVO
- En la pestaña ADICIONAL en Clases: col-xs-12 col-md-8 menu_web
- Volvemos a la pestaña GENERAL y en Código HTML vamos a colocar el siguiente código:
<!-- Bloque de código eliminado por incompatibilidad -->Y damos clic a Guardar.
* Al crear tu sitio web este módulo viene configurado por defecto para colocar el menú en el HEADER, solo verifica que todo este igual a lo mencionado en el paso 4 para que puedas continuar.
Paso 5
Damos clic en Desarrollador e ingresamos a Editor CSS. Allí se desplegará el editor que contiene el código CSS de todo nuestro sitio web.
Nos abrimos paso en una de las primeras líneas y vamos a colocar el siguiente código:
<!-- Bloque de código eliminado por incompatibilidad -->Y damos clic a Guardar.
Ve a tu página web y verás que tu sitio web ya tendrá un HEADER como el de WhatsApp.
De esta forma se verá tu HEADER en tu sitio web: Ver HEADER de WhatsApp en página web.
Bonus
Responsive Design:
<!-- Bloque de código eliminado por incompatibilidad -->En próximos post te daremos otros consejos para que los apliques en este nuevo CMS para programadores, también iremos construyendo secciones de sitios web y otros trucos que queremos compartir contigo.
O si quieres especializarte en programación web dale un vistazo a nuestro Máster en programación web desde cero.
O también puedes visitar nuestro canal de YouTube, donde tenemos tutoriales y clases grabadas de como crear páginas web de forma rápida y sencilla.
Nos vemos en un próximo post,
Wilmer Silva