Elementor Widgets

Elementor widgets are the building blocks of your page design. They allow you to add and customize various elements such as text, images, and forms. This section covers both basic and advanced widgets, providing an overview of their functions and how to use them.

3.1 Basic Widgets

Basic widgets include fundamental elements that you will frequently use in your page designs. Here’s an overview of some of the most common basic widgets:

1. Heading

   • Function: Allows you to add headings (H1, H2, H3, etc.) to your page.

   • Customization: Adjust the text, font size, color, alignment, and style. Use the Style tab to change typography and Advanced tab for margins and padding.

2. Text Editor

   • Function: Provides a rich text editor for adding and formatting text content.

   • Customization: Format text using options like bold, italic, underline, and add links. Use the Style tab to adjust typography, color, and spacing.

3. Image

   • Function: Allows you to insert and manage images.

   • Customization: Upload images, adjust size, add captions, and apply image effects. Use the Style tab to control image dimensions and border settings.

4. Button

   • Function: Adds clickable buttons to your page.

   • Customization: Configure button text, link, and style (color, size, border). Use the Style tab for hover effects and alignment.

5. Divider

   • Function: Adds horizontal lines to separate content.

   • Customization: Adjust the width, style (solid, dotted, dashed), and color of the divider. Use the Style tab for further customization.

6. Spacer

   • Function: Creates empty space between elements.

   • Customization: Set the height of the spacer to control the amount of space. This is useful for adjusting layout and spacing.

3.2 Advanced Widgets

Advanced widgets provide additional functionality and design options. They are especially useful for creating more dynamic and interactive content.

1. Forms

   • Function: Adds contact or subscription forms to your page.

   • Customization: Configure form fields, labels, and button text. Use the Style tab to adjust form field sizes, colors, and spacing. Set up form actions (e.g., email notifications) in the Actions After Submit section.

2. Slides

   • Function: Creates image or content sliders for showcasing multiple items.

   • Customization: Add slides, configure slide transitions, and adjust navigation controls. Use the Style tab to customize slider appearance, navigation arrows, and dots.

3. Testimonials

   • Function: Displays customer reviews or testimonials in a stylish format.

   • Customization: Add testimonial content, author names, and images. Use the Style tab to adjust the layout, typography, and colors of the testimonials.

4. Pricing Table

   • Function: Shows pricing options for products or services.

   • Customization: Configure pricing tiers, features, and call-to-action buttons. Use the Style tab to adjust table colors, borders, and typography.

5. Countdown

   • Function: Displays countdown timers for events or promotions.

   • Customization: Set the countdown date and time, and customize the appearance of the timer. Use the Style tab for colors, fonts, and spacing.

6. Posts

   • Function: Displays recent blog posts or custom post types.

   • Customization: Configure post query, layout, and display options. Use the Style tab to adjust post elements like titles, images, and meta information.

Using Widgets

1. Drag and Drop: To add a widget to your page, simply drag it from the Widgets Panel on the left and drop it into the desired section or column on your canvas.

2. Edit Widget: Click on the widget you’ve added to open its settings in the left panel. Customize the widget using the Content, Style, and Advanced tabs.

3. Reorder Widgets: Drag and drop widgets within sections or columns to change their order or positioning.

Conclusion

Understanding and using Elementor widgets effectively will help you build and customize your WordPress pages with flexibility and ease. From basic text and images to advanced forms and sliders, Elementor provides a wide range of tools to enhance your site’s design and functionality.