{"id":582,"date":"2021-10-08T11:43:51","date_gmt":"2021-10-08T11:43:51","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=582"},"modified":"2021-10-08T11:44:08","modified_gmt":"2021-10-08T11:44:08","slug":"spyro-packages","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-packages\/","title":{"rendered":"Spyro Packages"},"content":{"rendered":"<div  class=\"tatsu-Bk-oAaoTNK tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 89px 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-HkliRasT4Y\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-HkT0as6NF\"  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-SJOkAspVK   \"  ><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-HkT0as6NF.tatsu-column{width: 25%;}.tatsu-HkT0as6NF.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-HkT0as6NF > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-HkT0as6NF > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HkT0as6NF > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-HkT0as6NF > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-HkT0as6NF.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-HkT0as6NF.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-HkT0as6NF.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-SJlaApjaEF\"  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-H1fxRi64t   \" ><style>.tatsu-H1fxRi64t .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1fxRi64t .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-HyJMAsTEt   \" ><style>.tatsu-HyJMAsTEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HyJMAsTEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Packages<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-B1zQ0j6Vt   \" ><style>.tatsu-B1zQ0j6Vt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-B1zQ0j6Vt .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 Packages you can display multiple package options that your business\/service provides you can add any number of packages as you&rsquo;d like. The packages contain detailed information like the Package Title, Package Description, Package Price, Package Content, an Image, Package Features with relevant icons, Action Button with a link to any page.&nbsp; <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Spyro Packages is also a multilevel module consisting of multiple packages of the same type where each package 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 the total number of packages, Styling things like Package Box Shadow, Tab Navigation, Tab Content Color, Tab Content Typography, Button Options and a lot more.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">To add the Spyro Packages 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-rkmECi6VY   \" ><style>.tatsu-rkmECi6VY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rkmECi6VY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Packages<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-SJMHAi6EY  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1648px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 56.25%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Packages-Packages.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Packages - Packages\" title = \"Spyro Packages &#8211; Packages\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Packages-Packages.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-SJMHAi6EY .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-SJMHAi6EY.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByTOAipVF   \" ><style>.tatsu-ByTOAipVF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByTOAipVF .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\">The very first option you get when you configure the Spyro Packages on your page is that of <strong>Assigning Package<\/strong> dropdown, there are a total of 4 packages available for use which can be altered in the Packages parent Content tab.<\/span><\/p>\n<p class=\"MsoNormal\"><strong><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Content Title<\/span><\/strong><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\"> is the next option that can be configured to display the actual Package Title to the visitor followed by the <strong>Package Price<\/strong> and <strong>Package Description<\/strong> where you can set the price and a basic description of the package respectively.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using <strong>Content<\/strong> you can describe the package in detail and let the visitor know what the package is all about and what things you offer. Next, You can display an <strong>image<\/strong> to let the visitor know more about the package.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using the feature option, you can list down all the features of the package basically you list down what the package includes for the visitor if availed. Next, is the <strong>feature icon<\/strong> that is displayed before every package feature to make it look more attractive. And lastly, you configure the button with <strong>Button Text<\/strong> and a <strong>Link URL<\/strong> for the button to work.<\/span><\/p>\n<p><span lang=\"EN-GB\" style=\"font-size: 11.0pt;line-height: 115%;font-family: 'Segoe UI',sans-serif\">Subsequently, you can <strong>Style<\/strong> each Spyro Package and change its <strong>Background Color<\/strong>. This is how you can configure all the Spyro Packages one after another<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Hk7cAo6Nt   \" ><style>.tatsu-Hk7cAo6Nt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Hk7cAo6Nt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Packages Content<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r1miAo6VK   \" ><style>.tatsu-r1miAo6VK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r1miAo6VK .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 the Content Tab, you can configure what every package can hold in the number of guests. Hence, every package has a pre-defined number of guests. You can anyways customize it to any number of your choice.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByYjAspNF   \" ><style>.tatsu-ByYjAspNF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByYjAspNF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4><span style=\"background-color: #ffffff;font-size: 24px\">Spyro <\/span>Packages Style<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1inCsTNK   \" ><style>.tatsu-H1inCsTNK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1inCsTNK .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 Package Box Shadow of each package and control the Tab Navigation in the Normal State and in the Active State using Title Color, Background Color, Set Typography using TypeHub or Custom Font, Set Title Style.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can style the Tab Content with Title Color, Subheading Color, Price Color, Content Color, List Title Color, List Color, List Icon Color, and Package Container Background Color.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Change the Tab Content Typography using TypeHub or Custom Font for the Title, Subheading, Price, Content, List Title, and List.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can even style the Button with Button Options like altering its Size, Style, Background Color, Text Color, Text Font, and Button Shadow.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Sy6aRiaEY   \" ><style>.tatsu-Sy6aRiaEY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Sy6aRiaEY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Spyro Packages Advanced Options<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r1pJy2aNt   \" ><style>.tatsu-r1pJy2aNt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r1pJy2aNt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span lang=\"EN-GB\" style=\"font-size: 11.0pt;line-height: 115%;font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the packages 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-SJlaApjaEF.tatsu-column{width: 75%;}.tatsu-SJlaApjaEF.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-SJlaApjaEF > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-SJlaApjaEF > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-SJlaApjaEF > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-SJlaApjaEF > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-SJlaApjaEF.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-SJlaApjaEF.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-SJlaApjaEF.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-Bk-oAaoTNK .tatsu-section-pad{padding: 90px 0px 89px 0px;}.tatsu-Bk-oAaoTNK .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-Bk-oAaoTNK > .tatsu-bottom-divider{z-index: 9999;}.tatsu-Bk-oAaoTNK > .tatsu-top-divider{z-index: 9999;}.tatsu-Bk-oAaoTNK .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-packages\/\" 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-582","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/582","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=582"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/582\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}