{"id":92,"date":"2023-07-16T05:00:02","date_gmt":"2023-07-16T05:00:02","guid":{"rendered":"http:\/\/gotsignage.tech\/?p=92"},"modified":"2023-10-02T20:56:28","modified_gmt":"2023-10-02T20:56:28","slug":"92","status":"publish","type":"post","link":"https:\/\/gotsignage.tech\/index.php\/2023\/07\/16\/92\/","title":{"rendered":"Layouts"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    \n
  1. Introduction<\/li>\n
  2. Creating a Layout<\/li>\n
  3. Quick How-to Video<\/li>\n
  4. Adding a Template<\/li>\n
  5. Adding a Custom Layout<\/li>\n
  6. Layout Settings<\/li>\n
  7. Aspect Ratio<\/li>\n
  8. Muted Media<\/li>\n
  9. Adding media from your library<\/li>\n
  10. Editing media<\/li>\n
  11. Positioning\/Resizing media in the layout editor<\/li>\n
  12. Lock Aspect Ratio<\/li>\n
  13. Content Layering<\/li>\n
  14. Useful Tools<\/li>\n
  15. How do I preview a layout before pushing it to the player?<\/li>\n
  16. Allow pop-ups<\/li>\n
  17. Managing Layouts<\/li>\n
  18. Additional Control Settings<\/li>\n<\/ol>\n

    [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    Introduction<\/h2>\n

    With Layouts, you can create the final layout displayed on your screens by combining already created playlists, uploaded media files, and apps.<\/p>\n

    [\/et_pb_text][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    Creating a Layout<\/h2>\n

    To create a layout, click the \u201dAdd Layout\u201d button at the bottom of the list. A new page will open, displaying many pre-designed layout templates we have created for you and are ready to use.<\/p>\n

    Feel free to choose any available templates and edit them by changing images and adding whatever text you want. Otherwise, you can create your custom Layout from scratch!<\/p>\n

    [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/Add-Layout.png” title_text=”Add Layout” align=”center” _builder_version=”4.21.0″ _module_preset=”default” width=”32.3%” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    Adding a Template<\/h2>\n

     <\/p>\n

    1. What are Templates?<\/h4>\n

    Templates are pre-formatted Layouts we have created for you to use directly on your TV screens. These signage templates come with a wide range of static and dynamic content options. Both options are available, whether you want to incorporate static elements like photos or text that remain the same each time they are shown on your Yodeck players or incorporate dynamic content that automatically updates depending on your sign\u2019s weather, time, or location. Templates use media not stored in your account but in the cloud to be available to all users. Of course, you can edit them the way you like.<\/p>\n

    [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/templ1.png” title_text=”Templates” _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    2. Importing a Template<\/h4>\n

    By clicking the layout template of your choice, a window will pop up displaying a preview of it. Then, if you like it, you can Import it by clicking the \u201dImport Template<\/strong>\u201d button or go back to pick a new one by clicking the \u201dBack to Templates<\/strong>\u201d button. After importing a template, you can name it as you wish and edit the default media to customize it to your needs.<\/p>\n

    [\/et_pb_text][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    Adding a Custom Layout<\/h2>\n

    To add a custom layout, click on the \u201cCREATE CUSTOM LAYOUT<\/strong>\u201d button found at the beginning of the listing.<\/p>\n

    [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/template-gallery-custom11.jpg” title_text=”Custom Template” align=”center” _builder_version=”4.21.0″ _module_preset=”default” width=”33.8%” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

    Layout Settings<\/h2>\n

    Before adding any media, you will see a configuration panel on the right side of your screen. To see a short description of the options, click on the corresponding tab below:<\/p>\n

    [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/Layout-Info.png” title_text=”Layout Info” align=”center” _builder_version=”4.21.0″ _module_preset=”default” width=”30.9%” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n

    Adding media from your library<\/h2>\n

    Click the \u201cInsert<\/strong>\u201d on the top bar to choose a media from your Media gallery. At the right-side panel, you will see all available options offered.<\/p>\n

    [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/Insert.png” title_text=”Insert” align=”center” _builder_version=”4.21.0″ _module_preset=”default” width=”14.9%” global_colors_info=”{}”][\/et_pb_image][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/07\/474810681.png” title_text=”Insert Options” align=”center” _builder_version=”4.21.0″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

    Editing Media<\/h2>\n

    Choosing a media file shows Some relevant configuration options on the right panel.
    For example, if you select an Image, Video, Audio, Document, Web-page, App, and Playlist, you will be presented with the following settings:<\/p>\n

    1. Fitting Option<\/strong><\/p>\n

      \n
    • \u201cFit<\/strong>\u201d: show the whole content within the area assigned (may add some space or black bars at the edges, but will not distort images or videos).<\/li>\n
    • \u201cCrop<\/strong>\u201d: zoom-in to cover the assigned area (may crop some edges, but it will not distort images or videos).<\/li>\n
    • \u201cStretch<\/strong>\u201d: show the whole content, stretching it to match the area assigned (no cropping, empty spaces, or black bars, but it might distort images and videos).<\/li>\n<\/ul>\n

      2. Transparency<\/strong><\/p>\n

      Optionally, enable the toggle \u201cAllow Transparency<\/strong>\u201d to allow transparency of the region. This is useful for content with transparency and the \u201cFit\u201d option above.<\/p>\n

      [\/et_pb_text][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

      Positioning\/Resizing media in the layout editor<\/strong><\/span><\/h2>\n

      Selecting imported media in the layout editor opens configuration options on the right side of your screen.<\/p>\n

      You can use the\u00a0<\/span>Width<\/strong>,\u00a0<\/span>Height<\/strong>,\u00a0<\/span>Top<\/strong>, and\u00a0<\/span>Left<\/strong>\u00a0<\/span>values to quickly position and align it to where you want. You can either type directly the value you wish to or, by placing your mouse cursor in the box, use the mouse wheel to increase\/decrease the value.<\/p>\n

      Another way of positioning\/resizing your media item is by selecting it with your mouse and dragging it in any position you want. Clicking on a media item will highlight it. Use the white squares to drag\/resize the media at will.<\/p>\n

      [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/10\/Screenshot-from-2022-01-20-15-26-14.png” _builder_version=”4.21.0″ _module_preset=”default” title_text=”Screenshot-from-2022-01-20-15-26-14″ hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_cta title=”Lock Aspect Ratio” _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

      If you want the media you are moving\/resizing to keep the same ratio across the Layout region, enable the \u201cLock Aspect Ratio<\/strong>\u201d toggle.<\/p>\n

      [\/et_pb_cta][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

      Content Layering<\/strong><\/span><\/h2>\n

      On the right panel, when you have not selected a media, under the \u201cContent Layering<\/strong>\u201d section, all the items (playlists, apps, media files) added to the layout are listed in the order you added them, with the\u00a0<\/span>top layer<\/em>\u00a0<\/span>representing the last item added.<\/p>\n

      This layering order is very easily modified by dragging and dropping items in the desired hierarchy.<\/p>\n

      In the layering setup, you have the option to quickly disable some items by clicking the \u201ceye\u201d button next to the media of your choice. The hidden media will not be displayed on the player as well.<\/p>\n

      You can revert the media to your Layout editor by clicking the \u201ceye\u201d button again.<\/p>\n

      [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/10\/33719019.png” _builder_version=”4.21.0″ _module_preset=”default” title_text=”Layers” hover_enabled=”0″ sticky_enabled=”0″ align=”center”][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

      Useful Tools<\/strong><\/span><\/h2>\n

      On the top bar, you will notice some useful buttons that you can use to help you create your Layout faster.<\/p>\n

      [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/10\/Tools.png” _builder_version=”4.21.0″ _module_preset=”default” title_text=”Tools” align=”center” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

        \n
      1. Undo<\/strong>\u00a0<\/span>a change you made while working in your Layout editor if you\u2019d like to, for up to 30 edits.\u00a0Shortcut<\/strong>: CTRL+Z<\/li>\n
      2. Redo\u00a0<\/strong>an\u00a0Undo<\/strong>\u00a0<\/span>for up to 30 edits.\u00a0Shortcut<\/strong>: CTRL+Y<\/li>\n
      3. Send Backward<\/strong>\u00a0<\/span>Move the media backward if you have many content layers on your Layout editor.<\/li>\n
      4. Bring Forward\u00a0<\/strong>Move the media forward if you have many content layers on your Layout editor.<\/li>\n
      5. Copy<\/strong>\u00a0<\/span>any media to your Layout editor area. You can copy media from different Layout editors across your account.\u00a0Shortcut<\/strong>: CTRL+C<\/li>\n
      6. Paste\u00a0<\/strong>any media to your Layout editor area. You can paste media from different Layout editors across your account.\u00a0Shortcut:<\/strong>\u00a0<\/span>CTRL+V<\/li>\n
      7. Edit\u00a0<\/strong>the settings of the selected media by opening a new editing form of the selected media.<\/li>\n
      8. Delete\u00a0Delete the selected media from the Layout editor.\u00a0Shortcut: Del button<\/li>\n
      9. Full Screen\u00a0By clicking the Full-Screen button, the Layout you created will fill your entire TV screen. In that way, you can modify the final output shown on your TV screen and make the right adjustments by moving any media in any direction or position of your choice. It\u2019s like the usual Layout editor but in Full-screen mode. Press the Esc button on your keyboard to exit Full-Screen.<\/li>\n<\/ol>\n

        [\/et_pb_text][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

        How do I preview a layout before pushing it to the player?<\/strong><\/span><\/h2>\n

        This feature is currently in the beta stage and will soon have the full functionalities of a GSM Player. In other words, you will be able to see exactly what is being shown on your TV screen; in the same way you would view that content if you had a GSM Player connected to your screen.<\/p>\n

        With a simple click, you can see how your layout will display on the TV screen without needing a Yodeck player or any hardware.<\/p>\n

        You only have to fill the layout with the media of your choice and then click the\u00a0Preview\u00a0<\/strong>button at the top right corner.<\/p>\n

        A new window will appear and start displaying the layout.<\/p>\n

        [\/et_pb_text][et_pb_cta title=”Allow pop-ups” _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

        Upon clicking the\u00a0<\/span>Preview<\/strong>\u00a0button, your browser might block the pop-up. Please click the options button in your browser and click the \u201c<\/span>Allow pop-ups for app.gotsignage.tech<\/strong>\u201c.<\/span><\/p>\n

        [\/et_pb_cta][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

        Managing Layouts<\/strong><\/span><\/h2>\n

        In the \u201cLayouts\u201d section, you can see a list of the layouts currently created in your GSM account. Layout information is organized in the following columns:<\/p>\n

          \n
        • the\u00a0Name\u00a0<\/strong>of the layout<\/li>\n
        • the\u00a0Timestamp\u00a0<\/strong>(date and time) that the layout was modified for the last time<\/li>\n
        • the\u00a0Workspace<\/strong>\u00a0(for accounts in the\u00a0Enterprise<\/strong>\u00a0plan) that the layout belongs<\/li>\n
        • the\u00a0Actions<\/strong>\u00a0column<\/li>\n<\/ul>\n

          If you click on the three dots icon in the Actions column, you will be presented with a list of actions you can apply to your layouts.<\/p>\n

          Click on each tab below to see a short description.<\/p>\n

          [\/et_pb_text][et_pb_image src=”https:\/\/gotsignage.tech\/wp-content\/uploads\/2023\/10\/layouts-actions.png” _builder_version=”4.21.0″ _module_preset=”default” title_text=”layouts actions” align=”center” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

          Change the details of the layout by clicking the\u201d\u00a0<\/span>Edit<\/strong>\u201d button.<\/span>
          Check out the \u201c<\/span>Creating a Layout<\/strong>\u201d section above for details on the fields.<\/span><\/p>\n

          [\/et_pb_text][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

          Additional Control Settings<\/strong><\/span><\/h2>\n

          You can use the Search box at the top-left corner to sort out your layout listing quickly. You can search using any columns by name, date, workspace, etc.<\/p>\n

          You can select one or more layouts by clicking the square box left to their thumbnail. You can then click the\u00a0Actions<\/strong> button at the bottom to Move or Delete all the selected layouts at once.<\/p>\n

          [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

          Introduction Creating a Layout Quick How-to Video Adding a Template Adding a Custom Layout Layout Settings Aspect Ratio Muted Media Adding media from your library Editing media Positioning\/Resizing media in the layout editor Lock Aspect Ratio Content Layering Useful Tools How do I preview a layout before pushing it to the player? Allow pop-ups Managing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[5],"tags":[7,6],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-how-to","tag-layouts"],"_links":{"self":[{"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":10,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gotsignage.tech\/index.php\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}