{"id":1847,"date":"2015-07-16T12:00:26","date_gmt":"2015-07-16T17:00:26","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=1847"},"modified":"2018-04-10T02:20:57","modified_gmt":"2018-04-10T07:20:57","slug":"easily-create-sticky-buttons-in-everweb","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2015\/07\/16\/easily-create-sticky-buttons-in-everweb\/","title":{"rendered":"Easily Create \u2018Sticky\u2019 Buttons in EverWeb"},"content":{"rendered":"<p>Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen.<\/p>\n<p>This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new \u2018Fixed Position\u2019 feature in the Metrics Inspector. \u2018Fixed Position\u2019 lets you lock the position of an object on its x-axis. This means that as you scroll up and down your page (i.e. along the y-axis), the object remains fixed in place.<\/p>\n<p>Just follow the simple steps below to easily have social media buttons on the vertical and always visible.<\/p>\n<ol>\n<li>First add \u00a0the social media buttons that you want to your page, e.g. Facebook, LinkedIn, Pinterest, Email, Google Plus etc. Using the \u2018Insert &gt; Button menu to add buttons to your page or use drag and drop your buttons from the Widget Inspector on to your page. When placing buttons line them up vertically close to the left or right hand edge of the page.<\/li>\n<li>When you add each button, make sure that you tick the box \u2018Fixed Position\u2019 on the Metrics Inspector. This will lock your button in place on the horizontal x-axis (see screenshot below.)\n<p><div id=\"attachment_1885\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_11.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1885\" class=\"wp-image-1885\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_11.png\" alt=\"screenshot_11\" width=\"784\" height=\"523\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_11.png 1208w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_11-300x200.png 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_11-1024x683.png 1024w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/a><p id=\"caption-attachment-1885\" class=\"wp-caption-text\">To fix the social media button in place, first select it, then checkmark the box &#8216;Fixed Position&#8217; in the Metrics Inspector, as shown in the example above.<\/p><\/div><\/li>\n<li>Remember to make sure that your Social Media buttons are properly aligned and distributed. <a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/sb1a.jpg\"><br \/>\n<\/a>Select all of the buttons that you have placed on the page. Next use the \u2019Arrange &gt; Align Objects &gt; Left\u2019 menu so the buttons appear flush to the left, and use \u2018Arrange &gt; Distribute Objects &gt; Vertically\u2019 to evenly space the buttons.<\/li>\n<li>If you are adding buttons to a Master Page, you may need to use \u2018Always on Top\u2019. Objects on Master Pages lie underneath those on your normal web page. If you find your buttons are not visible use \u2018Always on Top\u2019 so that they appear above all other objects on your page.<\/li>\n<li>The last \u00a0step is to use Preview to see how your design looks and to test out your \u2018Sticky\u2019 buttons before publishing (see screenshots below.) Always remember to test your buttons. Once you have published your website, don\u2019t forget to test each button to make sure that your links work properly!<\/li>\n<\/ol>\n<div id=\"attachment_1897\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_121.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1897\" class=\"wp-image-1897\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_121.png\" alt=\"screenshot_12\" width=\"784\" height=\"643\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_121.png 981w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_121-300x246.png 300w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/a><p id=\"caption-attachment-1897\" class=\"wp-caption-text\">Use Preview to see how your &#8216;Sticky&#8217; buttons work.<\/p><\/div>\n<p><div id=\"attachment_1898\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_13.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1898\" class=\"wp-image-1898\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_13.png\" alt=\"screenshot_13\" width=\"784\" height=\"644\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_13.png 980w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_13-300x246.png 300w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/a><p id=\"caption-attachment-1898\" class=\"wp-caption-text\">As you scroll up and down your web page, the social media buttons remain in place as the page content slides under the buttons.<\/p><\/div> <!--codes_iframe--><!--\/codes_iframe--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen. This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new \u2018Fixed Position\u2019 [&hellip;]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,252,77],"tags":[279,155],"class_list":["post-1847","post","type-post","status-publish","format-standard","hentry","category-everweb","category-everweb-software","category-social-media-optimization","tag-everweb","tag-rage-software"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=1847"}],"version-history":[{"count":31,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1847\/revisions"}],"predecessor-version":[{"id":3629,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1847\/revisions\/3629"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=1847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=1847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=1847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}