{"id":5038,"date":"2023-08-03T12:53:46","date_gmt":"2023-08-03T12:53:46","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5038"},"modified":"2026-07-18T15:02:22","modified_gmt":"2026-07-18T15:02:22","slug":"how-to-use-the-saas-landing-page-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-saas-landing-page-template\/","title":{"rendered":"How to use the SaaS Landing Page Template"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/ioninteractive.com\/gallery\/saas-landing-page\/\">Saas Landing Page<\/a> is a low complexity, standard experience that focuses on lead generation. This template includes different interactive elements such as flows, reveals and tool tips. With engaging animations and unique hover effects, viewers will stay engaged with the content every step of the way. At the end of the experience, the viewers can contact your company by providing their email.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Landing Page<\/li>\n\n\n\n<li>Complexity: Low<\/li>\n\n\n\n<li>Use case: Lead Generation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Animation<\/li>\n\n\n\n<li>Flow<\/li>\n\n\n\n<li>Tool tips<\/li>\n\n\n\n<li>Typing text (custom code)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/drive.google.com\/drive\/folders\/1wA98FR3h3b7CdIt0fUzASnd6qEZJDey2?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animations<\/strong><\/h3>\n\n\n\n<h4>Step 1:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To edit or to add an animation, first select the element you want to animate on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-animations.png\" alt=\"Current Ion interface for Animations\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Animations steps in this guide.<\/figcaption><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Animations <\/strong>panel, expand the <strong>(trigger) <\/strong>dropdown, and select the animation trigger.&nbsp;<\/p>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">After selecting the animation trigger, another <strong>(choose) <\/strong>dropdown will appear. Expand the second dropdown to select the type of animation you want to apply.&nbsp;<\/p>\n\n\n\n<h4>Step 4:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To remove an existing animation, click on the <strong>X<\/strong> to the right of the blue animation tag.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flow<\/strong><\/h3>\n\n\n\n<h4>Step 1:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To edit the flow settings, first locate the<strong> Flow<\/strong> element on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-flow-step-tool.png\" alt=\"Current Ion interface for Flow\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Flow steps in this guide.<\/figcaption><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Variables <\/strong>panel, you can edit the flow settings to <strong>Auto-Play <\/strong>by checking the Auto-play box and unchecking it to remove it. When selecting the Auto-play feature, you can set an <strong>Auto-Play Delay <\/strong>which is measured in seconds. The default value is 4 seconds before the flow step changes.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tooltips (Reveal)<\/strong><\/h3>\n\n\n\n<h4>Step 1:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The tooltips are created using reveals and layered positioning. To edit the tooltip location, first select the <strong>Reveal trigger <\/strong>on the canvas and press the up key on your keyboard to jump to the <strong>Reveal <\/strong>element.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-reveal-settings.png\" alt=\"Current Ion interface for Tooltips (Reveal)\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Tooltips (Reveal) steps in this guide.<\/figcaption><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To change the position of the tooltip, under the <strong>Variables <\/strong>panel, scroll down until you see the <strong>Layout <\/strong>tab. Expand the layout tab to adjust the tooltip settings.<\/p>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Once the layout panel is expanded, scroll down until you see the <strong>Position <\/strong>tab.&nbsp;<\/p>\n\n\n\n<h4>Step 4:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Change the percentage accordingly to adjust the position of the tooltips.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Typing Text<\/strong><\/h3>\n\n\n\n<h4>Step 1:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To edit the typing text copy, locate the <strong>Text <\/strong>element on the canvas, that is located above the <strong>Code Block <\/strong>container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-creative-studio.png\" alt=\"Current Ion interface for Typing Text\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Typing Text steps in this guide.<\/figcaption><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the <strong>Text <\/strong>element to open the edit window.&nbsp;<\/p>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Edit the text then press the <strong>OK <\/strong>button to save the changes.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1vlwGVgJs2eWSu5yNDUUfocYSyTlFnQ5Sv7JW2dDx8UM\/edit?usp=sharing\">Here is the content structure\u2019s template<\/a> to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/fintech-landing-page\/\">Fintech Landing Page<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/education-landing-page\/\">Education Landing Page<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/gated-infographic\/\">Gated Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/branded-infographic\/\">Branded Infographic<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Saas Landing Page is a low complexity, standard experience that focuses on lead generation. This template includes different interactive elements such as flows, reveals and tool tips. With engaging animations and unique hover [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5154,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5038"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5038\/revisions"}],"predecessor-version":[{"id":6834,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5038\/revisions\/6834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5154"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}