story 3-landing page with form wall
DESCRIPTION
Wireframes for next generation of eZ Publish Editorial Interface. Please visit http://share.ez.no/blogs/ez-publish-next-ui/ if interested.TRANSCRIPT
![Page 1: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/1.jpg)
3. Landing Page with formwallAny marketer‘s dream
Redefining eZ Publish User Interface on eZ Publish 5
UX & UI conceptsFirst phase of six end-to-end user stories
to lay the foundations of the new interface.
![Page 2: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/2.jpg)
As a user, I will...
2
...create a new landing page for a whitepaper lead-generation campaign
... edit the marketing editorial (text and image) for the campaign
Intention• introduce the new landing page manager, in the IUI (Insite User Interface)• showcase a new form builder in the context of a marketing landing page• demonstrate how the search discovery can be use at different place of the interface
We will show• create content in IUI• create a form using the form builder• integrate a document to download after completing the form
... create the form used to capture leads / prospects and test it
![Page 3: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/3.jpg)
I will start by simply creating a new “Landing Page” object.
3
As a first thing, I will choose the layout of the landing page
I want to create.(some people call this ‘zoning’)
![Page 4: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/4.jpg)
Create landing pageAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
4
![Page 5: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/5.jpg)
One my page is created, it is obviously blank.
5
I will be able to create blocks in the different zones of the zoning.
The action toolbar on the right showsall the block types available on
my eZ Publish installation.
I will simply drag and drop the blocks I want!
A drop zone, with color code help me to clearly identify the zones.
![Page 6: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/6.jpg)
Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
6
![Page 7: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/7.jpg)
I want a short editorial on the left,to communicate the value of the whitepaper
I want to offer for download.
7
Luckily, I already have content for thatin my content repository,
so I will just reuse and embed this content,an article called “Reaching for the stars”.
For that, I use an “embed object” block,search for my content that I will
then add to the block.
![Page 8: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/8.jpg)
Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
8
![Page 9: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/9.jpg)
Once this is done, I will simply add a “Form” block on the right zone.
9
Once I dragged the block, I enter theform editor. The form editor follow the
same principles: the form can be editedin an overlay, it has both settings and
a collection of fields.
I can simply drag and drop fields from the action bar to the form
and edit them to create my form.
![Page 10: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/10.jpg)
Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
10
![Page 11: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/11.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
11
![Page 12: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/12.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
12
![Page 13: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/13.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
13
![Page 14: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/14.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
14
![Page 15: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/15.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
15
![Page 16: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/16.jpg)
Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
16
![Page 17: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/17.jpg)
Once this is done, I feel I am all set,I can publish and test.
Huray!
17
![Page 18: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/18.jpg)
View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
18
![Page 19: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/19.jpg)
View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
19
![Page 20: Story 3-landing page with form wall](https://reader034.vdocuments.us/reader034/viewer/2022051817/548c59b6b47959190d8b62fb/html5/thumbnails/20.jpg)
View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.
20