BuddyX
Get BuddyX Pro

Elementor Page Builder

Free & Pro

Create stunning custom layouts with Elementor and BuddyX Pro. Build beautiful pages, headers, footers, and templates with drag-and-drop simplicity while maintaining full theme compatibility.

What You Can Do

With BuddyX Pro's Elementor integration, you can:

  • Build Custom Pages - Design unique layouts with Elementor's visual editor
  • Create Custom Headers - Replace theme header with Elementor templates
  • Design Custom Footers - Build custom footer layouts
  • Template Builder - Create templates for posts, archives, and more (Pro)
  • Theme Builder - Design templates for any WordPress content (Pro)
  • Widget Library - Access 40+ Elementor widgets
  • Responsive Design - Automatic mobile optimization
  • Full Theme Compatibility - BuddyX Pro styling applies to Elementor content

Prerequisites

Before using Elementor with BuddyX Pro:

Requirement Version Notes
WordPress 6.0+ Latest stable version recommended
BuddyX Pro Theme Active Must be activated
Elementor 3.0+ Free version available
PHP 7.4+ Required by Elementor

Recommended:

  • Elementor Pro - Unlock Theme Builder, popup builder, and advanced widgets
  • RAM: At least 128MB PHP memory limit
  • Max Execution Time: 300 seconds for large pages

Installation & Setup

Step 1: Install Elementor

  1. Log in to your WordPress dashboard
  2. Go to Plugins → Add New
  3. Search for "Elementor"
  4. Click Install Now next to Elementor Website Builder
  5. Click Activate after installation completes

Step 2: Configure Elementor Settings

After activation:

  1. Go to Elementor → Settings
  2. Configure recommended settings:

General Tab:

Setting Recommendation Why
Editing Handles On Easier widget selection
Enable Flexbox On Better responsive layouts
Default Generic Fonts System Match BuddyX Pro typography

Style Tab:

Setting Value
Content Width 1170px (matches BuddyX Pro)
Space Between Widgets 20px
Stretched Section Width 100%
Default Colors Use BuddyX Pro colors (set in Customizer)

Advanced Tab:

Setting Recommendation
CSS Print Method External File (better performance)
Google Fonts On (or use BuddyX Pro fonts)
Font Display Swap

Step 3: Verify BuddyX Pro Compatibility

BuddyX Pro automatically works with Elementor. To verify:

  1. Create new page: Pages → Add New
  2. Click Edit with Elementor button
  3. Page opens in Elementor editor
  4. BuddyX Pro styles apply to Elementor widgets

If Elementor button doesn't appear:

  • Go to Elementor → Settings → General
  • Check "Enable for Posts" and "Enable for Pages"
  • Save settings

BuddyX Pro Integration Features

Automatic Canvas Template Support

BuddyX Pro supports all Elementor canvas templates:

Available Templates:

Template Header Footer Sidebar Use Case
Default Theme Theme Theme Regular pages with BuddyX Pro design
Elementor Canvas None None None Blank slate, 100% custom
Elementor Full Width Theme Theme None Keep BuddyX Pro header/footer, custom content

How to Set Template:

  1. Edit page with Elementor
  2. Click gear icon (Page Settings)
  3. Find Template dropdown
  4. Choose your template
  5. Update page

Matching Theme Colors

BuddyX Pro does not automatically push its Customizer colors into Elementor's Global Colors - Elementor manages its own color system. To keep Elementor content on-brand, set matching values in Elementor once:

  1. Go to Elementor → Settings → Style (or Site Settings → Global Colors)
  2. Set your Global Colors to match the values from Appearance → Customize → Colors & Skin:
    • Primary: BuddyX Pro primary color
    • Secondary: BuddyX Pro secondary color
    • Text: body text color
    • Accent: link color
  3. Apply those Global Colors to widgets from each widget's Style tab

Where a widget is left on its default (no explicit color), it inherits the theme's CSS, so text and links pick up BuddyX Pro styling automatically.

Typography

BuddyX Pro does not override Elementor's typography controls. Widgets left on Elementor's Default font inherit the theme's body and heading fonts through the normal CSS cascade. To force an exact match, set the fonts in Elementor:

  1. Go to Elementor → Settings → Style (or Site Settings → Typography)
  2. Set the base/primary font to match the BuddyX Pro body font
  3. Set the heading font to match the BuddyX Pro heading font
  4. Leave a widget's font on Default to inherit the theme font instead

Responsive Breakpoints

BuddyX Pro breakpoints match Elementor:

Device Breakpoint BuddyX Pro Elementor
Desktop 1025px+ Yes Yes
Tablet 768px - 1024px Yes Yes
Mobile <768px Yes Yes

Consistent Across:

  • Theme layouts
  • Elementor sections
  • Widget spacing
  • Font sizes

Building Pages with Elementor

Creating Your First Elementor Page

  1. Go to Pages → Add New
  2. Enter page title
  3. Click Edit with Elementor button
  4. Elementor editor opens

Editor Interface:

Panel Location Purpose
Left Panel Left side Widget library and settings
Canvas Center Live preview and editing
Top Bar Top Save, preview, responsive mode
Bottom Bar Bottom Navigator, history, user preferences

Page Building Workflow

Step 1: Choose Structure

  1. Click + icon in canvas
  2. Choose column structure:
    • Single column (full width)
    • Two columns (50/50)
    • Three columns (33/33/33)
    • Custom columns

Step 2: Add Widgets

  1. Search or browse widgets in left panel
  2. Drag widget to desired column
  3. Widget appears with default settings

Step 3: Customize Content

  1. Click widget to select
  2. Left panel shows Content tab
  3. Edit text, images, links, etc.

Step 4: Style Widget

  1. Click Style tab
  2. Adjust colors, spacing, typography
  3. Changes appear live in canvas

Step 5: Advanced Settings

  1. Click Advanced tab
  2. Set margins, padding, CSS classes
  3. Configure animations, backgrounds

Recommended Page Templates

Homepage Template:

  • Hero section (full width, background image)
  • Features section (3 columns with icons)
  • Statistics section (4 columns with numbers)
  • Call-to-action section (centered, full width)

About Page Template:

  • Header section (full width)
  • Team section (4 columns with photos)
  • Timeline section (2 columns)
  • Contact section (form)

Landing Page Template:

  • Hero with headline and CTA button
  • Benefits section (icon boxes)
  • Testimonials (slider)
  • Pricing table
  • FAQ accordion
  • Final CTA section

Theme Builder (Elementor Pro)

Create custom templates for WordPress content types.

BuddyX Pro registers Elementor's header and footer theme locations, so an Elementor Pro header or footer template displays in place of the theme's own header/footer. Other template types (Single, Archive, 404, and so on) are handled by Elementor Pro itself and render inside the theme's content area.

Setting Up Theme Builder

Requires Elementor Pro.

  1. Go to Elementor → Theme Builder
  2. Choose template type:
    • Header
    • Footer
    • Single Post
    • Archive
    • Search Results
    • 404 Page

Creating Custom Header

Replace BuddyX Pro header with Elementor header:

  1. Go to Elementor → Theme Builder
  2. Click Add New → Header
  3. Name your header template
  4. Click Create Template

Building the Header:

  1. Add Section
  2. Set section height to fit header (80-100px)
  3. Add columns (3 columns recommended):
    • Column 1: Logo (Site Logo widget)
    • Column 2: Menu (Nav Menu widget)
    • Column 3: Icons (Search Icon, Cart Icon widgets)

Header Widgets to Use:

Widget Purpose
Site Logo Your logo image
Site Title Site name text
Nav Menu Main navigation menu
Search Form Search bar
Social Icons Social media links

Header Settings:

  1. Click section settings (gear icon)
  2. Advanced tab → Positioning
  3. Set Width: Full Width (100%)
  4. Set Position: Fixed (for sticky header)

Display Conditions:

  1. Click Publish button
  2. Set display conditions:
    • Include: Entire Site
    • Or specific pages/sections
  3. Click Save & Close

Creating Custom Footer

Build custom footer with widgets:

  1. Go to Elementor → Theme Builder
  2. Click Add New → Footer
  3. Name your footer template
  4. Click Create Template

Footer Structure:

4-Column Footer Layout:

  • Column 1: About text and logo
  • Column 2: Quick links menu
  • Column 3: Recent posts
  • Column 4: Contact info

Footer Widgets:

Widget Use For
Text Editor About text, descriptions
Icon List Quick links
Nav Menu Footer menu
Social Icons Social media links
Heading Section titles
Divider Visual separation

Footer Bottom Bar:

Add second section below:

  • Left column: Copyright text
  • Right column: Privacy links or payment icons

Display Conditions:

Set to Entire Site or specific pages.

Creating Single Post Template

Custom design for blog posts:

  1. Elementor → Theme Builder → Add New → Single
  2. Choose Post as content type
  3. Build layout using these widgets:

Essential Post Widgets:

Widget Displays
Post Title Article title
Post Excerpt Short description
Post Content Full article content
Featured Image Main image
Post Info Author, date, categories
Author Box Author bio and avatar
Post Comments Comment section
Post Navigation Previous/next post links

Layout Recommendations:

Classic Blog Layout:

  • Full width featured image
  • Centered title and meta
  • Single column content (800px wide)
  • Author box at bottom
  • Comments section

Magazine Layout:

  • Side-by-side featured image and title
  • Two column content with sidebar
  • Related posts grid
  • Social sharing buttons

Display Conditions:

Set to All Singular → Posts.

Creating Archive Template

Design for blog archive, category, tag pages:

  1. Elementor → Theme Builder → Add New → Archive
  2. Choose Posts Archive
  3. Build with Archive widgets:

Archive-Specific Widgets:

Widget Purpose
Archive Title Category/tag name
Archive Posts Post loop/grid
Breadcrumbs Navigation path

Archive Posts Widget Settings:

Setting Options
Layout Classic, Cards, Grid
Columns 2, 3, or 4
Posts Per Page 9, 12, 15
Pagination Numbers, Prev/Next, Load More

Display Conditions:

  • All Archives
  • Or specific (Categories, Tags, Authors)

BuddyPress & Community Pages

Can I Use Elementor with BuddyPress Pages?

Partially supported:

Works Well:

  • Custom homepages with BuddyPress widgets
  • Landing pages for community
  • About/Contact pages

Not Recommended:

  • Activity page (uses BuddyPress templates)
  • Member profiles (uses BuddyPress templates)
  • Group pages (uses BuddyPress templates)

Best Practice:

Use Elementor for marketing/info pages, let BuddyX Pro handle BuddyPress pages.

Adding BuddyPress Elements

On Elementor pages, add BuddyPress content:

Using Shortcodes:

Add Shortcode widget and use these:

Shortcode Displays
[bp_activity_stream] Activity feed
[bp_member_list] Member directory
[bp_group_list] Group directory
[bp_login_form] Login form
[bp_registration_form] Registration form

Using Widgets:

Add WordPress Widget and choose BuddyPress widgets:

  • Who's Online
  • Recently Active Members
  • Members
  • Groups

WooCommerce & E-commerce (Elementor Pro)

WooCommerce Builder

Elementor Pro includes WooCommerce widgets:

Product Widgets:

Widget Purpose
Products Product grid/list
Product Categories Category grid
Product Title Single product name
Product Price Product price display
Product Add to Cart Buy button
Product Images Gallery

Building Shop Page:

  1. Elementor → Theme Builder → Add New → Archive
  2. Choose Products Archive
  3. Add Products widget
  4. Configure grid layout
  5. Set display conditions to Shop page

Building Product Page:

  1. Elementor → Theme Builder → Add New → Single
  2. Choose Product as content type
  3. Layout products widgets:
    • Product Images (left column)
    • Product Title, Price, Add to Cart (right column)
    • Product Tabs (full width below)
    • Related Products (bottom)

Cart & Checkout Pages

For cart/checkout, keep BuddyX Pro default templates:

Why:

  • WooCommerce forms require specific structure
  • BuddyX Pro optimizes these pages
  • Elementor can break checkout functionality

If You Need Customization:

  • Use WooCommerce Customizer options
  • Or add custom CSS
  • Avoid building entire cart/checkout in Elementor

LearnDash Course Pages (Elementor Pro)

Building Course Templates

Elementor Pro supports LearnDash templates:

  1. Elementor → Theme Builder → Add New → Single
  2. Choose Course (LearnDash)
  3. Use Dynamic Content widgets

LearnDash Dynamic Tags:

Tag Displays
Course Title Course name
Course Description Course overview
Course Price Enrollment price
Course Progress Progress bar
Course Curriculum Lesson list

Example Course Layout:

  • Hero section: Course title, featured image, price
  • Course info: Instructor, duration, students enrolled
  • Course content: Description and what you'll learn
  • Curriculum: Lesson/topic accordion
  • Instructor bio: Author box
  • Enrollment button: Buy/Enroll CTA

Display Conditions:

Set to All Singular → Courses.

Performance Optimization

Speed Tips for Elementor

  1. Limit Widget Count

    • Use 20-30 widgets per page maximum
    • Combine widgets when possible
    • Remove unused widgets

  2. Optimize Images

    • Compress before upload
    • Use WebP format
    • Recommended max: 1920px wide
    • Use Elementor's built-in lazy load

  3. Font Loading

    • Limit Google Fonts to 2-3 families
    • Use system fonts when possible
    • Enable font preloading

  4. CSS Optimization

    • Set CSS Print Method to External File
    • Enable "Minify CSS Files"
    • Combine CSS files when possible

  5. Reduce Animations

    • Limit entrance animations
    • Use CSS animations over JS
    • Disable animations on mobile

Caching with Elementor

Recommended caching plugins:

Plugin Compatibility Notes
WP Rocket Excellent Auto-detects Elementor
LiteSpeed Cache Excellent ESI for dynamic content
W3 Total Cache Good Configure minify settings

Cache Settings:

  • Enable page caching
  • Enable browser caching
  • Don't cache logged-in users
  • Clear cache after Elementor edits

Common Questions

Can I use Elementor and Gutenberg together?

Yes! You can:

  • Use Elementor for some pages
  • Use Gutenberg (Block Editor) for others
  • Mix content types on same site

To Switch:

  • Click "Edit with Elementor" for Elementor editor
  • Click "Edit" for Gutenberg editor

Will Elementor pages work if I deactivate the plugin?

No. Elementor content requires the plugin to display. If deactivated:

  • Pages appear blank
  • Content is saved as shortcodes
  • Reactivating restores content

Best Practice: Don't use Elementor for critical pages if you might switch themes.

How do I match Elementor colors to my theme?

Method 1: Global Colors

  1. Elementor → Settings → Style
  2. Set colors under "Global Colors"
  3. Use Customizer values:
    • Primary: BuddyX Pro primary color
    • Secondary: BuddyX Pro secondary color
    • Text: Body text color
    • Accent: Link color

Method 2: Color Picker

Use eyedropper tool to pick colors from existing theme elements.

Can I export/import Elementor designs?

Yes, with Elementor Pro:

Export Template:

  1. Elementor → Template Library
  2. Find your template
  3. Click export icon
  4. Download JSON file

Import Template:

  1. Elementor → Template Library → Import
  2. Upload JSON file
  3. Template appears in library

How do I create a sticky header in Elementor?

For Elementor Headers:

  1. Edit header template
  2. Click section settings
  3. Advanced tab → Motion Effects
  4. Enable "Sticky"
  5. Set Sticky On: Top
  6. Choose sticky behavior

For Theme Header with Elementor:

Use BuddyX Pro sticky header instead:

  • Appearance → Customize → Site Header → Sticky Header
  • Enable and configure

Why are my Elementor pages loading slowly?

Common Causes:

  1. Too Many Widgets - Reduce to 20-30 per page
  2. Large Images - Compress and resize
  3. Google Fonts - Limit to 2-3 families
  4. No Caching - Install caching plugin
  5. Cheap Hosting - Upgrade to better server

Quick Fixes:

  • Enable lazy load for images
  • Use CSS print method: External File
  • Disable unused widgets in Elementor settings
  • Optimize database

Can I use BuddyX Pro header and Elementor content?

Yes! Use Elementor Full Width template:

  1. Edit page with Elementor
  2. Page Settings → Template
  3. Choose "Elementor Full Width"
  4. BuddyX Pro header/footer remain
  5. Content area is 100% Elementor

Recommended Configurations

For Marketing Sites

Pages to Build with Elementor:

  • Homepage
  • About page
  • Services/Products page
  • Contact page
  • Landing pages

Keep Default BuddyX Pro:

  • Blog archive
  • Single posts
  • 404 page
  • Search results

For Community Sites

Use Elementor For:

  • Homepage (welcome/features)
  • About/Team page
  • Resource library
  • Documentation pages

Keep BuddyX Pro Default:

  • All BuddyPress pages
  • Member profiles
  • Activity stream
  • Groups pages
  • Forums (bbPress)

For Course Platforms

Build with Elementor Pro:

  • Course archive page
  • Single course layout
  • Instructor page template
  • Student dashboard

Keep BuddyX Pro Default:

  • Lesson pages (LearnDash Focus Mode)
  • Quiz pages
  • Assignment pages
  • Profile pages

Related Settings

Got a question? We're a friendly team - happy to help.

Documentation: docs.wbcomdesigns.com Elementor Docs: elementor.com/help Video Tutorials: youtube.com/wbcomdesigns

Email Support: support@wbcomdesigns.com

Include: BuddyX Pro version, Elementor version, and link to your page for troubleshooting.