Después de
agregar pestañas a tu página, administra cada pestaña individualmente y organiza su contenido. Cambia el orden de las pestañas como desees y personaliza el estilo y el diseño para que se adapte al tema de tu sitio.
En este artículo, aprenderás a hacer lo siguiente:
Administrar las pestañas
Administra las pestañas para establecer el orden, la ubicación y el nombre de los elementos. También puedes agregar, duplicar y eliminar elementos según sea necesario para mantener el contenido actualizado.
Para administrar las pestañas:
- Haz clic en el elemento de pestañas en el Editor.
- Haz clic en Administrar pestañas.
- Selecciona cómo quieres administrar las pestañas:
Agregar una nueva pestaña
Agrega nuevas pestañas para dividir, organizar y crear tu contenido.
Para agregar una nueva pestaña, haz clic en Agregar nueva pestaña en la parte inferior del panel.
Cambiar el nombre de las pestañas
Cambia los nombres de las pestañas para que coincidan con el contenido en cada una de ellas.
Para cambiar el nombre de una pestaña:
- Pasa el cursor sobre el elemento correspondiente en el panel.
- Haz clic en el icono Más acciones .
- Haz clic en Renombrar.
- Ingresa el nuevo nombre en el campo.
- Haz clic en Hecho.
Duplica una pestaña para copiar su diseño y contenido. Esta es una excelente manera de crear varios ítems similares, ya que todos los elementos se transfieren.
Para duplicar una pestaña:
- Selecciona la pestaña correspondiente en el panel.
- Haz clic en Duplicar pestaña en la parte inferior del panel.
Cambiar el orden de las pestañas
Reorganiza el orden de las pestañas en el menú superior. Puedes elegir mostrarlos como quieras, como por orden alfabético o por orden de importancia.
Para cambiar el orden de las pestañas, simplemente haz clic en los elementos y arrástralos en el orden que desees.
Establecer un ítem por defecto
Establece la pestaña que se muestra automáticamente cuando un visitante abre la página que contiene el elemento de pestañas.
Para configurar un ítem predeterminado:
- Pasa el cursor sobre el elemento correspondiente en el panel.
- Haz clic en el icono Más acciones .
- Haz clic en Establecer por defecto.
Si ya no necesitas una pestaña, puedes eliminarla en cualquier momento.
Para eliminar una pestaña:
- Pasa el cursor sobre el elemento correspondiente en el panel.
- Haz clic en el icono Más acciones .
- Haz clic en Eliminar.
Cambiar el diseño de una pestaña
Ajusta el diseño de las pestañas para establecer el espaciado, la alineación y más. Usa los ajustes para que se adapte a la estructura de tu página y crea un diseño claro para tus visitantes.
Para personalizar el diseño:
- Haz clic en el elemento de pestañas en el Editor.
- Haz clic en el icono de Estilo .
- Elige cómo quieres ajustar el estilo de la pestaña:
- Menú de pestañas: elige cuánto deseas que se estire el menú de pestañas:
- Justificado: el menú no se ajusta al ancho de la caja. Luego, puedes elegir si deseas alinear los elementos del menú a la izquierda, al centro o a la derecha del cuadro.
- Estirado: el menú se ajusta al ancho de todo el cuadro. Puedes alinear el contenido del menú a la izquierda, al centro o a la derecha del cuadro.
- Espaciado entre pestañas: haz que el espacio entre los elementos de las pestañas sea más grande o más pequeño.
- Espaciado entre pestañas y caja: haz que el espacio entre el menú y los cuadros de contenido sea más grande o más pequeño.
- Relleno horizontal: ajusta el relleno a la izquierda y a la derecha de los elementos del menú.
- Relleno vertical: ajusta el relleno en la parte superior e inferior de los elementos.
- Visualización de pestañas extensas: selecciona cómo mostrar los elementos que no caben en el menú superior:
- Desplazar: los visitantes pueden desplazarse por el menú para ver todos los elementos.
- Ajustar: se agrega otra línea para que quepan todos los elementos. Luego, puedes usar el control deslizante para hacer que el espacio entre las filas sea más grande o más pequeño.
- Mostrar pestañas de: muestra los elementos en el menú superior de izquierda a derecha o viceversa.
Personalizar el diseño de las pestañas
Ajusta el aspecto de las pestañas para crear una forma personal y llamativa de mostrar el contenido. Puedes personalizar diferentes partes del elemento por separado y elegir ajustes como el color, los bordes y más.
Para diseñar las pestañas:
- Haz clic en el elemento de pestañas en el Editor.
- Haz clic en el icono Diseño .
- Selecciona una opción en ¿Qué quieres diseñar? y personalízalo con las opciones disponibles:
Personaliza los colores, el diseño y más del menú de pestañas para que se vea como quieras.
Selecciona Menú de pestañas en el menú desplegable y ajústalo con las siguientes opciones:
- Rellenos de fondo : Elige un fondo de menú que se adapte a tu página y ajusta su visibilidad. Puedes agregar varias capas y diseñar cada una por separado para crear fondos únicos y llamativos.
- Bordes : agrega bordes al fondo del menú para crear un contraste con la página de tu sitio. Elige un diseño y un color, y establece el ancho para que sea tan grande o pequeño como necesites.
- Esquinas : elige cómo quieres que se vean las esquinas del menú. Puedes ajustar cada esquina de forma diferente y hacerlas más redondas o más cuadradas.
- Sombreado : agrega sombras al fondo del menú para obtener un efecto 3D genial. Puedes establecer el tamaño, la visibilidad, el ángulo y más, para darle más impacto.
- Estilo : ajusta el relleno alrededor del menú de pestañas para hacerlo más grande o más pequeño. Puedes habilitar o deshabilitar el icono de candado para ajustar cada lado por separado o hacerlos coincidir.
Personaliza los elementos del menú de pestañas (las pestañas). Puedes ajustar el diseño por separado para cada estado; Normal, Efecto cursor y Seleccionado.
- Selecciona Pestañas en el menú desplegable.
- Haz clic en un estado.
- Elige cómo quieres personalizar los elementos de la pestaña para ese estado:
- Rellenos de fondo : Elige el color del fondo del elemento para que se adapte a tu página y menú, y ajusta su visibilidad. Puedes agregar varias capas y diseñar cada una por separado para crear fondos únicos y llamativos.
- Texto : personaliza el texto del elemento con opciones como fuente, tamaño y espaciado. También puedes agregar formato como negrita y cursiva, y elegir el color.
- Bordes : agrega bordes a los elementos del menú para que se destaquen. Elige un diseño y un color, y establece el ancho para que sea tan grande o pequeño como necesites.
- Esquinas : elige cómo quieres que se vean las esquinas de tus elementos. Puedes ajustar cada esquina de forma diferente y hacerlas más redondas o más cuadradas.
- Sombreado : agrega sombras a los ítems para obtener un efecto 3D genial. Puedes establecer el tamaño, la visibilidad, el ángulo y más.
Consejo: haz clic en el icono Aplica diseño a otros estados
para dar a los ítems el mismo aspecto para todos los estados.
Edita el diseño de la caja contenedora de las pestañas para que se vea exactamente como quieres. Puedes agregar fondos de imagen, crear un efecto 3D con sombras y más.
Haz clic en Caja en el menú desplegable y elige cómo quieres personalizarla:
- Rellenos de fondo : Elige un fondo para la caja contenedora y ajusta la opacidad para que sea más o menos visible. Puedes agregar varias capas y diseñar cada una por separado para crear fondos únicos y llamativos.
- Bordes : agrega bordes a la caja contenedora para que se destaque en tu página. Elige un diseño y un color, y establece el ancho para que sea tan grande o pequeño como necesites.
- Esquinas : elige cómo quieres que se vean las esquinas de la caja contenedora. Puedes ajustar cada esquina de forma diferente y hacerlas más redondas o más cuadradas.
- Sombreado : agrega sombras a la caja contenedora para obtener un efecto 3D genial. Puedes establecer el tamaño, la visibilidad, el ángulo y más para darle más impacto.
- Estilo : coloca el relleno alrededor de la caja contenedora para hacerla más grande o más pequeña. Puedes habilitar o deshabilitar el icono de candado para ajustar cada lado por separado o hacer que todos coincidan.