--- title: "How to add and customize a Tabs section" description: "Learn how to add and customize a Tabs section in LandingRabbit, choose layouts and styles, add content, and set tabs to auto-advance." url: "https://landingrabbit.com/documentation/add-and-customize-tabs-section" lang: "en" --- # How to add and customize a Tabs section ![An example of a Tabs section with a pill style tab bar](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/3cbcb76235d2fbae4866cff1c14643f976cfc626--960w.webp) The Tabs section lets you show different content to different audiences without taking up too much space on the page. Visitors click a tab and see content relevant to them. It comes with three layouts and four pre-made style options per layout. ## How to add a Tabs section In the page editor, click the + button to add a new section and choose Tabs. ![Add Tabs section to your page](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/5ef6b8da51505d7fd5dbec09cecaf7dbb9c2fe17--960w.webp) You can also click the Ask AI button in the page editor and describe what you want. ![LandingRabbit page editor and the 'Ask AI' button](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/eda1cec15cc59ccd5675b6208398bbe71141bbdc--960w.webp) Or add a Tabs section by editing your page via [Claude](https://landingrabbit.com/landingrabbit-claude-app) or [ChatGPT](https://landingrabbit.com/landingrabbit-chatgpt-app). ## What content can you add to a Tabs section ![Tabs section content editor for the section header, tabs, and cards](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/b7369e3c43822c8650c1ec9e0c86d7d71d498144--960w.webp) The Tabs section is built from three parts: * **Section header**: eyebrow, title, description, and CTA buttons * **Tab**: eyebrow, tab title, text, and CTA buttons * **Card**: image, video, or embed, plus card title, text, and CTA buttons For each tab, you can also choose what content shows when the tab is inactive. ## How to change the layout Hover over the page preview on the right and click the **Edit layout** button. Switch between three layouts: top, left, and right. ![Change layout options in the Tabs section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/c39abe3914ad5d5e55a0adb19f634d7a5296b7f7--960w.webp) For each layout, you can set: * **Image ratio**: free or fill * **Auto-advance**: how long between tabs changing, and whether a progress bar shows * **Side tabs**: show tab content when active only, or show all at once * **Top tabs**: show card content stacked or split ## How to edit Tabs section styles Hover over the page preview and click the **Edit styles** icon. You will see pre-made style options for the layout you have selected. ![Pre-made styles for the Tabs section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/9916bf82db082525f18744b83c0033bba4397f0d--960w.webp) You can switch between styles in the **Edit Styles** chat and try different pre-made options. You can also type a request to make specific changes, such as: * Section background colours * Section header position; center and left * Font sizes, font type, and colours * Tab colours * The position of the tabs; center and left for top tabs and side tabs * The proportional size of media and text in a sidetab card * And more ![Editing styles in LandingRabbit and Tabs section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/6b922cf6c4d5ef065f7c7bb5dee987b62569aeb4.webp) ## How to set auto-advance for Tabs ![Setting auto-advance for the LandingRabbit Tabs section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/582c6b49c840680817defc3e99b3d1c0ac7f0ef6--960w.webp) Open the **Edit layout** panel and turn on auto-advance. You can set how many seconds pass before the next tab becomes active and choose whether a progress bar appears on the tab to indicate when it will switch. ## Adding tabs to custom design sections In addition to Tabs section, you can also add tabs to any of the [custom design](https://landingrabbit.com/documentation/custom-design-in-landingrabbit) sections you are creating. ## Examples of Tabs section layouts and styles Here are examples of how the Tabs section looks with the pre-made layouts of a colourful brand. ![Tabs section example with pills on top](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/3ea32889eefba56337650b98ebb7fceca7e35138--960w.webp) ![Tabs section example with pills on top 2](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/3b6aba4e35585e1384db829972377148ba9cf562--960w.webp) ![Tabs section example with pills on top 3](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/ad058472b50ecb3dfc3dceb94369a1a0c7fbbbb5--960w.webp) ![Tabs section example with pills on top 4](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/5a05d4bddc544ab2e5a78132f8b15299625d3ac7--960w.webp) ![Tabs section example with pills on top 5](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/92dbc894b5abe21b856a088dee1c422e2900f90e--960w.webp) ![Tabs section example with pills on top 6](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/bc8e7de95b661b10bae42d7035561852e9b146bf--960w.webp)