Changes between Initial Version and Version 1 of TutorialHowToCreatePagesWithDolphinPageBuilder

Timestamp:

Jan 10, 2011, 9:57:19 AM (13 years ago)

Author:

gameutopia

Comment:

--

TutorialHowToCreatePagesWithDolphinPageBuilder

@@ +1 @@
+= How to create pages with Dolphin Page Builder =
+
+{{{
+#!html
+A step by step tutorial with screenshots for easy reference. Which shows you how to create a new page with the Dolphin page builder and how to add a link to it in the navigation menu.
+
+<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>
+
+<b><u>After reading this, you might also want to check out</u>:</b>
+<br>
+<a href="http://www.boonex.com/trac/dolphin/wiki/TutorialDolphinPageBuilderAdditionalTips" title="Dolphin Page Builder Part 2 - Additional Tips">Dolphin Page Builder Part 2 - Additional Tips</a>
+<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>
+}}}
+
+
+== Steps to create a page with the Dolphin Page Builder ==
+
+
+{{{
+#!html
+1.
+Login to your Dolphin Administration and find:
+<br>
+Builders
+<br>
+-Pages Blocks
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/1-admin-home.png">
+
+<br><br><br><br>
+
+2.
+Click on the "<b>Add Page</b>" button.
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/2-admin-page-builder.jpg">
+
+<br><br><br><br>
+
+3.
+Here is where you enter the Page URI (URL/link) and the Page Title.
+
+<br><br>
+The page URI will be the link to the new page with /page/newpage format or structure. Which will look like http://www.yoursite.com/page/newpage in your web browser.
+
+<br><br>
+Be sure to choose your Page URI and Page Title wisely before clicking the create page button. (Think about SEO here.)
+
+<br><br>
+You can use hyphens as word separators, which is what I will be using in this example.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/3-admin-page-builder-create-name-page.jpg">
+
+<br><br><br><br>
+
+4.
+Enter new page details.
+<br><br>
+For this tutorial I will use:
+
+<br>
+<b>Page URI:</b> how-to-create-a-dolphin-page
+<br>
+<b>Page title:</b> How to create a Dolphin Page
+<br>
+Click <b>Create page</b> button.
+
+<br><br>
+<b><u>Note</u>:</b>
+<br>
+You will want to use your own unique Page URI and Page title.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/4-admin-page-builder-create-name-page.jpg">
+
+<br><br><br><br>
+
+5.
+Now you will see your new page in the Page Builder list.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/5-admin-new-page-created.jpg">
+
+<br><br><br><br>
+
+6.
+First we need to add a column to the new page. Find and click on the "<b>Add Column</b>" button.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/6-admin-page-builder-add-column.jpg">
+
+<br><br><br><br>
+
+7.
+And now you can see <b>Column 1</b> has been added to the page.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/7-admin-page-builder-new-column-added.jpg">
+
+<br><br><br><br>
+
+8.
+The next step is to add a HTML Block to the Active Blocks area of the page. Simply <b>drag a HTML Block up to the Active Blocks Column 1</b> area and release it.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/8-admin-page-builder-drag-html-block.jpg">
+
+<br><br><br><br>
+
+9.
+Now <b>click on the center of the HTML Block in Column 1 Active Blocks</b> so we can add some content to the block.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/9-admin-page-builder-click-on-center-active-html-block.jpg">
+
+<br><br><br><br>
+
+10.
+We need to add a Caption Lang Key, whether we want it to be visible for Guest or Member, and enter our desired HTML content.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/10-admin-page-builder-html-block-add-content-window.jpg">
+
+<br><br><br><br>
+
+11.
+For this tutorial I will enter:
+<br>
+<b>Caption Lang Key:</b> Page Builder Tutorial
+<br>
+<b>Visible for:</b> Guest and Member checked
+<br>
+<b>HTML-content:</b> Your desired content
+<br>
+Click the <b>Save</b> button.
+
+<br><br>
+<b><u>Note</u>:</b>
+<br>
+Caption Lang Key will be the title of the block. Decide who you want it visible for guests, members, both, or neither. HTML-content will be the content inside the block.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/11-admin-page-builder-html-block-add-content-window2.jpg">
+
+<br><br><br><br>
+
+12.
+And now you can see the HTML Block becomes Page Builder Tutorial block.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/12-admin-page-builder-html-block-content-updated.jpg">
+
+<br><br><br><br>
+
+13.
+Let's take a quick look at our new page and block. Click the "<b>View page</b>" link.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/13-admin-page-builder-view-page.jpg">
+
+<br><br><br><br>
+
+14.
+Here is the output in a browser.
+
+<br><br>
+<b><u>From what I entered in step 4</u>:</b>
+<br>
+1. The Page URI: /page/how-create-a-dolphin-page
+<br>
+2. Page title: How to create a Dolphin Page
+
+<br>
+<b><u>From what I entered in step 11</u>:</b>
+<br>
+3. Caption Lang Key: Page Builder Tutorial
+<br>
+4. HTML-content
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/14-admin-page-builder-view-page-edited.jpg">
+
+<br><br><br><br>
+
+15.
+Now in order for someone to find the new page we are probably going to want to create a link in the navigation menu.
+
+<br><br>
+Click on:
+<br>
+Builders
+<br>
+-Navigation Menu
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/15-admin-select-navigation-menu.jpg">
+
+<br><br><br><br>
+
+16.
+Drag a "<b>New ITEM</b>" block up to the "Active Items" area.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/16-admin-menu-builder-find-new-item.jpg">
+
+<br><br><br><br>
+
+17.
+Once it is in the Active Items <b>click on the center of the "New ITEM" block</b>.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/17-admin-menu-builder-added-to-top-menu.jpg">
+
+<br><br><br><br>
+
+18.
+You will see a screen like this:
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/18-admin-menu-builder-edit-new-item.jpg">
+
+<br><br><br><br>
+
+19.
+Enter your desired navigation menu details for example:
+<br><br>
+<b>System Name:</b> Dolphin Tips
+<br>
+<b>Language Key:</b> Dolphin Tips
+<br>
+<b>Default Name:</b> Dolphin Tips
+<br>
+<b>URL:</b> page/how-to-create-a-dolphin-page
+<br>
+<b>Visible for:</b> Guest and Member checked.
+<br>
+And "<b>Save Changes</b>" button.
+
+<br><br>
+<b><u>Note</u>:</b>
+<br>
+You can come back here at a later time and add a picture or icon, and make changes if you wish.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/19-admin-menu-builder-edit-new-item-updated.jpg">
+
+<br><br><br><br>
+
+20.
+If the block still says: "New ITEM" you can just click on "Navigation Menu" link again and it should change to the Name you just created in this case Dolphin Tips.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/20-admin-back-to-menu-builder.jpg">
+
+<br><br><br><br>
+
+21.
+Now visit and refresh the new page again to verify the changes.
+
+<br><br>
+<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/21-navigation-menu-check.jpg">
+
+<br><br><br><br>
+
+Use this tutorial as a reference for creating Dolphin pages with your desired uri (url/links) page title, navigation menu, html blocks and content.
+
+<br><br>
+
+<b><u>After reading this, you might also want to check out</u>:</b>
+}}}
+
+=== Dolphin Page Builder Part 2 - Additional Tips ===
+
+{{{
+#!html
+<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>
+<a href="http://www.boonex.com/trac/dolphin/wiki/TutorialDolphinPageBuilderAdditionalTips" title="Dolphin Page Builder Part 2 - Additional Tips">Dolphin Page Builder Part 2 - Additional Tips</a>
+<br><br>
+}}}