Elementor Controls are the building blocks of Elementor, a popular WordPress page builder. These are the various elements and settings you can use to customize your page layout. Elementor Controls are organized into categories, such as General, Layout, Typography, and Advanced.
These controls can be used to customize any element on a page, from text blocks to images and videos. Each Elementor Control has a set of options and settings that can be adjusted to create a unique design. Elementor Controls can also be used to add custom HTML, CSS, and JavaScript to a page.
The controls are easy to use and allow users to quickly customize the look and feel of their website. Elementor Controls are also highly customizable, so they can be used to create a wide range of page designs.
The controls are an essential part of using Elementor to create beautiful and functional pages. Elementor Controls is a powerful tool that can help users create custom page designs without needing to know how to code.
These controls are divided into two main categories: basic and advanced. Basic controls are the most basic elements of a page, such as text, images, and videos. Advanced controls are more complex, allowing users to add custom styling to their pages, add animations, and create complex layouts.
Elementor offers a range of basic controls, such as text, images, videos, and headings. These controls are used to create the basic structure of a page, such as titles, paragraphs, and images. They are also used to add basic styling to a page, such as fonts, colors, and backgrounds.
Advanced controls are used to create more complex layouts, such as columns, grids, and sliders. They are also used to add custom styling to a page, such as custom fonts, colors, and backgrounds. Advanced controls also allow users to add animations to their pages, such as fading in or out of elements.
Slider
$this->add_control(
'hooya_slider_height',
[
'label' => esc_html__('Height', 'hooya'),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px', '%'],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 500,
],
'selectors' => [
'{{WRAPPER}} .hooya-slider .entry-thumbnail' => 'height: {{SIZE}}{{UNIT}};',
],
]
);Line
$this->add_control(
'hr0',
[
'type' => \Elementor\Controls_Manager::DIVIDER,
]
);Number
$this->add_control(
'hooya_slider_item_display_count',
[
'label' => esc_html__('Display Count', 'hooya'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 30,
'step' => 1,
'default' => 3,
]
);Select2
$this->add_control(
'hooya_slider_category_mode',
[
'label' => esc_html__('Mode', 'hooya'),
'type' => \Elementor\Controls_Manager::SELECT2,
'multiple' => false,
'options' => [
'latest_posts' => esc_html__('Latest Posts', 'hooya'),
'category' => esc_html__('Category', 'hooya'),
'tag' => esc_html__('Tag', 'hooya'),
],
]
);Select
$categories = get_categories(array(
'orderby' => 'name',
'order' => 'ASC'
));
$category_options = array();
foreach ($categories as $category) {
$category_options[$category->term_id] = $category->name;
}
$this->add_control(
'hooya_slider_category',
[
'label' => esc_html__('Category', 'hooya'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => '-1',
'options' => $category_options,
'condition' => [
'hooya_slider_category_mode' => 'category'
],
]
);Switcher
$this->add_control(
'hooya_slider_display_content_box',
[
'label' => esc_html__('Show Content Box', 'hooya'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__('Show', 'hooya'),
'label_off' => esc_html__('Hide', 'hooya'),
'return_value' => 'yes',
'default' => 'yes',
]
);Text
$this->add_control(
'hooya_slider_author_tag',
[
'label' => esc_html__('Author Tag', 'hooya'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => esc_html__('By:', 'hooya'),
]
);Color
$this->add_control(
'hooya_slider_style_content_box_bg_color',
[
'label' => esc_html__('Box Color', 'hooya'),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .hooya-slider .entry-meta' => 'background: {{VALUE}};',
'{{WRAPPER}} .hooya-slider .swiper-button-prev' => 'background: {{VALUE}};',
'{{WRAPPER}} .hooya-slider .swiper-button-next' => 'background: {{VALUE}};',
],
'default' => '#ffffffbb'
]
);Dimensions
$this->add_control(
'hooya_slider_style_content_box_border_radius',
[
'label' => esc_html__('Border Radius', 'hooya'),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%', 'em'],
'selectors' => [
'{{WRAPPER}} .hooya-slider .entry-meta' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};-webkit-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);Typography
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'hooya_slider_style_title_typography',
'selector' => '{{WRAPPER}} .hooya-slider .entry-title a',
]
);Elementor also offers a range of advanced widgets, which are used to add features to a page. These widgets can be used to add contact forms, maps, social media buttons, and more. Widgets are also used to create complex layouts, such as carousels, accordions, and tabs.
Elementor controls are easy to use and customize, allowing users to create beautiful, professional-looking websites without any coding knowledge. With the wide range of basic and advanced controls available, users can create stunning websites with ease.
