{"id":2365,"date":"2021-06-21T11:16:40","date_gmt":"2021-06-21T11:16:40","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2365"},"modified":"2023-04-24T13:07:45","modified_gmt":"2023-04-24T13:07:45","slug":"create-a-related-posts-popup-in-wordpress","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/","title":{"rendered":"Create a Related Posts Popup in WordPress"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2365\" class=\"elementor elementor-2365\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4f1ec080 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4f1ec080\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-73303aaa\" data-id=\"73303aaa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-20d1621a elementor-widget elementor-widget-video\" data-id=\"20d1621a\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=fKlIrBhHFK4&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-600075f5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"600075f5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ef98a04\" data-id=\"2ef98a04\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-294cb108 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"294cb108\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6921\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6921\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6922\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6922\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6921\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6921\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6921\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will show you how to add a popup to related posts that triggers on a certain point on your page. The popup can be used on any pages and posts in WordPress, even ones written without Elementor.<\/p><p>You will also learn how to add CSS filters to images, all using Elementor\u2019s Popup Builder.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6922\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6922\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6922\" tabindex=\"0\" hidden=\"hidden\"><p>hey everyone had us form elemental here<br \/>today we&#8217;ll create a pop-up to chose<br \/>related articles in order to do this we<br \/>will need to think outside the box for a<br \/>sec let&#8217;s say that the user is reading<br \/>an article on your blog and then when<br \/>reaching the end of the article a pop-up<br \/>is shown but instead of seeing an ad the<br \/>user exposed to other features posts and<br \/>articles this way we encourage our users<br \/>engagement while delivering a better<br \/>user experience let&#8217;s see how we do it<br \/>in elementors pop-up builder in finder<br \/>search for pop-up and then you pop up<br \/>and give it a name this time I&#8217;m going<br \/>to use a blank pop-up in the pop-up<br \/>setting change the width to 100 viewport<br \/>width the VW and the position to center<br \/>and bottom next I will open a new<br \/>section with 4 columns the left will be<br \/>the left I will add a heading widget<br \/>with some text and on the right I will<br \/>add an image widget so now that the<br \/>structure is ready let&#8217;s add a hover<br \/>effect and links to the posts that I<br \/>want to show starting with the links go<br \/>to the link drop down menu and choose<br \/>custom URL paste your link here<br \/>okay now let&#8217;s add some effects here I<br \/>want the pictures to be black and white<br \/>in their normal state and when hovering<br \/>over them I want them to fill with color<br \/>so under style go to CSS filters and<br \/>change the saturation to zero then under<br \/>the hover tab click on the CSS filter<br \/>and make sure that the saturation still<br \/>is set to 100 now when we hover over the<br \/>image we can already see the effect cool<br \/>let&#8217;s apply the same effect on the other<br \/>images by copy pasting the style with<br \/>the right click alright the only thing<br \/>that is missing is the interest effect<br \/>go to the pop-up setting and in the<br \/>entrance animation drop down menu choose<br \/>slide in up let&#8217;s also remove the<br \/>overlay background that appears when the<br \/>pop-up is displayed go to overlay and<br \/>switch the trigger to hide so now that<br \/>my design is ready<br \/>let&#8217;s click publish and set the<br \/>conditions triggers and advanced rules<br \/>click on add condition singular all<br \/>pages and choose the name of the page<br \/>where you want the pop-up to pop click<br \/>Next<br \/>I want the pop-up to show when the user<br \/>reaches a certain point of my article so<br \/>let&#8217;s switch the unscored to element<br \/>trigger &#8211; yes and in the selector field<br \/>type the class I&#8217;ll call it dot puppet<br \/>next for this example we&#8217;re not going to<br \/>set any advanced rules so click on save<br \/>and close now let&#8217;s add that class to<br \/>the element on our page where we want<br \/>the pop-up to appear for this example<br \/>are we set it to show when the user<br \/>reaches the share button section in the<br \/>section setup under the Advanced tab go<br \/>to CSS classes and type the same class<br \/>we said before now click update ok we&#8217;re<br \/>done let&#8217;s see how it looks like<br \/>nice so next time you have a pop up in<br \/>mind trying to think of it as an<br \/>additional section that appears on the<br \/>screen and not so much as an ad I hope<br \/>you enjoyed this tutorial don&#8217;t forget<br \/>to subscribe to our YouTube channel to<br \/>get all the latest updates and tutorials<br \/>see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we will show you how to add a popup to related posts that triggers on a certain point on your page. The popup can be used on any pages and posts in WordPress, even ones written without Elementor. You will also learn how to add CSS filters to images, [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9716,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,14],"tags":[41],"class_list":["post-2365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-pop-up","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Related Posts Popup in WordPress - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Related Posts Popup in WordPress - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will show you how to add a popup to related posts that triggers on a certain point on your page. The popup can be used on any pages and posts in WordPress, even ones written without Elementor. You will also learn how to add CSS filters to images, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T11:16:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T13:07:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Related Posts Popup in WordPress - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Create a Related Posts Popup in WordPress - Academy","og_description":"Overview Transcript Overview In this tutorial, we will show you how to add a popup to related posts that triggers on a certain point on your page. The popup can be used on any pages and posts in WordPress, even ones written without Elementor. You will also learn how to add CSS filters to images, [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/","og_site_name":"Academy","article_published_time":"2021-06-21T11:16:40+00:00","article_modified_time":"2023-04-24T13:07:45+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create a Related Posts Popup in WordPress","datePublished":"2021-06-21T11:16:40+00:00","dateModified":"2023-04-24T13:07:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/"},"wordCount":673,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Pop Up"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/","url":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/","name":"Create a Related Posts Popup in WordPress - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg","datePublished":"2021-06-21T11:16:40+00:00","dateModified":"2023-04-24T13:07:45+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Related-Posts-Popup.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-related-posts-popup-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create a Related Posts Popup in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2365"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2365\/revisions"}],"predecessor-version":[{"id":9482,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2365\/revisions\/9482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9716"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}