Changes between Initial Version and Version 1 of TutorialHowToCreatePagesWithDolphinPageBuilder


Ignore:
Timestamp:
Jan 10, 2011, 9:57:19 AM (14 years ago)
Author:
gameutopia
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • TutorialHowToCreatePagesWithDolphinPageBuilder

    v1 v1  
     1= How to create pages with Dolphin Page Builder = 
     2 
     3{{{ 
     4#!html 
     5A 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. 
     6 
     7<br><br> 
     8You should have a good working Dolphin installation with no errors or problems. 
     9 
     10<br><br> 
     11This tutorial is based on a standard Dolphin 7 installation with screen shots form the default uni template. 
     12 
     13<br><br> 
     14 
     15<b><u>After reading this, you might also want to check out</u>:</b> 
     16<br> 
     17<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> 
     18<ul> 
     19<li>Moving the Navigation Menu Link.</li> 
     20<li>Updating, changing, and editing content of your new page.</li> 
     21<li>Adding a second column to your new page.</li> 
     22<li>Changing the column width of a page after adding a second column.</li> 
     23</ul> 
     24}}} 
     25 
     26 
     27== Steps to create a page with the Dolphin Page Builder == 
     28 
     29 
     30{{{ 
     31#!html 
     321. 
     33Login to your Dolphin Administration and find: 
     34<br> 
     35Builders 
     36<br> 
     37-Pages Blocks 
     38<br><br> 
     39<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/1-admin-home.png"> 
     40 
     41<br><br><br><br> 
     42 
     432. 
     44Click on the "<b>Add Page</b>" button. 
     45<br><br> 
     46<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/2-admin-page-builder.jpg"> 
     47 
     48<br><br><br><br> 
     49 
     503. 
     51Here is where you enter the Page URI (URL/link) and the Page Title. 
     52 
     53<br><br> 
     54The 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. 
     55 
     56<br><br> 
     57Be sure to choose your Page URI and Page Title wisely before clicking the create page button. (Think about SEO here.) 
     58 
     59<br><br> 
     60You can use hyphens as word separators, which is what I will be using in this example. 
     61 
     62<br><br> 
     63<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/3-admin-page-builder-create-name-page.jpg"> 
     64 
     65<br><br><br><br> 
     66 
     674. 
     68Enter new page details. 
     69<br><br> 
     70For this tutorial I will use: 
     71 
     72<br> 
     73<b>Page URI:</b> how-to-create-a-dolphin-page 
     74<br> 
     75<b>Page title:</b> How to create a Dolphin Page 
     76<br> 
     77Click <b>Create page</b> button. 
     78 
     79<br><br> 
     80<b><u>Note</u>:</b> 
     81<br> 
     82You will want to use your own unique Page URI and Page title. 
     83 
     84<br><br> 
     85<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/4-admin-page-builder-create-name-page.jpg"> 
     86 
     87<br><br><br><br> 
     88 
     895. 
     90Now you will see your new page in the Page Builder list. 
     91 
     92<br><br> 
     93<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/5-admin-new-page-created.jpg"> 
     94 
     95<br><br><br><br> 
     96 
     976. 
     98First we need to add a column to the new page. Find and click on the "<b>Add Column</b>" button. 
     99 
     100<br><br> 
     101<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/6-admin-page-builder-add-column.jpg"> 
     102 
     103<br><br><br><br> 
     104 
     1057. 
     106And now you can see <b>Column 1</b> has been added to the page. 
     107 
     108<br><br> 
     109<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/7-admin-page-builder-new-column-added.jpg"> 
     110 
     111<br><br><br><br> 
     112 
     1138. 
     114The 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. 
     115 
     116<br><br> 
     117<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/8-admin-page-builder-drag-html-block.jpg"> 
     118 
     119<br><br><br><br> 
     120 
     1219. 
     122Now <b>click on the center of the HTML Block in Column 1 Active Blocks</b> so we can add some content to the block. 
     123 
     124<br><br> 
     125<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/9-admin-page-builder-click-on-center-active-html-block.jpg"> 
     126 
     127<br><br><br><br> 
     128 
     12910. 
     130We need to add a Caption Lang Key, whether we want it to be visible for Guest or Member, and enter our desired HTML content. 
     131 
     132<br><br> 
     133<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/10-admin-page-builder-html-block-add-content-window.jpg"> 
     134 
     135<br><br><br><br> 
     136 
     13711. 
     138For this tutorial I will enter: 
     139<br> 
     140<b>Caption Lang Key:</b> Page Builder Tutorial 
     141<br> 
     142<b>Visible for:</b> Guest and Member checked 
     143<br> 
     144<b>HTML-content:</b> Your desired content 
     145<br> 
     146Click the <b>Save</b> button. 
     147 
     148<br><br> 
     149<b><u>Note</u>:</b> 
     150<br> 
     151Caption 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. 
     152 
     153<br><br> 
     154<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/11-admin-page-builder-html-block-add-content-window2.jpg"> 
     155 
     156<br><br><br><br> 
     157 
     15812. 
     159And now you can see the HTML Block becomes Page Builder Tutorial block. 
     160 
     161<br><br> 
     162<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/12-admin-page-builder-html-block-content-updated.jpg"> 
     163 
     164<br><br><br><br> 
     165 
     16613. 
     167Let's take a quick look at our new page and block. Click the "<b>View page</b>" link. 
     168 
     169<br><br> 
     170<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/13-admin-page-builder-view-page.jpg"> 
     171 
     172<br><br><br><br> 
     173 
     17414. 
     175Here is the output in a browser. 
     176 
     177<br><br> 
     178<b><u>From what I entered in step 4</u>:</b> 
     179<br> 
     1801. The Page URI: /page/how-create-a-dolphin-page 
     181<br> 
     1822. Page title: How to create a Dolphin Page 
     183 
     184<br> 
     185<b><u>From what I entered in step 11</u>:</b> 
     186<br> 
     1873. Caption Lang Key: Page Builder Tutorial 
     188<br> 
     1894. HTML-content 
     190 
     191<br><br> 
     192<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/14-admin-page-builder-view-page-edited.jpg"> 
     193 
     194<br><br><br><br> 
     195 
     19615. 
     197Now in order for someone to find the new page we are probably going to want to create a link in the navigation menu. 
     198 
     199<br><br> 
     200Click on: 
     201<br> 
     202Builders 
     203<br> 
     204-Navigation Menu 
     205 
     206<br><br> 
     207<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/15-admin-select-navigation-menu.jpg"> 
     208 
     209<br><br><br><br> 
     210 
     21116. 
     212Drag a "<b>New ITEM</b>" block up to the "Active Items" area. 
     213 
     214<br><br> 
     215<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/16-admin-menu-builder-find-new-item.jpg"> 
     216 
     217<br><br><br><br> 
     218 
     21917. 
     220Once it is in the Active Items <b>click on the center of the "New ITEM" block</b>. 
     221 
     222<br><br> 
     223<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/17-admin-menu-builder-added-to-top-menu.jpg"> 
     224 
     225<br><br><br><br> 
     226 
     22718. 
     228You will see a screen like this: 
     229 
     230<br><br> 
     231<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/18-admin-menu-builder-edit-new-item.jpg"> 
     232 
     233<br><br><br><br> 
     234 
     23519. 
     236Enter your desired navigation menu details for example: 
     237<br><br> 
     238<b>System Name:</b> Dolphin Tips 
     239<br> 
     240<b>Language Key:</b> Dolphin Tips 
     241<br> 
     242<b>Default Name:</b> Dolphin Tips 
     243<br> 
     244<b>URL:</b> page/how-to-create-a-dolphin-page 
     245<br> 
     246<b>Visible for:</b> Guest and Member checked. 
     247<br> 
     248And "<b>Save Changes</b>" button. 
     249 
     250<br><br> 
     251<b><u>Note</u>:</b> 
     252<br> 
     253You can come back here at a later time and add a picture or icon, and make changes if you wish. 
     254 
     255<br><br> 
     256<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/19-admin-menu-builder-edit-new-item-updated.jpg"> 
     257 
     258<br><br><br><br> 
     259 
     26020. 
     261If 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. 
     262 
     263<br><br> 
     264<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/20-admin-back-to-menu-builder.jpg"> 
     265 
     266<br><br><br><br> 
     267 
     26821. 
     269Now visit and refresh the new page again to verify the changes. 
     270 
     271<br><br> 
     272<img src="http://www.boonex.com/trac/dolphin/raw-attachment/wiki/TutorialHowToCreatePagesWithDolphinPageBuilder/21-navigation-menu-check.jpg"> 
     273 
     274<br><br><br><br> 
     275 
     276Use this tutorial as a reference for creating Dolphin pages with your desired uri (url/links) page title, navigation menu, html blocks and content. 
     277 
     278<br><br> 
     279 
     280<b><u>After reading this, you might also want to check out</u>:</b> 
     281}}} 
     282 
     283=== Dolphin Page Builder Part 2 - Additional Tips === 
     284 
     285{{{ 
     286#!html 
     287<ul> 
     288<li>Moving the Navigation Menu Link.</li> 
     289<li>Updating, changing, and editing content of your new page.</li> 
     290<li>Adding a second column to your new page.</li> 
     291<li>Changing the column width of a page after adding a second column.</li> 
     292</ul> 
     293<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> 
     294<br><br> 
     295}}} 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
Fork me on GitHub