Customize Your First Website

GETTING STARTED

Customize Your First Website

Make your first branded design changes without disturbing working site components.

Make your first branded design changes without disturbing working site components. Follow the steps below and compare each screen with the current version of your BeatKongs producer dashboard.

Step-by-step instructions

1. Open the Builder

Navigate to Website → Edit Website and select the page you want to customize.

Screenshot to add: Builder opening on homepage

Screenshot to replace: Builder opening on homepage. Replace the image URL with your actual BeatKongs screenshot before publishing.

2. Update a heading and text

Select the heading or paragraph on the canvas. Use the available content or typography controls to edit the text and review its appearance.

Screenshot to add: Selected heading with text settings

Screenshot to replace: Selected heading with text settings. Replace the image URL with your actual BeatKongs screenshot before publishing.

3. Replace a visual

Select an image and use its image settings or media picker to choose your own approved artwork. Check cropping and mobile appearance.

Screenshot to add: Image settings and media selection

Screenshot to replace: Image settings and media selection. Replace the image URL with your actual BeatKongs screenshot before publishing.

Video demonstration (to be recorded)

Screenshot to add: YouTube demonstration placeholder: Customize a page in Kong Builder

Planned YouTube video: Customize a page in Kong Builder (2–3 minutes). Show: Open Builder, edit a heading, replace an image, check mobile, save and preview. Replace this preview image with the real BeatKongs YouTube embed once the video is ready.

4. Adjust brand colors

Use the relevant element style settings or global design controls to apply consistent colors. Avoid changing shared global settings until you understand which pages they affect.

Screenshot to add: Color settings in Builder right panel

Screenshot to replace: Color settings in Builder right panel. Replace the image URL with your actual BeatKongs screenshot before publishing.

5. Check navigation and footer

Review your header and footer using their global settings and menu controls. Confirm that links point to the correct pages.

Screenshot to add: Global navigation and footer settings

Screenshot to replace: Global navigation and footer settings. Replace the image URL with your actual BeatKongs screenshot before publishing.

6. Review responsive views

Switch among desktop, tablet, and mobile previews. Fix overflowing text, crowded sections, or oversized images before publishing.

Screenshot to add: Device preview controls

Screenshot to replace: Device preview controls. Replace the image URL with your actual BeatKongs screenshot before publishing.

7. Save and verify

Save your changes, open View Live Website, and test the page as a visitor.

Screenshot to add: Save control and live website view

Screenshot to replace: Save control and live website view. Replace the image URL with your actual BeatKongs screenshot before publishing.

Important: Save and inspect one section at a time to avoid accidentally changing global elements.

If something does not look right

Check that you are signed in to the correct producer account and that your plan includes the feature. Save any changes, refresh the relevant page, and compare it with the screenshots in this guide. If the problem continues, use the BeatKongs Help Center to submit a support ticket with the page name, the action you tried, the error message, and a screenshot. Never include passwords, API keys, or payment credentials.

Rate this Article

∅ 0 (0 Votes)

Categories for this entry