claude-plugins/wordpress/skills/elementor/SKILL.md

name, description, layer

name	description	layer
elementor	Desenvolvimento avançado com Elementor Pro e ecossistema Crocoblock. Cria widgets custom, configura Theme Builder, automatiza deploys, manipula _elementor_data via MySQL, REST API, Dynamic Tags e cache CSS.	wiki

/elementor - Elementor Development

Desenvolvimento avançado com Elementor Pro e Crocoblock.

Quando Usar

• Criar widgets Elementor customizados
• Configurar Theme Builder
• Desenvolver com Crocoblock (JetEngine, JetWooBuilder)
• Optimizar performance Elementor
• Troubleshooting Elementor

Contexto NotebookLM

ANTES de executar, consultar notebooks para contexto especializado:

Notebook	ID	Consultar quando
WordPress e Elementor	5be0d1a6	Sempre

mcp__notebooklm__notebook_query({
  notebook_id: "5be0d1a6-00f2-4cd9-b835-978cb7721601",
  query: "<adaptar ao contexto do pedido do utilizador>"
})

Integrar insights do NotebookLM nas recomendações e decisões.

---

Estrutura Custom Widget

<?php
/**
 * Custom Elementor Widget
 *
 * @author Descomplicar® Crescimento Digital
 * @link https://descomplicar.pt
 * @copyright 2026 Descomplicar®
 */

class Custom_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'custom-widget';
    }

    public function get_title() {
        return 'Custom Widget';
    }

    public function get_icon() {
        return 'eicon-code';
    }

    public function get_categories() {
        return ['general'];
    }

    protected function register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => 'Content',
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => 'Title',
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'Title',
            ]
        );

        $this->end_controls_section();

        // Style controls
        $this->start_controls_section(
            'style_section',
            [
                'label' => 'Style',
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => 'Color',
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .title' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="custom-widget">
            <h2 class="title"><?php echo esc_html($settings['title']); ?></h2>
        </div>
        <?php
    }
}

Registar Widget

// functions.php ou plugin
add_action('elementor/widgets/register', function($widgets_manager) {
    require_once(__DIR__ . '/widgets/custom-widget.php');
    $widgets_manager->register(new \Custom_Widget());
});

Theme Builder

Header

Site Logo | Navigation Menu | Search | Cart Icon
Sticky: Yes | Transparent: Optional

Footer

4 Columns: About | Links | Contact | Social
Copyright row

Single Post

Featured Image
Title + Meta (Author, Date, Categories)
Content
Author Box
Related Posts

Archive

Title
Filters (JetSmartFilters)
Post Grid/List (JetEngine)
Pagination

Crocoblock Plugins

Plugin	Uso Principal
JetEngine	CPT, Meta Fields, Dynamic Content, Listings
JetElements	Widgets adicionais (Timeline, Progress Bar)
JetSmartFilters	Filtros AJAX para listings
JetWooBuilder	Templates WooCommerce avançados
JetPopup	Popups com triggers avançados
JetTabs	Tabs, Accordions, Toggle
JetFormBuilder	Forms com lógica condicional

JetEngine - Custom Post Type

// Via código (alternativa ao JetEngine UI)
add_action('init', function() {
    register_post_type('portfolio', [
        'labels' => [
            'name' => 'Portfolio',
            'singular_name' => 'Project'
        ],
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'show_in_rest' => true,
    ]);
});

// Meta boxes via JetEngine UI recomendado

Performance Tips

1. Lazy Load

// Activar lazy load para imagens
add_filter('wp_lazy_loading_enabled', '__return_true');

2. Desactivar Google Fonts (se usar fonts locais)

add_filter('elementor/frontend/print_google_fonts', '__return_false');

3. Limitar revisões

// wp-config.php
define('WP_POST_REVISIONS', 3);

4. Usar Flexbox Container

Preferir: Flexbox Container (moderno)
Evitar: Section > Column (legacy, mais pesado)

5. Minimizar Widgets

Regra: M