start_controls_section( 'content_section', [ 'label' => esc_html__('Content', 'business-roy'), ] ); $this->add_control( 'layout', [ 'label' => esc_html__('Layout', 'business-roy'), 'type' => Controls_Manager::SELECT, 'label_block' => true, 'default' => 'style1', 'options' => [ 'style1' => esc_html__('Style 1', 'business-roy'), 'style3' => esc_html__('Style 3', 'business-roy'), ], ] ); $this->add_control( 'custom_height', [ 'label' => esc_html__('Custom Image Height', 'business-roy'), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__('Yes', 'business-roy'), 'label_off' => esc_html__('No', 'business-roy'), 'return_value' => 'yes', ] ); $this->add_responsive_control( 'image_height', [ 'label' => esc_html__('Image Height', 'business-roy'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 200, 'max' => 650, 'step' => 10 ], ], 'default' => [ 'unit' => 'px', 'size' => 375, ], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-item img' => 'height: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'custom_height' => 'yes', ], ] ); $this->add_control( 'icon', [ 'label' => esc_html__('Icon', 'business-roy'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fab fa-artstation', 'library' => 'solid', ], ] ); $this->add_control( 'image',[ 'label' => esc_html__( 'Choose Image', 'business-roy' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ] ] ); $this->add_group_control( Group_Control_Image_Size::get_type(),[ 'name' => 'graphic_image', // Actually its `image_size` 'default' => 'full', 'exclude' => ['custom'], 'condition' => [ 'image[id]!' => '', ], ] ); $this->add_control( 'title', [ 'label' => esc_html__('Title', 'business-roy'), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'placeholder' => esc_html__('Enter your title here', 'business-roy'), 'default' => esc_html__('Highlight Service Title', 'business-roy') ] ); $this->add_control( 'content', [ 'label' => esc_html__('Content', 'business-roy'), 'type' => Controls_Manager::TEXTAREA, 'rows' => 10, 'placeholder' => esc_html__('Type your description here', 'business-roy'), 'default' => esc_html__('End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy'), ] ); $this->add_control( 'link_text', [ 'label' => esc_html__('Button Text', 'business-roy'), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'placeholder' => esc_html__('Enter the button text here', 'business-roy'), 'default' => esc_html__('Read More', 'business-roy') ] ); $this->add_control( 'link', [ 'label' => esc_html__('Button Link', 'business-roy'), 'type' => Controls_Manager::URL, 'placeholder' => esc_html__('Enter URL', 'business-roy'), 'show_external' => true, 'default' => [ 'url' => '#', 'is_external' => false, 'nofollow' => false, ], ] ); $this->add_control( 'link_icon',[ 'label' => esc_html__( 'Link Icon', 'business-roy' ), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'label_block' => false, 'default' => [ 'library' => 'fa-solid', 'value' => 'fas fa-long-arrow-alt-right', ], 'skin_settings' => [ 'inline' => [ 'none' => [ 'label' => 'Default', 'icon' => '', ], 'icon' => [ 'icon' => 'eicon-long-arrow-right', ], ], ], 'recommended' => [ 'fa-regular' => [ 'arrow-alt-circle-right', ], 'fa-solid' => [ 'angle-double-right', 'angle-right', 'arrow-alt-circle-right', 'arrow-circle-right', 'arrow-right', 'caret-right', 'chevron-circle-right', 'chevron-right', 'long-arrow-alt-right', ], ], 'condition' => [ 'link[url]!' => '', 'link_text!' => '', ], ] ); $this->add_control( 'title_html_tag', [ 'label' => esc_html__('Title HTML Tag', 'business-roy'), 'type' => Controls_Manager::SELECT, 'label_block' => true, 'default' => 'h3', 'options' => [ 'h1' => esc_html__('H1', 'business-roy'), 'h2' => esc_html__('H2', 'business-roy'), 'h3' => esc_html__('H3', 'business-roy'), 'h4' => esc_html__('H4', 'business-roy'), 'h5' => esc_html__('H5', 'business-roy'), 'h6' => esc_html__('H6', 'business-roy'), 'div' => esc_html__('div', 'business-roy'), 'span' => esc_html__('span', 'business-roy'), 'p' => esc_html__('p', 'business-roy') ], ] ); $this->end_controls_section(); //(style) $this->start_controls_section( 'general_styles', [ 'label' => esc_html__('General', 'business-roy'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'front_view_bg_color', [ 'label' => esc_html__('Overlay Background Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => ['layout' => ['style1', 'style3']], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area.style1 .iktheme-highlight-item .iktheme-top-content-wrap, {{WRAPPER}} .iktheme-highlight-area.style3 .iktheme-highlight-item::after' => 'background-color: {{VALUE}}', ] ] ); $this->add_control( 'back_view_bg_color', [ 'label' => esc_html__('Back View Overlay Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => ['layout' => ['style1', 'style3']], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area.style1 .iktheme-highlight-item .iktheme-bottom-content-wrap, {{WRAPPER}} .iktheme-highlight-area.style3 .iktheme-highlight-item .iktheme-top-content-wrap, {{WRAPPER}} .iktheme-highlight-area.style3 .iktheme-highlight-item .iktheme-bottom-content-wrap' => 'background-color: {{VALUE}}', ] ] ); $this->add_responsive_control( 'text_align',[ 'label' => esc_html__( 'Alignment', 'business-roy' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'center', 'options' => [ 'start' => [ 'title' => esc_html__( 'Left', 'business-roy' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'business-roy' ), 'icon' => 'eicon-text-align-center', ], 'end' => [ 'title' => esc_html__( 'Right', 'business-roy' ), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .iktheme-top-content-wrap, {{WRAPPER}} .iktheme-bottom-content-wrap' => 'text-align: {{VALUE}}; align-items: {{VALUE}};' ], ] ); $this->add_responsive_control( 'item_space',[ 'label' => esc_html__( 'Content Spacing', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 16, 'unit' => 'px', ], 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'min' => 0, 'max' => 10, ], 'rem' => [ 'min' => 0, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .iktheme-top-content-wrap' => 'gap: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'icon_styles', [ 'label' => esc_html__('Icon', 'business-roy'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'icon_bg_color', [ 'label' => esc_html__('Background Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => ['layout' => ['style1']], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box' => 'background-color: {{VALUE}}', ] ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__('Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box i' => 'color: {{VALUE}}', '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box svg' => 'fill: {{VALUE}}', ], ] ); $this->add_responsive_control( 'icon_size',[ 'label' => esc_html__( 'Icon Size', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 150, 'step' => 1, ], 'em' => [ 'min' => 0, 'max' => 10, ], 'rem' => [ 'min' => 0, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box' => 'font-size:{{SIZE}}{{UNIT}}; height:{{SIZE}}{{UNIT}}; width:{{SIZE}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'icon_padding',[ 'label' => esc_html__( 'Padding', 'business-roy' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'condition' => ['layout' => ['style1']], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_radius',[ 'label' => esc_html__( 'Radius', 'business-roy' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ '%', 'px', 'em', 'rem', 'vw', 'custom' ], 'condition' => ['layout' => ['style1']], 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} / {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'title_styles', [ 'label' => esc_html__('Title', 'business-roy'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_color', [ 'label' => esc_html__('Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-title' => 'color: {{VALUE}}', '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-title a' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'label' => esc_html__('Typography', 'business-roy'), 'selector' => '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-title', ] ); $this->add_group_control( Group_Control_Text_Stroke::get_type(),[ 'name' => 'text_stroke', 'selector' => '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-title', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(),[ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-title', ] ); $this->end_controls_section(); $this->start_controls_section( 'excerpt_styles', [ 'label' => esc_html__('Content', 'business-roy'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'excerpt_color', [ 'label' => esc_html__('Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-excerpt' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'excerpt_typography', 'label' => esc_html__('Typography', 'business-roy'), 'selector' => '{{WRAPPER}} .iktheme-highlight-area .iktheme-highlight-excerpt', ] ); $this->end_controls_section(); $this->start_controls_section( 'content_button',[ 'label' => esc_html__( 'Button (Read More)', 'business-roy' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(),[ 'name' => 'button_typography', 'selector' => '{{WRAPPER}} .iktheme-button', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(),[ 'name' => 'button_text_shadow', 'selector' => '{{WRAPPER}} .iktheme-button', ] ); $this->add_responsive_control( 'button_padding',[ 'label' => esc_html__( 'Padding', 'business-roy' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .iktheme-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'button_border_radius',[ 'label' => esc_html__( 'Border Radius', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'max' => 10, ], 'rem' => [ 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .iktheme-button' => 'border-radius: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'heading_primary_button',[ 'type' => Controls_Manager::HEADING, 'label' => esc_html__( 'Primary Button', 'business-roy' ), 'separator' => 'before', ] ); $this->start_controls_tabs( 'primary_button_tabs' ); $this->start_controls_tab( 'normal',[ 'label' => esc_html__( 'Normal', 'business-roy' ), ] ); $this->add_control( 'button_text_color',[ 'label' => esc_html__( 'Text Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .iktheme-button, {{WRAPPER}} .iktheme-button.iktheme-button-noborder .iktheme-link-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(),[ 'name' => 'button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => '{{WRAPPER}} .iktheme-button', 'fields_options' => [ 'background' => [ 'default' => 'classic', ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(),[ 'name' => 'button_border_color', 'selector' => '{{WRAPPER}} .iktheme-button', 'default' => 'none', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'hover',[ 'label' => esc_html__( 'Hover', 'business-roy' ), ] ); $this->add_control( 'button_hover_text_color',[ 'label' => esc_html__( 'Text Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .iktheme-button:hover, {{WRAPPER}} .iktheme-button.iktheme-button-noborder:hover .iktheme-link-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(),[ 'name' => 'button_hover_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => '{{WRAPPER}} .iktheme-button.iktheme-button-noborder::before', 'fields_options' => [ 'background' => [ 'default' => 'classic', ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(),[ 'name' => 'button_hover_border_color', 'selector' => '{{WRAPPER}} .iktheme-button:hover', 'default' => 'none', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } /** Render Layout */ protected function render() { $settings = $this->get_settings_for_display(); $layout = $settings['layout']; $wrapper_tag = 'div'; $button_tag = 'a'; $this->add_link_attributes( "link", $settings['link'] ); $this->add_link_attributes( "button", $settings['link'] ); $image_id = $settings['image']['id']; $custom_height_class = $settings['custom_height'] == 'yes' ? 'iktheme-custom-height' : ''; $this->add_render_attribute('wrapper', 'class', [ 'iktheme-highlight-area', $layout, $custom_height_class ] ); $this->add_render_attribute( 'title', 'class', ['iktheme-highlight-title'] ); $this->add_render_attribute( 'description', 'class', ['iktheme-highlight-excerpt'] ); $this->add_render_attribute( 'button_wrap', 'class', ['iktheme-button-wrap'] ); $this->add_render_attribute( 'button', 'class', ['iktheme-button','iktheme-button-noborder'] ); ?>
print_render_attribute_string( 'wrapper' ); ?>>
'true']); ?>
< print_render_attribute_string( 'title' ); ?>> < print_render_attribute_string( "link" ); ?>> > >
print_render_attribute_string( 'description' ); ?>>
< print_render_attribute_string( 'title' ); ?>> < print_render_attribute_string( "link" ); ?>> > >
print_render_attribute_string( 'description' ); ?>>
print_render_attribute_string( 'button_wrap' ); ?>> < print_render_attribute_string( "button" ); ?>> 'true']); ?> >