Responsive CMS Page Builder Create a Responsive Promotion Area for Magento 2

Responsive CMS Page Builder Create a Responsive Promotion Area for Magento 2

INSTALLATION Installation via Magento Marketplace For more details about installing custom modules see http://docs.magento.com/marketplace/user_guide/quicktour/install-extension.html Manual Installation (Installation from a Zip file) Unpack the extension into Your Magento 2 Directory /app/code folder. See the screenshot below as an example. Open up command prompt Navigate to Magento 2 root directory and run the following commands: sudo uwww-data bin/magento setup:upgrade sudo uwww-data bin/magento cache:clean For more details about installing custom modules check http://devdocs.magento.com/guides/v2.0 pdfprint 2.0.6

General Settings Enabled Activate the extension License Add your license key Fonts Add your Fonts and the URL for loading. For more information see chapter Font.

Designer You can see all templates. Button Add New To add a new Template, click on the button. Action Edit Click on button Edit for open a current template. pdfprint 2.0.6

New Template Button click to open Designer Fill the fields Name and Identifier with a free name.

Main Area 4 3 2 1 1. Content Area 2 3 4 Content Block Breakpoints Tab Tabs: Block- Properties, Global CSS, Grid Settings

Block Menü New Block Import Block from file Duplicate Block Export Block to file Remove Block Export / Import the full design to / from plain file.

CSS Breakpoints With this function you can link different breakpoints, so that your changes will appear in all linked breakpoints too.. If the current breakpoint is "unlink", the changes to the visible blocks and position changes of the blocks affect the current breakpoint only.. If the current breakpoint is "link", the changes affect all other breakpoints with the status "link".. Area is visible for breakpoint. Area is not visible for breakpoint In this example, the current breakpoint is "640-767". All changes affect the breakpoint (640-767,480-639,0-479). All other breakpoints retain layout changes. The breakpoint "0-479" is invisible in the frontend. You can hide each block for each breakpoint. CSS: Style information can be stored here, which is only available for the respective breakpoint.

Layout Example Here you see a complex example with 5 blocks. Blocks 1 and 3 are divided into their own areas.

Block Example New Container New Textbox New Image New Widget Duplicate Box Structure of Block 1 (Flexbox Layout) Top-Layer (Fit, Layout Horizontal) Left Container (Flex 2, Layout Vertical) Top Container (Flex 2, Bottom/Center) Text-Block Top Container (Flex 1, Center/Middle) Text-Block Right Container (Flex 1, Center/Middle) Text-Block

Properties for Text Item

Add new Font Use Google Font: Go to https://fonts.google.com and select your font (in this example Caveat Brush ) Click on google site on select this font and copy the style URL Go to [snm-portal > shopping-world >settings] Add new row and fill: Font Family: Caveat Brush Font Style: Regular CSS URL: https://fonts.googleapis.com/css?family=caveat+brush Save the settings on open the Shopping World Designer, on a text item you can see the new font.

Add new Font Use locale Font: Create a file <magento>/pub/media/fonts/blowbrush.css Add Style to your file: @font-face { font-family: 'BlowBrush'; font-style: normal; font-weight: 300; src: url('blowbrush/blowbrush.ttf') format('truetype'); } Copy your font files to <magento>/pub/media/fonts/blowbrush/blowbrush.ttf Go to [snm-portal > shopping-world >settings] Add new row and fill: Font Family: BlowBrush Font Style: Regular CSS URL: fonts/blowbrush.css Save the settings on open the Shopping World Designer, on a text item you can see the new font.

Add your Content Use Magento Widget: Go to [content > widgets] > Add Widget Type : SNM Shoppingworld Design Theme: <your theme> Click Button Continue Add Layout Update and slect under Widget Options your Shopping World template.

Add your Content Use Layout Update XML Go to [products > categories] > Select your category Go to section [design > layout update xml] Add your XML-Layout: (replace productinfo with your template identifier) <referencecontainer name="top.container"> <block class="snmportal\shoppingworld\block\widget\world" > <action method="setidentifier"> <argument name="text" xsi:type="string">productinfo</argument> </action> </block> </referencecontainer>

More Information Download FREE SNM-Portal Extension Widget1 Include Focus-Image, Video and Product Info Widgets. Visit the Extension website for examples and templates. On our YouTube channel, you can see many demos to use. SNM on YouTube: http://www.youtube.com/user/snmgerm Playlist : https://www.youtube.com/user/snmgerm/playlists

Thank you! Should you have any questions or feature suggestions, please contact us at: Email: support@snm-portal.com Website: snm-portal.com Demo: m2demo.snm-portal.com/snm Username: demo PW: demo123 SNM-Portal Team