Add Elementor on Wordpress OceanWP Modal

To create a modal with Elementor in the OceanWP theme using the “Anywhere Elementor” plugin, you can follow these steps:

  1. Install and Activate Plugins:

    • First, make sure you have the OceanWP theme and Elementor plugin installed and activated on your WordPress website.
    • Install and activate the “Anywhere Elementor” plugin if you haven’t already. You can find and install it from the WordPress Plugin Repository.
  2. Create a Modal:

    • In your WordPress dashboard, go to the “Templates” section under “Elementor.”
    • Click on “Add New” to create a new template for your modal.
    • Give your template a name and click “Create Template.”
  3. Design Your Modal:

    • You’ll be taken to the Elementor editor. Design your modal content as you desire using Elementor’s drag-and-drop interface.
    • Add the content you want inside the modal, and customize it to your liking. You can add text, images, buttons, or any other Elementor widgets.
  4. Add Shortcode:

    • To add a shortcode inside your modal, you can use the “Shortcode” widget provided by Elementor. Drag and drop the “Shortcode” widget to the location where you want to insert your shortcode.
    • Paste your shortcode inside the “Shortcode” widget and customize its settings if needed.
  5. Set Modal Trigger URL:

    • Save your modal template.
    • Now, you need to specify where and how this modal should appear. To open the modal, you’ll set a trigger URL.
    • Edit the page or post where you want the modal to be triggered.
    • Add a link or a button that will trigger the modal. For the URL, use #omw-355 (as you specified in your request).
    • In the link settings, add the class omw-open-modal to the “CSS Classes” field. This class is used to trigger the modal.
  6. Publish Your Page/Post:

    • Update or publish your page or post.

Now, when you click the link or button on the page/post with the class omw-open-modal and URL #omw-355, it should trigger the modal you created with Elementor, displaying the content you designed inside it.

Remember to clear your browser cache or test in an incognito window if you encounter any issues to ensure you’re seeing the most up-to-date version of your site.

0%