Saltar al contenido

Crear un sitio de Portal Freedom

Puede crear sitios de estilo libre de portales intuitivos y fáciles de usar agregando páginas y aplicaciones al diseño y apariencia del sitio. Edite el contenido predeterminado con el suyo y, cuando todo esté en su lugar, publique el sitio para que todo el contenido esté disponible para sus usuarios finales.


Paso 1: Acceda al espacio de administración del portal

  1. Desde SAP Cloud Platform, haga clic en Servicios desde el panel izquierdo para abrir los servicios disponibles para su subcuenta.

  2. Desde el Categorías lista desplegable, seleccione Experiencia de usuario ver los servicios relacionados con UX.

  3. Clickea en el Umbral mosaico para abrir la página de descripción general del servicio.

  4. Sa Portal – Descripción general página, haga clic en Ir al servicio para abrir el Portal.

    El espacio de administración del portal se abre en un nuevo navegador y está listo para comenzar a crear su sitio de estilo libre.

  5. En el panel de la izquierda, seleccione Directorio del sitio.

  6. Haga clic en el mosaico con el icono más al Crear un sitio mago.

    Crea un sitio

  7. Nombra la ubicación Supplier Portal, Selecciona el Disposición básica como plantilla para su sitio y confirme con el Crear botón.

    Elige una plantilla

    El nuevo caso de ubicación en el Diseñador de sitios se abre en una nueva pestaña del navegador.

Hecho

Inicie sesión para responder la pregunta

Paso 2: diseña tu primera página del portal

El sitio que creó se basa en el Disposición básica plantilla de sitio. Esta plantilla tiene cuatro páginas basadas en el Envío de ancla, Encabezado Encabezado, Página de inicio, y Encabezado alto plantillas de página. En este paso harás el Encabezado Encabezado página y agregar contenido.

  1. Selecciona el Encabezado Encabezado página.

    Seleccionar página de encabezado y pie de página

  2. Seleccione la crema Encabezamiento parte de la página y haga clic en el signo + para abrir la galería de widgets.

    Agregar un widget

  3. Desplácese hasta el Widgets de contenido web: carrusel sección y seleccione la Carrusel de titulares widget.

    Widget de carrusel

  4. Haga clic en el widget para revelar el menú del widget y haga clic en el icono de lápiz para editar el contenido del widget.

    Contenido editado

  5. Seleccione uno de los elementos de contenido del carrusel y haga clic en el icono menos en la parte inferior para eliminarlo.

    Eliminar elemento de asunto

    Ahora le quedan 2 elementos de contenido.

  6. Haga clic en el primer elemento de contenido y haga lo siguiente:

    GortValor
    ImagenHacer clic Sustituir para eliminar la imagen predeterminada y seleccione SupplierPortaHeader1.jpg (disponible en nuestros recursos).
    TítuloBienvenidos a Velotics
    SujetoSu camino para convertirse en una cadena de suministro acelerada

    Contenido del primer carrusel del artículo

  7. Elija el segundo elemento del tema y haga lo siguiente:

    GortValor
    ImagenHacer clic Sustituir para eliminar la imagen predeterminada y seleccione SupplierPortaHeader2.jpg (disponible en nuestros recursos)
    TítuloHacemos negocios inteligentes
    SujetoÚnase a nuestra agenda de negocios inteligente hoy y aumente el volumen de sus entregas.
  8. Salvar sus cambios.

    Elemento Elemento Carrusel

  9. Ahora seleccione la parte central de la página y haga clic en el + icono para agregar un widget.

  10. Agregue los siguientes widgets a la sección central:

    • Desde el Widgets de contenido web: tarjetas área: seleccione el Tarjeta adjunta widget.
    • Desde el Widgets de contenido web: básico área: seleccione el Video widget.
    • Desde el Widgets de contenido web: básico área: seleccione el Encabezado con texto widget.
    • Desde el Widgets de contenido web: lista área: seleccione el Lista de diseños widget.
  11. Selecciona el Tarjeta adjunta widget y haga clic en el icono de lápiz.

    Tarjeta adjunta

  12. Edítelo de la siguiente manera:

    Primer elemento del tema:

    GortValor
    TítuloÓrdenes aprobadas
    Iconosap-icon://Fiori2/F0003
    TextoHaga clic aquí para ver los pedidos que aún no se han entregado

    Segundo tema:

    GortValor
    TítuloHistorial de transacciones
    TextoVer el historial interactivo de transacciones recientes con las que ha trabajado

    Tercer tema:

    GortValor
    TítuloMis próximos pagos
    Iconosap-icon://Fiori2/F0028
    TextoHaga clic aquí para ver sus próximos pagos esperados

    Cuarto artículo:

    GortValor
    TítuloSolicite una oferta
    Iconosap-icon://Fiori7/F0840
    TextoVea la lista actual de solicitudes de propuestas y escriba su solicitud
  13. Salvar sus cambios. Así es como se ve su widget de Tarjeta adjunta:

    Ver tarjeta adjunta

Hecho

Inicie sesión para responder la pregunta

Paso 3: Defina el diseño de la página

  1. Seleccione de nuevo la parte del medio y haga clic en el Editar la configuración de la sección icono.

    Editar sección

  2. Sa Diseño pestaña, seleccione la Personalizado composición.

  3. Desplácese hacia abajo para ver todos los widgets en esta sección. En la vista de escritorio y tableta:

    • Escoger Todos para permitir el Tarjetas adjuntas widget para cruzar la sección de la página.
    • Mostrar la Video widget en la mitad de la pantalla.
    • Mostrar la Encabezado con texto widget en la mitad de la pantalla.
    • Finalmente establezca el Lista de diseños widget para Todos.
  4. En la perspectiva móvil, el valor es Todos para cada widget.

  5. Si el orden de los widgets no aparece como se describe, arrástrelos y suéltelos en el orden requerido.

    Editar la configuración de la sección

  6. Clickea en el Dimensiones pestaña e introduzca los siguientes valores:

    GortValor
    Estoy enfermo50 pixel
    Ancho del tema1024 pixel
  7. Salvar sus arreglos.

  8. Haga clic en la flecha junto a la página ** Encabezado y pie de página y seleccione Establecer como página de inicio.

    Establecer como página de inicio

La estructura de la página ya está lista. Asegúrese de que tenga este aspecto:

Diseño de página final

Hecho

Inicie sesión para responder la pregunta

Paso 4: agrega otra página nueva con contenido

  1. En la parte inferior de la Paginas panel de la izquierda, haga clic en el signo + para agregar una nueva página.

    Agregar una página

  2. Sa Crear una pagina asistente, entrada Contact Us como el nombre de la página.

  3. Selecciona el Página de inicio plantilla y luego haga clic en Finalizar.

    Seleccionar plantilla

  4. Sobre el Contact Us página, haga clic en la sección de la página y haga clic en el signo + para abrir la galería de widgets.

    Abrir galería de widgets

  5. Desde el Widgets de contenido web: básico área: seleccione el Encabezado medio widget.

  6. Vuelva a hacer clic en la sección de la página y haga clic en el signo + para volver a abrir la galería de widgets.

  7. Desde el Widgets de contenido web: tarjetas área: seleccione el Tarjeta de historia circular widget.

  8. Ahora seleccione el Encabezado medio widget que acaba de agregar y haga clic en el icono de lápiz para editar el contenido del widget.

  9. Pegue el siguiente texto en el Título área: Below you can find contact details of key position holders at Velotics. We will be happy to assist with any issue.

  10. Salvar sus cambios.

  11. Clickea en el Tarjeta de historia circular widget y seleccione el icono de lápiz para editar su contenido.

  12. Ingrese el siguiente contenido:

    GortValor
    TítuloJohn Doe
    TextoGerente de Asociación de Proveedores
    Enlace: Mostrar textoContáctame
  13. Haga clic en el segundo elemento de Contenido de la tarjeta e ingrese el siguiente contenido en cada uno de los elementos de contenido:

    GortValor
    TítuloSam Lynn
    TextoAsociación de vicepresidente
    Enlace: Mostrar textoContáctame
  14. Del mismo modo, seleccione el tercer elemento de material de la tarjeta y pegue el siguiente material:

    GortValor
    TítuloCarly Nelson
    TextoAsociación de vicepresidente
    Enlace: Mostrar textoContáctame
  15. Salvar sus arreglos.

Hecho

Inicie sesión para responder la pregunta

Paso 5: edita el menú de configuración

  1. Sa Paginas seleccione el panel de flechas junto al Encabezado Encabezado página y seleccione Agregar al menú.

    Agregar al menú

    El Editor de menús se abre con el Estructura pestaña en foco.

  2. Repasar el Envío de ancla en una fila y haga clic en el Borrar icono para eliminarlo del menú. Confirme la ventana emergente y elimine la entrada.

    Eliminar elemento de menú

  3. Del mismo modo, elimine todas las demás páginas del menú del sitio, excepto el Encabezado Encabezado página.

  4. Repasar el Encabezado Encabezado fila y cámbiele el nombre a Hogar haciendo clic en el icono de edición en el Encabezado Encabezado en una fila y cambiando el Nombre para mostrar.

    Cambiar el nombre para mostrar

  5. Repasar el Hogar ingrese a un menú y haga clic en el ícono + y seleccione Añadir artículo.

    Agregar un elemento de menú

  6. Mas o menos Llámanos como el Nombre para mostrar y seleccione el Llámanos página de la lista de páginas mostradas.

  7. Hacer clic Agregar.

    Agregar un nuevo elemento de menú

  8. Salvar el menú cambia.

Hecho

Inicie sesión para responder la pregunta

Paso 6: previsualizar y publicar el sitio

  1. Haga clic en el icono de vista previa del sitio para abrir la vista previa de la página en una nueva pestaña.

    Avance

  2. Revise su sitio.

  3. Cierra la vista previa.

  4. Haga clic en el icono de publicación para publicar la última versión del sitio para que esté disponible para sus usuarios finales.

    Publicación

  5. Hacer clic Publicar y abrir. Esto es lo que verá:

    Nuestro nuevo sitio de estilo libre

¡Felicidades! Ha creado un sitio de estilo libre en el Portal.

En el siguiente tutorial, editará el contenido web de este sitio en una herramienta llamada Web Content Editor.