{"id":13170,"date":"2024-03-20T15:12:28","date_gmt":"2024-03-20T14:12:28","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/templates-next-warning-next-video-warning-and-next-warning-carousel\/"},"modified":"2024-03-20T15:12:29","modified_gmt":"2024-03-20T14:12:29","slug":"templates-next-warning-next-video-warning-and-next-warning-carousel","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/templates-next-warning-next-video-warning-and-next-warning-carousel\/","title":{"rendered":"Templates “NEXT WARNING”, “NEXT VIDEO WARNING” and “NEXT WARNING CAROUSEL”"},"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

\"Next<\/a><\/figure>\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

OPTIONS > More<\/h3>\n\n\n\n

Show message on upload<\/strong> immediately visible on upload.<\/p>\n\n\n\n

Show after scrolling (in px)<\/strong> indicates how many px we need to scroll from the top of the page to see the message.<\/p>\n\n\n\n

Idle time since close<\/strong> shows how long I don’t have to show the message again if it is closed.<\/p>\n\n\n\n

Only after x seconds<\/strong> do we set a delay in the display.<\/p>\n\n\n\n

Initial animation (fadein\/fadeout):<\/strong> we can decide whether to apply an effect to the opening and closing of the message.<\/p>\n\n\n\n

Warning duration (in seconds):<\/strong> we can set a maximum time for which the message will remain visible (only if the Warning key visible until closed set to no).<\/p>\n\n\n\n

Warning visible until closed<\/strong> : we can make sure that the message remains visible until the user closes it.<\/p>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

LAYOUT > Content recommendation(only present in the “Next Warning Carousel” template)<\/h3>\n\n\n\n

Show REC<\/strong> : we can decide whether or not to hide the carousel with recommendations<\/p>\n\n\n\n

Show REC before content<\/strong> if set to “yes” the carousel is inserted before the content, otherwise it is inserted after.<\/p>\n\n\n\n

REC Title<\/strong> : We can enter the title text that appears before the carousel.<\/p>\n\n\n\n

LAYOUT > Message Text<\/h3>\n\n\n\n

Text size (in px) | Title size (in px) | Text Color | Title Color<\/strong> : We can set color and size for titles and text.<\/p>\n\n\n\n

Text content<\/strong> : small visual editor from which we can enter the text to be displayed in the message.<\/p>\n\n\n\n

Side image<\/strong> we can insert a side image through the Blendee media gallery.<\/p>\n\n\n\n

Display side image<\/strong> we can decide whether to display the side image or not.<\/p>\n\n\n\n

Side image on the left<\/strong> : if set to “yes” the image will be inserted on the left, otherwise it will go to the right.<\/p>\n\n\n\n

Side image width (in px):<\/strong> we can set the maximum width of the side image.<\/p>\n\n\n\n

Link color<\/strong> : We can set a color for links within the text content.<\/p>\n\n\n\n

Additional Button Target<\/strong> : We set the target (where the link opens) of the additional button.<\/p>\n\n\n\n

Additional button text<\/strong> : we can insert the internal text of the button (colors and more are taken from those we set in the other keys).<\/p>\n\n\n\n

Additional button link<\/strong> : enter the URL to which the button should link.<\/p>\n\n\n\n

Hide additional button<\/strong> : we can decide whether to hide the additional button.<\/p>\n\n\n\n

Video Iframe:<\/strong> in the case of a warning with video, we can insert the iframe of the video to be displayed.<\/p>\n\n\n\n

LAYOUT > More<\/h3>\n\n\n\n

Maximum box width (in px):<\/strong> We can set a maximum width of the message.<\/p>\n\n\n\n

We<\/strong> can insert a CSS shape, we refer you to the site<\/a>, to be able to generate your custom shapes.<\/p>\n\n\n\n

We can decide whether or not to show the outer overlay<\/strong>.<\/p>\n\n\n\n

Animated outer overlay:<\/strong> We can decide whether to display animated shapes.<\/p>\n\n\n\n

Outer Overlay Opacity (in %)<\/strong> accepts values from 1 to 100 and sets the opacity of the outer overlay.<\/p>\n\n\n\n

Live Background Shape Opacity (in %)<\/strong> sets the opacity of animated outer shapes.<\/p>\n\n\n\n

Closing box icon<\/strong> : we can select the icon to be used for the close button of the message.<\/p>\n\n\n\n

zindex<\/strong> We set the z-index to place the message on top of the site elements.<\/p>\n\n\n\n

LAYOUT > Position & Size<\/h3>\n\n\n\n

Distance of the box from the sides (in px):<\/strong> set a minimum distance from the edges that the message must respect.<\/p>\n\n\n\n

Box position<\/strong> a select appears where we can set the position of our message.<\/p>\n\n\n\n

Show Drop Shadow<\/strong> : We can turn the drop shadow on or off.<\/p>\n\n\n\n

Outer Overlay Color<\/strong> sets the background color of the outer overlay.<\/p>\n\n\n\n

Live Background Shape Color<\/strong> sets the color of animated outer shapes.<\/p>\n\n\n\n

Show Drop Shadow<\/strong> : We can turn the drop shadow on or off.<\/p>\n\n\n\n

Close Icon Color<\/strong> to set the close icon color of the message.<\/p>\n\n\n\n

Outer border color: Outer border color<\/strong> of the message.<\/p>\n\n\n\n

Border width (in px): The<\/strong> outer border thickness of the message.<\/p>\n\n\n\n

Background color<\/strong> to set the background color of the entire message.<\/p>\n\n\n\n

Right position closing icon (in px) | Top position closing icon (in px)<\/strong> we can place the closing icon, we can also enter negative values.<\/p>\n\n\n\n

Content padding (in px): The<\/strong> distance of the content from the edges of the message.<\/p>\n\n\n\n

Rounded corners (in px)<\/strong> to set the rounded corners of the message.<\/p>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

FORMS & BUTTONS > Button<\/h3>\n\n\n\n

Button Border Size<\/strong> | Button border color<\/strong> : The color and thickness of the button border.<\/p>\n\n\n\n

Rollover Button Border Color<\/strong> sets the color of the borders on hover.<\/p>\n\n\n\n

Rounded corners of buttons (in px): The<\/strong> distance between the content and the edge of the button.<\/p>\n\n\n\n

Button text size (in px)<\/strong><\/p>\n\n\n\n

Buttons background rollover<\/strong> background color on hover.<\/p>\n\n\n\n

Button Background: The<\/strong> background color of the buttons.<\/p>\n\n\n\n

Text color: Buttoned rollover<\/strong> text color on hover.<\/p>\n\n\n\n

Text Color Buttons: Text Color<\/strong> Buttons.<\/p>\n\n\n\n

FORMS AND BUTTONS > position and size(not present in the template with video)<\/h3>\n\n\n\n

Hide form:<\/strong> we can decide whether or not to hide the form.<\/p>\n\n\n\n

Form Input Background Color<\/strong> sets the color of the form’s inputs.<\/p>\n\n\n\n

Form Input Border Color<\/strong> sets the border color for form inputs.<\/p>\n\n\n\n

Checkbox\/radio form color<\/strong> sets the color with which we highlight selected checkboxes and radios.<\/p>\n\n\n\n

Form label color<\/strong><\/strong>: The color of the text on the form labels.<\/p>\n\n\n\n

Form background color<\/strong> : Set the background color of the form.<\/p>\n\n\n\n

Rounded corners of the form (in px):<\/strong> if the background of the form is active, we can also set the rounded corners.<\/p>\n\n\n\n

Padding form (in px if background is active)<\/strong> If the background is active, we can set a margin between the border of the form and the contents.<\/p>\n\n\n\n

To show form background,<\/strong> we can activate or deactivate the background of the form (if deactivated, the padding will be 0).<\/p>\n<\/div>\n<\/div>\n\n

Keys present only in the “Next Warning Carousel” template<\/h2>\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

CAROUSEL > Location & Size<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Active Carousel Bullet Background Color<\/strong> | Active Bullet Carousel Border Color<\/strong> | Color Bullet Carousel Border<\/strong> | Bullet carousel rollover background color<\/strong> | Bullet Border Color: Carousel Rollover<\/strong> : Customize the colors of the bullets used for carousel pagination.<\/p>\n\n\n\n

Margin before and after the carousel (in px)<\/strong> We set a margin before and after the carousel.<\/p>\n\n\n\n

Central carousel controls<\/strong> puts buttons and bullets all central.<\/p>\n\n\n\n

Carousel controls grouped to the left (only if centered set to off)<\/strong> puts all controls grouped to the left.<\/p>\n\n\n\n

Carousel padding between elements (in px)<\/strong> distance between one card and another.<\/p>\n\n\n\n

Right arrow carousel<\/strong> icon for left arrow.<\/p>\n\n\n\n

Left arrow carousel<\/strong> icon for right arrow.<\/p>\n\n\n\n

Bullet carousel background color<\/strong> : We customize the colors of the bullets used for the layout of the carousel.<\/p>\n\n\n\n

Horizontal padding: Carousel controls (in px): Lateral<\/strong> distance between the icon and the edge of the “left” and “right” arrows.<\/p>\n\n\n\n

Carousel controls icon size (in px):<\/strong> left and right arrow icon size.<\/p>\n\n\n\n

Vertical padding: carousel controls (in px): distance<\/strong> between the icon and the top and bottom edges of the left and right arrows.<\/p>\n\n\n\n

Border thickness of carousel controls (in px): Thickness<\/strong> of the border of left and right arrow buttons.<\/p>\n\n\n\n

Rounded corners, carousel controls (in px),<\/strong> rounded corners, left and right arrow buttons.<\/p>\n\n\n\n

Carousel Controls on the Sides<\/strong> inserts arrows on either side of the carousel, one on the left and one on the right, centered vertically to the content.<\/p>\n\n\n\n

Bullet carousel size (in px):<\/strong> We set the size of the pagination bullets.<\/p>\n\n\n\n

Card bottom edge size (in px)<\/strong> | Top card edge size (in px)<\/strong> | Card Roll Border Color<\/strong> | Card Rollover Background Color<\/strong> | Card Border Color<\/strong> | Card Background Color<\/strong> | Vertical card padding (in px)<\/strong> | Horizontal card padding (in px)<\/strong> | Left side card border size (in px)<\/strong> | Size of the left side edge of the card (in px):<\/strong> customizations of the individual cards.<\/p>\n\n\n\n

CAROUSEL > More<\/h3>\n\n\n\n

Activate drag mouse carousel<\/strong> We can activate or deactivate the drag of the carousel with the mouse.<\/p>\n\n\n\n

Hide carousel nav<\/strong> hides pagination bullets.<\/p>\n\n\n\n

Hide Carousel Controls<\/strong> hides the right-left arrows.<\/p>\n\n\n\n

Carousel autoplay<\/strong> sets the carousel autoplay.<\/p>\n\n\n\n

Carousel autoplay pause rollover<\/strong> if set to “yes”, when the mouse stops in the carousel area, it no longer scrolls automatically.<\/p>\n\n\n\n

Carousel animation timeout<\/strong> sets the animation time for autoplay.<\/p>\n\n\n\n

Card Image Animation<\/strong> toggles the image zoom on or off when the mouse hovers over the card.<\/p>\n\n\n\n

CAROUSEL > Content recommendation<\/h3>\n\n\n\n

Order Product Name<\/strong> | Brand Order<\/strong> | Image Order<\/strong> | Order short description<\/strong> | Order price<\/strong> we can decide the order of each item the higher the value and the sooner it will be entered.<\/p>\n\n\n\n

Show currency symbol before price <\/strong>if set to “yes” shows the currency before the price, otherwise it inserts it after.<\/p>\n\n\n\n

Brand name size (in px)<\/strong> | Brand Name Color<\/strong> | Color Reduced Price<\/strong> | Original price<\/strong> | Product description<\/strong> color | Product Name Color<\/strong> | Product description size (in px)<\/strong> | Product Name Size (in px)<\/strong> | Maximum carousel image height (in px)<\/strong> | Bar size original price (in px)<\/strong> | Bar Color Original Price<\/strong> | Size sale price (in px)<\/strong> | Original price size (in px)<\/strong> we set the colors and size of the text content of the cards.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Hide Additional Text Discount Label<\/strong> | Discount Label on the Left<\/strong> | Discount Label at the top<\/strong> | Rounded Corners Discount Label<\/strong> | Discount label text size (in px)<\/strong> | Discount Color Label<\/strong> | Vertical Distance Discount Label (in px)<\/strong> | Horizontal Distance Discount Label (in px)<\/strong> | Discount label internal padding (in px)<\/strong> | Additional Text Discount Label<\/strong> | Discount label background<\/strong> : these parameters are used to customize the discount label.<\/p>\n\n\n\n

Hide Image Discount Label<\/strong> | Hide REC Button<\/strong> | Hide REC Pricing<\/strong> | Hide REC Image<\/strong> | Hide REC Description<\/strong> | Hide REC Name<\/strong> | Hide REC brand:<\/strong> we can hide the elements of the card that we want.<\/p>\n\n\n\n

Original Price Slanted Bar<\/strong> : If set to “Yes”, the bar on the sale price will be oblique, otherwise it will be straight.<\/p>\n\n\n\n

CAROUSEL > Button<\/h3>\n\n\n\n

Full-width button<\/strong> sets the card button across the width of the card.<\/p>\n\n\n\n

Button Text<\/strong> : Enter the text for the card buttons.<\/p>\n\n\n\n

Padding above\/below button (in px)<\/strong> sets the top\/bottom margin between the content and the edge of the button.<\/p>\n\n\n\n

Button side padding (in px)<\/strong> sets the left\/right margin between the content and the edge of the button.<\/p>\n<\/div>\n<\/div>\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. OPTIONS > More Show message on upload immediately visible on upload. Show after scrolling (in px) indicates how many px we need to scroll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13170","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\/13170"}],"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\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13170\/revisions"}],"predecessor-version":[{"id":13173,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13170\/revisions\/13173"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13170"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13170"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}