{"id":12996,"date":"2022-10-18T07:37:00","date_gmt":"2022-10-18T07:37:00","guid":{"rendered":"https:\/\/wp-space.de\/?p=12996"},"modified":"2024-01-02T17:00:14","modified_gmt":"2024-01-02T16:00:14","slug":"elementor-widgets-10-basic-widgets-exclusively-at-a-glance","status":"publish","type":"post","link":"https:\/\/wp-space.de\/en\/elementor-widgets-10-basic-widgets-exclusively-at-a-glance\/","title":{"rendered":"Elementor widgets - 10 basic widgets exclusively at a glance"},"content":{"rendered":"\"\"\n\n\n\n

What are Elementor widgets?<\/h2>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Elementor is one of the most popular page builders for the WordPress CMS. With Elementor* <\/a>you can easily customize your website. Thanks to the simple drag & drop method of the so-called Elementor widgets, even users without programming knowledge can personalize their website.<\/p>\n\n\n\n

<\/div>\n\n\n\n

In this article, I will therefore give you a brief guide to the various basic Elementor widgets. Basic Elementor widgets are usually included for free in the Elementor subscription.<\/p>\n\n\n\n

The Pro subscription offers you many more cool widgets with which you can customize your website even more. You can find the prices for Elementor Pro on the Elementor Website<\/a>.<\/p>\n\n\n\n

If you are not yet familiar with Elementor as a page builder, you can also take a look at our ultimate Elementor Guide<\/a> to find out everything you need to know about Elementor!<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"
When using the Elementor widgets, the structure into which the widget can then be inserted is selected first.<\/figcaption><\/figure>\n\n\n\n

You can then drag and drop your selected Elementor widget into the defined structure shape and make all further settings.<\/p>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Inner section<\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

The Elementor widget \"Inner section\" allows you to subsequently split one of the structure fields in the selected structure. It therefore divides the selected structure field once again and halves it for the time being. However, the inner spacing can be personalized and individualized later in the widget settings. This means that the other fields remain the same in terms of spacing and size, but the edited field can be divided again and thus readjusted. Remember, however, to avoid slowing down the page speed of your site unnecessarily, always work with as few interlocking structures as possible. In addition, you cannot place an inner spacing widget in an existing inner spacing widget.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Layout settings<\/h3>\n\n\n\n
\n
\n

Unlike all other widgets, the inner section widget is edited in the same way as the structure sections. There are therefore no content settings to make, but layout, style and advanced settings. <\/p>\n\n\n\n

In the layout settings, you work on the column width and set the alignments, i.e. vertical and horizontal. Initially, these are always saved as \"default\". To change them, simply use the drop-down menu. The widget spacing and the HTML tags can also be set variably.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Style settings<\/h3>\n\n\n\n
\n
\n
<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

In the widget style settings, you generally set the background, possible frames and the typography of possible text paragraphs.<\/p>\n\n\n\n

As far as the background is concerned, you can make various detailed specifications and settings. You can see the various setting options in the three illustrations below. <\/p>\n\n\n\n

The first image shows the pure setting of a color or, if desired, an image. The second image shows the settings for a possible color gradient and the third image shows even more specific settings that can be made when selecting an image.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

In the widget style settings, you generally set the background, possible frames and the typography of possible text paragraphs. <\/p>\n\n\n\n

You can also generate the frames and typography more precisely here and make changes to the default settings.<\/p>\n\n\n\n

Note, however, that it is best to make settings such as colors and typography globally. You can find out how to do this further down in the article under \"Headline\". <\/p>\n\n\n\n

Global settings are settings that apply to your entire website and which you therefore do not always have to make and update manually, but rather save once in the global settings and which can then be used again and again by Elementor.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Advanced settings<\/h3>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

The advanced settings are even more detailed settings that you can make to display the Elementor widget. These settings often coincide with the advanced settings of other widgets and are therefore not always explained in detail in the following article.<\/p>\n\n\n\n

In the advanced settings, you can now generate additional spacing. These no longer only relate to the widget, but to the widget in relation to the structure field in which the Elementor widget is located.<\/p>\n\n\n\n

You can also make motion effects, responsive, attributes and advanced individual CSS settings here. As some of these go into great detail and are generally not necessary to change, I will not go into them further in this guide to the basic Elementor widgets. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Heading <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

When setting headings and texts, it is important to note that you should always set your fonts globally first. The reason for this is that all fonts are automatically the same and if you then change something globally, everything on the subpages will also change automatically. Otherwise you would have to go through all the pages manually, which would still be feasible for small pages with few subpages, but still represents an unnecessary amount of work.<\/p>\n\n\n\n

\"Elementor<\/figure>\n\n\n\n

Set fonts globally<\/h3>\n\n\n\n

The first step here is similar to the logo:
Go to General Settings (these are the three lines at the top left of the Elementor menu display) and then to Website Settings. From here the procedure changes, because unlike the logo, we now use the top 3 settings, Global Colors, Global Fonts and Typography. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Global colors<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

First click on \"Global colors\". Here you select all the colors you need for your website. Backgrounds, fonts, bars, design settings for widgets - they will all use exactly these colors later on. So feel free to add more colors so that you can select and use them globally in the future. When you have finished, save your changes briefly and then go back one page to the website settings.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Global font<\/h4>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Next, the different fonts you want to use are defined via Global fonts. Here too, the top four fonts are usually already predefined, so you can simply change them. If you need more fonts than these four, feel free to add more and name them as you wish. It is also important to save your progress when you have finished.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Elementor Widget Heading <\/strong>edit<\/h3>\n\n\n\n

If you have already set the fonts globally, you can continue directly with editing the heading. After you have dragged your heading widget to the desired position, the settings for this widget will open on the left, as always. <\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

At the Contents<\/strong> you first enter the title of the widget. This is also what you see as the heading on your page. The title is therefore the text displayed. It is best to make sure that you always work and write text in the text field provided in the Elementor menu, as the program often works incorrectly if you work in the field on the page. Here you can also make possible links or settings for size, HTML tag and alignment within the structure.<\/p>\n<\/div>\n<\/div>\n\n\n\n

In the Style<\/strong>In the widget settings area, you can now adjust the colors, typography and any other stylistic settings, such as a text border or text shadow. Make sure that you always select the globe symbol when making settings. The globe stands for the global settings. If you want to set individual things that you have not yet set globally, either include them first or select the icon to the right of the globe and set the colors and fonts locally for this one widget. Remember, however, that you will then have to update these things individually.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Finally, you can use Extended <\/strong>You can also define additional settings, such as motion effects, individual backgrounds or frames for the widget.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And again, don't forget the memory!<\/p>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Image <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

After inserting the image, you have the following options to edit the widget in detail and according to your wishes and to update it again and again over time.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Contents<\/strong>Select image and name alternative text appropriately. Then set the image size, select the alignment of the image within the selected structure and make settings such as \"Caption\" and \"Link\" as required.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

Style<\/strong>: Settings such as width, maximum width and height are made here, as well as the display type of the image. Should it look faded, or have a filter or even a frame, and should something change when the user hovers over the image with the mouse, etc.? These considerations are particularly important if you assign a link to the image, for example, so that the user can recognize relatively quickly and easily whether the image is simply a graphic or whether the link will take them to another page.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Extended<\/strong>: Here you can make further, more detailed settings, e.g. motion effects, the background of the widget, define further attributes, etc.<\/p>\n\n\n\n

Very important when you make changes to your website, always save them!<\/p>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Text editor <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

The text editor is used for all types of text, with the exception of headings, on the website. The widget itself is only limited by the selected structure. You can therefore give free rein to your creativity when using this Elementor widget.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

With the content<\/strong>When editing the text editor widget, you not only set the text itself (work on the \"Visual\" level here if possible, but also add images or other files if required. You can also specify whether you want to display initials and change the columns or the column spacing. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

In the Style<\/strong>-settings of the Elementor widget, you set the alignment of the text within the given structure, as well as text color, typography and text shadow.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Video <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

To provide visitors to your website with explanations, ideas and general content not only in writing but also visually, you can use not only images but also videos. Here, too, there is an Elementor widget that makes it easier for you to display and generate videos on your website.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n

Once you have inserted the video widget into the desired structure field, the widget settings for this Elementor widget will open on the left-hand side of your screen. <\/p>\n\n\n\n

\n
\n

Here you can now choose the Contents <\/strong>of the Elementor widget to define settings such as the source of the video, the associated link and the start and end time.<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

You can also set various video options. On the left-hand side, you can see the widget's default settings, which you can change as required.<\/p>\n\n\n\n

Style<\/strong>Technically, you can only change the display of the video widget, i.e. the aspect ratio, or insert additional CSS filters.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

In this Elementor widget, too, the Advanced settings<\/strong> with those of other widgets. As standard, you can generate distances to the structure field, frames, backgrounds, motion effects etc., or leave it at the default settings for the time being.<\/p>\n\n\n\n

\n
\n

Button <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Buttons, as shown on the left, are generally used as a call-to-action to prompt website visitors to click on them. The text in the button can be generated individually, but should clearly indicate what the visitor is expected to do.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

As far as the widget settings are concerned, we start again with the Contents <\/strong>of the Elementor widget. <\/p>\n\n\n\n

\n
\n

Values such as the type of button widget, the text on the button and the forwarding link are defined here.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

You can also generate the size, alignment and possible icons for the button. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

In the Style<\/strong>area, you then continue in the same general way as you already know it from other Elementor widgets:<\/p>\n\n\n\n

The typography and any colors used and yet to be used should generally always be generated globally and then only picked up in the respective widget settings. <\/p>\n\n\n\n

Here you can also make different settings, such as how hovering over the button should be picked up and displayed. <\/p>\n\n\n\n

You can also generate frame types, shadows and internal spacing manually. <\/p>\n\n\n\n

Finally, you can make all other settings via the Advanced settings<\/strong> of the Elementor widget, the settings of the structure field or globally. <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Separator <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

The Elementor widget \"Divider\" is a line that visually divides your page. Here, too, you can change and customize everything in the widget settings. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Contents<\/strong>Here you can edit things like the style of the line, e.g. solid, dotted, arrows etc., the width of the line, the alignment and a possible icon. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

In the Style<\/strong>area you change the design, as with the other Elementor widgets. In the case of the divider, these are things like color, width and gap. <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Distance <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

In the following illustration you can see a blue framed box under the slogan. This is a so-called spacing and a very important Elementor widget. You can make this space as small or large as you like using the widget settings.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here, too, you first select the structure into which you then drag and drop the Elementor widget. I have selected a full width here, but you are free to keep the structure field as small as possible. <\/p>\n\n\n\n

\n
\n

As the paragraph itself only adds a space that should not be noticeable to the user, the widget setting does not offer any style settings. In the Contents <\/strong>the distance is defined. Again, you are free to choose whether you want to generate this in PX, VH or EM, but I recommend the PX here too, i.e. pixels. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

In the Advanced settings<\/strong> of the Elementor widget, the usual settings can be made. Here, for example, the distances to the structure field, movement effects, possible backgrounds, frames and other settings are generated.<\/p>\n\n\n\n

\n
\n

Google Maps <\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

With the Elementor Google Maps widget, you can create a map on which the desired location is easily displayed on your website.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Contents<\/strong>Under Location you can either search for the location itself, such as \"WPspace\" on the right, or enter an address. The advantage of entering the name of the location is that this information is also the title that is displayed on the map (see above). Below you can adjust the display of the map. You can move the zoom and height sliders as you wish and customize the map display.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

On Style <\/strong>you set the colors of the map. For example, you can set the card to be displayed slightly faded. You can also set a distinction that appears when customers hover over the card with the mouse. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n\n\n\n

Icon<\/h2>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

On the left you can see three different ways to display icons in the Elementor widget.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Contents<\/strong>First of all, you define the desired icon here. To do this, simply click on the gray checkered area and select one from the Elementor icon library or upload your own.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can also set the alignment of the Elementor widget here and generate a link for the icon. In this case, the icon would also function as a call-to-action.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

To create a different visual display of the icon, as shown in the examples above, simply select one from the drop-down menu. <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Style<\/strong>Technically, you only set the color and size of the icon. Here you can also choose between different displays when hovering. Once again, I would like to mention that it is best to generate the colors globally beforehand so that the color spectrum on your website remains consistent and you do not have to change all colors manually when making changes. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Advanced settings<\/strong> of the Elementor widget are again in the case of the icon things like frame, background, movement effects and distances to the structure field.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Elementor gives you the opportunity to give free rein to your creativity when building your website. With the help of the many different Elementor widgets, creating a website is now child's play. <\/p>\n\n\n\n

In this post, I've covered the 10 basic Elementor widgets that come for free with your Elementor subscription. When upgrading to Elementor Pro<\/a>you can access many more widgets and program add-ons. <\/p>","protected":false},"excerpt":{"rendered":"

A detailed explanation of 10 basic Elementor widgets and how they can be used.<\/p>","protected":false},"author":2,"featured_media":13350,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[90],"tags":[],"class_list":["post-12996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-grundlagen"],"_links":{"self":[{"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/posts\/12996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/comments?post=12996"}],"version-history":[{"count":0,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/posts\/12996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/media\/13350"}],"wp:attachment":[{"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/media?parent=12996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/categories?post=12996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-space.de\/en\/wp-json\/wp\/v2\/tags?post=12996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}