-
Notifications
You must be signed in to change notification settings - Fork 81
IBX-6500: Page Builder product guide added in developer documentation #2171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
c0271e8
Page Builder product guide added in dev-doc
julitafalcondusza ab984c3
Content added, updates
julitafalcondusza b464877
Updates, new sections added
julitafalcondusza 4f0e330
Screenshot added
julitafalcondusza 86af9f3
Sentences & diagram added
julitafalcondusza 436b5bb
Updates
julitafalcondusza 4cb5dc3
Vale fixes
julitafalcondusza 1f247ed
Link fixed
julitafalcondusza 4c69d19
Section about Schedule content added
julitafalcondusza c86e303
Updates, screenshots added
julitafalcondusza bb52cba
Sentence added
julitafalcondusza 164bd2a
View section moved up
julitafalcondusza 87190e2
Section added
julitafalcondusza 00aa27a
Fix
julitafalcondusza 0308c9a
Vale fixes
julitafalcondusza 3792967
Small fixes
julitafalcondusza 69e3c51
Fixes after doc-review
julitafalcondusza dc242ae
Vale fixes
julitafalcondusza File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+959 Bytes
docs/content_management/img/page_builder_toolbartimelinetoggler.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| --- | ||
| description: The Page Builder product guide provides a full description of its features as well as the benefits it brings to the client. | ||
| edition: experience | ||
| --- | ||
|
|
||
| # Page Builder product guide | ||
|
|
||
| ## What is page | ||
|
|
||
| [Page](pages.md) is a block-based type of content. You can create and modify it with a visual drag-and-drop editor - Page Builder. | ||
| Page is divided into zones into which you can drop various dynamic blocks. | ||
| By editing pages you can customize the layout and content of your website. | ||
|
|
||
| ### Create page | ||
|
|
||
| To create a new page: | ||
|
|
||
| A\. In the left panel, go to **Content**. | ||
|
|
||
| B\. Select **Content structure**. | ||
|
|
||
| C\. On the right-side toolbar, click **Create content** and from the list of Content items select **Landing Page**. | ||
|
|
||
| D\. Select the layout and click **Create**. | ||
|
|
||
|  | ||
|
|
||
| ### Edit page | ||
|
|
||
| You can edit any existing page by using Page Builder. To do it, in the Back Office go to **Content** and select **Content structure**. | ||
| Then, from the Content Tree choose the page and click **Edit**. | ||
|
|
||
| ## What is Page Builder | ||
|
|
||
| Page Builder is a visual tool that allows you to create and edit any page in [[= product_name =]]. | ||
| It is more than managing: it is about building pages, creating customized content and fully-targeted landing pages. | ||
| Creating pages in Page Builder involves composing content using ready-to-use elements - blocks, properly configured and customized. | ||
| It is also important to choose a layout - it determines the arrangement of drop zones that contain content elements. | ||
|
|
||
|  | ||
|
|
||
| ### Availability | ||
|
|
||
| Page Builder is available in [[=product_name_exp=]] and [[=product_name_com=]]. | ||
|
|
||
| ### How does Page Builder work | ||
|
|
||
| #### Page Builder interface | ||
|
|
||
| Page Builder has plain and intuitive interface. You can create a Page without having advanced technical skills. | ||
|
|
||
|  | ||
|
|
||
| Page Builder user interface consists of: | ||
|
|
||
| A. Drop zone | ||
|
|
||
| B. Elements / Structure view toolbar | ||
|
|
||
| C. Settings toolbar (including Fields, Visibility and Schedule settings) | ||
|
|
||
| D. Mode toolbar (including PC, tablet and mobile mode) | ||
|
|
||
| E. Buttons: | ||
|
|
||
| |Button|Description| | ||
| |------|-----------| | ||
| ||Access main properties of the Page, like title and description.| | ||
| ||Access preview of the Page for a given Segment.| | ||
| ||Access the timeline to preview how the Page changes with time. You can also view the list of all upcoming scheduled events.| | ||
| ||Toggle through to see how the Page is rendered on different devices.| | ||
| ||Move Elements / Structure view to the other side of the screen.| | ||
| ||Undo latest change.| | ||
| ||Redo latest change.| | ||
|
|
||
| F. Saving options | ||
|
|
||
| |Option|Description| | ||
| |------|-----------| | ||
| |Close|Close the page without saving it.| | ||
| |Send to review|Save the page and send it to review.| | ||
| |Publish / Publish later|Publish the page or schedule publishing for later.| | ||
| |Save draft|Save the page draft*.| | ||
| |Delete draft|Delete the page draft.| | ||
|
|
||
| *To help you preserve your work, system saves drafts of Content items automatically. For more information, see [Autosave]([[= user_doc =]]/content_management/content_versions/#autosave). | ||
|
|
||
| Page Builder has two main views that you can use while creating a page: | ||
|
|
||
| - Elements toolbar - consists of all available elements that you can use by dragging them and dropping on a drop zone. | ||
|
|
||
|  | ||
|
|
||
| - Structure view - shows a structure of the page, including its division into zones and the blocks that it contains. It follows the behavior of the Content Tree. Structure view has ability to reorder blocks using drag and drop. | ||
|
|
||
|  | ||
|
|
||
| ##### Choose layout | ||
|
|
||
| For newly created Page you can choose a [layout]([[= user_doc =]]/content_management/configure_ct_field_settings/#available-page-layouts) which defines the available zones. | ||
|
|
||
| Applying a layout divides the Page into the defined zones. The zones are placeholders for Content items. | ||
|
|
||
| On the Page creation modal, select the layout and click **Create draft**. | ||
| Now you are ready to add blocks of content to the Page. | ||
|
|
||
| The page layouts that an editor has access to are up to you to choose. | ||
| In the `Select layouts` section, you can select layouts that you want to be available for the Page. | ||
|
|
||
julitafalcondusza marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|  | ||
|
|
||
| The default, built-in Page layout has only one zone, but developers can create other layouts in configuration. | ||
| For more information, see [Configure layout](render_page.md#configure-layout). | ||
|
|
||
| #### Add blocks | ||
|
|
||
| To customize your page in Page Builder you need to add blocks. | ||
| To do it, access Elements toolbar, drag page block that you want to use, and drop it on the empty place on a drop zone. | ||
|
|
||
| When you add a new block to the drop zone, drop it in the blue highlighted area. Before you drop it, a bold line appears - it helps you see the position of the newly added block in relation to other, already added blocks. | ||
|
|
||
|  | ||
|
|
||
| Ready-to-use blocks available in [[= product_name =]] have their own, unique functions, but you can also [add your own, custom blocks](create_custom_page_block.md). All available tools and settings, that Page Builder comes with, enable you to customize the content appearing on the page. | ||
|
|
||
| You can check all ready-to-use blocks available in Page Builder in User Documentation, [Block reference page]([[= user_doc =]]/content_management/block_reference/). | ||
|
|
||
| #### Work with blocks | ||
|
|
||
| Working with blocks is intuitive. You don't have to worry about placing blocks in the proper place from the start - you can reorder them at any time. | ||
| You can reorder blocks in a few ways: | ||
|
|
||
| - drag and drop block in the desired location on a drop zone | ||
| - select block and use up and down arrow on the keyboard | ||
| - access Structure view and use 'Move up' and 'Move down' function in the settings of the block or drag and drop to change the position in the structure | ||
|
|
||
|  | ||
|
|
||
| You can manage each block by accessing its settings. To do it, click settings icon next to the block's name. | ||
|
|
||
|  | ||
|
|
||
| Available settings are: | ||
|
|
||
| - Move up - allows you to change position of the block on the page by moving it up | ||
| - Move down - allows you to change position of the block on the page by moving it down | ||
| - Configuration - allows you to access configuration window | ||
| - Duplicate - duplicates a block with its settings, by creating a copy of it that appears below the original block | ||
| - Refresh - refreshes preview of the block | ||
| - Delete - deletes existing block | ||
|
|
||
| #### Schedule content | ||
|
|
||
| Page Builder comes with a Scheduler, it allows you to schedule content appearance. | ||
|
|
||
| You can schedule content to be revealed, or hidden in Page Builder in two ways with: | ||
|
|
||
| - **Scheduler tab** - it's available in the configuration of all Page blocks. In this tab you can set the date and time when the block becomes visible and when it disappears from a Page. | ||
|
|
||
|  | ||
|
|
||
| - **Content Scheduler** - it's one of the blocks available in Page Builder Elements menu. To proceed with the schedule, go to **Basic** tab of the block, then click **Select content** and confirm your choice. Then set date and time in the **Content airtime settings** window. | ||
|
|
||
|  | ||
|
|
||
| For more information, see [Schedule publication]([[= user_doc =]]/content_management/schedule_publishing/). | ||
|
|
||
| ## Benefits | ||
|
|
||
| ### Manage your pages without technical skills | ||
|
|
||
| Thanks to intuitive and plain Page Builder interface, you can create and manage your website without the need of having advanced technical skills. | ||
| Elements toolbar, visible page zones and Structure view - these are the elements that make working with Page Builder really intuitive and quick. | ||
|
|
||
| ### Self schedule content, special offers and campaigns | ||
|
|
||
| One of the most important tools that Page Builder offers, is a Scheduler. It allows you to set and schedule a specific date and time for the content to be published or hidden. As a result, you can manage timeline of publications, without the need of manual publishing, or hiding each of them. | ||
|
|
||
| ### Create high-converting and fully-targeted landing pages | ||
|
|
||
| Page Builder allows you to create highly customizable websites. You can build modifiable and targeted landing pages that meet your needs. | ||
| Each dynamic blocks has its own settings, properties and design that you can set up in your way to customize the content appearing on the page. | ||
| Additionaly, if you feel comfortable with your technical skills, you can configure your own elements, for example, a new customized layout, or block. | ||
|
|
||
| ### Increase sales with highly personalized campaigns | ||
|
|
||
| Personalized campaigns are one of the factors that can increase your sales. | ||
| With Page Builder you can achieve it, by using customization and time Scheduler. | ||
| Anytime you can edit your page and change a position of a block to enhance visibility. | ||
| Additionaly, Page Builder offers you a selection of ready-to-use page blocks that can help you to create content tailored to each individual customer: | ||
|
|
||
| A. **Default** blocks: | ||
|
|
||
| - Dynamic targeting - embeds recommended items based on the Segment the user belongs to. | ||
| - Personalized - displays a list of Content items/products that are recommended to end users when specific scenarios are triggered. | ||
| - Targeting - embeds a Content item based on the Segment the user belongs to. | ||
|
|
||
| B. **PIM** blocks: | ||
|
|
||
| - Last purchased - displays a list of products that were recently purchased from PIM. | ||
| - Last viewed - displays a list of products from PIM that were recently viewed. | ||
| - Product collection - displays a list of specifically selected products. | ||
| - Recently added - displays a list of products that were recently added to PIM. | ||
|
|
||
| C. **Commerce** blocks: | ||
|
|
||
| - Bestsellers - displays a list of products from PIM that were recently a bestseller. | ||
| - Orders - displays a list of orders associated with a particular company or individual customer. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.