Getting Started

Getting Started with WBcom Essential

Welcome to WBcom Essential. This guide walks you through installation, first steps, and building your first page with widgets and blocks.

What You Get

WBcom Essential adds two sets of tools to your WordPress site:

Tool TypeCountBest ForElementor Widgets43Visual page building with drag-and-dropGutenberg Blocks45Native WordPress editor, Full Site Editing

Both work independently. Use Elementor widgets if you prefer the Elementor page builder. Use Gutenberg blocks if you work with the native WordPress editor.

Installation

Requirements

RequirementMinimum VersionWordPress6.0PHP8.0MySQL5.7+ or MariaDB 10.3+

Install the Plugin

From WordPress Dashboard:

Go to Plugins → Add New Click Upload Plugin Select the wbcom-essential.zip file Click Install Now, then Activate

Via FTP:

Extract the zip file Upload the wbcom-essential folder to /wp-content/plugins/ Go to Plugins in WordPress admin Find “WBcom Essential” and click Activate

Verify Installation

After activation:

For Elementor: Edit any page → Open widget panel → Look for “Starter Templates” category For Gutenberg: Add a new block → Search “Starter Pack” → You should see 7 block categories

Your First Page with Elementor

Let’s build a simple landing page using Elementor widgets.

Step 1: Create a New Page

Go to Pages → Add New Enter a title like “Welcome” Click Edit with Elementor

Step 2: Add a Hero Section

Drag a Section onto the canvas Set the layout to full width From the widget panel, find Starter Templates → Heading Drag the Heading widget into your section Type your headline and adjust the typography

Step 3: Add a Team Section

Add another section below Find Starter Templates → Team Carousel Drag it into the section Add team members: name, role, photo, and social links Adjust the carousel settings (slides per view, autoplay)

Step 4: Add Testimonials

Add a new section Find Starter Templates → Testimonial Carousel Add customer testimonials with ratings Style the cards to match your brand

Step 5: Publish

Click Publish to make your page live.

Your First Page with Gutenberg

Let’s build the same page using Gutenberg blocks.

Step 1: Create a New Page

Go to Pages → Add New Enter a title

Step 2: Add Blocks

Click the + button to add a block Search for “Starter Pack” or browse categories: Starter Pack - Header for branding and navigation Starter Pack - Design for visual elements Starter Pack - Content for text and interactive content

Step 3: Configure Block Settings

Each block has settings in the sidebar:

Select your block Look at the right sidebar for Block settings Adjust colors, typography, spacing Enable Use Theme Colors to match your theme automatically

Step 4: Use Theme Colors

This is a key feature. Instead of picking colors manually:

Select any block In the sidebar, find Color Settings Enable Use Theme Colors The block now inherits colors from your theme

This keeps your site consistent without manual color matching.

Recommended Combinations

For Community Sites (BuddyPress)

PurposeWidget/BlockHomepage introDashboard IntroShow active membersMembers CarouselDisplay groupsGroups GridUser navigationHeader Bar

For Online Stores (WooCommerce)

PurposeWidget/BlockFeatured productsProduct GridShopping cartMini CartCustomer testimonialsTestimonial CarouselPricing plansPricing Table

For Business Sites

PurposeWidget/BlockHero sectionSlider or HeadingTeam showcaseTeam CarouselClient logosPortfolio GridService pricingPricing TableContact formLogin Form (for members)

Tips for Success

Performance

Limit carousel items to 6-8 for fast loading Optimize images before uploading Use lazy loading where available in carousel settings

Consistency

Enable “Use Theme Colors” on all blocks for a unified look Use consistent typography across similar elements Stick to 2-3 heading styles throughout your site

Mobile Experience

Preview on mobile before publishing Reduce columns on mobile (4 → 2 columns) Test touch interactions for carousels and accordions

Next Steps

Block Reference - Detailed guide to all 45 blocks Widget Reference - All 43 Elementor widgets Theme Colors Guide - Master the theme colors feature BuddyPress Integration - Build community pages FAQ & Troubleshooting - Common issues and fixes

Need Help?

Documentation: https://docs.wbcomdesigns.com/wbcom-essential/ Support: https://wbcomdesigns.com/support/