Knowledgebase

Elementor Design Ideas

Do you want to build a website? But don't have any ideas how to get started with the design? Here we will show you an idea that you can implement on your website.

First, we need a section with the appropriate layout background. This is the first thing you can do to design the header section. Here, at Layout, the height is switched to the min height and the section is stretched.

Layout Abschnitt

Under Style we deal with the background. For this we choose gradient instead of classic. For the first color we have chosen a blue tone and the second color is pink. Now we adjust the gradient by setting the angle to 170.

Abschnitt bearbeiten Hintergrund

So that the background is not too gaudy, we will adjust the background overlay. By selecting a black color and setting the opacity to 0.2. Of course, you can also play around with the colors and set it the way you like it best. Lastly, set the padding under the extension to Link Values, so that you can adjust the top and bottom to 10.

Hintergrundüberlagerung Elementor

The next step is the content. For this we drag the title widget to the +. Now enter the headline that is optimal for your page. Make sure here that the HTML tag contains the H1 heading. Under Style, you can adjust the font and color as desired. If you like, you can also add the text editor and briefly tell the user what to expect on this page. Last but not least comes the button. You can also simply insert this widget into the area. Adjust the text here. Now you can adjust the color under style. Under Gradient we have again selected 2 colors and set Angle to 210. To make the button rounder, we set the corner radius to 45 and the padding to 15. This way the button is a bit bigger. The header area is now ready and we move on to the content.

Hintergrundfarbe Elementor

Rahmentyp Elementor

Header Elementor

To make the design look more interesting, let's choose 3 sections and add icon boxes in all three sections. Under Content you can choose a suitable icon and customize the text. Likewise, under Style you can adjust the color, as well as the font. Now we already go to an interesting point. Under Advanced, link the Margin and edit "top" to -50. The Padding is adjusted to 20 on all 4 areas. Now you can't quite see the icon on the background. For this reason, under Advanced, the background is adjusted. In this example the color is white.

Layout Bearbeitung Elementor

Do exactly the same with the other two icon boxes. Now you have a design for the header area that looks more interesting.

Content Abschnitt bearbeiten

 

Was this answer helpful?

0 Users Found This Useful