start_controls_section(
'hello_header_section',
[
'tab' => 'hello-settings-header',
'label' => esc_html__( 'Header', 'hello-elementor' ),
]
);
$this->add_control(
'hello_header_logo_display',
[
'type' => Controls_Manager::SWITCHER,
'label' => esc_html__( 'Site Logo', 'hello-elementor' ),
'default' => 'yes',
'label_on' => esc_html__( 'Show', 'hello-elementor' ),
'label_off' => esc_html__( 'Hide', 'hello-elementor' ),
]
);
$this->add_control(
'hello_header_tagline_display',
[
'type' => Controls_Manager::SWITCHER,
'label' => esc_html__( 'Tagline', 'hello-elementor' ),
'default' => 'yes',
'label_on' => esc_html__( 'Show', 'hello-elementor' ),
'label_off' => esc_html__( 'Hide', 'hello-elementor' ),
]
);
$this->add_control(
'hello_header_menu_display',
[
'type' => Controls_Manager::SWITCHER,
'label' => esc_html__( 'Menu', 'hello-elementor' ),
'default' => 'yes',
'label_on' => esc_html__( 'Show', 'hello-elementor' ),
'label_off' => esc_html__( 'Hide', 'hello-elementor' ),
]
);
$this->add_control(
'hello_header_disable_note',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => sprintf(
/* translators: %s: Link that opens the theme settings page. */
__( 'Note: Hiding all the elements, only hides them visually. To disable them completely go to Theme Settings .', 'hello-elementor' ),
admin_url( 'themes.php?page=hello-theme-settings' )
),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
'condition' => [
'hello_header_logo_display' => '',
'hello_header_tagline_display' => '',
'hello_header_menu_display' => '',
],
]
);
$this->add_control(
'hello_header_layout',
[
'type' => Controls_Manager::CHOOSE,
'label' => esc_html__( 'Layout', 'hello-elementor' ),
'options' => [
'inverted' => [
'title' => esc_html__( 'Inverted', 'hello-elementor' ),
'icon' => "eicon-arrow-$start",
],
'stacked' => [
'title' => esc_html__( 'Centered', 'hello-elementor' ),
'icon' => 'eicon-h-align-center',
],
'default' => [
'title' => esc_html__( 'Default', 'hello-elementor' ),
'icon' => "eicon-arrow-$end",
],
],
'toggle' => false,
'selector' => '.site-header',
'default' => 'default',
'separator' => 'before',
]
);
$this->add_responsive_control(
'hello_header_tagline_position',
[
'type' => Controls_Manager::CHOOSE,
'label' => esc_html__( 'Tagline Position', 'hello-elementor' ),
'options' => [
'before' => [
'title' => esc_html__( 'Before', 'hello-elementor' ),
'icon' => "eicon-arrow-$start",
],
'below' => [
'title' => esc_html__( 'Below', 'hello-elementor' ),
'icon' => 'eicon-arrow-down',
],
'after' => [
'title' => esc_html__( 'After', 'hello-elementor' ),
'icon' => "eicon-arrow-$end",
],
],
'toggle' => false,
'default' => 'below',
'selectors_dictionary' => [
'before' => 'flex-direction: row-reverse; align-items: center;',
'below' => 'flex-direction: column; align-items: stretch;',
'after' => 'flex-direction: row; align-items: center;',
],
'condition' => [
'hello_header_tagline_display' => 'yes',
'hello_header_logo_display' => 'yes',
],
'selectors' => [
'.site-header .site-branding' => '{{VALUE}}',
],
]
);
$this->add_responsive_control(
'hello_header_tagline_gap',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Tagline Gap', 'hello-elementor' ),
'size_units' => [ 'px', 'em ', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 100,
],
'em' => [
'max' => 10,
],
'rem' => [
'max' => 10,
],
],
'condition' => [
'hello_header_tagline_display' => 'yes',
'hello_header_logo_display' => 'yes',
],
'selectors' => [
'.site-header .site-branding' => 'gap: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'hello_header_width',
[
'type' => Controls_Manager::SELECT,
'label' => esc_html__( 'Width', 'hello-elementor' ),
'options' => [
'boxed' => esc_html__( 'Boxed', 'hello-elementor' ),
'full-width' => esc_html__( 'Full Width', 'hello-elementor' ),
],
'selector' => '.site-header',
'default' => 'boxed',
'separator' => 'before',
]
);
$this->add_responsive_control(
'hello_header_custom_width',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Content Width', 'hello-elementor' ),
'size_units' => [ '%', 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 2000,
],
'em' => [
'max' => 100,
],
'rem' => [
'max' => 100,
],
],
'condition' => [
'hello_header_width' => 'boxed',
],
'selectors' => [
'.site-header .header-inner' => 'width: {{SIZE}}{{UNIT}}; max-width: 100%;',
],
]
);
$this->add_responsive_control(
'hello_header_gap',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Side Margins', 'hello-elementor' ),
'size_units' => [ '%', 'px', 'em ', 'rem', 'vw', 'custom' ],
'default' => [
'size' => '0',
],
'range' => [
'px' => [
'max' => 100,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'.site-header' => 'padding-inline-end: {{SIZE}}{{UNIT}}; padding-inline-start: {{SIZE}}{{UNIT}}',
],
'conditions' => [
'relation' => 'and',
'terms' => [
[
'name' => 'hello_header_layout',
'operator' => '!=',
'value' => 'stacked',
],
],
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'hello_header_background',
'label' => esc_html__( 'Background', 'hello-elementor' ),
'types' => [ 'classic', 'gradient' ],
'separator' => 'before',
'selector' => '.site-header',
]
);
$this->end_controls_section();
$this->start_controls_section(
'hello_header_logo_section',
[
'tab' => 'hello-settings-header',
'label' => esc_html__( 'Site Logo', 'hello-elementor' ),
'conditions' => [
'relation' => 'and',
'terms' => [
[
'name' => 'hello_header_logo_display',
'operator' => '=',
'value' => 'yes',
],
],
],
]
);
$this->add_control(
'hello_header_logo_type',
[
'label' => esc_html__( 'Type', 'hello-elementor' ),
'type' => Controls_Manager::SELECT,
'default' => ( has_custom_logo() ? 'logo' : 'title' ),
'options' => [
'logo' => esc_html__( 'Logo', 'hello-elementor' ),
'title' => esc_html__( 'Title', 'hello-elementor' ),
],
'frontend_available' => true,
]
);
$this->add_responsive_control(
'hello_header_logo_width',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Logo Width', 'hello-elementor' ),
'description' => sprintf(
/* translators: %s: Link that opens Elementor's "Site Identity" panel. */
__( 'Go to Site Identity to manage your site\'s logo', 'hello-elementor' ),
"javascript:\$e.route('panel/global/settings-site-identity')"
),
'size_units' => [ '%', 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 1000,
],
'em' => [
'max' => 100,
],
'rem' => [
'max' => 100,
],
],
'condition' => [
'hello_header_logo_display' => 'yes',
'hello_header_logo_type' => 'logo',
],
'selectors' => [
'.site-header .site-branding .site-logo img' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'hello_header_title_color',
[
'label' => esc_html__( 'Text Color', 'hello-elementor' ),
'type' => Controls_Manager::COLOR,
'condition' => [
'hello_header_logo_display' => 'yes',
'hello_header_logo_type' => 'title',
],
'selectors' => [
'.site-header .site-title a' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'hello_header_title_typography',
'label' => esc_html__( 'Typography', 'hello-elementor' ),
'description' => sprintf(
/* translators: %s: Link that opens Elementor's "Site Identity" panel. */
__( 'Go to Site Identity to manage your site\'s title', 'hello-elementor' ),
"javascript:\$e.route('panel/global/settings-site-identity')"
),
'condition' => [
'hello_header_logo_display' => 'yes',
'hello_header_logo_type' => 'title',
],
'selector' => '.site-header .site-title',
]
);
$this->add_control(
'hello_header_title_link',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => sprintf(
/* translators: %s: Link that opens Elementor's "Site Identity" panel. */
__( 'Go to Site Identity to manage your site\'s title', 'hello-elementor' ),
"javascript:\$e.route('panel/global/settings-site-identity')"
),
'content_classes' => 'elementor-control-field-description',
'condition' => [
'hello_header_logo_display' => 'yes',
'hello_header_logo_type' => 'title',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'hello_header_tagline',
[
'tab' => 'hello-settings-header',
'label' => esc_html__( 'Tagline', 'hello-elementor' ),
'conditions' => [
'relation' => 'and',
'terms' => [
[
'name' => 'hello_header_tagline_display',
'operator' => '=',
'value' => 'yes',
],
],
],
]
);
$this->add_control(
'hello_header_tagline_color',
[
'label' => esc_html__( 'Text Color', 'hello-elementor' ),
'type' => Controls_Manager::COLOR,
'condition' => [
'hello_header_tagline_display' => 'yes',
],
'selectors' => [
'.site-header .site-description' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'hello_header_tagline_typography',
'label' => esc_html__( 'Typography', 'hello-elementor' ),
'condition' => [
'hello_header_tagline_display' => 'yes',
],
'selector' => '.site-header .site-description',
]
);
$this->add_control(
'hello_header_tagline_link',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => sprintf(
/* translators: %s: Link that opens Elementor's "Site Identity" panel. */
__( 'Go to Site Identity to manage your site\'s tagline', 'hello-elementor' ),
"javascript:\$e.route('panel/global/settings-site-identity')"
),
'content_classes' => 'elementor-control-field-description',
]
);
$this->end_controls_section();
$this->start_controls_section(
'hello_header_menu_tab',
[
'tab' => 'hello-settings-header',
'label' => esc_html__( 'Menu', 'hello-elementor' ),
'conditions' => [
'relation' => 'and',
'terms' => [
[
'name' => 'hello_header_menu_display',
'operator' => '=',
'value' => 'yes',
],
],
],
]
);
$available_menus = wp_get_nav_menus();
$menus = [ '0' => esc_html__( '— Select a Menu —', 'hello-elementor' ) ];
foreach ( $available_menus as $available_menu ) {
$menus[ $available_menu->term_id ] = $available_menu->name;
}
if ( 1 === count( $menus ) ) {
$this->add_control(
'hello_header_menu_notice',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => '' . esc_html__( 'There are no menus in your site.', 'hello-elementor' ) . '
' . sprintf( __( 'Go to Menus screen to create one.', 'hello-elementor' ), admin_url( 'nav-menus.php?action=edit&menu=0' ) ),
'separator' => 'after',
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
]
);
} else {
$this->add_control(
'hello_header_menu',
[
'label' => esc_html__( 'Menu', 'hello-elementor' ),
'type' => Controls_Manager::SELECT,
'options' => $menus,
'default' => array_keys( $menus )[0],
'description' => sprintf( __( 'Go to the Menus screen to manage your menus.', 'hello-elementor' ), admin_url( 'nav-menus.php' ) ),
]
);
$this->add_control(
'hello_header_menu_warning',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => esc_html__( 'Changes will be reflected in the preview only after the page reloads.', 'hello-elementor' ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
]
);
$this->add_control(
'hello_header_menu_layout',
[
'label' => esc_html__( 'Menu Layout', 'hello-elementor' ),
'type' => Controls_Manager::SELECT,
'default' => 'horizontal',
'options' => [
'horizontal' => esc_html__( 'Horizontal', 'hello-elementor' ),
'dropdown' => esc_html__( 'Dropdown', 'hello-elementor' ),
],
'frontend_available' => true,
]
);
$dropdown_options = [];
$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
$selected_breakpoints = [ 'mobile', 'tablet' ];
foreach ( $active_breakpoints as $breakpoint_key => $breakpoint_instance ) {
if ( ! in_array( $breakpoint_key, $selected_breakpoints, true ) ) {
continue;
}
$dropdown_options[ $breakpoint_key ] = sprintf(
/* translators: 1: Breakpoint label, 2: Breakpoint value. */
esc_html__( '%1$s (> %2$dpx)', 'hello-elementor' ),
$breakpoint_instance->get_label(),
$breakpoint_instance->get_value()
);
}
$dropdown_options['none'] = esc_html__( 'None', 'hello-elementor' );
$this->add_control(
'hello_header_menu_dropdown',
[
'label' => esc_html__( 'Breakpoint', 'hello-elementor' ),
'type' => Controls_Manager::SELECT,
'default' => 'tablet',
'options' => $dropdown_options,
'selector' => '.site-header',
'condition' => [
'hello_header_menu_layout!' => 'dropdown',
],
]
);
$this->add_control(
'hello_header_menu_color',
[
'label' => esc_html__( 'Color', 'hello-elementor' ),
'type' => Controls_Manager::COLOR,
'condition' => [
'hello_header_menu_display' => 'yes',
],
'selectors' => [
'.site-header .site-navigation ul.menu li a' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'hello_header_menu_toggle_color',
[
'label' => esc_html__( 'Toggle Color', 'hello-elementor' ),
'type' => Controls_Manager::COLOR,
'condition' => [
'hello_header_menu_display' => 'yes',
],
'selectors' => [
'.site-header .site-navigation-toggle .site-navigation-toggle-icon' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'hello_header_menu_typography',
'label' => esc_html__( 'Typography', 'hello-elementor' ),
'condition' => [
'hello_header_menu_display' => 'yes',
],
'selector' => '.site-header .site-navigation .menu li',
]
);
}
$this->end_controls_section();
}
public function on_save( $data ) {
// Save chosen header menu to the WP settings.
if ( isset( $data['settings']['hello_header_menu'] ) ) {
$menu_id = $data['settings']['hello_header_menu'];
$locations = get_theme_mod( 'nav_menu_locations' );
$locations['menu-1'] = (int) $menu_id;
set_theme_mod( 'nav_menu_locations', $locations );
}
}
public function get_additional_tab_content() {
$content_template = '
%3$s
%6$s