Skip to content
C9 WordPress Plugins + Themes
Search
  • C9 Starter Theme
    • Theme Overview
    • dropdown-divider
    • View All 50+ Templates
    • Block Pattern: Style Guide
    • Block Pattern: Events Schedule
    • Block Pattern: Podcast Episode
    • Block Pattern: Artist Linktree
    • Block Pattern: 450 Word Article
    • WooCommerce Shop
    • Posts Page
    • Post Header Large Photo
    • Post With Photo Gallery
    • Post Comments
    • 404 Error
    • Search Results
  • C9 Blocks
    • Installing C9 Blocks
    • C9 Blocks Style Guide
    • C9 Blocks Plugin Overview
    • C9 Blocks Animation Plugin
    • Development Guide
  • C9 Admin Dashboard
  • Docs
    • Setup Guide
    • Building Landing Pages From Scratch
    • Building Landing Pages From Templates
    • Using Reusable Block Layouts
    • Customizing C9 Starter Theme
  • Search

C9 Vertical Tabs

 Overview

The vertical tabs use the Bootstrap Navs to make vertically stacked buttons to cycle through. Tab colors and content alignments may be customized with toolbar buttons and inspector settings.

Vertical Tabs

Vertical Tab Settings

Vertical tabs are a great way to stack content in a tight space for information that has a clear hierarchy and necessity for that design pattern. Tabs are designed with minimal CSS so they can be customized with a custom theme or child theme.

Tabs Align

Align the tab button text to the left right or center. This can also be changed on the toolbar when clicking on the vertical tabs block in the blocks editor.

Block Color Settings

Background Color

Background color for the entire tabs block.

Tab Color Settings

Background Color

Background color for the vertical tab buttons

Text Color

Color for the text within the vertical tab buttons

Tab Content Color Settings

Background Color

Background color for the tab content area next to the tab buttons

Advanced

Additional CSS Class

Add a custom CSS class for additional styling or customization.

Documentation

  • C9 Starter Theme Sample Content
  • C9 Blocks Plugin Installation
  • C9 Blocks Development
  • Creating Landing Pages from Reusable Blocks
  • Creating Landing Pages from Block Templates
  • Building from Scratch with C9 Grid Blocks

Get Help

  • Documentation
  • Community Forum
  • C9 Admin Dashboard Plugin
  • C9 Blocks Plugin
  • C9 Starter Theme

Follow Us

  • Company
  • LinkedIn
  • Facebook
  • Instagram
  • Twitter
TwitterInstagramYouTubeGitHub

© 2024 C9. WordPress website design by COVERT NINE

Search for: