| 1 | = Dolphin Page Builder Part 2 - Additional Tips = |
| 2 | |
| 3 | |
| 4 | {{{ |
| 5 | #!html |
| 6 | This is the second part of: <a href="http://www.boonex.com/trac/dolphin/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder" title="How to create pages Dolphin Page Builder">How to create pages Dolphin Page Builder</a> |
| 7 | |
| 8 | <br> |
| 9 | -Be sure to see the Part 1 Tutorial link above for instructions on how to initially create a new page using the Dolphin Page Builder. |
| 10 | |
| 11 | <br><br> |
| 12 | You should have a good working Dolphin installation with no errors or problems. |
| 13 | |
| 14 | <br><br> |
| 15 | This tutorial is based on a standard Dolphin 7 installation with screen shots form the default uni template. |
| 16 | |
| 17 | <br><br> |
| 18 | This second part to the Dolphin Page Builder tutorial shows you some additional things you might want to do once you start building pages. |
| 19 | |
| 20 | <br><br> |
| 21 | <b><u>Includes</u>:</b> |
| 22 | <ul> |
| 23 | <li>Moving the Navigation Menu Link.</li> |
| 24 | <li>Updating, changing, and editing content of your new page.</li> |
| 25 | <li>Adding a second column to your new page.</li> |
| 26 | <li>Changing the column width of a page after adding a second column.</li> |
| 27 | </ul> |
| 28 | }}} |
| 29 | |
| 30 | |
| 31 | == How to move the navigation link to your new page == |
| 32 | |
| 33 | |
| 34 | |
| 35 | {{{ |
| 36 | #!html |
| 37 | To move the menu navigation link location: |
| 38 | |
| 39 | <br><br> |
| 40 | |
| 41 | 1. |
| 42 | Navigate in your Dolphin Administration to: |
| 43 | <br> |
| 44 | Builders |
| 45 | <br> |
| 46 | -Navigation menu |
| 47 | |
| 48 | <br><br> |
| 49 | Find your item or block and drag it to a new location. |
| 50 | |
| 51 | <br><br> |
| 52 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/1-admin-menu-builder-before-move.jpg"> |
| 53 | |
| 54 | <br><br><br><br> |
| 55 | |
| 56 | 2. |
| 57 | Here it has been moved to the right of Mail. |
| 58 | |
| 59 | <br><br> |
| 60 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/2-admin-menu-builder-after-move.jpg"> |
| 61 | |
| 62 | <br><br><br><br> |
| 63 | |
| 64 | 3. |
| 65 | And if we visit and refresh our page we can see that it reflects this. |
| 66 | |
| 67 | <br><br> |
| 68 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/3-navigation-menu-moved.jpg"> |
| 69 | |
| 70 | <br><br><br><br> |
| 71 | }}} |
| 72 | |
| 73 | |
| 74 | == How to update, change or edit the content of your new page. == |
| 75 | |
| 76 | |
| 77 | {{{ |
| 78 | #!html |
| 79 | 1. |
| 80 | Go back to |
| 81 | <br> |
| 82 | Builders |
| 83 | <br> |
| 84 | -Pages Blocks |
| 85 | |
| 86 | <br><br> |
| 87 | And select your new page in the drop down list. |
| 88 | |
| 89 | <br><br> |
| 90 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/4-admin-page-builder-choose-your-new-page.jpg"> |
| 91 | |
| 92 | <br><br><br><br> |
| 93 | |
| 94 | 2. |
| 95 | Click on the center of the block. |
| 96 | |
| 97 | <br><br> |
| 98 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/5-admin-page-builder-edit-update.jpg"> |
| 99 | |
| 100 | <br><br><br><br> |
| 101 | |
| 102 | 3. |
| 103 | Enter your changes into the HTML-content area and save the changes. |
| 104 | |
| 105 | <br><br> |
| 106 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/6-admin-page-builder-edit-update-save.jpg"> |
| 107 | |
| 108 | <br><br><br><br> |
| 109 | }}} |
| 110 | |
| 111 | |
| 112 | == How to add a second column to your new page. == |
| 113 | |
| 114 | |
| 115 | {{{ |
| 116 | #!html |
| 117 | Maybe you want to add a second column to your newly created page. |
| 118 | |
| 119 | <br><br> |
| 120 | 1. |
| 121 | Go back and select your page in the Page Builders again and click on "<b>Add Column</b>" button. |
| 122 | |
| 123 | <br><br> |
| 124 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/7-add-second-column.jpg"> |
| 125 | |
| 126 | <br><br><br><br> |
| 127 | |
| 128 | 2. |
| 129 | And there is our new column. |
| 130 | |
| 131 | <br><br> |
| 132 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/8-second-column-added.jpg"> |
| 133 | |
| 134 | |
| 135 | <br><br><br><br> |
| 136 | |
| 137 | 3. |
| 138 | Drag a HTML Block up to the new Column and release it. |
| 139 | |
| 140 | <br><br> |
| 141 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/9-add-new-html-block.jpg"> |
| 142 | |
| 143 | <br><br><br><br> |
| 144 | |
| 145 | 4. |
| 146 | There is the HTML Block in Column 2. Now click on the center of the HTML Block to add a caption and HTML-content. |
| 147 | |
| 148 | <br><br> |
| 149 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/10-html-block-added-second-column.jpg"> |
| 150 | |
| 151 | <br><br><br><br> |
| 152 | |
| 153 | 5. |
| 154 | Enter a caption, who it should be visible for, your desired HTML-content, and Save it. |
| 155 | |
| 156 | <br><br> |
| 157 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/11-caption-html-content-column-2-added.jpg"> |
| 158 | |
| 159 | <br><br><br><br> |
| 160 | |
| 161 | 6. |
| 162 | Go back to your new page and refresh it to see the changes. |
| 163 | |
| 164 | <br><br> |
| 165 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/12-refresh-page-to-see-changes.jpg"> |
| 166 | |
| 167 | <br><br><br><br> |
| 168 | }}} |
| 169 | |
| 170 | |
| 171 | == How to change the column width or size of your new 2 column page. == |
| 172 | |
| 173 | |
| 174 | {{{ |
| 175 | #!html |
| 176 | Now maybe you want to change the column width or size of the new 2 column page. |
| 177 | |
| 178 | <br><br> |
| 179 | 1. |
| 180 | Go back and select your page in the Page Builders once again. |
| 181 | |
| 182 | <br><br> |
| 183 | Right now you can see both columns are 50%/499px. |
| 184 | |
| 185 | <br><br> |
| 186 | Find the slider in the picture and slide it right or left to change the width. |
| 187 | |
| 188 | <br><br> |
| 189 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/13-change-page-column-width-size.jpg"> |
| 190 | |
| 191 | <br><br><br><br> |
| 192 | |
| 193 | 2. |
| 194 | I have slid it to the right. You can see column 1 is now 65%/649px and column 2 is 35%/349px. |
| 195 | |
| 196 | <br><br> |
| 197 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/14-columns-width-changed.jpg"> |
| 198 | |
| 199 | <br><br><br><br> |
| 200 | |
| 201 | 3. |
| 202 | Refresh your new page again and you can see the width of the columns have changed. |
| 203 | |
| 204 | <br><br> |
| 205 | <img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/15-refresh-page-to-see-new-column-sizes.jpg"> |
| 206 | |
| 207 | <br><br><br><br> |
| 208 | |
| 209 | |
| 210 | Add more pages, add or move navigation menu links, add more html block content, add and move html blocks, change column width sizes. |
| 211 | <br><br> |
| 212 | <b><i>It's your site...have fun with it!</i></b> |
| 213 | |
| 214 | <br><br> |
| 215 | }}} |