Base de conocimiento

Obtén hosting web experto

Elija la fiabilidad del sitio web y el conocimiento con SiteGround!

Inicio / Website Builder / Edición de Páginas y Contenido / Cómo mostrar servicios en una página

Cómo mostrar servicios en una página

Lee y resume el articulo:
Última actualización: May 26, 2026 2 min de lectura

Estos pasos son aplicables tanto a SiteGround Website Builder como a SiteGround Ecommerce.

Cómo mostrar sus servicios con una sección de Servicios

Puedes utilizar diseños de sección cuidadosamente elaborados para mostrar tus servicios de la mejor manera posible.

  1. Haz clic en Editar sitio web en Site Admin > Website Builder.
    Edit Website button in Site Admin for accessing the Website Builder editor


  2. Abre la pestaña Páginas en la barra de herramientas del menú izquierdo.
  3. Selecciona la página donde mostrarás tus servicios.
    Pages tab in Website Builder with a selected page
  4. Elige una posición para la sección de servicios y haz clic en el botón Añadir sección dentro del editor visual de la página.
    A page in Website Builder displaying the Add Section button for adding a section
  5. En la ventana emergente, abre la categoría Servicios y selecciona un diseño adecuado con el botón Agregar sección.
    A pop-up window for adding a section with highlighted Services category and Add Section button for choosing a section layout
  6. Tras añadir la sección, puedes personalizarla de diversas maneras. Haz clic en la columna destacada y, a continuación, pulsa el icono de edición (lápiz).
  7. Aparecerá una ventana de edición de columna destacada a la derecha. Aquí puedes cambiar el color de fondo, el número de filas y columnas, el tamaño de la imagen y otros ajustes.
    Selected Showcase Column inside a section displaying editing options
  8. Continúa reemplazando el texto de marcador de posición con tu propio contenido.
  9. Para reemplazar las imágenes, haz clic en la imagen seleccionada. En la ventana emergente de la derecha, haz clic en el botón Actualizar en la vista previa de la imagen. A continuación, puedes subir una nueva imagen, seleccionar una de tu galería multimedia o usar una imagen gratuita de la galería de “Unsplash”.
    Selected Showcase Column inside a section with highlighted text and image displaying editing options

Cómo mostrar servicios con un componente de columna

Además de los diseños prediseñados, puedes usar componentes para rediseñar una sección existente o crear un diseño único para una sección en blanco. Para mostrar servicios, la opción más adecuada es usar un componente de Columnas.

  1. Haz clic en una sección existente o usa el botón Añadir sección para seleccionar un diseño de sección o crear una nueva sección en blanco.
  2. Dentro de la sección, haz clic en el botón Añadir en la esquina superior izquierda.
    Selected section in Website Builder with highlighted Add button for adding a component
  3. En la ventana emergente Añadir componente, selecciona el componente que mejor se adapte a tus necesidades. Puedes usar cualquier tipo de componente, pero para mostrar servicios, se recomienda el componente Columnas.
    Add Component menu with a selected Columns componet that you can use to showcase services
  4. Arrastra y suelta el componente en la posición que prefieras dentro de la cuadrícula de la sección.
    Section grid area on a page in Website Builder where you can drag and drop a component
  5. Haz clic en el componente para abrir la barra de herramientas y selecciona el icono Editar (lápiz).
  6. Aparecerá una ventana de edición de columnas a la derecha. Aquí puedes cambiar el número de filas y columnas, ajustar el espacio entre columnas, elegir los elementos que se mostrarán, etc.
    Selected component on a page in Website Builder displaying editing options
  7. Reemplaza el texto de ejemplo con el tuyo.
  8. Para reemplazar una de las imágenes predeterminadas, haz clic en ella. En la ventana emergente de la derecha, haz clic en Actualizar en la vista previa de la imagen. A continuación, sube una nueva imagen desde tu dispositivo, usa una de las imágenes de tu galería multimedia o selecciona una imagen gratuita de la galería “Unsplash”.
    Selected component on a page in Website Builder with highlighted image and text displaying editing options

Comparte este artículo