This is the paragraph styled with class called 'big-paragraph'. Please use this style if you want make the paragraph bigger - font size 21px as per design. You can add the mentioned class to any Page Bulder Text element as it has been done here down below - field called 'CSS Classes'.
This is the regular paragraph without any extra class. Font size for the regular paragraph is set to 15px as per design. Apart of the default style you can customise the text here in the editor as you want.
DUMMY PARAGRAPH: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla mauris, sagittis nec elit vel, hendrerit pretium lacus. In volutpat tellus eget ex congue, nec tristique quam fringilla. Cras vel sapien rhoncus, varius enim ac, accumsan ex. Nunc sodales dictum placerat. Ut eget sodales sapien. Etiam sagittis dictum neque, in scelerisque dui. Nullam varius dui et odio maximus pretium. Nunc elit nulla, porttitor vel facilisis vitae, feugiat et ipsum. Mauris lacinia, arcu eu ultrices lacinia, velit justo iaculis sem, vitae finibus ex arcu in nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla mauris, sagittis nec elit vel, hendrerit pretium lacus. In volutpat tellus eget ex congue, nec tristique quam fringilla. Cras vel sapien rhoncus, varius enim ac, accumsan ex. Nunc sodales dictum placerat. Ut eget sodales sapien. Etiam sagittis dictum neque, in scelerisque dui. Nullam varius dui et odio maximus pretium. Nunc elit nulla, porttitor vel facilisis vitae, feugiat et ipsum. Mauris lacinia, arcu eu ultrices lacinia, velit justo iaculis sem, vitae finibus ex arcu in nulla.
CUSTOM H2 HEADLINE
The above headline has been created with default PageBuilder Headline element and the style is hardcoded as per design. Font size is equal to 30px; And again you can customise this header as you want.. The top and bottom space or alignment can be set via this element and the style has not been hardcoded as the title can be placed in different areas and setting hardcoded spaces can be a bad idea.. Please remember to not use H1 option as the blog post title has been set to H1 and we should use only one H1 tag per page. Also the other options H3, H4, etc have not been styled so using them will display the defulat Magento PageBuilder style. The only H2 tag is style as per design.
This is a custom quote styled as per design. To add this quote please use default PageBuilder Text element and then in the editor go to navigation Tools -> Source Code. in the popup please place this snippet: <blockquote data-caption="Quote Caption">Quote content here</blockquote> and edit both placeholders for the caption and for the content.
Below you can find an image placed inside Page Builder Text element - this is not recommended way to add the image as we do not have as much control as we could have. Please check this guide down below to find a better way to add image/images.
CONTAINED ROW
This is contained row - the option Appearance set to 'Contained'. This kind of row will display content in kind of boxed way. From the begin of this post we can see this type of row. I have added a little bit different background colour to this row to show the space. Down below you can see another types of rows.
Please remember that each type of row can be edited and some elements like spacing can be adjusted. This is the reason that we didn't hardcoded row styles as this kind of style sometimes can not be overwritten by PageBuilder settings. So leaving this kind of option to set in PageBuilder giving you more flexibility. So as you can you see down below the full-bleed type of row has no padding around the content but it can be easy set by using PageBuilder element settings.
Worth to mention that per design and this style the content inside contained row is limited to 690px width.
FULL-WIDTH ROW
This is full-width row - the option Appearance set to 'Full-Width'. This kind of row will display content with a little bit wider width that the contained row. The row is wider to the left and right area. I put a little more content below to show the difference with the contained one. Also again I have added a background-colour to show the space taken by this row.
DUMMY PARAGRAPH: Ut ornare purus condimentum libero ullamcorper dapibus. Mauris justo risus, volutpat ut quam nec, molestie dapibus metus. Suspendisse potenti. Morbi auctor accumsan neque, ut suscipit velit tincidunt vel. Nam vitae massa aliquet, luctus felis et, porttitor metus. Curabitur mi nisl, pulvinar eget pretium posuere, maximus vel ante. Morbi lobortis fermentum eleifend. In egestas id eros a aliquam. Ut a risus erat. Praesent efficitur, erat eu aliquam ultricies, nisi sem rutrum sapien, a vestibulum orci sem sit amet velit. Sed in sagittis elit, a vestibulum nisi. Aenean porttitor pretium felis eu dictum. Ut posuere odio vitae consectetur volutpat. Duis sit amet malesuada metus.
FULL-BLEED ROW
This is full-bleed row - the option Appearance set to 'Full-Bleed'. This kind of row will display content in a full-width screen from the left side of screen to the right. I put a little more content below and I have changed the background colour to show the difference.
DUMMY PARAGRAPH: Ut ornare purus condimentum libero ullamcorper dapibus. Mauris justo risus, volutpat ut quam nec, molestie dapibus metus. Suspendisse potenti. Morbi auctor accumsan neque, ut suscipit velit tincidunt vel. Nam vitae massa aliquet, luctus felis et, porttitor metus. Curabitur mi nisl, pulvinar eget pretium posuere, maximus vel ante. Morbi lobortis fermentum eleifend. In egestas id eros a aliquam. Ut a risus erat. Praesent efficitur, erat eu aliquam ultricies, nisi sem rutrum sapien, a vestibulum orci sem sit amet velit. Sed in sagittis elit, a vestibulum nisi. Aenean porttitor pretium felis eu dictum. Ut posuere odio vitae consectetur volutpat. Duis sit amet malesuada metus.
SINGLE IMAGE - CONTAINED ROW
SINGLE IMAGE - FULL-WIDTH ROW
SINGLE IMAGE - FULL-BLEED ROW
TWO COLUMNS GRID - CONTENT (LEFT) + IMAGE (RIGHT) - CONTAINED ROW - BIG SPACES
EXPLANATION
This two columns grid can be build with PageBuilder standard elements only and some CSS custom classes to support the mobile/desktop look. If we want to build two columns grid we need to add CSS class 'two-columns' to Row element. Then inside each column we should place CSS class called 'big-space'. This class will set default spaces below columns. lack of this class will reduce the space to 4px as we set on the landing page.
The left column has background color to show the space taken by this element and spacing.
TWO COLUMNS GRID - CONTENT (LEFT) + IMAGE (RIGHT) - CONTAINED ROW - NARROW SPACES
EXPLANATION
This two columns grid is a duplicate of the previous one with a little difference - spacing between colum is smaller. This is the default style for grid created with 'two-columns' CSS class. By default PageBuilder column element has not class 'big-space' as it is our custom class.. Lack of this class will display the grid as you can see here. And again the column has background colour to show the case.
TWO COLUMNS GRID - CONTENT (LEFT) + IMAGE (RIGHT) - FULL-WIDTH ROW - BIG SPACES
EXPLANATION
This two columns grid can be build with PageBuilder standard elements only and some CSS custom classes to support the mobile/desktop look. If we want to build two columns grid we need to add CSS class 'two-columns' to Row element. Then inside each column we should place CSS class called 'big-space'. This class will set default spaces below columns. lack of this class will reduce the space to 4px as we set on the landing page.
The left column has background color to show the space taken by this element and spacing.
TWO COLUMNS GRID - CONTENT (LEFT) + IMAGE (RIGHT) - FULL-BLEED ROW - BIG SPACES - CUSTOM PADDING
EXPLANATION
This two columns grid can be build with PageBuilder standard elements only and some CSS custom classes to support the mobile/desktop look. If we want to build two columns grid we need to add CSS class 'two-columns' to Row element. Then inside each column we should place CSS class called 'big-space'. This class will set default spaces below columns. lack of this class will reduce the space to 4px as we set on the landing page.
The left column has background color to show the space taken by this element and spacing.
TWO COLUMNS GRID - IMAGE (LEFT) + CONTENT (RIGHT) - CONTAINED ROW - BIG SPACES
EXPLANATION
As you can see we can swap image with content. In this kind of situation we have extra CSS class.. By default right column has hardcoded alignment to the right. So without extra class the header can be align to the right. But it can be something what we do not want. In this situation to align the headline to the left we need to add class called 'align-left' into the column. It will overwrite the default alignment for the column and force elements to align to left. usefull for this kind of situation. Try to remove class 'align-left' to see the not-expected results. And again the column has background colour to show the case.
TWO COLUMNS GRID - IMAGE (LEFT) + CONTENT (RIGHT) - CONTAINED ROW - NARROW SPACES
EXPLANATION
This two columns grid is a duplicate of the previous one with a little difference - spacing between colum is smaller.
TWO COLUMNS GRID - CONTENT (LEFT) + IMAGE (RIGHT) - CONTAINED ROW - BIG SPACES - RIGHT ALIGNMENT FOR CONTENT
EXPLANATION
Two columns grid can be used also to align the content to the right hand side. To make sure that header will align to right we need to add another class to the column: 'align-right'. It will overwrite the default left alignnment for the left column and will force the content to align to right.
The left column has background color to show the space taken by this element and spacing.
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - CONTAINED ROW - BIG SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - CONTAINED ROW - NARROW SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - FULL-WIDTH ROW - BIG SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - FULL-WIDTH ROW - NARROW SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - FULL-BLEED ROW - BIG SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - FULL-BLEED ROW - NARROW SPACES - CAPTIONS
TWO COLUMNS GRID - IMAGE (LEFT) + IMAGE (RIGHT) - FULL-BLEED ROW - BIG SPACES - CAPTIONS - CUSTOM PADDING
THREE COLUMNS GRID - CONTAINED ROW - BIG SPACES - CAPTIONS
THREE COLUMNS GRID - CONTAINED ROW - NARROW SPACES - CAPTIONS
THREE COLUMNS GRID - FULL-WIDTH ROW - BIG SPACES - CAPTIONS
THREE COLUMNS GRID - FULL-WIDTH ROW - NARROW SPACES - CAPTIONS
THREE COLUMNS GRID - FULL-BLEED ROW - BIG SPACES - CAPTIONS
THREE COLUMNS GRID - FULL-WIDTH ROW - NARROW SPACES - CAPTIONS
THREE COLUMNS GRID - FULL-BLEED ROW - BIG SPACES - CAPTIONS
FOUR COLUMNS GRID - CONTAINED ROW - BIG SPACES - CAPTIONS
FOUR COLUMNS GRID - CONTAINED ROW - NARROW SPACES - CAPTIONS
FOUR COLUMNS GRID - FULL-WIDTH ROW - BIG SPACES - CAPTIONS
FOUR COLUMNS GRID - FULL-WIDTH ROW - NARROW SPACES - CAPTIONS
FOUR COLUMNS GRID - FULL-BLEED ROW - BIG SPACES - CAPTIONS
FOUR COLUMNS GRID - FULL-BLEED ROW - NARROW SPACES - CAPTIONS
FOUR COLUMNS GRID - FULL-BLEED ROW - BIG SPACES - CAPTIONS - CUSTOM PADDING
