Changes between Initial Version and Version 1 of TutorialDolphinPageBuilderAdditionalTips

Timestamp:

Jan 10, 2011, 10:13:03 AM (13 years ago)

Author:

gameutopia

Comment:

--

TutorialDolphinPageBuilderAdditionalTips

@@ +1 @@
+= Dolphin Page Builder Part 2 - Additional Tips =
+
+
+{{{
+#!html
+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>
+
+<br>
+-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.
+
+<br><br>
+You should have a good working Dolphin installation with no errors or problems.
+
+<br><br>
+This tutorial is based on a standard Dolphin 7 installation with screen shots form the default uni template.
+
+<br><br>
+This second part to the Dolphin Page Builder tutorial shows you some additional things you might want to do once you start building pages.
+
+<br><br>
+<b><u>Includes</u>:</b>
+<ul>
+<li>Moving the Navigation Menu Link.</li>
+<li>Updating, changing, and editing content of your new page.</li>
+<li>Adding a second column to your new page.</li>
+<li>Changing the column width of a page after adding a second column.</li>
+</ul>
+}}}
+
+
+== How to move the navigation link to your new page ==
+
+
+
+{{{
+#!html
+To move the menu navigation link location:
+
+<br><br>
+
+1.
+Navigate in your Dolphin Administration to:
+<br>
+Builders
+<br>
+-Navigation menu
+
+<br><br>
+Find your item or block and drag it to a new location.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/1-admin-menu-builder-before-move.jpg">
+
+<br><br><br><br>
+
+2.
+Here it has been moved to the right of Mail.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/2-admin-menu-builder-after-move.jpg">
+
+<br><br><br><br>
+
+3.
+And if we visit and refresh our page we can see that it reflects this.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/3-navigation-menu-moved.jpg">
+
+<br><br><br><br>
+}}}
+
+
+== How to update, change or edit the content of your new page. ==
+
+
+{{{
+#!html
+1.
+Go back to
+<br>
+Builders
+<br>
+-Pages Blocks
+
+<br><br>
+And select your new page in the drop down list.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/4-admin-page-builder-choose-your-new-page.jpg">
+
+<br><br><br><br>
+
+2.
+Click on the center of the block.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/5-admin-page-builder-edit-update.jpg">
+
+<br><br><br><br>
+
+3.
+Enter your changes into the HTML-content area and save the changes.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/6-admin-page-builder-edit-update-save.jpg">
+
+<br><br><br><br>
+}}}
+
+
+== How to add a second column to your new page. ==
+
+
+{{{
+#!html
+Maybe you want to add a second column to your newly created page.
+
+<br><br>
+1.
+Go back and select your page in the Page Builders again and click on "<b>Add Column</b>" button.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/7-add-second-column.jpg">
+
+<br><br><br><br>
+
+2.
+And there is our new column.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/8-second-column-added.jpg">
+
+
+<br><br><br><br>
+
+3.
+Drag a HTML Block up to the new Column and release it.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/9-add-new-html-block.jpg">
+
+<br><br><br><br>
+
+4.
+There is the HTML Block in Column 2. Now click on the center of the HTML Block to add a caption and HTML-content.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/10-html-block-added-second-column.jpg">
+
+<br><br><br><br>
+
+5.
+Enter a caption, who it should be visible for, your desired HTML-content, and Save it.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/11-caption-html-content-column-2-added.jpg">
+
+<br><br><br><br>
+
+6.
+Go back to your new page and refresh it to see the changes.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/12-refresh-page-to-see-changes.jpg">
+
+<br><br><br><br>
+}}}
+
+
+== How to change the column width or size of your new 2 column page. ==
+
+
+{{{
+#!html
+Now maybe you want to change the column width or size of the new 2 column page.
+
+<br><br>
+1.
+Go back and select your page in the Page Builders once again.
+
+<br><br>
+Right now you can see both columns are 50%/499px.
+
+<br><br>
+Find the slider in the picture and slide it right or left to change the width.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/13-change-page-column-width-size.jpg">
+
+<br><br><br><br>
+
+2.
+I have slid it to the right. You can see column 1 is now 65%/649px and column 2 is 35%/349px.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/14-columns-width-changed.jpg">
+
+<br><br><br><br>
+
+3.
+Refresh your new page again and you can see the width of the columns have changed.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialDolphinPageBuilderAdditionalTips/15-refresh-page-to-see-new-column-sizes.jpg">
+
+<br><br><br><br>
+
+
+Add more pages, add or move navigation menu links, add more html block content, add and move html blocks, change column width sizes.
+<br><br>
+<b><i>It's your site...have fun with it!</i></b>
+
+<br><br>
+}}}