{"id":588,"date":"2021-10-08T14:59:00","date_gmt":"2021-10-08T14:59:00","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=588"},"modified":"2021-10-08T14:59:19","modified_gmt":"2021-10-08T14:59:19","slug":"spyro-price","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-price\/","title":{"rendered":"Spyro Price"},"content":{"rendered":"<div  class=\"tatsu-BybnooRaEF tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-H1e2soAT4Y\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-BkG2iRpVK\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-S183oAaVY   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-others-container\"><ul id=\"menu-others\" class=\"menu\"><li id=\"menu-item-594\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-594\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/404-error-after-demo-import\/\" title=\"404 Error after Demo Import\">404 Error after Demo Import<\/a><\/li>\n<li id=\"menu-item-538\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-538\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-performance\/\" title=\"Site Performance\">Site Performance<\/a><\/li>\n<li id=\"menu-item-536\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-536\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/multi-language-support\/\" title=\"Multi Language Support\">Multi Language Support<\/a><\/li>\n<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-translation\/\" title=\"Site Translation\">Site Translation<\/a><\/li>\n<li id=\"menu-item-540\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-540\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/set-up-single-page-site\/\" title=\"Set up Single Page Site\">Set up Single Page Site<\/a><\/li>\n<li id=\"menu-item-534\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-534\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-theme\/\" title=\"Update Theme\">Update Theme<\/a><\/li>\n<li id=\"menu-item-535\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-535\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-plugins\/\" title=\"Update Plugins\">Update Plugins<\/a><\/li>\n<li id=\"menu-item-550\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-550\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/change-log\/\" title=\"Change Log\">Change Log<\/a><\/li>\n<li id=\"menu-item-542\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-542\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/typehub\/\" title=\"Typehub\">Typehub<\/a><\/li>\n<li id=\"menu-item-541\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-541\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/colorhub\/\" title=\"Colorhub\">Colorhub<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-BkG2iRpVK.tatsu-column{width: 25%;}.tatsu-BkG2iRpVK.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-BkG2iRpVK > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BkG2iRpVK > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BkG2iRpVK > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BkG2iRpVK > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BkG2iRpVK.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BkG2iRpVK.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BkG2iRpVK.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-S1lMhiR6EF\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1CnjCpVF   \" ><style>.tatsu-H1CnjCpVF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1CnjCpVF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"spyro-modules\/\" target=\"_blank\" rel=\"noopener\"><span class=\"tatsu-inline-link-style2\">CATEGORY &gt; SPYRO MODULES<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1h0oR6VY   \" ><style>.tatsu-H1h0oR6VY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1h0oR6VY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Price<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJnk2AT4t   \" ><style>.tatsu-HJnk2AT4t .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJnk2AT4t .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">With Spyro Price, you can list down the pricing information of the products\/plan you want to offer on your website.<\/span><strong id=\"docs-internal-guid-7497e6c8-7fff-0548-02e4-ddb2fb1bff52\" style=\"font-weight: normal\"><\/strong><\/span><\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\">\u00a0<\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">The Spyro Price is also a multilevel module consisting of plans\/features of the same type where each plan\/feature is an Individual Sub Module, which will have the controls necessary for setting the service, while the parent module will have settings that affect the entire service or all individual service such as Setting the Monthly Price, Annual Price, Plan Label, Button Text, Plan Icon, and the Link URL. And, Styling options like Price Table Background, Price Table Header, Price Table Body, Button Style, and Button Colors.<\/span><\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\">\u00a0<\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">In order to add the Spyro Price Module to your page first, edit the page using Tatsu and add a section with a column\/row and then add the Spyro Packages Module in it.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Syrbn0TEF   \" ><style>.tatsu-Syrbn0TEF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Syrbn0TEF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Price Plan Features<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-rJOf2R64Y  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1564px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 51.662404092072%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Price-Plan-Price-Plan.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Price Plan - Price Plan\" title = \"Spyro Price Plan &#8211; Price Plan\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Price-Plan-Price-Plan.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-rJOf2R64Y .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-rJOf2R64Y.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByXr30aVK   \" ><style>.tatsu-ByXr30aVK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByXr30aVK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">In each plan feature, you can alter the <strong>Feature<\/strong> name and add any of your own product\/service feature names along with a suitable icon from the Tatsu Icons available in the builder.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">And, from the <strong>Style<\/strong> tab, you can alter the individual<strong> Icon Color<\/strong> and the <strong>Feature Color<\/strong> using Hex, RGBA, Color Swatches, or with a Color Palette.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can have as many plan feature lists as you like and can configure each item the same way as discussed above.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJVUhAT4Y   \" ><style>.tatsu-BJVUhAT4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJVUhAT4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Spyro Price Content<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r1ND2Aa4Y   \" ><style>.tatsu-r1ND2Aa4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r1ND2Aa4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using Spyro Price Content Tab you can alter Parent things like the Monthly Price, Annual Price, Plan label, Button Text, Plan Icon using the Tatsu Icons found in the builder and the Button link URL.\u00a0<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJovnApEt   \" ><style>.tatsu-BJovnApEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJovnApEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Spyro Price Style<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJh_30a4t   \" ><style>.tatsu-BJh_30a4t .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJh_30a4t .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using the Style tab you can style the Price Table Background and change its Background Color. Style Price Table Header you can change the Label Color, Price Color, Icon Color, Adjust Price Table Header Typography of Label Font and Price Font using TypeHub or by using Custom Font. <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Style the Price Table Body with Feature Color, Feature Icon Color, Feature Border Color, Adjust Price Table Body Typography of Feature Font using TypeHub, or by using Custom Font. <\/span><\/p>\n<p><span lang=\"EN-GB\" style=\"font-size: 11.0pt;line-height: 115%;font-family: 'Segoe UI',sans-serif\">Adjust the \u2018Button Style\u2019 by changing its Size and Shape with \u2018Button Colors\u2019 set what Button Background and Button Text colors should the user see when the button is inactive and when the user hovers over it.\u00a0<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkK92RaVK   \" ><style>.tatsu-BkK92RaVK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkK92RaVK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Price Advanced Options<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkPjnRpEY   \" ><style>.tatsu-BkPjnRpEY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkPjnRpEY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the price with advanced options like <strong>Spacing<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, <strong>Animation<\/strong>, <strong>CSS Identifiers<\/strong>, and its <strong>Visibility<\/strong>.<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-S1lMhiR6EF.tatsu-column{width: 75%;}.tatsu-S1lMhiR6EF.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-S1lMhiR6EF > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-S1lMhiR6EF > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-S1lMhiR6EF > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-S1lMhiR6EF > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-S1lMhiR6EF.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-S1lMhiR6EF.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-S1lMhiR6EF.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-BybnooRaEF .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-BybnooRaEF .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-BybnooRaEF > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BybnooRaEF > .tatsu-top-divider{z-index: 9999;}.tatsu-BybnooRaEF .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-price\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/588\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}