{"id":1229,"date":"2018-03-13T00:59:39","date_gmt":"2018-03-13T00:59:39","guid":{"rendered":"https:\/\/www.mockuptiger.com\/?p=1229"},"modified":"2020-05-02T20:55:12","modified_gmt":"2020-05-02T20:55:12","slug":"wireframe-connectors-and-line-widgets","status":"publish","type":"post","link":"https:\/\/www.mockuptiger.com\/wireframe-connectors-and-line-widgets","title":{"rendered":"Wireframe Connectors and Lines"},"content":{"rendered":"<p>These <strong>connector widgets<\/strong> are special widgets that connect one object to another object using curved or straight lines.<\/p>\n<p>These are the various line connectors<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-626.jpg\" alt=\"Image\" width=\"171\" height=\"157\" \/><\/p>\n<p>These are basically the same line objects except they are provided in different positions for conveneince.<\/p>\n<p>You can simply drag a connector and drop it anywhere on the canvas. Just dropping a connector does not join the two widgets.<\/p>\n<p><strong>How to join two widgets<\/strong><\/p>\n<p>1. Select the line connector<\/p>\n<p>2. After selection, two small green squares and two red squares will appear<\/p>\n<p>3. Dragging the green squares and touching any widget will make the connection<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-627.jpg\" alt=\"Image\" width=\"572\" height=\"190\" \/><\/p>\n<p>4. We drag the right green square to touch the box on the right and make sure the left green square is also dragged and placed on the left image placeholder.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-628.jpg\" alt=\"Image\" width=\"575\" height=\"212\" \/><\/p>\n<p>5. This way both the boxes are now connected.<\/p>\n<p>6. The red squares allow to adjust the shape of the curvy line.<\/p>\n<p>7. Moving around the boxes will keep the connection<\/p>\n<p>8. In this figure we moved the right box slightly downwards and you can see the connection is maintained.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-629.jpg\" alt=\"Image\" width=\"551\" height=\"243\" \/><\/p>\n<p><strong>How to write text on Line Connector<\/strong><\/p>\n<p>1. Double click on the line connector<\/p>\n<p>2. A text window will show up.<\/p>\n<p>3. Enter any text and click ok<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-630.jpg\" alt=\"Image\" width=\"535\" height=\"515\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-631.jpg\" alt=\"Image\" width=\"528\" height=\"240\" \/><\/p>\n<p>As you see the text follows the path of the curve.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-632.jpg\" alt=\"Image\" width=\"612\" height=\"261\" \/><\/p>\n<p>You can change the text appearance by modifying the font, font size and color properties on the right panel<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-633.jpg\" alt=\"Image\" width=\"188\" height=\"216\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-636.jpg\" alt=\"Image\" width=\"417\" height=\"387\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-635.jpg\" alt=\"Image\" width=\"538\" height=\"237\" \/><\/p>\n<p>On the bottom of the right panel, you will see controls to toggle the arrows at the end of the line connectors<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-637.jpg\" alt=\"Image\" width=\"177\" height=\"107\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mockuptiger.com\/wp-content\/uploads\/2018\/03\/image-638.jpg\" alt=\"Image\" width=\"333\" height=\"354\" \/><\/p>\n<p>To disconnect, simply select the line connector and then drag the green square out of the widget container and it will be disconnected.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These connector widgets are special widgets that connect one object to another object using curved or straight lines. These are the various line connectors These are basically the same line objects except they are provided in different positions for conveneince. You can simply drag a connector and drop it anywhere on the canvas. Just dropping &#8230; <a title=\"Wireframe Connectors and Lines\" class=\"read-more\" href=\"https:\/\/www.mockuptiger.com\/wireframe-connectors-and-line-widgets\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[79,77,11],"tags":[104,194,147,148,149,103,195,197,202,154,155,196,157,102,158],"_links":{"self":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts\/1229"}],"collection":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/comments?post=1229"}],"version-history":[{"count":0,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts\/1229\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/media?parent=1229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/categories?post=1229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/tags?post=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}