Skip to main content
Glama
element-builder-service.ts3.84 kB
// Elementor Element Builder Service - Create sections, columns, widgets import { logger } from '../../utils/logger.js'; import { ErrorHandler } from '../../utils/error-handler.js'; import { ElementorSection, ElementorColumn, ElementorWidget, ElementorContainer, ElementorSectionSettings, ElementorColumnSettings } from '../../types/elementor.js'; export class ElementorBuilderService { /** * Generate unique ID for Elementor elements */ private generateId(): string { return Math.random().toString(36).substring(2, 10); } /** * Create a new Elementor section */ createSection( columns: number = 1, settings: Partial<ElementorSectionSettings> = {} ): ElementorSection { return ErrorHandler.wrapAsync(async () => { logger.debug(`Creating section with ${columns} columns`); const columnElements: ElementorColumn[] = []; const columnSize = Math.floor(100 / columns); for (let i = 0; i < columns; i++) { columnElements.push(this.createColumn({ _column_size: columnSize, _inline_size: null })); } const section: ElementorSection = { id: this.generateId(), elType: 'section', isInner: false, settings: settings || {}, elements: columnElements }; logger.debug('Section created', { id: section.id, columns }); return section; }, 'ElementorBuilderService.createSection') as any; } /** * Create a new Elementor column */ createColumn(settings: Partial<ElementorColumnSettings> = {}): ElementorColumn { const column: ElementorColumn = { id: this.generateId(), elType: 'column', isInner: false, settings: { _column_size: 100, _inline_size: null, ...settings }, elements: [], widgetType: null }; return column; } /** * Create a new Elementor container (Flexbox) */ createContainer(settings: Record<string, any> = {}): ElementorContainer { const container: ElementorContainer = { id: this.generateId(), elType: 'container', isInner: false, settings: { content_width: 'boxed', ...settings }, elements: [], widgetType: null }; return container; } /** * Create a new Elementor widget */ createWidget( widgetType: string, settings: Record<string, any> = {} ): ElementorWidget { const widget: ElementorWidget = { id: this.generateId(), elType: 'widget', widgetType: widgetType, settings: settings || {}, elements: [] }; logger.debug(`Created widget`, { type: widgetType, id: widget.id }); return widget; } /** * Create common widget types with default settings */ createHeadingWidget(text: string, tag: string = 'h2'): ElementorWidget { return this.createWidget('heading', { title: text, header_size: tag, align: 'left' }); } createTextWidget(content: string): ElementorWidget { return this.createWidget('text-editor', { editor: content }); } createButtonWidget(text: string, link: string = '#'): ElementorWidget { return this.createWidget('button', { text: text, link: { url: link }, align: 'left', size: 'md' }); } createImageWidget(imageUrl: string, imageId?: number): ElementorWidget { return this.createWidget('image', { image: { url: imageUrl, id: imageId || 0 }, image_size: 'full' }); } createDividerWidget(): ElementorWidget { return this.createWidget('divider', { style: 'solid', weight: 1 }); } createSpacerWidget(size: number = 50): ElementorWidget { return this.createWidget('spacer', { space: { size: size } }); } }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mbrown1837/Ultimate-Elementor-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server