Knowledgebase

How to incorporate organic shapes

Organic shapes can be understood to mean many things. But here we are talking about shapes in a header area. Thus, the design can be made more beautiful and it will not look too boring. There are a few possibilities, in this article we will show how to incorporate the shapes into the website.

#1 Header Area

To create the head area, first you need to select a section. Now prepare the height in which you set this to Min Height and stretch the section. Now click on the style and under background type select gradient. Now select two colors and set the angle to 270. Of course you can vary how the angle of the gradient should be.

Hintergrund Anpassung Elementor

Now, under Style, click Shape Separator. You can decide whether you want to include the shapes at the top or bottom of the header area. In this example, we have chosen to include the shapes at the bottom. For this you select "Mountains" under Type. You can of course choose a type that you like better. Now set the width and the height. In this example the width is set to 220 and the height to 370. You can also choose a color for the shape if you like. Otherwise, the header area is ready with the shape. So you can also insert the header of the page.

Trennlinie Anpassung Elementor

Header Layout Elementor

#2 Section

You can make the text area more interesting with the shapes. For this example we have chosen 2 sections again. In one section we put the image. Now the other section will be adjusted. Select the separator for this. Under Style you can decide which one you like better. In this case it is the curved one. The width and the size are still adjusted under Style. The width is set to 3 and the size is set to 38. You can of course adjust the color here as well.

 Trenner Stil Elementor

Farbe des Trenners Elementor

After the separator is inserted, you can insert the text area. After you have filled the text area with content. You can now duplicate the separator at the top right pen and paste it under the text area.

Trenner duplizieren Elementor

Content Bereich mit Trenner Elementor

#3 Section

For the third section we need a section again. Now we edit the layout. Here you need to style and divider shape. In the top section you can select the style "Fan transparent" and choose a color. Now we will adjust the width and the height. The width is set to 100 and the height to 150. After the shape is adjusted, the content should be inserted as well. Now move the text editor into the section. Here the text is adjusted so that it is under the fan and does not overlap the fans. 

Content Bereich Elementor

Was this answer helpful?

0 Users Found This Useful