start_controls_section(
'general_section',
[
'label' => __( 'General', 'uae' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'timeline_title',
[
'label' => __( 'Title', 'uae' ),
'type' => \Elementor\Controls_Manager::TEXT,
'description' => 'main title of timeline See Demo',
]
);
$this->add_control(
'title_clr',
[
'label' => __( 'Title Color', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#fff',
]
);
$this->add_control(
'title_bg',
[
'label' => __( 'Title Background', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#dd3333',
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'label' => __('Typography', 'uae'),
'selector' => '{{WRAPPER}} .mega-timeline-title span',
]
);
$this->end_controls_section();
$this->start_controls_section(
'centerline_section',
[
'label' => __( 'Timeline Center Line', 'uae' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'line_width',
[
'label' => esc_html__('Line Width (px)', 'uae'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => '5',
'size_units' => ['px'],
'selectors' => [
'{{WRAPPER}} .#cd-timeline .timeline-line' => 'width: {{VALUE}}px !important;',
],
]
);
$this->add_control(
'line_bg',
[
'label' => __( 'Line Background', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#000',
]
);
$this->end_controls_section();
$this->start_controls_section(
'typo_section',
[
'label' => __( 'Typography', 'uae' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'titles_typography',
'label' => __('Title Typography', 'uae'),
'selector' => '{{WRAPPER}} .cd-timeline-content h2',
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'date_typography',
'label' => __('Date Typography', 'uae'),
'selector' => '{{WRAPPER}} .cd-timeline-content .cd-date',
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'content_typography',
'label' => __('Content Typography', 'uae'),
'selector' => '{{WRAPPER}} .cd-timeline-content .cd-timeline-content-area *',
]
);
$this->add_control(
'icon_size',
[
'label' => __( 'Icon Font Size (px)', 'uae' ),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => '25',
'size_units' => ['px'],
'selectors' => [
'{{WRAPPER}} .cd-timeline-block .cd-timeline-img i' => 'font-size: {{VALUE}}px',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'uae_section_pro',
[
'label' => __( 'Go Premium for More Features', 'uae' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'asdasdsadasasdsaf',
[
'label' => __( 'Unlock more possibilities', 'uae' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => [
'1' => [
'title' => __( '', 'uae' ),
'icon' => 'fa fa-unlock-alt',
],
],
'default' => '1',
'description' => 'Get the Pro version for more stunning elements and customization options.'
]
);
$this->end_controls_section();
/* ======== Content Section
============================================================ */
$this->start_controls_section(
'content_section',
[
'label' => esc_html__('Content', 'uae' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'list_items',
[
'label' => __('Features', 'uae'),
'type' => \Elementor\Controls_Manager::REPEATER,
'fields' => [
[
'name' => 'date',
'label' => __('Date', 'uae'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('January 28, 2016', 'uae'),
'dynamic' => [
'active' => true,
],
],
[
'name' => 'date_clr',
'label' => __( 'Date Color', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#f12945',
'dynamic' => [
'active' => true,
],
],
[
'name' => 'center_sec',
'label' => __('Timeline Center', 'uae'),
'type' => \Elementor\Controls_Manager::HEADING,
'separator' => 'before',
],
[
'name' => 'style',
'label' => __( 'Select Style', 'uae' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => [
'fonticon' => esc_html__('Font Icon', 'uae'),
'dot' => esc_html__('Only Dot', 'uae'),
],
'default' => 'fonticon',
'dynamic' => [
'active' => true,
],
],
[
'name' => 'icon',
'label' => __('Font Icon', 'uae'),
'type' => \Elementor\Controls_Manager::ICONS,
'default' => [
'value' => 'far fa-clock',
'library' => 'fa-solid',
],
'condition' => [
'style' => 'fonticon'
]
],
[
'name' => 'icon_bg',
'label' => __( 'Icon Background', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#f12945',
'dynamic' => [
'active' => true,
],
],
[
'name' => 'content_styling',
'label' => __('Timeline Content', 'uae'),
'type' => \Elementor\Controls_Manager::HEADING,
'separator' => 'before',
],
[
'name' => 'timeline_title',
'label' => __('Title', 'uae'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Verticall Timeline', 'uae'),
// 'label_block' => true,
],
[
'name' => 'maintitle_clr',
'label' => __( 'Title Color', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#fff',
],
[
'name' => 'arrow_clr',
'label' => __( '[Title + Arrow] Background', 'uae' ),
'type' => \Elementor\Controls_Manager::COLOR,
'input_type' => 'color',
'default' => '#f12945',
],
[
'name' => 'image',
'label' => esc_html( 'After Image', 'uae' ),
'type' => \Elementor\Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
],
[
'name' => 'content',
'label' => __( 'Content Details', 'uae' ),
'type' => \Elementor\Controls_Manager::WYSIWYG,
'default' => 'Add heading, details, pictures or video url',
'dynamic' => [
'active' => true,
],
],
],
'title_field' => '{{{ date }}}',
]
);
$this->end_controls_section();
}
/**
* Render oEmbed widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
global $css_path; ?>