< Back to All Pod Tutorials

Inline Block Container – Buttons & Pop-up Modals

The Inline Block Container is a pod with predetermined margins for buttons that can link to a page or a pop-up modal. Adding pop-up modals is a great way to display important messages or prompt an action. Modals can help your customers to focus on the content you are highlighting. Inline Block Containers can be added to Page Sections or a Grid Cell.

How to create a pop-up modal

After you create your page section or a grid cell, you will add in the Inline Block Container pod.

Next, you will only have the option to add in a Button pod.

Button pod template

1. Internal Name: This title will not be visible on the website; it is only used for organizing your content.
2. Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
3. URL: If you only want this button to link to a page, add a URL; if you want this button to open a pop-up, leave this blank.
4. Button CTA: Button text

5.“Pods” tab: Here is where you will add the content for your pop-up. The only option to select from here is the Modal Pop-up pod, and from there, you can choose from all the pod types.

6.“Options” tab: You can choose from your secondary button styling here.

Buttons with the Inline Block Container

Because of the set margins, you can add multiple buttons that will be perfectly aligned.

The above example has four buttons with centered alignment. Select your alignment in the ‘Options’ tab.

Four pop-up examples and tutorials to get you started

Working with the Modal Pop-up pods may take some trial and error, but once you get the hang of it, there are many possibilities of what you can do with your website!

1. Simple Contact form

You can easily request a quote from your customers without having them leave the page. See the below example.

This example uses a Text Card pod above the Inline Block Container pod, as you can see below.

To create this pop-up modal, we need to create a Button pod (within our Inline block Container) and add our “Button CTA.”

In the “Pods” tab, add your Modal Pop-up pod.

In our Modal Pop-up, add a Contact Form pod and add in your chosen form fields. Your pop-up is now ready, and all that’s needed is to publish!

2. Contact form with image

Add branding to your form and quickly receive your customer’s contact info with a pop-up, as seen in this example.

The above example uses a Text pod above the Inline Block Container pod.

Follow the same steps from above to create your pop-up modal.

• Create your Button pod in your Inline Block Container
• Add your “Button CTA”
• In the “Pods” tab, add your Modal Pop-up pod.

In your Modal Pop-up pod, you will create two pods: a Text pod (to which we will add the image) and a Contact Form pod. You are done once you have added your image and chosen your form content!

3. “Learn more” pop-up

Give your customer more information on a product or your services with a simple pop-up.

Safety products and support

We provide thousands of PPE items at low prices. Our reps are here to help!

The above example uses a Text pod above the Inline Block Container pod.

Follow the same steps to create your pop-up modal.

• Create your Button pod in your Inline Block Container
• Add your “Button CTA”
• In the “Pods” tab, add your Modal Pop-up pod.

You only need a Text pod to add your content for this pop-up.

4. Video pop-up

Adding a video to your pop-up is as simple as adding text, as in our last example.

Click below to view video!

Follow the same steps as adding a Text pod to your Modal Pop-up, but add your video markdown tag instead of text.

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.