Author 诗语

How To Create A Responsive Popup Menu

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.

Counter Widget

The Counter Widget enables you to add an animated numbered counter to your page.

Content

Counter

Starting Number: Set the starting number of the counterEnding Number: Set the ending number of the counterNumber Prefix: Enter text to appear before the number, if any, such as a dollar signNumber Suffix: Enter text to appear after the number, if any, such as a plus signAnimation Duration: The time in milliseconds for the running animation to completeThousand Separator: Show or hide the thousands separatorSeparator: Select default, dot, or space for the thousand separator characterTitle: Type the title that will appear below the number

Style

Number

Text Color: Choose the color of the number textTypography: Set the typography options for the number text

Title

Text Color: Choose the color of the title textTypography: Set the typography options for the title textText Shadow: Apply a shadow using color, blur, and offset options

Advanced

Set the Advanced options that are applicable to this widget

Installing Elementor Pro

Congratulations on signing up for Elementor Pro. This guide walks you through the entire process of installing and activating Elementor Pro on your WordPress site.

Note: Elementor Pro is an extension of Elementor, so you must have Elementor installed. If you still haven』t installed Elementor, check out this installation guide.

After purchasing Elementor Pro, go to my.elementor.comLogin with the details you received in the email after purchaseAfter the login, you will reach the 『My Account『 page. Click on the Download Plugin button in the upper right of My Account section and download the .zip file to your desktopHead over to your site, to the WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activateOn top of your site』s dashboard, you should get a message telling you to activate your license key.

Note: If you receive an error message saying that you are missing the style.css stylesheet, that means that you have tried to install this as a theme instead of a plugin. Elementor Pro is a plugin, not a theme. Install it as a new plugin only.

Download

Upload

Activate

Click to learn how to activate your license.

Note: If you encounter any issues with the ZIP File, check this article

Create a New Page

Creating a new page in WordPress

From the WordPress dashboard, click Pages > Add NewName your pageClick the Publish button (Visibility options may be set if page is to remain private)Click Edit with Elementor to enter the Elementor Website Builder

Note: If the Edit With Elementor button is clicked, before naming your pages and publishing, it will be given a default name such as Elementor #88. You will need to edit the Page Name and permalink slug by clicking the gear icon in the lower corner, or in the WordPress dashboard.  For more information about permalinks click here.

Using The Classic Editor

WordPress Classic Editor compatibility: Use the Edit with Elementor button below your title.

Important: Can』t edit with Elementor? click here for help

Elementor Panels Overview

Next step – Build your first page

Spacer Widget

The Spacer Widget creates a block of space anywhere on your page. You can fill this block of space with a color or an image. You can use it to create cool shapes and elements as well.

Content

Space: Set the amount of vertical space, in pixels.

Advanced

Many of the useful features of the Spacer Widget may be achieved by using the Advanced Tab controls. From here, you may apply backgrounds, masks, borders, and many more options to your Spacer Widget.

Build Your First Page

Elementor uses three main building blocks: Sections, Columns, and Widgets.

Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle.

You can choose to show or hide the editing handles by clicking the hamburger menu to open Elementor』s Style & Settings Configuration menu. Click the Preferences tab and slide the switch to Yes to show Editing Handles when hovering over the element』s edit button or No to hide the handles on hover.

Editing

To edit the Section, Column, or Widget, Right Click their handle. 

Note: Learn more about Right Click

Section

Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from our librarySet your Column structure Right click to Edit, Duplicate, Copy, Delete etc. Use the Section handle to: add a section, drag a section, or delete.

Note: Learn more about Sections here

Column

Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.To add more Columns Right Click > Add New ColumnInsert Widgets to your Columns

Note: Learn more about Columns here

Widget

Insert Widgets inside your ColumnsA Widget width is set by the Column width

Copy or Delete All Content

You may Copy or Delete all content on your page by right clicking on the empty section near the add section and templates icons. You can also paste items in another page on the same website.

Note: Learn more about Elementor Widgets here

Next step – Insert templates to your page

How To Use Additional Breakpoints

Breakpoints are used when designing your website to be responsive across all devices. Breakpoints use an additional set of CSS rules to apply to elements based on the width of the screen. For example, a Heading could be displayed at 55px for desktop, 34px for tablet, or 21px for mobile. Additional breakpoints may sometimes be needed for your design as well. We can now manage these Additional Breakpoints in the Site Settings. 

Let』s Get Started

Learn how to manage your Additional Breakpoints in the document below. In order to use the Additional Breakpoints feature, you may need to navigate to Elementor > Settings > Experiments and set it to Active. This feature will be active on new installs.

Responsive Mode Editor

To enter the Responsive Mode Editor, navigate to the lower corner of your editor panel and click the responsive mode icon. This will load the responsive modes. These will additionally load on any responsive controls in the editor.

Manage BreakPoints

To enter the breakpoint editor, you may click the gear icon located in the top corner of your screen. This may also be reached in your Site Settings.

Adding Additional Breakpoints

To add breakpoints, click the + icon in the active breakpoints control. A dropdown list will appear with the additional options. Add the needed breakpoints needed for your design here. You may also remove unnecessary breakpoints here by clicking the x icon by each additional breakpoint.

Note: The default Mobile and Tablet modes cannot be removed.

Editing The Breakpoint Values

You may edit the values needed for each Breakpoint by typing the value or using the up and down arrows.

Reload The Editor

Once you have set the Breakpoint options for your project, click the blue Save button in the Site Settings. A popup will appear to notify you that the page will need to reload for the new Breakpoints to appear. Click the Reload Now link.

Using Additional Breakpoints

You will now be able to use the responsive mode editor. Click the icons at the top of the screen to see how your Elementor design will appear on each Breakpoint width. Use the zoom level to preview for accessibility. You may also drag the horizontal and vertical handles to resize your preview. 

Using Cascading Responsive Values

Elementor uses a cascading concept across breakpoints, which means that changes cascade down. Changes you make on a larger breakpoint cascade down to the smaller breakpoint, but this will not work vise versa; Changes to a smaller breakpoint won』t affect the higher breakpoint unless you』re designing for widescreens. In this case, Elementor is cascading up, making the Desktop device the default breakpoint. Learn more about inherited values here.

Inner Section Widget

The Inner Section widget use is to create nested columns within a section. This way you can create complex layouts.

Drag an Inner Section Widget to your columnAs a default, you will get a section with two columnsYou can add or remove columns by right-click the columns handle icon You can drag and drop the Inner Section widget to any column on your page, but it cannot be used within another Inner Section.

Now you can style the Inner Section in the same way you would style a Section.

Advanced

Set the Advanced options that are applicable to this widget

Sticky Stay in Column Feature

Make your inner sections stay in column while sticky & create customized layouts.

In the inner section, go to the Advanced tab > Motion EffectsSticky: From the dropdown select between Top or BottomOnce you select Top or Bottom a Stay in Column option will appearSwitch to Yes to make your inner section sticky

Please note: If you only want to add a column to your section, right-click the column handle > Add New Column. You can add up to 10 columns.

Single Page Site Part

The Single Page Site Part section of the Theme Builder lists all Single Page Templates you』ve created, if any, giving quick access to add, edit, or delete any Single Page Template.

If no Single Page Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Single Page Site Part screen.

Once you』ve created at least one Single Page Template, you will be able to manage them here.

Edit An Existing Single Page Template』s Design

To edit an existing Single Page Template, click the Single Page label in the sidebar. This will open the Single Page Template』s details dashboard.Click the Edit link in the upper right corner of the specific Single Page Template you wish to edit. This will open the Elementor editor for that Single Page Template.

Edit An Existing Single Page Template』s Conditions

Click the Edit Conditions link in the bottom left corner of the Single Page Template you wish to edit. This will directly open the Display Conditions editor for that Single Page Template.

Note: The Dot Display in the upper left corner of the Single Page Template indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Single Page Template, while a Gray Dot indicates a draft Single Page Template. 

Note: The Instances label in the lower left corner of the Single Page Template displays the specific instances in which this template is being used on the site. 

Export A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don』t want to delete the Single Page Template, or click Delete to confirm that you do wish to delete this Single Page Template.

Rename A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don』t want to rename this Single Page Template.

Important: Only pages that use Default Template will have the Single Page Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Page Template applied to them.

How to Fix: Default Kit Missing Error

After installing a brand new site with Elementor Core / Pro, you may experience a Default Kit Missing error. This will also occur if the Default Kit is deleted from your template library.

.

The Solution

The way to solve this error is navigating to Elementor > Tools > General Tab. Here you will see an option to Recreate Kit. Click the Recreate Kit button and the Save Changes button, a new Default Kit will be generated. The Recreate Kit Option will disappear.

Note: This option is only visible if the default kit is missing or corrupted.