Build Your Own Tabs/Tours
When the ready-made Tabs/Tours styles don't match your design, build your own with the UiChemy Composer widget.
The Tabs/Tours widget comes with a few ready-made styles to choose from. When none of them fit, click the Learn More button inside the widget, then follow the steps below to build your own design with the UiChemy Composer widget.
Steps
Install the free UiChemy plugin
In your WordPress dashboard, go to Plugins → Add New Plugin, search for UiChemy, click Install Now, then Activate. See Install and Activate UiChemy.
Connect your AI tool (MCP)
Once UiChemy Pro is activated, go to UiChemy → Home and select the AI Agent (MCP) tab.
- Click Generate connection. This issues a secure Application Password so your AI tool can reach this site.
- Under Pick your AI tool, choose Claude Desktop, Cursor, Codex, Antigravity, or Other.
- Under Add the MCP server, use the Prompt or Config switch, click Copy, and add it to your AI tool.
- Restart your AI tool.
Full steps for each tool are in Set Up AI to WordPress.
Copy the prompt
Copy this prompt, paste it into your AI tool, replace the parts in square brackets with your own details, and send it.
Using UiChemy on my WordPress site, add a Composer widget to the page "[page name]".
The ready-made Tabs/Tours styles don't match my design, so build my own tabs section with HTML, CSS and JavaScript showing [4] tabs.
Tab titles: [Overview], [Features], [Pricing], [Support]. Each tab shows [a heading, some text and an image].
Place the tabs [on top], underline the active tab, and fade the content when switching.
On mobile, turn the tabs into a stacked accordion.
Match my site's colours and fonts.
Your AI tool builds a native, editable Composer on that page. Ask for changes in the same chat until it looks right.
Prefer to code it yourself? Add the Composer widget to your page and write the HTML, CSS and JavaScript in its Code tab. See Code Tab.