Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Tabs o Widget de Pestañas

Encuentro sumamente util este Widget pues nos permite incluir mucha información relacionada en un mismo lugar, facilitando así al usuario el encontrar lo que busca. Diseñando la Página Web de Charlies Academy me encontré con el dilema de mostrar la Visión, Misión y Mensaje del Presidente de la Academia de modo que estuviera al alcance del usuario. Siempre aclaro al cliente que hago las Páginas no para que le gusten a ellos sino para facilitar su uso al usuario -y valga la redundancia.

Laboratorio San Sebastian
La Casa del Bordado
Anunciate Ahora 360
Funeraria Rios Caldas
Tomassini Dental Laboratory
Moto Theme
Comercio Local
On Stage
Colon Pratts 360

Aunque el rediseño de la Página no se ha subido aún comparto con ustedes como utilicé para ello el Widget de Pestañas -Tabs. Antes quiero aclarar qué es el Widget y sus opciones.

Para comenzar debemos crear una sección del ancho del contenido donde la vamos a usar y a esta sección debes agregar el widget Tabs que divide su contenido en pestañas.

Contenido

  1. Elementos de pestañas: cada Pestaña incluye un título y un editor de texto.
  2. Agregar Elemento o Pestaña: debes hacer clic en el botón “Agregar elemento” para agregar otra pestaña.

Estilo

Aquí puedes personalizar tus Pestañas como gustes

Estilo de pestañas

  1. Ancho del borde: controla el grosor del borde alrededor de las pestañas.
  2. Color del borde: elige un color para el borde.
  3. Color de fondo: elige un color de fondo para las pestañas.
  4. Color del título: elige el color para el título de las pestañas
  5. Color activo: elige el color para el título de la pestaña activa en el momento.
  6. Tipografía: controla la tipografía del título.

Contenido de pestañas

  1. Color del texto: elige el color del contenido.
  2. Tipografía: cambie la tipografía del contenido.

No únicamente podemos trabajar las Pestañas del modo indicado anteriormente. Este Widget nos permite también añadir otro widget dentro de él. Me imagino te preguntarás ¿cómo agregar un widget dentro del Widget Tab? Puedes insertar otro elemento en una Pestaña de esta manera:

  1. Crea el elemento que deseas insertar dentro de una Pestaña por ejemplo una Galería de Imágenes o un Portafolio, y guárdalo como un Widget Global.
  2. Ve a la Biblioteca de Plantillas y copia el código del widget correspondiente.
  3. Ve a la Pestaña donde quieres insertar el elemento creado.
  4. En el área de texto de la Pestaña, inserta el código.

Vayamos a nuestro ejemlo del que hablé al principio. Para comenzar creamos una sección.

 

Ahora dentro de la sección creada añadimos el Widget de Pestañas y le editamos conforme a nuestra necesidad.

Añadir Widget de Pestañas

Como puedes ver abajo, nuestras Pestañas fueron personalizadas conforme a nuestra necesidad, sin embargo encontramos que el Estilo predeterminado del alineamiento a la izquierda no nos resultaba para la idea que teníamos de esta sección. Así que decidimos ir un poco más allá en la personalización y centralizar las Pestañas y su contenido. Encontramos que el Widget no nos ofrecía esta alternativa por lo que optamos en hacerlo con un poco de CSS. Para ello seleccionamos la Sección, fuimos a Avanzado y allí buscamos Clases CSS y creamos nuestra clase «tabs»

Un poco de CSS

Has decidido dar el primer paso para iniciar los estudios de una carrera corta y práctica. Nuestra Visión es prepararte el mejor de los caminos para que obtengas una mejor preparación técnico-vocacional entendiendo que la educación es la base para el desarrollo de hombres y mujeres útiles y productivos en la sociedad.

Nuestro compromiso trasciende el deber de ofrecerte adiestramiento en un área específica del saber.  Está basado en prepararte para ocupar un lugar esencialmente adecuado en la comunidad.  Te ofrece la satisfacción de aprender y te brinda las herramientas necesarias que forjarán tu futuro para que puedas funcionar con éxito. 

Manteniendo una interacción entre compañeros, maestros y empleados de manera adecuada te proveeremos las herramientas para que puedas integrarte al mundo de los estudios, manteniendo en alto la honestidad, la integridad y poniendo en práctica al máximo el esfuerzo para triunfar, eres un ser importante, útil a ti mismo y a los demás.

En la misma ventana de Avanzado y debajo de Responsive o Adaptable encontramos Custom CSS o CSS Personalizado. Ahí escribimos el siguiente código:

.tabs .elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title {display: inline-block;}
.tabs .elementor-widget-tabs .elementor-tabs {text-align: center;}

Si ves ahora abajo observarás que nuetra Sección con las Pestañas ha cambiado la alineación y que alineadas al Centro se ven mucho más elegantes.

Tabs Centralizados

Si te gustó este Tutorial suscríbete y recibirás en tu correo una notificación cada vez que publiquemos uno nuevo.

Deja un comentario