{"id":17332,"date":"2023-12-08T10:57:14","date_gmt":"2023-12-08T08:57:14","guid":{"rendered":"https:\/\/datapost.co.za\/help\/?page_id=17332"},"modified":"2025-03-07T08:25:34","modified_gmt":"2025-03-07T06:25:34","slug":"sst-template-designer","status":"publish","type":"page","link":"https:\/\/datapost.co.za\/help\/sst-template-designer\/","title":{"rendered":"SST – Template Designer"},"content":{"rendered":"[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_header title=”Template Designer” button_one_text=”Back” button_one_url=”https:\/\/datapost.co.za\/help\/nfinityx-sst\/” _builder_version=”4.20.0″ _module_preset=”default” background_color=”#018582″ custom_button_one=”on” button_one_icon=”4||divi||400″ hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”]\n

GENERAL COMPONENTS<\/h3>\nTip: The Canvas<\/strong><\/pee><\/p>\n
    <\/p>\n
  • The canvas is the area highlighted below in orange.<\/li>\n

    <\/p>\n

  • The canvas represents the space where we create our designs to display on the SSTs.<\/li>\n

    <\/p>\n

  • The canvas is relative to the size of the SSTs display.<\/li>\n

    <\/ul>\n

    <\/pee>\"\"<\/pee>Tip: Device Layout<\/strong><\/pee><\/p>\n

      <\/p>\n
    • At the top left of the designer, you will find the device layout. In this case it is set to portrait.<\/li>\n

      <\/ul>\n

      <\/pee>\"\"<\/pee>Tip: TOGGLE VIEW COMPONENTS<\/strong><\/pee><\/p>\n

        <\/p>\n
      • Click this button to toggle the components outline and get a cleaner view of your design<\/li>\n

        <\/ul>\n

        <\/pee>\"\"<\/pee>Tip: PREVIEW<\/strong><\/pee><\/p>\n

          <\/p>\n
        • Click on the indicated button to view a preview of your design.<\/li>\n

          <\/p>\n

        • Close the preview by clicking the eye icon at the top left.<\/li>\n

          <\/ul>\n

          <\/pee>\"\"<\/pee>Tip: TOGGLE FULL SCREEN<\/strong><\/pee><\/pee>\"\"<\/pee>Tip: ZOOM CONTROLS<\/strong><\/pee><\/pee>\"\"<\/pee>Tip: UNDO<\/strong><\/pee><\/p>\n

            <\/p>\n
          • TIP: CTRL+Z also works<\/li>\n

            <\/ul>\n

            <\/pee>\"\"<\/pee>Tip: REDO<\/strong><\/pee><\/p>\n

              <\/p>\n
            • TIP: CTRL+SHIFT+Z also works<\/li>\n

              <\/ul>\n

              <\/pee>\"\"<\/pee>Tip: SAVE<\/strong><\/pee><\/p>\n

                <\/p>\n
              • At the top of the designer, you will see a button which will allow you to save your changes.<\/li>\n

                <\/p>\n

              • Changes are automatically saved, but it is always best to regularly save your changes.<\/li>\n

                <\/ul>\n

                <\/pee>\"\"<\/pee>\n

                TEMPLATE COMPONENTS<\/h3>\nTip: LAYOUTS<\/strong><\/pee><\/p>\n
                  <\/p>\n
                • Click on the layouts button that looks like a grid to access the layouts that are available to this template.<\/li>\n

                  <\/p>\n

                • The images and text in these layouts are placeholders and will be populated by your store and menu data on the actual SST.<\/li>\n

                  <\/ul>\n

                  NOTE: Only layouts available to the current template will be displayed. Different templates will have different layout options.<\/pee><\/pee>\"\"<\/pee>Tip: WIDGETS<\/strong><\/pee><\/p>\n

                    <\/p>\n
                  • Widgets will be displayed under the respective widgets sections.<\/li>\n

                    <\/p>\n

                  • Only widgets available to the template will be displayed. Different templates will have different widget options.<\/li>\n

                    <\/ul>\n

                    <\/pee>\"\"<\/pee>Tip: BUTTONS<\/strong><\/pee><\/p>\n

                      <\/p>\n
                    • Buttons available to this template will be displayed under the Buttons section.<\/li>\n

                      <\/p>\n

                    • Different templates will have different buttons available.<\/li>\n

                      <\/ul>\n

                      <\/pee>\"\"<\/pee>Tip: BASIC COMPONENTS<\/strong><\/pee><\/p>\n

                        <\/p>\n
                      • Columns can be added to act as containers to add components to.<\/li>\n

                        <\/p>\n

                      • Columns can also be styled separately and gives you the ability to get even more creative with your design<\/li>\n

                        <\/p>\n

                      • Add an image or some text and style them too.<\/li>\n

                        <\/ul>\n

                        <\/pee>\"\"<\/pee>\n

                        EDIT ELEMENT PROPERTIES<\/h3>\n1. Click on an element<\/pee><\/pee>\"\"<\/pee>2. Click on the paint brush to access the element’s properies<\/pee><\/pee>\"\"<\/pee>Tip: The properties refer to the CSS properties of the element.<\/pee>Edit the properties of the element to manipulate the design.<\/pee>You can edit the behaviour, colours, fonts, spacing, dimensions, add animations, and more.<\/pee><\/pee>\"\"<\/pee>\n

                        TIPS & TRICKS<\/h3>\nTip: After clicking on an element, you can jump to its parent element by clicking on the little up arrow<\/pee><\/pee>\"\"<\/pee>Tip: LAYER MANAGER<\/strong><\/pee><\/p>\n
                          <\/p>\n
                        • The layer manager shows you a view of the hierarchy of the elements of the page.<\/li>\n

                          <\/p>\n

                        • You can see relationships between elements both parent and children.<\/li>\n

                          <\/p>\n

                        • Double-click to rename an element to easily identify it (example: Menu Header)<\/li>\n

                          <\/p>\n

                        • You can select elements from this menu as well<\/li>\n

                          <\/ul>\n

                          <\/pee>\"\"<\/pee>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_button button_url=”https:\/\/datapost.co.za\/help\/sst-template-designer\/” button_text=”To Top” _builder_version=”4.20.0″ _module_preset=”default” custom_button=”on” button_text_color=”#FFFFFF” button_border_color=”#018582″ button_icon=”2||divi||400″ hover_enabled=”0″ global_colors_info=”{}” button_bg_color=”#018582″ button_bg_enable_color=”on” sticky_enabled=”0″][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":148,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-17332","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/17332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/users\/148"}],"replies":[{"embeddable":true,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/comments?post=17332"}],"version-history":[{"count":7,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/17332\/revisions"}],"predecessor-version":[{"id":18171,"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/pages\/17332\/revisions\/18171"}],"wp:attachment":[{"href":"https:\/\/datapost.co.za\/help\/wp-json\/wp\/v2\/media?parent=17332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}