Make new elementor component

wp-content/plugins/elementor-addon/elementor-addon.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Elementor Addon
+ * Description: Simple hello world widgets for Elementor.
+ * Version:     1.0.0
+ * Author:      Elementor Developer
+ * Author URI:  https://developers.elementor.com/
+ * Text Domain: elementor-addon
+ *
+ * Requires Plugins: elementor
+ * Elementor tested up to: 3.21.0
+ * Elementor Pro tested up to: 3.21.0
+ */
+
+function register_hello_world_widget( $widgets_manager ) {
+
+	require_once( __DIR__ . '/widgets/button-addon.php' );
+
+	$widgets_manager->register( new \Elementor_Button_Addon );
+
+}
+add_action( 'elementor/widgets/register', 'register_hello_world_widget' );

wp-content/plugins/elementor-addon/widgets/button-addon.php

@@ -0,0 +1,119 @@
+<?php
+use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
+use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
+
+class Elementor_Button_Addon extends \Elementor\Widget_Base {
+
+	public function get_name() {
+		return 'button_addon';
+	}
+
+	public function get_title() {
+		return esc_html__( 'Button addon', 'elementor-addon' );
+	}
+
+	public function get_icon() {
+		return 'eicon-code';
+	}
+
+	public function get_categories() {
+		return [ 'basic' ];
+	}
+
+	public function get_keywords() {
+		return [ 'button', 'przycisk' ];
+	}
+    protected function register_controls() {
+		$this->start_controls_section(
+			'section_title',
+			[
+				'label' => esc_html__( 'Heading', 'elementor' ),
+			]
+		);
+        
+        $this->add_control(
+			'title',
+			[
+				'label' => esc_html__( 'Title', 'elementor' ),
+				'type' => \Elementor\Controls_Manager::TEXTAREA,
+				'ai' => [
+					'type' => 'text',
+				],
+				'dynamic' => [
+					'active' => true,
+				],
+				'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
+				'default' => esc_html__( 'Add Your Heading Text Here', 'elementor' ),
+			]
+		);
+        
+		$this->add_control(
+			'link',
+			[
+				'label' => esc_html__( 'Link', 'elementor' ),
+				'type' => \Elementor\Controls_Manager::URL,
+				'dynamic' => [
+					'active' => true,
+				],
+				'default' => [
+					'url' => '',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+		$this->start_controls_section(
+			'section_title_style',
+			[
+				'label' => esc_html__( 'Heading', 'elementor' ),
+				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
+			]
+		);
+
+        $this->add_control(
+			'title_color',
+			[
+				'label' => esc_html__( 'Text Color', 'elementor' ),
+				'type' => \Elementor\Controls_Manager::COLOR,
+				'global' => [
+					'default' => Global_Colors::COLOR_PRIMARY,
+				],
+				'selectors' => [
+					'{{WRAPPER}} .addon-btn-title' => 'color: {{VALUE}};',
+				],
+			]
+		);
+
+		$this->add_group_control(
+            \Elementor\Group_Control_Typography::get_type(),
+			[
+				'name' => 'typography',
+				'global' => [
+					'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
+				],
+				'selector' => '{{WRAPPER}} .addon-btn-title',
+			]
+		);
+
+		$this->end_controls_section();
+    }
+
+	protected function render() {
+		$settings = $this->get_settings_for_display();
+        if ( '' === $settings['title'] ) {
+			return;
+		}
+
+		$title = $settings['title'];
+
+        if ( ! empty( $settings['link']['url'] ) ) {
+			$this->add_link_attributes( 'url', $settings['link'] );
+
+			$title = sprintf( '<a %1$s class="addon-btn-title">%2$s <div class="elementor-icon"><i aria-hidden="true" class=" ti-arrow-top-right"></i></div></a>', $this->get_render_attribute_string( 'url' ), $title );
+		} else {
+			$title = sprintf( '<p class="addon-btn-title">%1$s <div class="elementor-icon"><i aria-hidden="true" class=" ti-arrow-top-right"></i></div></p>', $title );
+        }
+
+        echo $title;
+	}
+}

wp-content/themes/hello-elementor/assets/js/custom.js

@@ -196,4 +196,24 @@ jQuery(document).ready(function($){
 			}
 		});
 	});
+});
+
+jQuery(function($) {
+	const topHeader = $('#top-header-box');
+	const centerHeader = $('#center-header-box')
+
+	const topHeaderOffset = topHeader.offset();
+	const topHeaderHeight = topHeader.outerHeight();
+
+	$(window).scroll(function() {
+		const currentScrollPosition = $(window).scrollTop();
+
+		if (currentScrollPosition > topHeaderOffset.top + topHeaderHeight) {
+			topHeader.addClass('fixed');
+			centerHeader.css('padding-top', topHeaderHeight);
+		} else {
+			topHeader.removeClass('fixed');
+			centerHeader.css('padding-top', 0);
+		}
+	});
 });

wp-content/themes/hello-elementor/assets/styles/custom.css

@@ -769,4 +769,33 @@ body.elementor-page > div[data-elementor-type=single-page] {
 }
 .custom-acc .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle {
   transform: rotate(180deg) !important;
+}
+
+#top-header-box.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+}
+
+.addon-btn-title {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+.addon-btn-title .elementor-icon {
+  margin-left: -20px;
+  z-index: -1;
+}
+.addon-btn-title .elementor-icon i {
+  color: #000;
+  width: 100px;
+  height: 100px;
+  background: #f4f4f4;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
 }/*# sourceMappingURL=custom.css.map */

wp-content/themes/hello-elementor/assets/styles/custom.scss

@@ -940,3 +940,36 @@ body.elementor-page {
 		}
 	}
 }
+
+#top-header-box {
+	&.fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+	}
+}
+
+.addon-btn-title {
+	margin: 0;
+	display: flex;
+	align-items: center;
+
+	.elementor-icon {
+		margin-left: -20px;
+		z-index: -1;
+
+		i {
+			color: #000;
+			width: 100px;
+			height: 100px;
+			background: #f4f4f4;
+			border-radius: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28px;
+		}
+	}
+}