Personaliza y aplica tu branding en Power Pages sin complicaciones

¿Estás familiarizado con Power Pages? Es la herramienta del ecosistema Microsoft orientada a crear y administrar sitios web de forma segura. Tanto si tienes poco conocimiento de código como si eres un desarrollador profesional, Power Pages te permite diseñar, configurar y publicar tus sitios web, de manera que funcionen entre distintos exploradores web y dispositivos.

Vamos a ver en este post de qué manera puedes personalizar tus sitios de Power Pages para ajustarlos a lo que buscas en diseño y adaptarlos al branding de tu empresa, de manera que refuerces tu imagen de marca.

Qué opciones de diseño te ofrece Power Pages

Plantillas

Cuando creas un sitio web nuevo, tienes la opción de empezar desde una plantilla de Power Pages. Si decides usar una de ellas, te creará una serie de páginas y contenido que tú podrás editar más tarde. Estas plantillas te permiten crear un sitio sin conocimientos previos de Power Pages o sin tener una base de conocimiento de CSS y HTML.

Temas

Microsoft Power Pages viene con varios temas que puedes aplicar a tu sitio. Todos ellos utilizan como base Bootstrap, un framework que aporta estilos y controles al site. Es importante saber que los nuevos portales ya contienen la versión 5 de Bootstrap, los anteriores tendrán la versión 3 aunque Power Pages ofrece una herramienta para migrar a la última versión si así se desea.

Estos temas permiten personalizar varios aspectos para poder adaptarlos a tu branding:

• Paleta de colores: Puedes definir los colores de marca y otros auxiliares. Estos colores se aplicarán automáticamente a algunos elementos de la página si has utilizado una plantilla. Además, estarán disponibles en los diferentes elementos de edición.

• Color de fondo: Establece el color de fondo de la página.

• Fuentes: Puedes definir los tamaños y fuentes de los diferentes encabezados y textos de la página.

• Botones y vínculos: En este caso disponemos de la opción de definir los estilos para el botón primario, el secundario y los links.

• Secciones: Definiremos los márgenes y espaciados de las secciones del portal.

Aunque Power Pages nos permite añadir una tipografía diferente para cada elemento, es recomendable mantener el número de tipografías diferentes al mínimo, siendo desaconsejado usar más de dos/tres tipos de fuentes en un mismo sitio.

Si decides utilizar más de una tipografía, deben hacerse de manera lógica. Esto es porque cuando hay muchos tipos de fuente, el usuario se desorienta y además no facilita la legibilidad de nuestra página. Por ejemplo, si queremos usar dos tipografías diferentes una opción sería usar una tipografía más diferente para los encabezados y otra de fácil legibilidad para el resto de textos.  Así pues, en tu sitio de Power Pages puedes seleccionar la fuente para los diferentes elementos pero siendo conscientes en su elección y manteniendo una consistencia.

Además, Bootstrap ofrece herramientas para que tu sitio sea responsive, y por lo tanto la disposición de los elementos en la página se adapten según el dispositivo en el que se vean. Por ello, si usamos una plantilla de Power Pages, o creamos las nuestras propias siguiendo los principios de Bootstrap, conseguiremos que nuestro sitio web sea responsive.

Personaliza tu sitio web fácilmente

Power Pages te permite customizar tu sitio tanto como desees. Pero hay varios elementos que con total seguridad deberás personalizar en tu sitio, incluso si decides utilizar una plantilla:

• Encabezado del sitio: Desde el propio estudio de diseño, al ponerte sobre la cabecera te dará la opción de editarla. Podrás modificar si lo deseas el Título del sitio, su logotipo y texto alternativo (el cual es importante incluir para mejorar la accesibilidad de la página). Además podrás modificar algunos estilos como el color de fondo de la cabecera eligiendo uno de los colores del tema, los estilos del título de la página o los de la navegación.

Como ya hemos comentado previamente, es importante mantener una consistencia en el sitio, por ello no debemos seleccionar muchos tipos y tamaños de fuentes.

• Footer: Del mismo modo, al posicionarte sobre el footer en el estudio de diseño, te permitirá modificar el color de fondo del footer, nuevamente seleccionando uno de los colores del tema seleccionado.

• Favicon: Este es el icono que aparece en la pestaña del navegador y, aunque no es tan intuitiva la manera de cambiarlo, es algo que debemos hacer ya que aporta ese grado de profesionalidad que queremos en nuestro sitio. Deberemos añadirlo como un archivo web desde la Administración de Power Pages.

• Páginas y navegación: Es muy sencillo crear páginas y añadir las que queramos en el menú principal desde el propio estudio de diseño, en la sección de páginas.

• Contenido y Layout de página: Aunque las plantillas te vendrán con un contenido precargado, deberás editarlo para añadir el tuyo. Es muy fácil e intuitivo hacerlo desde el estudio de diseño. Puedes añadir nuevas secciones en una página o editar las ya existentes decidiendo su distribución (1 o varias columnas) y qué elementos incluirá. Power Pages ofrece los siguientes tipos de contenido por defecto:

Customiza y extiende Power Pages añadiendo tus hojas de estilos y  plantillas

Si tienes conocimientos de CSS y HTML las posibilidades en Microsoft Power Pages son infinitas. Por un lado, te permite subir tus propias hojas de estilos para aplicar o modificar los estilos que trae por defecto el tema. Deberás tener en cuenta que si no lo modificas, tus hojas de estilo serán menos prioritarias que las que trae Power Pages de serie, las cuales recomiendan no eliminar.

Además, tanto si has elegido empezar desde cero o con una plantilla, puedes modificar cualquier plantilla de página, o crear fragmentos de código y mostrarlos en las páginas que desees, ya que todos ellos se basan en HTML y Liquid, un lenguaje de plantilla muy sencillo para que el contenido sea dinámico.

Todo ello podrás hacerlo desde el portal de administración de Power Pages como desde la herramienta de Visual Studio Code para la web incrustada en Power Pages que te facilita y agiliza la edición de código de una manera sencilla.

Existe también la opción de crear tus propios componentes de código para poder incrustarlos y usarlos posteriormente en tus portales del mismo modo que haces para una aplicación basada en modelo de Microsoft.

En resumen, Power Pages nos ofrece múltiples opciones, desde optar por una plantilla ya definida y configurar algunos elementos básicos, hasta crear nuestras propias plantillas o componentes desde cero. Ello dependerá de nuestros conocimientos de desarrollo y el tiempo disponible. Pero sin duda, no hay límites en Power Pages para ofrecer un gran diseño a nuestros usuarios.

Si quieres que te ayudemos a implementar tu sitio web seguro o necesitas una formación práctica con nuestro workshop online de Power Pages para hacerlo tú mismo, contacta con nosotros.