| 1 |
<?php |
| 2 |
/* panel for start tad in tutorials page */ |
| 3 |
?> |
| 4 |
<div class="container"> |
| 5 |
<div class="row"> |
| 6 |
<div class="columns one-third"> |
| 7 |
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/snKSPByqbBM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| 8 |
<h3> |
| 9 |
Overview of the Smart Grid and type of forms that can be achieved using this extension. |
| 10 |
</h3> |
| 11 |
<ul> |
| 12 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=10s">00:00:10</a><span> - From simple CF7 to professional forms</span></li></li> |
| 13 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=75s">00:01:15</a><span> - dynamic dropdown fields</span></li> |
| 14 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=150s">00:02:30</a><span> - collapsed & toggled sections </span></li> |
| 15 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=190s">00:03:10</a><span> - table of fields constructs for repetitive inputs</span></li> |
| 16 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=210s">00:03:30</a><span> - multi-steps slider forms</span></li> |
| 17 |
<li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&t=275s">00:04:35</a><span> - tabbed form sections for repetitive field inputs.</span></li> |
| 18 |
</ul> |
| 19 |
</div> |
| 20 |
<div class="columns one-third"> |
| 21 |
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vBSsfra2s48" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| 22 |
<h3> |
| 23 |
Basic introduction to the Smart Grid UI editor and the colour HTML text editor. |
| 24 |
</h3> |
| 25 |
<ul> |
| 26 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=15s">00:00:15</a><span> - Installing the plugin,</span></li> |
| 27 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=75s">00:01:15</a><span> - disabled grid editor for existing forms,</span></li> |
| 28 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=125s">00:02:05</a><span> - creating a new form,</span></li> |
| 29 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=155s">00:02:35</a><span> - forms are automatically responsive,</span></li> |
| 30 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=185s">00:03:05</a><span> - starting a new form,</span></li> |
| 31 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=195s">00:03:15</a><span> - adding/deleting/moving rows,</span></li> |
| 32 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=250s">00:04:10</a><span> - adding/deleting/moving columns,</span></li> |
| 33 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=370s">00:06:10</a><span> - resizing/offsetting columns,</span></li> |
| 34 |
<li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&t=453s">00:07:33</a><span> - navigating between the grid and HTML editor.</span></li> |
| 35 |
</ul> |
| 36 |
</div> |
| 37 |
<!--/div> |
| 38 |
<div class="row" --> |
| 39 |
<div class="columns one-third"> |
| 40 |
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/0DYxRpWc_F0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| 41 |
<h3> |
| 42 |
Example how to design a 2-column form layout |
| 43 |
</h3> |
| 44 |
<ul> |
| 45 |
<li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&t=159s">00:02:39</a><span> - Form start</span></li> |
| 46 |
<li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&t=640s">00:10:40</a><span> - Initial result</span></li> |
| 47 |
<li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&t=825s">00:13:45</a><span> - customising the HTML code</span></li> |
| 48 |
<li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&t=1080s">00:18:00</a><span> - custom CSS styling</span></li> |
| 49 |
</ul> |
| 50 |
</div> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
|
