How to create a responsive popup menu

Create a responsive popup menu that is launched from a menu button in your site header.

You will learn how to create a pop-up menu that:

• It is attractive, functional and beautiful.
• Answer on mobile

Design the pop-up window and its content

1. Go Templates> Pop-ups> Add New and give your new popup a name. (An alternative method is to press CMD + E or CTRL + E open Discoverer, search for Popup, choose Add new popupand give it a name.)
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. For this example, we will design our own, but you can also find this template in your Elementor Pro popup template library. Just search for "menu" in the Popups library to find it.

Popup Window> Design Tab

1. Width: Set to 85vw
2. Cover: Hide
3. Entrance animation: Merge
4. Animation duration: 2 seconds

Pop-up window> Style tab

Arise

Shadow of the box: Set them as you like.

Close button

1. Vertical position: 4
2. Colour: Sets the color to # 878787
3. Size: 35

Popup> Advanced tab

Avoid overlapping closure: Yes

Now add a section with two columns.

Design the first column

Section> Design

1. Ancho del contents: Full width
2. Column spacing: No space

Drag an interior section widget to the first column.

Below Section > Design > Column spacing, set up No space.

Below Section > Advanced, set up Filling 70 px around.

Section> Advanced

Filling: 70 up, down, left and right.

Drag a Header widget to the first column.

Below Style > Typography, set the size to 60 and under Weight set to 100.

Tip: Now is a good time to adjust the titles' Mobile setup.

Create the rest of the menu items

1. Right click on the title widget control and choose Duplicate.
2. Repeat the duplication for all the menu items you need.
3. Edit the title text for each header widget to correctly label each menu item

Add a button to the menu

Drag a button widget below the menu items and adjust it to your liking.

On the Advanced tab> Margin, Set to 70 for the top, and then click the responsive viewport icon, click the Rover icon, and set the margin of the rover to 40 for the top.

Drag another Inner section widget to the first column below the button.

1. Below Section > Design > Width, set up Full width.
2. Below Section > Layout> Column spacing, set No space.
3. In Section> Advanced> Fill, set 30 for Top, 70 for Right, 50 for Bottom, and 70 for Left.
4. Now, right click on a column handle and select Remove to remove one of the columns, leaving you only one.

Add share buttons to menu

Drag a Share Buttons widget (Pro) to the column.

Share buttons> Content

1. Edite los elementos de la social network according be necesario.
2. Skin: Minimum
3. Alignment: Left

Share buttons> Style

1. Button size: 1
2. Colour: Custom color and choose Black (# 000000)

Design the second column

Right-click on the column identifier to edit the column settings.

Column> Style

Background

1. Background color: Set to # 000000 (black)
2. Second color: Set to # 000000 (black)

Note: Although the new background color has been set, you will not see it yet, because there is no content in the column yet.

Create the newsletter Subscribe to the call to action form

Drag an interior section widget to this column.

Right click on a column handle and select Remove to remove one of the columns, leaving you only one.

Interior section> Advanced

1. Margin: Set to 130 only for the bottom
2. Filling: Set to 70 for Up, 60 for Right, 70 for Down and 60 for Left

Drag a header widget to the column

Adjust the title text (i.e. subscribe to our newsletter) and size, color, etc. of the text as needed.

Drag a To form Widget (Pro) below the header

Form> Content

Form fields

1. Click the X at the far right of the Name and Message fields, as we only need the email for this example.
2. Inlet size: Means, medium
3. Email> Content > Column width: 80%

Submit button

1. Size: Means, medium
2. Column width: 20%
3. Alignment: Correct
4. Icon: Long arrow right

Shape> Style

To form

1. Column spacing: 0
2. Row spacing: 0

Field

1. Text color: White
2. Background color: Transparent
3. Border color: White
4. Border width: 1 only for the bottom
5. Typography> Size: 10

Button

1. Background color: Transparent
2. Text color: White
3. Border: Solid
4. Border width: 1 only for the bottom
5. Border color: White

Create the product display

Drag another widget from the inner section to this column below the form.

Interior section> Advanced

1. Filling: Set to 30 for right only

Sensitive

1. Hide on mobile: Hide

Interior section> Design

1. Column spacing: No space

Right click on a column handle and select Remove to remove one of the columns, leaving you only one.

Edit column

Column> Advanced

1. Margin: Set -60 (minus 60) only for the left

Right click on the header widget control and copy the title of the newsletter title and then paste it in this column

Title> Style

1. Text color: Black (# 000000)
2. Weight: 700

Title> Advanced

1. Margin: Set to 20 for left only

Column> Style

Background

Colour: White (#ffffff)

Border

1. Edge radius: 5 for all sides

Box shadow (normal)

1. Colour: rgba (0,0,0,0.21)
2. Box Shadow> Horizontal: 0
3. Box Shadow> Vertical: 10
4. Box Shadow> Blur: 30
5. Box Shadow> Extension: -10 (negative 10)
6. Position: Outline

Box shadow (float)

1. Colour: rgba (0,0,0,0.21)
2. Box Shadow> Horizontal: 0
3. Box Shadow> Vertical: 15
4. Box Shadow> Blur: 40
5. Box Shadow> Extension: -10 (negative 10)
6. Position: Outline

Drag a Image widget below header

Image

Don't choose an image yet

1. Image size: Full
2. Alignment: Left

Now right click on the title widget control , duplicate it and adjust the style of the duplicate widget.

Title> Style

1. Size: 15
2. Weight: 300

Now change the wording of each one.

Right-click on the column identifier and duplicate it twice to have a total of 3 columns.

1. Edit the column of the middle and last columns, changing the margins in Column> Advanced to -40 for the left margin in the middle column and -20 for the left margin in the last column.
2. For each column, edit the Image widget, choosing an image. Even .gif images work fine here.
3. Adjust your text and margins as needed.

Fit for mobile

Edit each of the internal sections in the left column

Interior section> Advanced

1. Filling: 25 for all sides

Click on the gear / gear icon located at the bottom left of the panel to return to the Settings pop-up.

Popup Settings> Layout

1. Width: 100vw

To form

Set the width of the email field and the Send button to 80% and 20%, respectively.

Set publishing options

Click on the To post button. They do not exist Terms, Triggersor Advanced rules For this pop-up window, click the Save and close button.

Edit your site's Elementor-created header template

Go Plantillas> Creador de temas> Headers > Select your header and click Edit with Elementor

Click the widget control from your menu button to edit the widget, if it exists, or create a new one.

Button

1. Link: Click on the Dynamic icon and select Actions> Popup Window
2. Click again on Arise and in Action, choose Toggle popup
3. In the Pop-up field, find and select the pop-up you just created.

Click on the To update button to save header template changes

All ready. Go to your live site, click on the Menu button in your header and see your new pop-up menu in action.

Cousin: Agregue efectos de animación de entrada en cualquiera de sus widgets para agregar efectos geniales. Simplemente edite un widget, vaya a su pestaña Avanzado, elija una de las animaciones de entrada que se enumeran allí.