{"id":1762,"date":"2018-05-09T22:11:18","date_gmt":"2018-05-10T03:11:18","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=1762"},"modified":"2018-05-09T22:11:31","modified_gmt":"2018-05-10T03:11:31","slug":"using-multi-column-design-in-version-10","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2018\/05\/09\/using-multi-column-design-in-version-10\/","title":{"rendered":"Using multi-column design in version 10"},"content":{"rendered":"

Version 10 makes creating multi-column forms easier. In previous versions you needed to select layout on Style Editor page. In version 10 you can do this right in Page Designer and you can change it at any time without resetting the page. Changes you made to your page will no be lost. <\/p>\n

In this article we use Customers table from Northwind database. In Page Designer select Edit page. Here is how it looks by default (all images are clickable):<\/p>\n

\"\"<\/a>
\n<\/p>\n

Now we click Form Layout<\/strong> button and choose two- or three-column layout. <\/p>\n

\"\"<\/a><\/p>\n

So far so good, we have a three-column form. Now lets add a tab control to this page and drag some fields there. <\/p>\n

\"\"<\/a><\/p>\n

Select first tab by clicking on its label. Click Form Layout<\/strong> again and choose two-column layout. Select second tab, click Form Layout<\/strong> and choose three-column layout. Rearrange fields by dragging them to different cells if required. <\/p>\n

\"\"<\/a><\/p>\n

This is pretty much it. Now it’s time to build your project and see how this form looks in web browser. <\/p>\n

\"\"<\/a><\/p>\n

I would also like to show an alternative method of building multicolumn forms. Add a new Edit page. Put cursor into container with form fields so it becomes selected. Click ‘Split vertically’ button on the right, drag some fields to the new cell. <\/p>\n

\"\"<\/a><\/p>\n

You can split one of cells to achieve three-column layout or do the same thing with tabs or section. Just make sure you are selecting a cell where database fields reside before splitting it. <\/p>\n

Now it can be a good time to change visual appearance of edit form a bit. You can select different cells and change fonts, colors, alignments and more. Just pay attention to what is currently selected in Page Designer. Options on the right will be different depending on selection. Here is just an example of what you can do. <\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Version 10 makes creating multi-column forms easier. In previous versions you needed to select layout on Style Editor page. In version 10 you can do this right in Page Designer and you can change it at any time without resetting the page. Changes you made to your page will no be lost. In this article we use Customers table from Northwind database. In Page Designer select Edit page. Here is how it looks by default (all images are clickable):<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-1762","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1762"}],"version-history":[{"count":7,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1762\/revisions"}],"predecessor-version":[{"id":1776,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1762\/revisions\/1776"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}