Scrollable tabs

Added by saa
March 1, 2023

Create a scrollable tab with Elementor Pro. Its main function is to allow scrolling from Inner Section to Inner Section.

Like the reference in Team Personas section: https://www.copy.ai/teams

Explain

We won’t use any tab elements to represent this. Instead, we’ll use the Navigation Menu element and anchor links (#tab1, #tab2 …) as the tab titles. Then, we’ll use multiple sections that have the same ID as the anchor links (so when you click on the menu items, scroll to those sections).

Create Tabs Menus > Appearance -> Menus and create a new menu. Added custom link items use to anchor links
Insert a new Section
In the left column add the Nav menu widget > Layout -> Vertical > Breakpoint -> None
Advanced > Motion Effects > Sticky -> Top > Sticky on Desktop & Tablet
Enabled > Stay In Column
Add some Inner Section elements to right column > We need to assign an ID to the menu anchors in order to make them scrollable when clicked.

Added some typography settings and color changes to the navigation menu in order to make the scrollable tab more eye-catching.

Example page: https://gcsocala.kinsta.cloud/get-involved/

This is the heading

É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui"