{"id":2332,"date":"2023-06-26T19:15:00","date_gmt":"2023-06-26T19:15:00","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/designing-for-the-ion-platform\/"},"modified":"2025-12-17T18:40:52","modified_gmt":"2025-12-17T18:40:52","slug":"designing-for-the-ion-platform","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/designing-for-the-ion-platform\/","title":{"rendered":"Designing for the Ion Platform"},"content":{"rendered":"\n<p class=\"\">If your designer(s) would like to create a mockup of a page offline, before building it in the ion platform, \u00a0use the attached PSD zip files for reference. ion pages are based on the Bootstrap5 grid, a common, industry-standard responsive design grid. The attached PSDs can be used to ensure that the offline mock ups are created with this grid in mind, helping to ensure that your page can be brought to life in the ion platform with no coding.\u00a0<\/p>\n\n\n\n<p class=\"\">The first zip file that is attached is contains blank PSDs with the Bootstrap grid in place. You can use these&nbsp;PSDs to start building your mockup.&nbsp;<\/p>\n\n\n\n<p class=\"\">The second zip file includes PSDs with layers with viewports, grids and labels to help guide you through using the Bootstrap grid for your mockups.<\/p>\n\n\n\n<p class=\"\">By using these as a starting point, you will be able to ensure that your mockups can be replicated within your console without special customization.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/f.hubspotusercontent30.net\/hubfs\/355484\/Blank%20Bootstrap%20Templates-1.zip\" target=\"_blank\" rel=\"noopener\">Blank Bootstrap Templates.zip<\/a><br><div class=\"attachment-meta meta-group\"><span class=\"attachment-meta-item meta-data\">800 KB<\/span> <a href=\"https:\/\/f.hubspotusercontent30.net\/hubfs\/355484\/Blank%20Bootstrap%20Templates-1.zip\" target=\"_blank\" rel=\"noopener\">Download<\/a><\/div><br><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/f.hubspotusercontent30.net\/hubfs\/355484\/Responsive%20Bootstrap%20Templates-1.zip\" target=\"_blank\" rel=\"noopener\">Responsive Bootstrap Templates.zip<\/a><br><div class=\"attachment-meta meta-group\"><span class=\"attachment-meta-item meta-data\">1 MB<\/span> <a href=\"https:\/\/f.hubspotusercontent30.net\/hubfs\/355484\/Responsive%20Bootstrap%20Templates-1.zip\" target=\"_blank\" rel=\"noopener\">Download<\/a><\/div><\/li>\n<\/ul>\n\n\n\n<p class=\"\">We also have this <a href=\"https:\/\/ioninteractive.com\/ionacademy\/tip-utilizing-breakpoints-for-precise-previews\/\">article<\/a> with some tips on how to utilize breakpoints for precise previews.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your designer(s) would like to create a mockup of a page offline, before building it in the ion platform, \u00a0use the attached PSD zip files for reference. ion pages are based on the [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5298,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2068,41],"tags":[2137],"class_list":["post-2332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-personalization","category-the-content-personalization","tag-design"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2332","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=2332"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2332\/revisions"}],"predecessor-version":[{"id":8492,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2332\/revisions\/8492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5298"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}