{"id":86093,"date":"2023-03-03T02:09:04","date_gmt":"2023-03-03T07:09:04","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=86093"},"modified":"2025-07-24T09:09:02","modified_gmt":"2025-07-24T13:09:02","slug":"how-to-reposition-the-slide-in-optin","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-reposition-the-slide-in-optin\/","title":{"rendered":"How to Reposition the Slide-In Campaign"},"content":{"rendered":"\n<p>OptinMonster makes it easy to customize the appearance of your campaigns, like how to reposition the Slide-in.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to reposition the Slide-in.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This guide assumes you&#8217;ve already <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-a-slide-in-scroll-box-optin-form\/\" target=\"_blank\" rel=\"noopener\" title=\"\">created a Slide-in campaign<\/a> you wish to reposition.<\/li>\n\n\n\n<li>This guide assumes that you&#8217;re already familiar with our <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"How to Use OptinMonster\u2019s Custom CSS Tool\">Custom CSS Tool<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Bottom Positions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Bottom Right<\/h3>\n\n\n\n<p>The bottom right is the default position for all Slide-in campaigns. No modifications are needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bottom Left<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the bottom left by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/j57nn842.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Bottom Center<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the bottom center by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/j57nnqp2.js\/\"><\/script>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>350 pixels is the default setting for new Slide-in campaigns, if you\u2019ve <a href=\"https:\/\/optinmonster.com\/docs\/how-to-change-the-campaign-width\/\" target=\"_blank\" rel=\"noopener\" title=\"\">changed the campaign container width<\/a> you will need to update the CSS to reflect your campaign\u2019s specific width. This code works only when you use pixel values, not percentages, for the campaign container width.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Top Positions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Top Right<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the top right by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/e50kky3o.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Top Center<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the top center by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/y26llgk2.js\/\"><\/script>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>350 pixels is the default setting for new Slide-in campaigns, if you\u2019ve <a href=\"https:\/\/optinmonster.com\/docs\/how-to-change-the-campaign-width\/\" target=\"_blank\" rel=\"noopener\" title=\"\">changed the campaign container width<\/a> you will need to update the CSS to reflect your campaign\u2019s specific width. This code works only when you use pixel values, not percentages, for the campaign container width.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Top Left<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the top left by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/qo96671o.js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Side Positions<\/h2>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>The 540px value in the codes below will need to be updated to specify the pixel height of your own Slide-in campaign. This code works only when you use pixel values, not campaign height percentages. The height of a campaign automatically adjusts based on the contents within it; you can <a href=\"https:\/\/stackoverflow.com\/questions\/10234154\/how-to-find-computed-size-of-any-element-in-chrome-developer-tools#:~:text=Just%20hover%20over%20the%20element%20name%20in%20the%20ribbon%20below%20the%20developer%20tools%20panel.%20The%20corresponding%20element%20will%20be%20highlighted%20in%20the%20browser%20window%20and%20the%20dimensions%20appear%20at%20a%20corner%20of%20it.\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">use your browser\u2019s dev tools to inspect the campaign and locate the displayed dimensions<\/a>.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Right Center<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the right center by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/m5l99dl5.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Left Center<\/h3>\n\n\n\n<p>Reposition the Slide-in campaign to the left-center by adding the following CSS using the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/x5njj0ro.js\/\"><\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>OptinMonster makes it easy to customize the appearance of your campaigns, like how to reposition the Slide-in. In this article, you&#8217;ll learn how to reposition the Slide-in. Before You Start Bottom Positions Bottom Right The bottom right is the default position for all Slide-in campaigns. No modifications are needed. Bottom Left Reposition the Slide-in campaign&nbsp;&hellip;<\/p>\n","protected":false},"author":7338,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[96],"documentation\/tags":[31457],"class_list":["post-86093","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-extending"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/86093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/7338"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=86093"}],"version-history":[{"count":18,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/86093\/revisions"}],"predecessor-version":[{"id":204239,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/86093\/revisions\/204239"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=86093"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=86093"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=86093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}