Questions about editing pages

[han_ting]

Hi everyone,
 

I have some questions about editing pages as below.

Q1.  I can't add parallel component. The component block is too large,  I only can add one image.

[img]can'thttps://forums.adobe.com/api/core/v3/attachments/885757/data[/img]

Parallel component like this, I also want to put text beside images.

Q2.  Is the component size fixed? (That means I can't enlarge or make it smaller) 

Q3. When I use Text & Image component, I found the text editing function is limited. How can I change Text color,style or size...etc.?

Q4, How to create a new page with emulator? I've saw some post before, but I still can't find the answer.

When I create a normal page, I just choose"create Page", but no emulator function too add. (I only can find emulator pages in Geometrixx Media)

Thank you .

[smacdonald2008]

For Q1 - if out of the box does not produce the results you want - you can either overlay the component or build a custom one that uses some sort of JS lib like JQuery to get the output that you want. 

[kautuk_sahni]

For Q2, 

With every component we can associate the CSS. So we can definitely change the CSS property as per our convince.

See this community article to help you out on this:

Link:- http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

// [img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs4.jpg[/img]

Also you can change the CSS for Template as per your need/use-case.

Authoring way to add design/CSS to the template :- http://blogs.adobe.com/sunil/2015/04/29/aem-developers-apply-a-design-to-the-aem-sightly-template/

        Video :-  https://youtu.be/rv-E_WxzvVI

Reference forum post:

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

I hope this would help you.

~kautuk

[han_ting]

Hi smacdonald2008 & kautuk,

Thanks for  your help.  I'll try it.
 

Does anyone know Q4 => How to create a new page with emulator?

Thank you.

Han

[kautuk_sahni · Accepted solution]

For Q4, here is a good reference article to be consulted :- http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

// It talks about creating and using of Custom AEM Mobile Emulator

Official documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/mobile-web/emulators.html

//

Creating a Custom Mobile Emulator

To create a custom mobile emulator:

1. Below /apps/myapp/components/emulators create the component myemulator (node type: cq:Component).
2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
3. Define a CSS client library with category cq.wcm.mobile.emulator for the emulator appearance: name = css, node type = cq:ClientLibrary
   As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
4. If needed, define a JS client library, for example to define a specific plugin: name = js, node type = cq:ClientLibrary
   As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js 
5. If the emulator supports specific functionalities defined by plugins (like touch scrolling), create a configuration node below the emulator: name = cq:emulatorConfig, node type = nt:unstructured and add the property that defines the plugin:
   - Name = canRotate, Type = Boolean, Value = true: to include the rotation functionality.
   - Name = touchScrolling, Type = Boolean, Value = true: to include the touch scrolling functionality.
   More functionalities can be added by defining your own plugins.

I hope this would also help you.

I would encourage you to create a separate questions for multiple questions post.

~kautuk

[han_ting]

Hi kautuk,

Thank you so much, It's helpful.

For advanced questions, I'll create new post for that.

Thank you.