如何在Elementor中展示服务？需Elementor Pro自定义服务标签页控件

1. 利用Elementor内置样式控件扩展 #

Elementor Pro的默认标签小部件本身提供了基础自定义选项：

• 在「样式」面板中，可自定义标签的背景色、文字颜色、边框半径、内边距、字体样式，以及激活状态的专属样式
• 若需要hover效果、渐变背景这类精细控制，直接在「高级」>「自定义CSS」中添加对应样式代码

2. 自定义CSS增强样式控制 #

如果内置样式不够用，给标签小部件添加自定义CSS类后编写专属样式：

1. 在标签小部件的「高级」>「CSS类」中输入类名，比如service-custom-tabs
2. 进入WordPress后台「外观」>「自定义」>「额外CSS」，添加以下示例代码（可按需修改）：

/* 标签标题基础样式 */
.service-custom-tabs .elementor-tab-title {
    padding: 10px 20px;
    border-radius: 6px 6px 0 0;
    margin-right: 8px;
    transition: all 0.2s ease-in-out;
}
/* 鼠标悬停效果 */
.service-custom-tabs .elementor-tab-title:hover {
    background-color: #f8f9fa;
    color: #2d3748;
}
/* 激活状态样式 */
.service-custom-tabs .elementor-tab-title.elementor-active {
    background-color: #2b6cb0;
    color: #ffffff;
    border-bottom: 2px solid #2b6cb0;
}

3. 开发自定义标签小部件（适合有开发能力的场景） #

如果需要添加图标选择、动态内容绑定这类功能控件，可通过Elementor API创建自定义小部件：
将以下代码添加到主题的functions.php文件或自定义插件中：

add_action('elementor/widgets/widgets_registered', function() {
    class Custom_Service_Tabs extends \Elementor\Widget_Base {
        public function get_name() { return 'custom_service_tabs'; }
        public function get_title() { return '自定义服务标签页'; }
        public function get_icon() { return 'eicon-tabs'; }
        public function get_categories() { return ['general']; }

        protected function _register_controls() {
            // 内容控件区
            $this->start_controls_section(
                'tabs_content',
                ['label' => '服务标签配置', 'tab' => \Elementor\Controls_Manager::TAB_CONTENT]
            );

            $repeater = new \Elementor\Repeater();
            // 添加标签标题控件
            $repeater->add_control(
                'tab_title',
                ['label' => '标签标题', 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '服务项目']
            );
            // 添加图标选择控件
            $repeater->add_control(
                'tab_icon',
                ['label' => '标签图标', 'type' => \Elementor\Controls_Manager::ICONS, 'default' => ['value' => 'fas fa-check', 'library' => 'fa-solid']]
            );
            // 添加服务内容控件
            $repeater->add_control(
                'tab_content',
                ['label' => '服务详情', 'type' => \Elementor\Controls_Manager::WYSIWYG, 'default' => '服务内容描述']
            );

            $this->add_control(
                'tabs_list',
                [
                    'label' => '服务标签列表',
                    'type' => \Elementor\Controls_Manager::REPEATER,
                    'fields' => $repeater->get_controls(),
                    'default' => [['tab_title' => '基础服务'], ['tab_title' => '增值服务']],
                    'title_field' => '{{{ tab_title }}}'
                ]
            );
            $this->end_controls_section();

            // 样式控件区（可按需添加更多样式控制）
            $this->start_controls_section(
                'tabs_style',
                ['label' => '标签样式', 'tab' => \Elementor\Controls_Manager::TAB_STYLE]
            );
            $this->add_control(
                'active_tab_color',
                ['label' => '激活标签背景色', 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#2b6cb0']
            );
            $this->end_controls_section();
        }

        protected function render() {
            $settings = $this->get_settings_for_display();
            ?>
            <div class="custom-service-tabs-wrapper">
                <div class="tabs-nav">
                    <?php foreach($settings['tabs_list'] as $idx => $tab): ?>
                        <button class="tab-nav-item <?php echo $idx === 0 ? 'active' : '' ?>" data-tab="<?php echo $idx ?>">
                            <?php \Elementor\Icons_Manager::render_icon($tab['tab_icon'], ['aria-hidden' => 'true']); ?>
                            <span><?php echo $tab['tab_title'] ?></span>
                        </button>
                    <?php endforeach; ?>
                </div>
                <div class="tabs-content">
                    <?php foreach($settings['tabs_list'] as $idx => $tab): ?>
                        <div class="tab-content-item <?php echo $idx === 0 ? 'active' : '' ?>" id="tab-<?php echo $idx ?>">
                            <?php echo $tab['tab_content'] ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <script>
                // 标签切换逻辑
                document.querySelectorAll('.tab-nav-item').forEach(item => {
                    item.addEventListener('click', () => {
                        const tabIdx = item.getAttribute('data-tab');
                        // 移除所有激活状态
                        document.querySelectorAll('.tab-nav-item').forEach(i => i.classList.remove('active'));
                        document.querySelectorAll('.tab-content-item').forEach(c => c.classList.remove('active'));
                        // 添加当前激活状态
                        item.classList.add('active');
                        document.getElementById(`tab-${tabIdx}`).classList.add('active');
                    });
                });
            </script>
            <style>
                .custom-service-tabs-wrapper .tabs-nav { display: flex; gap: 10px; margin-bottom: 20px; }
                .custom-service-tabs-wrapper .tab-nav-item {
                    padding: 10px 18px; border: none; border-radius: 6px;
                    background-color: #f1f1f1; cursor: pointer;
                    display: flex; align-items: center; gap: 8px;
                }
                .custom-service-tabs-wrapper .tab-nav-item.active {
                    background-color: <?php echo $settings['active_tab_color'] ?>; color: #fff;
                }
                .custom-service-tabs-wrapper .tab-content-item { display: none; }
                .custom-service-tabs-wrapper .tab-content-item.active { display: block; }
            </style>
            <?php
        }
    }
    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Custom_Service_Tabs());
});

添加后，在Elementor编辑器的「常规」分类下就能找到「自定义服务标签页」小部件，拥有图标选择、内容编辑、激活颜色自定义等专属控件。

4. 结合自定义字段实现动态内容 #

如果需要批量管理服务内容，可搭配ACF插件：

• 安装并激活Advanced Custom Fields，创建包含服务标题、详情、图标等字段的字段组，关联到对应页面或自定义文章类型
• 在Elementor标签小部件的内容区域，使用「动态标签」选择ACF字段，实现服务内容的动态填充，同时仍可通过Elementor样式面板自定义布局

内容的提问来源于stack exchange，提问作者Stefanie Adler