Create a responsive popup menu that launches from a menu button in your site』s header.
You』ll learn how to create a menu popup that:
Is engaging, functional, and beautifulIs responsive on mobile
Design The Popup And Its Content
Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ll design our own, but you can also find this template in your Elementor Pro Popups Templates Library. Just search for 「menu」 in the Popups library to find it.
Popup > Layout Tab
Width: Set to 85vwOverlay: HideEntrance Animation: Fade InAnimation Duration: 2 seconds
Popup > Style Tab
Popup
Box Shadow: Set these as you』d like.
Close Button
Vertical Position: 4Color: Set the color to #878787Size: 35
Popup > Advanced Tab
Prevent Closing On Overlay: Yes
Now, add a section with two columns.
Design The First Column
Section > Layout
Content Width: Full WidthColumns Gap: No Gap
Drag an Inner Section widget to the first column.
Under Section > Layout > Columns Gap, set No Gap.
Under Section > Advanced, set Padding of 70 px all around.
Section > Advanced
Padding: 70 for top, bottom, left, and right.
Drag a Heading widget to the first column.
Under Style > Typography, set the size to 60, and under Weight set to 100.
Tip: Now is a good time to adjust the headings』 Mobile Settings.
Create The Rest Of The Menu Items
Right-click the Heading widget』s handle , and choose Duplicate.Repeat the duplication for as many menu items as you』ll need.Edit the Title text for each Heading widget to properly label each menu item
Add A Button To The Menu
Drag a Button widget below the menu items and style it to your liking.
Under the Advanced tab > Margin, Set to 70 for Top, and then click the responsive viewport icon, click the Mobile icon, and set Mobile』s margin to 40 for top.
Drag another Inner Section widget to the first column below the Button.
Under Section > Layout > Width, set Full Width.Under Section > Layout > Columns Gap, set No Gap. Under Section > Advanced > Padding, set 30 for Top, 70 for Right, 50 for Bottom, and 70 for Left.Now, right-click a column handle and select Delete to delete one of the columns, leaving you with just one.
Add Share Buttons To The Menu
Drag a Share Buttons widget (Pro) to the column.
Share Buttons > Content
Edit the social network items as needed.Skin: MinimalAlignment: Left
Share Buttons > Style
Button Size: 1Color: Custom Color and choose Black (#000000)
Design The Second Column
Right-click the column』s handle to edit the column』s settings.
Column > Style
Background
Background Color: Set to #000000 (Black)Second Color: Set to #000000 (Black)
Note: Although the new background color has been set, you won』t see it yet, because there is no content in the column yet.
Create The Newsletter Subscribe Call To Action Form
Drag an Inner Section widget to this column.
Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.
Inner Section > Advanced
Margin: Set to 130 for Bottom onlyPadding: Set to 70 for Top, 60 for Right, 70 for Bottom, and 60 for Left
Drag a Heading Widget into the column
Adjust the title text (ie Sign Up For Our Newsletter), and text size, color, etc. as needed.
Drag a Form Widget (Pro) under the heading
Form > Content
Form Fields
Click the X to the far right of the Name and Message fields, as we only need the Email for this example.Input Size: MediumEmail > Content > Column Width: 80%
Submit Button
Size: MediumColumn Width: 20%Alignment: RightIcon: Long Arrow Right
Form > Style
Form
Column Gap: 0Row Gap: 0
Field
Text Color: WhiteBackground Color: TransparentBorder Color: WhiteBorder Width: 1 for Bottom onlyTypography > Size: 10
Button
Background Color: TransparentText Color: WhiteBorder: SolidBorder Width: 1 for Bottom onlyBorder Color: White
Create The Products Display
Drag another Inner Section widget to this column below the form.
Inner Section > Advanced
Padding: Set to 30 for Right only
Responsive
Hide On Mobile: Hide
Inner Section > Layout
Columns Gap: No Gap
Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.
Edit The Column
Column > Advanced
Margin: Set -60 (minus 60) for the Left only
Right-click the heading widget』s handle and copy the Newsletter Heading title and then paste it into this column
Heading > Style
Text Color: Black (#000000)Weight: 700
Heading > Advanced
Margin: Set to 20 for Left only
Column > Style
Background
Color: White (#ffffff)
Border
Border Radius: 5 for all sides
Box Shadow (Normal)
Color: rgba(0,0,0,0.21)Box Shadow > Horizontal: 0Box Shadow > Vertical: 10Box Shadow > Blur: 30Box Shadow > Spread: -10 (negative 10)Position: Outline
Box Shadow (Hover)
Color: rgba(0,0,0,0.21)Box Shadow > Horizontal: 0Box Shadow > Vertical: 15Box Shadow > Blur: 40Box Shadow > Spread: -10 (negative 10)Position: Outline
Drag in an Image widget below the heading
Image
Don』t choose an image just yet
Image Size: FullAlignment: Left
Now right-click the Heading widget』s handle , duplicate it and adjust the style for the duplicated widget.
Heading > Style
Size: 15Weight: 300
Now change the wording for each.
Right-click the column handle and duplicate it twice so you have a total of 3 columns.
Edit the column for 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.For each column, edit the Image widget, choosing an image. Even .gif images work well here.Adjust your text and margins as needed.
Adjust For Mobile
Edit each of the Inner Sections in the Left column
Inner Section > Advanced
Padding: 25 for all sides
Click the cog / gear icon located at the bottom left of the panel to return to the Popup Settings.
Popup Settings > Layout
Width: 100vw
Form
Set the email field and Submit Button widths to 80% and 20%, respectively.
Set the Publish Options
Click the Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.
Edit Your Site』s Elementor-Created Header Template
Go to Templates > Theme Builder > Headers > Select your header, and click Edit with Elementor
Click your menu button widget』s handle to edit the widget, if it exists, or create a new one.
Button
Link: Click the Dynamic icon and select Actions > PopupClick again on Popup and under Action, choose Toggle PopupIn the Popup field, search for and select the popup you just created
Click the Update button to save the Header template changes
All done. Go to your live site, click the Menu button in your header and see your new Menu popup in action.
Bonus: Add Entrance Animation effects on any of your widgets to add cool effects. Just edit a widget, go to its Advanced tab, choose one of the Entrance Animations listed there.