Elementor Page Builder

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

Theme Colors Integration

Elementor inherits BuddyX Pro color scheme:

Automatic Color Sync:

• Primary color → Elementor primary color
• Secondary color → Elementor secondary color
• Text color → Elementor text color
• Link color → Elementor link color

To Use Theme Colors in Elementor:

1. Select any widget
2. Go to Style tab
3. Click color picker
4. Choose from Global Colors at top
5. Colors match your theme customizer settings

Typography Integration

Elementor respects BuddyX Pro font settings:

Font Inheritance:

• Body font applies to paragraph widgets
• Heading font applies to heading widgets
• Menu font applies to navigation widgets

To Match Theme Typography:

1. Go to Elementor → Settings → Style
2. Set Primary Font to match BuddyX Pro body font
3. Set Secondary Font to match BuddyX Pro heading font
4. Or leave blank to inherit theme fonts

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:

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.

Setting Up Theme Builder

Requires Elementor Pro.

1. Go to Elementor → Theme Builder
2. Choose template type:

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):

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:
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
[bpactivitystream]	Activity feed
[bpmemberlist]	Member directory
[bpgrouplist]	Group directory
[bploginform]	Login form
[bpregistrationform]	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:

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
2. Optimize Images
3. Font Loading
4. CSS Optimization
5. Reduce Animations

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:

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

• Site Layout Options – Container width settings
• Header Layouts – Default header options
• Footer Settings – Default footer options
• Typography Settings – Font configuration

---

Need 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.