Tabs and components

[Jennine]

Hello. I’m looking to design a page with two tabs similar to this one: https://www.snpnyc.org/resources/
My goal is to move all the sections from this page: https://www.snpnyc.org/community/ into one tab, and then create another tab with similar sections. Previously, I used components, but given the number of sections on this page, it would be more efficient for me to export the sections as a template and place that template into a tab, if possible.

Could you please advise on the most efficient way to achieve this? Thank you

[tristup]

Hi Jennine,

Thanks for reaching out.
In the Tabs, you can add any elements or components, so I would suggest you create components and use those as a shortcode in the Text or Raw Content element to show the contents.

Thanks

[Jennine]

Ok will do, is there a way to create a component with multiple sections? Can you please provide an instructional link? Thank you

[ruenel]

Hello @Jennine,

You can create a component A. Use a Section element as your container. Please all the needed layout, design and content information in to the Section with Row/Column or Grid element. Save it as Component A. Create another component with the same method and save it as component B. If you already have a page design, you can save it as a template and load it up into your component element.

In the final page, you can insert the Tab element and then use the Component element.

Hope this makes sense.

[Jennine]

Thank you. I can not seem to find the “export component” in the "manage element " as shown in the tutorial video.
Please advise. Thanks

[ruenel]

Hello @Jennine,

Add a name to your Column element first.

Best Regards.

[Jennine]

Did that but it is still not giving me the option to export component.

[ruenel]

Hello @Jennine,

You are editing the page. The “Export Component” option will only appear if and only if you are editing a Component. Just Save this as a template and recreate it in the Component builder.

Hope this makes sense.

[Jennine]

Can you please provide a link on how to create the component?

[ruenel]

Hey @Jennine,

Click the “+” icon in the Cornerstone builder.

• https://theme.co/docs/component-builder-overview

Thanks.

[Jennine]

I understand. How can I take existing sections that are already built out and turn them into components to use in the tabs? I’d like to avoid rebuilding everything from scratch. Thanks!"

[ruenel]

Hey @Jennine,

You can Make the sections as a template and save it with a unique name so that you can easily load the Section template into a component.

You can then find the saved template in the Templates > Sections tab:

Best Regards.

[Jennine]

Thanks! I was able to save the sections as a component. How do I get the shortcode to add the component within a tab?

[ruenel]

Hello @Jennine,

Like in my previous response, use the Component element.

Best Regards.