{"id":13094,"date":"2024-03-20T14:54:21","date_gmt":"2024-03-20T13:54:21","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/template-page-corner-page-peel\/"},"modified":"2024-03-20T14:54:23","modified_gmt":"2024-03-20T13:54:23","slug":"template-page-corner-page-peel","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/template-page-corner-page-peel\/","title":{"rendered":"Template “PAGE CORNER – PAGE PEEL”"},"content":{"rendered":"\n

We’re going to explain how every single key in this template works.For the initial configuration of the behavioural message, please refer to the dedicated article how to configure a behavioural message<\/a>.<\/p>\n

\n
\"\"<\/a>
Page peel disabled<\/strong><\/figcaption><\/figure><\/div>
\n
\"\"
Page peel activated<\/strong><\/figcaption><\/figure><\/div>\n

LAYOUT->MORE<\/h2>\n\n

Hide for mobile: <\/strong>Hides the animation if you’re viewing the message from a mobile device<\/p>\n\n

Activate the page peel:<\/strong> with page peel deactivated the graphic that will be displayed is the one visible in the first image above, with page peel activated the graphic is as shown in the second image.<\/p>\n\n

Place at the top:<\/strong> The message will be shown in one of the top corners<\/p>\n\n

Fixed size (in px _ if dimension locked):<\/strong> Height and width of the corner. Clutter once you open the behavioral message.<\/p>\n\n

You want to lock in the size:<\/strong> Fix the maximum size of the corner footprint with the page peel open and visible<\/p>\n\n

Position on the left:<\/strong> The message will be shown in one of the left corners <\/p>\n\n

Additional CSS code:<\/strong> In this field, you can add valid CSS for customizing the message stylesheet<\/p>\n\n

LAYOUT->LOCATION AND DIMENSIONS<\/h2>\n\n

Button rollover border color<\/strong>: The color of the button border on hover, if any<\/p>\n\n

Button Border Color: The<\/strong> color of the button border, if any<\/p>\n\n

Button border size (in px)<\/strong>: Thickness of the button border in px, 0 if not desired<\/p>\n\n

Button Rollover Background Color: Hover<\/strong> button background color<\/p>\n\n

Button rollover text color: The<\/strong> color of the text inside the button on hover.<\/p>\n\n

Button Background Color: The<\/strong> color of the button background<\/p>\n\n

Button Text Color: The<\/strong> color of the button text<\/p>\n\n

Starting width\/height (in px):<\/strong> dimensions of the overall dimensions of the page peel at the start, with the page peel closed. This footprint is the square on which the page peel is built, so width and height in pixels are equal, the value set will correspond for both measurements<\/p>\n\n

Rollover width\/height (in px): <\/strong>Dimensions of the footprint of the page peel at the start, on hover, then on opening. This footprint is the square on which the page peel is built, so width and height in pixels are equal, the value set will correspond for both measurements<\/p>\n\n

Background color:<\/strong> Page peel background color<\/p>\n\n

Outer Edge Color:<\/strong> Page Peel Border Color<\/p>\n\n

Outer edge size (in px):<\/strong> Dimensions in pixels of the edge of the page peel, 0 if not desired<\/p>\n\n

Show outer border:<\/strong> deactivate\/activate the outer border with one click, equivalent to setting the size of the outer border to 0<\/p>\n\n

LAYOUT->MESSAGE TEXT<\/h2>\n\n

Uppercase button text:<\/strong> Transforming the text inside the button into all-caps text<\/p>\n\n

Uppercase Title Text: Transform<\/strong> the message entered in the Title Text<\/em> field to all caps<\/p>\n\n

Text Color: Selecting<\/strong> the font color used for text entered in the Text<\/em> field<\/p>\n\n

Title size (in px): The<\/strong> size of the font used in the title<\/p>\n\n

Title Color: The<\/strong> font size of the message entered in the Title Text<\/em> field<\/p>\n\n

Content Icon Size (in px):<\/strong> The size in pixels of the icon that can be placed before the Title Text<\/em><\/p>\n\n

Content Icon Color: The<\/strong> color of the icon selected in the previous step<\/p>\n\n

Title Text:<\/strong> Sentence that will be shown as a title within the page peel, type h3. It is possible to set color, size, upper\/lower case by configuring the fields seen above<\/p>\n\n

Text:<\/strong> Text contained within the page peel, paragraph type. It is possible to set color, size, upper\/lower case by configuring the fields seen above<\/p>\n\n

Content Icon (write hide to hide):<\/strong> icon shown before the Title Text<\/em>. To hide the icon, write hide<\/em> inside the field<\/p>\n\n

Text size (in px): The<\/strong> size of the font used for the button text<\/p>\n\n

LAYOUT-> BUTTON<\/h2>\n\n

Target button:<\/strong> Choose whether you want the link to open in a new tab or in the same window<\/p>\n\n

Button Link:<\/strong> Enter the url to which the button should link<\/p>\n\n

Button text size (in px): The<\/strong> font size used for the button text<\/p>\n\n

Close Icon Rollover Color: Hover<\/strong> color of the close icon background<\/p>\n\n

Close Icon Color: Background<\/strong> color of the close icon<\/p>\n\n

Close button icon:<\/strong> Choose the icon used in the button that closes the page peel<\/p>\n\n

Button Rounded Corners (in px):<\/strong> Rounding radius of button corners <\/p>\n\n

Button Text:<\/strong> CTA button text<\/p>\n

\n

Was this content useful?<\/strong><\/div><\/p>\n

Thanks for contributing!<\/p>\n

\nYes<\/a>\nNo<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

We’re going to explain how every single key in this template works.For the initial configuration of the behavioural message, please refer to the dedicated article how to configure a behavioural message. LAYOUT->MORE Hide for mobile: Hides the animation if you’re viewing the message from a mobile device Activate the page peel: with page peel deactivated […]<\/p>\n","protected":false},"author":24,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13094","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13094"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/24"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13094\/revisions"}],"predecessor-version":[{"id":13097,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13094\/revisions\/13097"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13094"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13094"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}