TABLE OF CONTENTS

• Introduction
• Getting Started
  • Step 1: Create Content
  • Step 2: Customize Content
  • Step 3: Publish Page
• Editing Content

Introduction

This guide is intended to provide you with a step-by-step process on how to use Page Builder, add and edit content to your Magento website.

Getting Started

To begin with, you need to log in to your Magento admin panel and navigate to Content> Elements> Pages. Here, you will find a list of all the pages on your website. Click on the "Add New Page" button to start creating a new page.

Step 1: Create Content

Rows and columns are important when creating new content on your website. These two elements are what control how your content looks on the website and is responsible for creatinga grid-like structurefor your website. To add content to your page, simply drag and drop the desired content blocks onto the page. You can choose from a variety of content blocks, including text, images, videos, buttons, and more.

1. First, let's drag a row into Page Builder to do this, expand "Layout" on the left side of the column and click and drag a row element into the whitespace. You can think of a row as a separator that can easily separate different content.
2. Next, Let's drag a column into the row. To do this you will need to click on and drag the column element (Under Layout) on top of the row that was previously placed down.

Step 2: Customize Content

Once you have added your content blocks, you can customize them to your liking using the various editing tools available in Page Builder. Here are some of the editing options available to you:

• Content Style - You can change the font type, size, color, and alignment of your text blocks. You can also apply different styles, such as bold or italic, to highlight certain parts of your text.
• Image Settings - You can adjust the size, alignment, and border of your images. You can also add captions or alt tags to your images for better SEO optimization.
• Layout - You can customize the layout of your page by changing the position of your content blocks. You can drag and drop your content blocks to rearrange them, or use the grid layout to organize your content more precisely.
• Backgrounds - You can add background colors or images to your content blocks or sections. This can help to create a more visually appealing and cohesive design.
• Buttons - You can add buttons to your page that link to other pages on your website, external URLs, or trigger specific actions. You can customize the size, color, and text of your buttons to make them stand out.

Step 3: Publish Page

After you have added and customized your content in Page Builder, it is important to publish your page to make it visible on your website. To do this, exit the full-screen mode if you are on one by clicking the button on the top right corner, then click the "Save& Close" button in the upper right corner of the screen.

Before publishing, it's a good idea to preview your page to ensure that it looks and functions as intended. Page Builder provides a responsive preview feature that allows you to see how your page will look on different devices and screen sizes, including desktops and mobile phones.

To use the responsive preview feature, click the desired device icon in the top menu bar. This will adjust the width of the page accordingly and you can see how your page will appear on different devices.

Once you have reviewed and tested your page, you can publish it by clicking the "Save& Close" button again. This will make your page live on your website, allowing visitors to view and interact with your content.

Editing Content

Page Builder's drag-and-drop interface makes it easy to edit and customize existing page content, even for those with no prior web design or coding experience. With a few clicks, you can make updates or modifications to your web page to keep your content fresh and up-to-date. Here's how:

1. Open the Page - To edit an existing page, you must first navigate to the page you want to edit from the Magento admin panel (Content> Elements> Pages). Once you find the page, click on the "Edit" button under Action> Select to open the page. Once you are on the edit page, expand "Content" if not expanded already, then simply click the content box or "Edit with Page Builder".
   
   
   
   
   
   
   
   

2. Select the Content Block - In the Page Builder editor, select the content block that you want to edit. You can do this by clicking on the block to select it. For most content blocks, a gear icon will appear on hover which will open a configuration for the block that allows additional configurations.

3. Edit the Content - Once you have selected the content block, you can edit its content using the editing tools available in Page Builder. You can modify the text, images, videos, or any other elements within the content block. For example, you can change the font size, color, or alignment of text, or adjust the size or border of images.

4. Customize Style and Layout - In addition to editing the content, you can also customize the style and layout of the content block. You can change the background color or image, add borders among other things to make your content more engaging and visually appealing.

5. Publish Content - After making your edits, it's important to save your page to ensure that changes made are reflected on the page. Refer toStep 3: Publish Pageto save your changes.