<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
{"id":2192,"date":"2018-07-29T16:24:17","date_gmt":"2018-07-29T10:54:17","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click\/?p=2192"},"modified":"2018-07-29T16:24:17","modified_gmt":"2018-07-29T10:54:17","slug":"style-8-shortcode","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click\/style-8-shortcode\/","title":{"rendered":"Style-8 &#8211; Shortcode"},"content":{"rendered":"\n<p><strong>since Version 1.4<\/strong><\/p>\n\n\n<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } \r\n    .ht-click .s8_img {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n    }\r\n    \r\n    .ht-click .s8_content {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n        border-radius: 5px;\r\n    }\r\n        \r\n    .ht-click .s8_content span {\r\n        padding: 5px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ht-click .s8_content .heading {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .ht-click .s8_content .description {\r\n        font-size: 12px;\r\n    }\r\n    \r\n    .ht-click .s8_content.right {\r\n        animation: 1s s8_translate_right;\r\n    }\r\n    \r\n    .ht-click .s8_content.left {\r\n        animation: 1s s8_translate_left;\r\n    }\r\n    \r\n    @keyframes s8_translate_right {\r\n        0% {\r\n            transform: translateX(55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    \r\n    @keyframes s8_translate_left {\r\n        0% {\r\n            transform: translateX(-55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click ht-click-analytics style-8 style-8-sc\" style=\"  cursor: pointer; display: inline-flex; z-index: 9999; \"  data-htclick=\"style-8-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-8-shortcode\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <div class=\"s8_cta\" style=\" display: -ms-flexbox; display: -webkit-flex; display: inline-flex; \">\r\n        <img decoding=\"async\" class=\"s8_img\" src=\" https:\/\/media.giphy.com\/media\/zSiEygkcONzyw\/giphy.gif\" style=\" height: 70px; width: 70px; z-index: 999999;  \" alt=\"whatsapp\">\r\n        <div class=\"s8_content  left\" style=\" flex-direction: column; justify-content: center; align-items: center;     background-color: #fff; border: 1px solid #ddd; height: 70px; width: 270px;  margin-left: -4px;\" >\r\n            <span class=\"heading\" style=\"color:  #000\"> WhatsApp us<\/span>\r\n            <span class=\"description\" style=\"color:  #000\"> We will response as soon as possible<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n\r\n    <\/div>\r\n    \n\n\n\n<p><br\/>[click style=8]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Attributes Specific to Style-8<\/h3>\n\n\n\n<p><strong>s8_img &#8211;<\/strong>  To change the Image, Add Image URL.<\/p>\n\n\n\n<p><strong>s8_line_1 &#8211; <\/strong>To change the text in the first line.<\/p>\n\n\n\n<p><strong>s8_line_2 &#8211;<\/strong> To change the text in the second line.<\/p>\n\n\n\n<p><strong>s8_background_color &#8211;<\/strong> To change the Background color.<\/p>\n\n\n\n<p><strong>s8_border_color &#8211;<\/strong> To change the Border color.<\/p>\n\n\n\n<p><strong>s8_image_height &#8211;<\/strong> To change the height of the image.<\/p>\n\n\n\n<p><strong>s8_image_width &#8211;<\/strong> To change the width of the image.<\/p>\n\n\n\n<p><strong>s8_content_height &#8211;<\/strong> To change the height of the content.<\/p>\n\n\n\n<p><strong>s8_content_width &#8211;<\/strong> To change the width of the content.<\/p>\n\n\n\n<p><strong>s8_img_position &#8211;<\/strong> To change the position of the image.\u00a0<\/p>\n\n\n\n<p>If style position is right to screen then select right\u00a0if left to screen then select left.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Other Attributes<\/h3>\n\n\n\n<p><strong><strong>num<\/strong> \u2013 <\/strong>( to change the number )<strong><br\/><strong>style<\/strong> \u2013 <\/strong>( e.g. style=1 \u2013 right now there are 8 styles )<strong><br\/>position<\/strong>\u00a0\u00a0\u2013\u00a0 (To change the position )<br\/>E.g. position=fixed\u00a0 \u2013 to add fixed position style,\u00a0 any\u00a0 CSS positions<br\/><strong>top<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<br\/><strong>right<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2%)<br\/><strong>bottom<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<br\/><strong>left<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<\/p>\n\n\n\n<p><strong>Sample Example:<\/strong><\/p>\n\n\n\n<p>To Change the image, line1, line2, background color, border color.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[click style=8 s8_img=\"image-url-here\" s8_img_position=left s8_line_1=\"Talk to our Sales Team\" s8_line_2=\"Working Hours - 08:00 to 16:00\" s8_border_color=\"#041c1c\" s8_background_color=\"ecf298\"]<\/pre>\n\n\n<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } \r\n    .ht-click .s8_img {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n    }\r\n    \r\n    .ht-click .s8_content {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n        border-radius: 5px;\r\n    }\r\n        \r\n    .ht-click .s8_content span {\r\n        padding: 5px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ht-click .s8_content .heading {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .ht-click .s8_content .description {\r\n        font-size: 12px;\r\n    }\r\n    \r\n    .ht-click .s8_content.right {\r\n        animation: 1s s8_translate_right;\r\n    }\r\n    \r\n    .ht-click .s8_content.left {\r\n        animation: 1s s8_translate_left;\r\n    }\r\n    \r\n    @keyframes s8_translate_right {\r\n        0% {\r\n            transform: translateX(55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    \r\n    @keyframes s8_translate_left {\r\n        0% {\r\n            transform: translateX(-55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click ht-click-analytics style-8 style-8-sc\" style=\"  cursor: pointer; display: inline-flex; z-index: 9999; \"  data-htclick=\"style-8-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-8-shortcode\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <div class=\"s8_cta\" style=\" display: -ms-flexbox; display: -webkit-flex; display: inline-flex; \">\r\n        <img decoding=\"async\" class=\"s8_img\" src=\" https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/image1-e1533386781145.jpg\" style=\" height: 70px; width: 70px; z-index: 999999;  \" alt=\"whatsapp\">\r\n        <div class=\"s8_content  left\" style=\" flex-direction: column; justify-content: center; align-items: center;     background-color: #ecf298; border: 1px solid #041c1c; height: 70px; width: 270px;  margin-left: -4px;\" >\r\n            <span class=\"heading\" style=\"color:  #000\"> Talk to our Sales Team<\/span>\r\n            <span class=\"description\" style=\"color:  #000\"> Working Hours - 08:00 to 16:00 <\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n\r\n    <\/div>\r\n    \n\n\n\n<p>To make the style look at the fixed position on the screen &#8211; This style appears at the bottom right side of this page.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[click style=8 position=fixed bottom=40px right=40px]<\/pre>\n\n\n<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } \r\n    .ht-click .s8_img {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n    }\r\n    \r\n    .ht-click .s8_content {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n        border-radius: 5px;\r\n    }\r\n        \r\n    .ht-click .s8_content span {\r\n        padding: 5px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ht-click .s8_content .heading {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .ht-click .s8_content .description {\r\n        font-size: 12px;\r\n    }\r\n    \r\n    .ht-click .s8_content.right {\r\n        animation: 1s s8_translate_right;\r\n    }\r\n    \r\n    .ht-click .s8_content.left {\r\n        animation: 1s s8_translate_left;\r\n    }\r\n    \r\n    @keyframes s8_translate_right {\r\n        0% {\r\n            transform: translateX(55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    \r\n    @keyframes s8_translate_left {\r\n        0% {\r\n            transform: translateX(-55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click ht-click-analytics style-8 style-8-sc\" style=\" position:fixed;right:40px;bottom:40px; cursor: pointer; display: inline-flex; z-index: 9999; \"  data-htclick=\"style-8-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-8-shortcode\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <div class=\"s8_cta\" style=\" display: -ms-flexbox; display: -webkit-flex; display: inline-flex; \">\r\n        <img decoding=\"async\" class=\"s8_img\" src=\" https:\/\/picsum.photos\/200\/300?image=0\" style=\" height: 70px; width: 70px; z-index: 999999;  order: 1;\" alt=\"whatsapp\">\r\n        <div class=\"s8_content  right\" style=\" flex-direction: column; justify-content: center; align-items: center;     background-color: #fff; border: 1px solid #ddd; height: 70px; width: 270px;  margin-right: -4px;\" >\r\n            <span class=\"heading\" style=\"color:  #000\"> WhatsApp us<\/span>\r\n            <span class=\"description\" style=\"color:  #000\"> We will response as soon as possible<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n\r\n    <\/div>\r\n    \n","protected":false},"excerpt":{"rendered":"<p>since Version 1.4 WhatsApp us We will response as soon as possible Attributes Specific to Style-8 s8_img &#8211; To change the Image, Add Image URL. s8_line_1 &#8211; To change the text in the first line. s8_line_2 &#8211; To change the text in the second line. s8_background_color &#8211; To change the Background color. s8_border_color &#8211; To &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/holithemes.com\/plugins\/click\/style-8-shortcode\/\"> <span class=\"screen-reader-text\">Style-8 &#8211; Shortcode<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-2192","post","type-post","status-publish","format-standard","hentry","category-docs","category-styles"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/2192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/comments?post=2192"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/2192\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/media?parent=2192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/categories?post=2192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/tags?post=2192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}