{"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":"2025-02-17T11:53:33","modified_gmt":"2025-02-17T11:53:33","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<div style=\"padding-bottom: 56.25%;height: 0\"><\/div>\n\n\n\n<p>The <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/standard\/landingpage\/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>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>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><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>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 is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/-VxpaXGHwBRtFL-zzazRg2PViA8nkeMwfruVk--biKI0_I3hJ9DmhrUGQcCJrNhjsm_bevUtaC2sM_6gqDqwUOTF2dfDmveEbsSx497tMQZp69xcEBP_ArRu58EnjQh0aNAC4oMBylIUyqexZic1qGA\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p>Under the <strong>Animations <\/strong>panel, expand the <strong>(trigger) <\/strong>dropdown, and select the animation trigger.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/LId2ObJs4ba6WD45la8pVHDVJqhuYy89ughEVyEc2Fs7lmZNxLnjaxhiD5XxwxW5atzk5S7_20bgmq21AgIKA6c9DCmBrAvQvoPhc2A_w3fwRS8ws8eJr9fYWlzxkryuOPC8Hns2NEaUn9pCci7nfDk\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p>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<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/SWmJodApP5ovYW62JFo2GsRle3D6cKWw_ZOUFAJL0C5-4Y2OnnbIiklV8uyBcwdrGJyVQy6kX6MQAnGZyzJMpbNZeo2ZaBohaw5I8Mx6raGOsUlooFNXjauN-n9DQ3NyIe1W24lMIXI7i0RJ7zy7oLc\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 4:<\/h4>\n\n\n\n<p>To remove an existing animation, click on the <strong>X<\/strong> to the right of the blue animation tag.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/Olcy6sagZ_yfbDzfmo41nLnjGIUxjhsYNwy5hVOet9qD58C5oz49C86CdQcQ1Sz1KqmAdc2BnfNWT6q6ScJLlMvPT8U1FrjTL-VKMMJKmSa-Kp33sHnGZxT9n4TJKKGq81j1ghqcQT9k8hudtQH_Gcw\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<p><\/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>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 is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/rV4d3xduWcNlAbwXLHuKbfaW9UMNY76XTbsD2MsIu9lWmZPa4qg9ZlTFTulaGbhNj7dzaJg34ePD8Csfg84zhvsyAmkbBhU8IEGWWyLoBnQI5x4k862DlTDGAXGyebZYJ9MFRC8e6b74dsoD0MJ4ZXk\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p>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<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/uNWS57wBG7rk2seBEihw3peC-aM3XBbT9Quzxzxt-fsBMMleEDm9Q3ZTPbfCaQQv6wp3kPtCqbHIikTYEW1z1gONwKCyLyibMu9iGRLMJ6eVGGDhqULTH4jR0odnP_y0vHVIhlhu1Fe7xhB1SC9pQgM\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<p><\/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>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 is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/WL-RZYHo0UWxeAqjYrYF3MIhkil_DW5hzcBoza_-wPdz6IkkNKYBmw39TGphKvf27h4Mh5mHk_i5XofO4gxTqLB-Tj6mXpyIDSY1r1Vj4iV23F_8xOgI6e1WudS3B6D76HDdUNGN5KYyFpbHje_FMzk\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p>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<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/i9T1_amk15mbsFnw2TfVtpxjC49QAhzYkCcY8fBUQtaTv55VVB1ZRlcrhe-GwUCNDajWU0lr1jMM3e9hTA2AKYnC97ykDUD1ZrIij1_2Eh2AsNEyhd1AIh8DMVrQ2kJr_WcrQ755v-23rebnZN02mUk\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p>Once the layout panel is expanded, scroll down until you see the <strong>Position <\/strong>tab.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/uLsgvHiHRY2sV-_xpGXnHhUWsrEPaJ17WE8THmuokjuWp_lzWB7wHYitEB70QMhK_bhUkHx1FH9mkLKTOCXy5zZoEYSDClHMhi7BKCNPV13H5mXhOcIrOMolGVvz3uBxq3zoCKvbm1B_It_FcRzH8JQ\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 4:<\/h4>\n\n\n\n<p>Change the percentage accordingly to adjust the position of the tooltips.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/oWDdil3alOOa1YVqHxSb28nsuyRzMfu4YcWxXkAqvl5IOUw5eM_76mVwQ5O_Ugnkw4y16KgLeDw2XXqSstnMBjbK2l5DhiL2kXHyi17wepSru_eb4wwzO_fd__mgPtfC6PceTyV95ckNG4oE9gh-MwY\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<p><\/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>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 is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/aM3WYkQjfdo96DZJma7WDEcLSMsxHzM0KBBRDxbvHiVd70s8uM4fIBoXTIZdMkfMjLdIy9mck0yBd1zCS6xUwKxxeH7Q-0lmfBslnmhrJfZlX1yqjta-8V-9YCoWLVR_AKRDf_qKKC4g1gtAto3TZqk\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 2:<\/h4>\n\n\n\n<p>Click on the <strong>Text <\/strong>element to open the edit window.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/xAEkHgIsZlhc2-bbBTkNpJV3tyont9nJMECYtTg4MWlT3VCyTlEmy0YGnmhCaC3dUtcNlt3ZrgtmFPizbHOXYdwqv5RaiYVbSpw1VZnEzxi8oT0iPGNUX_cP_79kfDLPI74POoS7BtKBXMAzXZjPR48\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h4>Step 3:<\/h4>\n\n\n\n<p>Edit the text then press the <strong>OK <\/strong>button to save the changes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/YwFv-H07VFL_DLjc7YOOYZ0l2vFEwqYRAZw5tFsi52AB_DhN9gjqlE7rs-ykjGQKwpbYR43uE-TqAmkVFbiXyVLltU5gdifkf_BP5WSM2UAUme2NLYjgw2Q_ej20o6sbh0UlrRpsqEtBscdZlqBCrGE\" alt=\"\" width=\"800\" height=\"450\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p><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>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:\/\/rockcontent.com\/gallery\/fintech-landing-page\/\">Fintech Landing Page<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/education-landing-page\/\">Education Landing Page<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/gated-infographic\/\">Gated Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.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>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}]}}