Personalizar diseños de página en Power Pages

  • Artículo

Cuando cree una nueva página web con el estudio de diseño, debe seleccionar un diseño de página. El espacio de trabajo Páginas proporciona un conjunto de diseños de página preconfigurados.

Selección del diseño de página.

También puede crear sus propios diseños de página personalizados usando HTML, Liquid, JavaScript y CSS.

Propina

Hemos creado una serie de tutoriales y videos para que aprenda a usar Power Pages y cómo crear un diseño de página personalizado. Para obtener más información, consulte Tutorial: Agregar una diseño de página personalizado.

Crear un diseño de página personalizado

Para crear una página personalizada, tendrá que seguir estos pasos:

  • Cree una plantilla web con su código personalizado.
  • Cree y configure una plantilla de página correspondiente que aparecerá como un diseño de página personalizado al crear nuevas páginas web en el espacio de trabajo Páginas.

Crear una plantilla web

La plantilla web contendrá su código para su diseño. El código de plantilla web puede ser una combinación de Liquid, HTML, CSS y JavaScript.

Las plantillas web pueden incluirse en otro contenido o combinarse con otras plantillas para crear un sistema modular de plantillas al crear aplicaciones web.

  1. Vaya a Power Pages.

  2. En el estudio de diseño, elija ... y luego seleccione Gestión de portales. Deberá usar la aplicación Administración del portal para crear un registro de plantilla web y especificará su código personalizado.

    Al seleccionar la elipse, se le dirige a un menú donde puede elegir la aplicación de administración del portal.

  3. En la Aplicación de gestión de portales, desplácese hasta la sección Contenido y seleccione Plantillas web.

  4. En la pantalla Plantillas web activas, seleccione Nuevo.

    La opción de menú + Nuevo de la página Plantillas web activas en la aplicación Administración del portal.

  5. Rellene los campos.

    Campo valor
    Name Escriba un nombre.
    Sitio web Seleccione el sitio web al que se aplicará el tema. Coloque el cursor en el campo y presione Intro en su teclado para mostrar una lista de opciones disponibles.
    Source El contenido del código fuente de su plantilla web, el código suele ser una combinación de Liquid, HTML, CSS y JavaScript. Creará el código según sus requisitos.
    Tipo MIME (Desplácese hacia abajo para ver este campo.) El campo proporciona opcionalmente un tipo MIME para el contenido de la plantilla. Se asume un tipo de texto/html si no se proporciona ninguno. Esta valor se usará solo en casos en que la plantilla esté asociada a una plantilla de página, y controla la representación de todo el contenido de esa plantilla.

    Campos rellenables para nuevos archivos web.

  6. Seleccione Guardar.

Crear una plantilla de página

Las plantillas web se pueden usar con plantillas de página para crear diseños de página personalizados que se usarán al crear nuevas páginas web en el estudio de diseño.

  1. En la aplicación Administración del portal, desplácese hasta la sección Sitio web y seleccione Plantillas de página.

  2. En la pantalla Plantillas de página activas, seleccione Nuevo.

    La opción de menú + Nuevo de la página Plantillas de página activas de la aplicación Administración del portal.

  3. Rellene los campos.

    Campo valor
    Name Escriba un nombre.
    Sitio web Seleccione el sitio web al que se aplicará el tema. Coloque el cursor en el campo y presione Intro en su teclado para mostrar una lista de opciones disponibles.
    Type Elija Plantilla web.
    Plantilla web Seleccione la plantilla web donde se encuentra su código personalizado. Coloque el cursor en el campo y presione Intro en su teclado para mostrar una lista de opciones disponibles.
    Usar encabezado y el pie de página del sitio web Si la configuración está activada, su plantilla web controlará la representación de todo el contenido de página entre el encabezado y pie de página del sitio web global. Si se desactiva esta opción, la plantilla web será el responsable de representar la respuesta completa ߝ en caso de que esté representando HTML, lo que implica todo desde el doctype hasta las etiquetas <html> raíz, y todo lo que hay en medio.
    Es la predeterminada Desactivado.
    Nombre de tabla Nada seleccionado.
    Description Descripción de su plantilla de página.

    Plantilla de página basada en una plantilla web.

  4. Seleccione Guardar.

Si bien los casos de uso más comunes para plantillas web serán representar HTML, la representación de la respuesta completa (desactivando Usar encabezado y el pie de página del sitio web) le ofrece la opción de representar cualquier formato basado en texto que elija. Aquí es donde el atributo Tipo MIME de la plantilla web pasa a ser relevante. Si una plantilla de página que no usa el encabezado y el pie de página del sitio web, el encabezado de tipo de contenido de la respuesta HTTP se establecerá en el tipo MIME de la plantilla web asociada (se usará texto/html si no se proporciona ningún tipo MIME), proporcionando una amplia variedad de opciones para representar contenido que no sea HTML mediante Liquid. Un caso de uso común sería representar una fuente RSS estableciendo un tipo MIME de application/rss+xml.

Crear una página web usando una plantilla personalizada

  1. En el estudio de diseño, en el espacio de trabajo Páginas, seleccione + Página.

  2. En el cuadro de diálogo Agregar una página.

    1. Escriba un Nombre de página
    2. En Diseños personalizados, seleccione su diseño de página personalizado.
    3. Seleccione Agregar.

    Seleccione un diseño personalizado al crear una nueva página web.

  3. Elija Vista previa para ver su página personalizada en el sitio.

Consulte también