Añadir widgets de Editor de texto al diseño de página de destino

En esta lección, va a añadir dos widgets de Editor de texto para crear banners publicitarios en la parte superior del diseño. En el widget de Editor de texto, puede añadir código HTML que muestre el texto como el banner publicitario.

Por qué y cuándo se efectúa esta tarea

La siguiente captura de pantalla muestra los dos widgets de Editor de texto que forman los banners publicitarios Envío gratis y Gafas de sol de marca en el diseño:


Widgets de Editor de texto

Para obtener más información sobre el widget de Editor de texto, lea el tema siguiente:

Procedimiento

  1. En la herramienta Commerce Composer, asegúrese de que se encuentra en la pestaña Disposición del diseño.
  2. En el mapa esquemático, pulse la ranura 2.
  3. En el campo Filtrar por, escriba Texto.
  4. Pulse Widget de Editor de texto y luego pulse Aceptar.
    Se crea el widget y el editor se visualiza bajo sus propiedades.
  5. Intro
    En el editor, puede trabajar en modalidad de editor o en modalidad de fuente:
    • En la modalidad de editor, puede editar contenido con las características de la barra de herramientas y ver los cambios a medida que los realiza.
    • En la modalidad de fuente HTML, puede escribir o pegar código HTML. El código puede contener estilos en línea que definan el color de fondo, el estilo y color del font y la alineación de texto. El contenido puede tener un aspecto diferente en el escaparate que en el editor. La diferencia es que la tienda puede utilizar hojas de estilo (archivos CSS) que potencialmente pueden alterar temporalmente el estilo base que utiliza el editor. Aunque el editor proporciona una visualización WYSIWYG, es importante utilizar la vista previa de la tienda para comprobar la visualización del contenido HTML.
  6. Escriba Envío gratis todo el mes. Utilice las características de edición de la barra de herramientas para dar formato y color al texto.
    O también puede tomar un atajo y pegar el HTML en el editor:
    1. Pulse Fuente.
    2. Pegue el siguiente código HTML en el editor: 
      <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#ff0000;font-size:15px;text-align:center;">
	<b>Free Shipping</b> All This Month!</div>
    3. Vuelva a pulsar Fuente.
      El editor muestra una versión WYSIWYG del contenido del widget:
      Ejemplo de widget de Editor de texto
  7. Pulse Aceptar.
  8. En el mapa esquemático, pulse la ranura 3.
  9. En el campo Filtrar por, escriba Texto.
  10. Pulse Widget de Editor de texto y luego pulse Aceptar.
    Se crea el widget y el editor se visualiza bajo sus propiedades.
  11. Pulse Fuente.
  12. Pegue el siguiente código HTML en el editor: 
    <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#003366;font-size:15px;text-align:center;">
	<b>Designer Sunglasses</b> 50% Off</div>
  13. Vuelva a pulsar Fuente.
    El editor muestra una versión WYSIWYG del contenido del widget:
    Ejemplo 2 de widget de Editor de texto
  14. Pulse Aceptar.
  15. Pulse Guardar y Vista previa.

    El diseño contiene ahora tres widgets, tal como se muestra a continuación:


    Resultado del widget de Editor de texto

Resultados

En esta lección ha añadido dos widgets de Editor de texto para mostrar banners publicitarios en el diseño. En la próxima lección añadirá un widget de Recomendación de contenido que muestra el anuncio principal para el diseño.