Advanced BeaverBuilder: Links, Media, and Interactive Modules

Links are how you connect your visitors to more information — whether that’s another page on your site, an external resource, or a downloadable file. In BeaverBuilder, you can add links directly inside any text module without touching the page layout at all.

How to Add a Link

Open the page in BeaverBuilder and click the text module you want to edit. Select the words you want to turn into a link — highlight them just like you would in a word processor. When text is selected, the text formatting toolbar appears above it. Click the link icon (it looks like a chain link). A small popup will appear where you can type or paste a URL.

If you’re linking to another page on your site, you can start typing the page name and BeaverBuilder will suggest matching pages. Select the right one and it will fill in the URL automatically. If you’re linking to an outside site, paste the full URL including the https:// part. Click Insert or Apply to create the link. The selected text will now appear underlined and clickable.

How to Remove a Link

To remove a link, click anywhere inside the linked text. The toolbar will appear again. Click the unlink icon — it looks like a chain with a break in it. The link is removed and the text returns to normal.

Internal vs. External Links

An internal link points to another page on your own site. An external link points to a different website entirely. Both work the same way in BeaverBuilder, but for external links you should also set them to open in a new tab so visitors don’t leave your site entirely. The next tutorial covers how to do that.

💡 Tip: Always test your links after adding them. Click Preview, then click the link to confirm it goes where you expect. A broken link is one of the most common and most avoidable mistakes on a website.

Buttons are one of the most important elements on any page — they direct visitors to take action. Register now. Learn more. Contact us. A button that has the wrong text or points to the wrong link can confuse visitors or break a registration flow. Knowing how to update buttons safely is an essential skill.

What a Button Module Is

A BeaverBuilder Button module is a standalone, styled clickable element — separate from regular text. It looks like a highlighted block or pill shape on the page. Unlike a text link, buttons have their own module settings for color, size, shape, and styling. Most of the time, you should only update the text and the link — not the styling — unless your web admin has specifically asked you to adjust it.

How to Edit a Button

Click the Launch Page Builder button on the page you want to edit. Find the button on the page and click it once. A settings panel will open — usually on the left side of the screen or as a floating panel. You’ll see a Text field at the top: this controls what the button says. Update it with the new label. Below that, find the Link field and enter the destination URL. If the button should go to another page on your site, you can type the page name and select it from the suggestions. If it links to an external site, paste the full URL.

What NOT to Change

Avoid changing the button’s Style, Color, or Size settings unless you’ve been asked to. These are set to match your site’s design. A button that suddenly turns a different color or changes shape will look out of place and may confuse visitors. If the button’s styling needs to change, flag it for your web admin.

⚠️ Warning: Always preview the page after editing a button to confirm the link works and the button still looks correct. Click the button in preview mode to test where it goes.

When a visitor clicks a link, the default behavior is to replace the current page — they leave your site and go to the new destination. For links to other pages on your own site, that’s fine. But for links to external websites or downloadable files, it’s better to open the link in a new tab. That way, visitors don’t lose their place on your site.

The General Rule

Same site, same tab. External site or file, new tab. If someone clicks a link to your Registration page, they should stay in the same tab. If they click a link to a sponsor’s website or a downloadable waiver PDF, a new tab keeps your site open in the background so they can easily return.

Setting New Tab for a Text Link

Click the text module containing the link. Click inside the linked text to place your cursor in it. Click the link icon in the toolbar to open the link settings. Look for a checkbox or toggle labeled Open in new tab or Open in new window. Check it. Click Apply or Update. Save the module.

Setting New Tab for a Button Module

Click the Button module. In the settings panel, find the Link field. Just below or next to it, look for a dropdown or checkbox labeled Link Target or Open in new tab. Set it to New Tab or _blank. Save your changes.

💡 Tip: If you’re ever unsure whether a link should open in a new tab, ask yourself: “If I click this, will I want to come back to this page right after?” If yes, use a new tab.

Your website’s Media Library isn’t just for images — it can also store PDFs, schedules, registration forms, waivers, and other documents. Instead of linking visitors to an external file host, you can link directly to a file that’s already uploaded to your site. This keeps everything in one place and gives you control over what’s being shared.

What You Can Link To

Common files you might link to include season schedules (PDF), registration waivers (PDF), rules and policies documents, team rosters (PDF), and tryout information sheets. Any file that’s been uploaded to your WordPress Media Library can be linked this way.

How to Link to a File

Open the text module or button module where you want to add the file link. Select the text you want to link (for a text link) or open the Button settings. When the link popup appears, look for a button or option that says Browse Media Library or Search Media Library — it’s usually just below the URL field. Click it to open the Media Library. Find the file you want to link to and select it. The file’s URL will be automatically filled in. Click Insert or Apply. Save your changes.

What Visitors See

When a visitor clicks a link to a PDF or other file, their browser will either open it in a new tab (for PDFs) or download it automatically (for other file types). Either way, make sure the link opens in a new tab so visitors don’t lose their place on your site.

💡 Tip: Before uploading a file to the Media Library, rename it to something descriptive. “Spring-2026-Schedule-U12-Boys.pdf” is much better than “doc_final_v3.pdf” — both for visitors who download it and for you when you need to find it later.

Adding a video to your page is one of the most impactful things you can do for engagement. A short highlight reel, a coach introduction, or a how-to walkthrough can communicate more in 60 seconds than three paragraphs of text. BeaverBuilder makes embedding a YouTube or Vimeo video straightforward — you just need the right URL.

Getting the Right URL

Don’t use the shortened share link (like youtu.be/abc123). Use the full video URL from your browser’s address bar when the video is playing — something like https://www.youtube.com/watch?v=abc123. For Vimeo, it looks like https://vimeo.com/123456789. Copy it directly from the address bar.

How to Embed the Video

In BeaverBuilder, click the existing Video module on your page (or ask your web admin to add one if there isn’t one yet). The settings panel will open. Find the Video URL field and paste your full video URL. BeaverBuilder will detect whether it’s YouTube or Vimeo automatically. The video preview should appear in the module settings. Click Save to apply.

Autoplay and Other Settings

Most of the time, autoplay should be left off. Videos that start playing automatically when someone loads the page can be jarring, especially on mobile where it can consume data without warning. Leave autoplay off unless your web admin has specifically set it up that way.

⚠️ Warning: Never upload a large video file directly to your Media Library. Video files are enormous and will slow your site down significantly. Always use YouTube or Vimeo to host the video and embed it using the URL.

The Video module in BeaverBuilder is purpose-built for displaying video content cleanly on any page. Once a video is embedded, you have control over several settings that affect how visitors experience it. This tutorial explains what each setting does so you can make informed choices.

Player Controls

The video player includes standard controls — play, pause, volume, and fullscreen. These are always visible to visitors and can’t be turned off in most configurations. You don’t need to do anything to enable them; they’re on by default.

Autoplay

If autoplay is turned on, the video starts playing the moment someone lands on the page — with no click required. This can be attention-grabbing but is often disruptive. Most browsers also block autoplay videos with sound by default, so the video may start muted even if you have autoplay enabled. Leave this off unless your web admin has a specific reason for it.

Responsive Scaling

This setting ensures the video resizes properly on smaller screens like phones and tablets. It should always be enabled. If you notice a video looking stretched or cut off on mobile, check that responsive scaling is turned on in the module settings.

Video Thumbnail Customization

The thumbnail is the image that appears before someone clicks play. BeaverBuilder can pull the default YouTube or Vimeo thumbnail automatically, or you can upload a custom image. A strong, clear thumbnail encourages more clicks. If your video has a generic or low-quality auto-generated thumbnail, consider uploading a custom one from the Media Library.

💡 Tip: After making any changes to the video module, always preview the page and test the video by clicking play to make sure everything is working correctly before you publish.

A photo gallery is one of the best ways to showcase your league’s teams, events, and community in action. BeaverBuilder’s Gallery module lets you display multiple photos in a clean, organized layout that visitors can browse without leaving the page.

Finding the Gallery Module

Look for an existing Gallery module on the page — it will appear as a grid of images. Click it to open the settings panel. If there’s no gallery yet and you need to add one, contact your web admin to add the module to the page layout. Once it exists, you can manage the images inside it yourself.

Adding or Swapping Images

In the gallery settings, click Add Images or Edit Gallery to open the image picker. You can select multiple images from your Media Library by clicking each one, or upload new photos directly. To remove an image, click the X on its thumbnail in the gallery editor. To swap an image, remove the old one and add the new one.

Arranging Photos

In the gallery editor, you can drag and drop images to reorder them. Put your strongest photos first — those are the ones visitors will see before they start scrolling or clicking through.

Gallery Display Styles

BeaverBuilder typically offers a few display options. A Grid shows all photos in a fixed layout of rows and columns. A Slider or Carousel shows one image at a time with arrows to navigate. A Lightbox opens a larger version of each photo when clicked. The style is usually set by your web admin to match the page design — only change it if you’ve been asked to.

⚠️ Warning: Always make sure your photos are appropriately sized before uploading. Huge, uncompressed images slow the page down for everyone. Aim for images no larger than 1–2MB and at least 1000 pixels wide.

Accordions and tabs are interactive content containers — they let you organize a lot of information in a compact space. Visitors click a heading to expand it (accordion) or click a tab label to switch to that section (tabs). You’ll often see them used for FAQs, program details, schedule breakdowns, or age group information.

What You’re Editing

Each accordion or tab has two parts: the heading (the clickable label visitors see) and the body (the content that appears when they click). You can edit both. The heading should be short and clear — it’s what visitors use to decide whether to click. The body can include text, images, and links.

How to Edit an Accordion Section

In BeaverBuilder, click on the accordion or tab module. The settings panel will open, showing each section listed. Click on a section name to expand its settings. You’ll see a Label or Title field (the heading) and a Content or Text area below it (the body). Edit the text in the appropriate field. To add an image or link inside the body, use the text editor toolbar that appears in the content area.

Adding or Removing Sections

You can usually add a new section by clicking Add Item or the + button in the module settings. To remove a section, look for a trash icon or delete button next to that item. Be careful when removing sections — there’s no undo inside the module settings.

What NOT to Change

Don’t change the animation settings, toggle behavior, or styling options unless your web admin has asked you to. These control how the accordion opens and closes and are usually calibrated to match the site’s design.

💡 Tip: Keep accordion headings short and scannable. If someone has to read a full sentence just to understand whether they should click it, the heading is too long.

Icons are small visual symbols that help communicate ideas at a glance — a calendar icon suggests events, a trophy suggests achievements, a phone suggests contact information. BeaverBuilder’s Icon module lets you add these visual cues to your pages without needing any design software.

When Icons Help

Icons work best when paired with a short label or piece of text that reinforces their meaning. A row of icons representing your league’s key features (registration, schedules, rosters) can make a page easier to scan and more visually appealing. Don’t add icons just for decoration — every icon should have a clear purpose.

How to Edit an Existing Icon

Click the Icon module on the page. The settings panel will open. Click the current icon image to open the icon picker — a searchable library of symbols. Type a keyword (like “calendar,” “star,” or “check”) to find matching icons. Click the one you want to select it. Back in the settings panel, you can adjust the icon’s size and color.

Size and Color

Keep icon size consistent across the page. If other icons on the page are a certain size, match it. For color, use your site’s accent color if possible — your web admin can tell you what that is. Avoid choosing colors that clash with the page background or make the icon hard to see.

Linking an Icon

If you want the icon to be clickable (for example, linking to a registration page), look for a Link field in the module settings. Enter the destination URL there.

⚠️ Warning: Don’t change the icon styling (borders, backgrounds, animations) unless you’ve been asked to. These settings are usually configured to match the page design and can look out of place if changed inconsistently.

A callout module is a visually distinct block of content designed to stand out from the rest of the page — usually with a colored background, an optional icon, and a brief message. You’ll see them used for important announcements, registration deadlines, tips, or warnings. Because they’re designed to grab attention, they work best when the content is short and punchy.

What a Callout Is For

Think of a callout as a highlighted sticky note on your page. It says: “Pay attention to this.” Common uses include “Registration closes May 30th,” “New season starts March 1st,” or “Questions? Contact your coach.” A callout with too much text loses its impact — keep it brief.

How to Edit the Text

Click the callout module on the page. The settings panel will open. Find the Title or Heading field and the Content or Description field. Update the text in both as needed. Keep the heading short (five words or fewer if possible) and the body to one or two sentences.

Changing the Background Color or Style

The callout’s background color and style are usually set to match your site’s design — a green callout for tips, a yellow for warnings, etc. Only change these if your web admin has asked you to or if you’re specifically updating the callout’s type. Don’t pick a color just because you like it — it needs to fit the page.

Adding an Icon to a Callout

If there’s no icon currently and you want to add one, look for an Icon field in the callout settings. Click it to open the icon picker and select a relevant symbol. Use the same icon-sizing guidelines as the standalone Icon module.

💡 Tip: If a callout is outdated (like last season’s deadline), either update the text or ask your web admin about removing it entirely. An expired callout is worse than no callout — it makes the site look unmaintained.

The Map module displays an interactive Google Map directly on your page — useful for showing field locations, facility addresses, or meeting points for practices and events. Visitors can zoom in, get directions, and interact with the map without leaving your site.

How the Map Module Works

The map is powered by Google Maps. You give it an address or a set of coordinates, and it displays a live, interactive map at that location. Visitors can interact with it just like they would on Google Maps itself.

Entering or Updating an Address

Click the Map module. The settings panel will open with an address or coordinates field. Clear the current entry and type the new address. Use a complete, specific address — street number, city, and state. If the location has an unusual name, include the zip code too. After typing the address, save the module and preview the page to confirm the pin is in the right spot.

Zoom Level

The zoom level controls how close in the map appears when the page loads. A zoom of 14–16 typically shows a neighborhood view, which is good for showing where a specific field or building is. If your map shows a giant area and the pin is hard to find, increase the zoom level. If it’s zoomed in so close the surrounding streets aren’t visible, decrease it slightly.

Map Style and Multiple Locations

Standard street view is the default and usually the most useful. Satellite view shows an aerial photo — helpful if the field is in a park without a precise street address. If you need to show multiple locations (like all your league’s fields), look for a Markers or Locations option in the module settings to add additional pins.

⚠️ Warning: If the map shows a blank space or an error instead of a map, it may be a Google Maps API issue. Don’t try to fix this yourself — contact your web admin.

When you’re editing a page in BeaverBuilder, you’ll occasionally come across modules that don’t contain any text, images, or interactive content. These are Spacer and Separator modules — they control the visual breathing room and structure of your page. Understanding what they do (and why they’re usually best left alone) will help you avoid accidentally breaking a page’s layout.

What a Spacer Does

A Spacer module adds blank vertical space between other elements on the page. Think of it like pressing Enter multiple times in a document to create room between paragraphs. Designers use spacers to control the rhythm of a page — ensuring that sections have the right amount of breathing room between them. If you delete or shrink a spacer, elements that were separated will suddenly appear crowded together.

What a Separator Does

A Separator module is a thin horizontal line that divides sections of content — similar to an <hr> tag in HTML. They’re used to create visual breaks between unrelated sections. Removing one can make two sections of content blur together in a way that confuses visitors.

When to Leave Them Alone

In most cases, spacers and separators should not be edited by content editors. They were placed intentionally by the designer to maintain the page’s visual balance. The only time you should adjust one is if your web admin has specifically asked you to change the spacing in a particular section.

When It Might Be OK to Adjust

If a spacer is creating too much or too little room in a section you’re actively working on, and you’ve confirmed with your web admin that adjusting it is appropriate, you can change the height value in the spacer’s settings. Keep the change small and preview immediately after.

⚠️ Warning: If you delete a spacer or separator, there’s no easy undo from the page. Always save a backup (your web admin can help) before making structural changes to a page layout.

On a simple page with a few modules, finding the content you want to edit is easy — you just scroll down and click it. But on complex pages with many sections, columns, and modules stacked on top of each other, finding the right module can take real time. BeaverBuilder’s built-in search feature helps you jump directly to the content you need.

How to Open the Search

With BeaverBuilder active on the page, look for the Search icon in the toolbar — it’s the magnifying glass icon. Click it to open the search bar. You can also use the keyboard shortcut if you know it (check with your web admin).

What You Can Search For

You can search for text content that appears on the page. Type a word or phrase from the content you’re trying to edit and BeaverBuilder will highlight matching modules. You can also search by module type — typing “button” or “video” will surface modules of that type.

Navigating to a Result

When BeaverBuilder finds a match, it highlights the module on the page and may scroll to it automatically. Click the module in the search results or directly on the page to open its settings and start editing.

When This Saves the Most Time

Search is especially useful when you’re looking for a specific piece of text buried deep in a long page — like finding one mention of an old date in a section you don’t often edit, or locating a button that’s inside a column inside a row inside a section. Without search, you’d have to scroll through every module manually. With search, you’re there in seconds.

💡 Tip: If you need to update the same piece of text that appears in multiple modules on the same page (like a phone number or email address), use search to find each instance quickly rather than scrolling through the entire page looking for them.

More than half of all web traffic comes from mobile devices — phones and tablets. A page that looks great on a desktop computer can look broken, cramped, or unreadable on a phone. BeaverBuilder’s built-in mobile preview lets you see exactly how your page will appear on smaller screens before you publish, so you can catch problems before visitors do.

How to Switch to Mobile Preview

While editing in BeaverBuilder, look at the toolbar at the bottom of the screen (or top, depending on your theme layout). You’ll see icons representing different screen sizes — a monitor for desktop, a tablet icon, and a phone icon. Click the phone icon to switch to mobile preview. The page will reflow to show you how it looks on a small screen.

What to Check in Mobile View

Scroll through the entire page in mobile view. Look for text that’s too small to read comfortably. Check that buttons are large enough to tap with a finger — they should be at least 44 pixels tall. Confirm that images aren’t cut off or stretched. Look at columns — a two-column layout on desktop often stacks into a single column on mobile, which changes the order of content. Make sure the stacked order makes sense.

Checking Tablet View

Click the tablet icon to also preview at tablet size. Tablets fall between phone and desktop — some layouts look fine on both extremes but awkward at a medium size. A quick glance at the tablet preview catches these in-between issues.

When to Flag Issues for Your Web Admin

If you see something that looks wrong in mobile view — text that’s overlapping, a section that’s completely broken, or a button that’s unreachable — don’t try to fix it yourself. Mobile layout issues often require adjustments to the page’s column settings or responsive visibility options, which are better handled by your web admin. Take a screenshot and send it along with a description of what’s wrong.

💡 Tip: Always check mobile view as the last step before publishing any page update. It takes 30 seconds and can save you from publishing a page that looks broken for the majority of your visitors.

Editing a simple page with one or two text modules is low risk. Editing a complex page with multiple columns, interactive modules, embedded videos, and carefully placed buttons is a different story. One wrong move — deleting the wrong module, accidentally dragging something, or publishing before checking — can break the page for everyone visiting your site. This tutorial gives you a reliable routine to follow every time you edit a complex page.

Step 1: Preview Before You Touch Anything

Before you make a single change, click Preview to see the page in its current state. Open it on both desktop and mobile. This is your baseline — if something goes wrong during editing, you’ll know exactly what it’s supposed to look like. Take a screenshot or keep the preview tab open.

Step 2: Make One Change at a Time

Resist the urge to update five things at once. Make one edit, then save. This way, if something looks wrong after you save, you know exactly which change caused it. If you edit five things before saving and something breaks, you’ll have to figure out which of the five was the problem.

Step 3: Save and Preview After Every Change

After each individual change, click Save, then click Preview to see the result. Don’t string together multiple edits without checking the outcome in between. What looks right in edit mode sometimes looks different on the live preview — especially with spacing, images, and interactive modules.

Step 4: Test All Interactive Elements

On complex pages, check that buttons still link to the right places, accordions still open and close correctly, and videos still play. These can sometimes be affected by nearby edits even if you didn’t touch them directly.

Step 5: Check Mobile Before Publishing

Switch to mobile preview and scroll through the entire page. Confirm nothing is broken, cut off, or overlapping. If it looks good on both desktop and mobile, you’re ready to publish.

Step 6: When to Stop and Ask for Help

If something breaks and you can’t fix it with Ctrl+Z (undo), stop. Don’t publish. Contact your web admin and describe what happened. Trying to fix a broken layout without the right knowledge can make the problem worse. It’s always better to ask than to guess.

⚠️ Warning: Never click Publish on a complex page without completing the mobile preview step. A page that looks perfect on your desktop screen can be completely unusable on the phone of every parent in your league.