Wednesday , February 21 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > Magento Page Builder: All About the HTML Code Content Type

Magento Page Builder: All About the HTML Code Content Type

Magento Page Builder HTML Code content type
Html Code in Magento Mage Builder
* For more useful tutorials on Magento Page Builder, visit here.

In Magento Page Builder, HTML Code content type is a useful tool for stylizing the elements. Especially if you have coding knowledge, or at the very least aren’t afraid of it, that would be a good kickoff to learning this content type. But what happens if you don’t? Hey, don’t worry. We’re here to show you how to stylize elements with Magento Page Builder HTML Code, in the most simple way. No further, let’s get to work.

Where to Find Magento Page Builder HTML Code

To find the HTML Code content type, access the Magento Page Builder workspace. Expand Elements on the left panel, and you’ll see Magento Page Builder HTML Code at the bottom of the drop-down menu.

Where to find Magento Page Builder HTML Code
Html Code in Magento Mage Builder

Next, I’ll add the HTML Code content type to the Magento Page Builder stage. 

Create an effective landing page with Magento Page Builder:
How to Build a Restaurant Landing Page With Magento Page Builder
How to Create a Coffee Landing Page With Magento Page Builder
How to Create a Product Landing Page in Magento 2 (Step By Step)

Stylize Elements Using HTML Code

  • Before going into the details, I want to highlight the main steps so that you’ll find it easier to get the picture. 
  • First, I’ll add the HTML Code content type to the Magento Page Builder stage.
  • After that, I’ll create CSS codes for elements I want to style with CSS:

+ Button (Background-color, text-color)

+ Heading (Font-family, font-weight, and color)

  • Copy and paste them into the HTML Code editor. 
  • Finally, save the settings and check out how these elements look on the front end.

Note: Keep in mind that you won’t be able to see the changes from the backend.

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

Step 1: Add HTML Code Content Type to the Stage

Before adding HTML Code content type to the stage, you must first add any Layout content type (Magento Page Builder Row, Column, Tabs) to this primary workspace. Below are the specific steps to follow:

#Step 1: Click the Layout drop-down menu on the left panel. Then drag and drop the Row placeholder to the stage. 

Add HTML Code content type to the stage

#Step 2: Under Elements on this panel, drag and drop the HTML Code placeholder to the new row.

drag and drop the HTML Code placeholder to the new row

#Step 3: After being added to the stage, the HTML Code appears like the image below.

HTML Code content type in Magento Page Builder

Now it’s time to move on to the next step: to use CSS to style the Heading and Button. To do so, click the gear icon on the HTML Code toolbox to access its settings. Let me describe the toolbox before getting to the point. 

Magento Page Builder HTML Code toolbox
ToolDescription
MoveChange the HTML Code container’s position to your desired location on the page.
LabelThis option specifies the name of the current container (HTML Code).
SettingsChange the HTML Code container settings on the Edit HTML Code page. (To access this page, directly click the gear icon.)
Show/HideShow or hide the Magento Page Builder HTML Code container.
DuplicateDuplicate the Magento Page Builder HTML Code container.
RemoveDelete the Magento Page Builder  HTML Code container.

Step 2: Customize Elements Using HTML Code

1/ Style Button With CSS

We’ll show you how to use CSS codes to style the button. At first, the button’s background color is blue, and its text is white. Now I’m going to turn its backdrop into purple and its text into yellow. 

Customize elements using HTML Code

#Step 1: Create a center-aligned button without any other customizations. I call it the Default button.

Magento Page Builder default button

#Step 2: Inspect the front-end page to get the button’s class (Ctrl + Shift + I). This class is used to style the button with CSS. Watch the video below to get the class.

Here is the button class: pagebuilder-button-primary

But first, let’s look at how CSS is constructed. 

  • CSS is made up of selectors which are used to define the elements you want to style with CSS. In this case, I use the h1 element as an example. (See the image below)
  • Right after are the declarations enclosed in curly brackets
  • A collection of declarations enclosed in the brackets is called a declaration block
  • Within the selector, there are properties and values
  • To separate properties, use a semicolon (;).
How CSS is constructed

There are 3 ways to apply CSS to HTML.

  • If you see a dot before a selector, it means this element is stylized using its specific class name.

E.g., .big_title { color: blue }

  • If you see a hashtag before a selector, it means a unique id name which is like a class name but can only be used once. 

E.g., #big_title { color: blue }

  • If there are no special characters before a selector, it means that this element has been stylized using its tag. I’ll use the heading element as an example to show you the difference between IDs and tags. An ID is used for a specific heading, whereas tags are used to identify all headings on a page. CSS with ID and CSS is far more common than CSS with tags.

E.g., h1 {color: orange; font-weight: 800; font-family: ‘Roboto’, sans-serif; }

Note that all elements that you want to apply CSS are contained between the opening and closing <style> tags.

You can learn how to add CSS on the W3School website for more details.

Okay, I’ve covered the basics of CSS. If you’re still confused, go back and read it again. Then simply move forward. Trust me, practicing CSS will help you comprehend it better.

#Step 3: Add the rules to the button class. 

.pagebuilder-button-primary {Remember to: 
+ place the period ( .) before the button class. 
+ place an open curly bracket ( { ) after the class.
background-color: #8843F2; This represents the button background color (purple).
Remember to:
+ place the semicolon  (;) after the declaration.
border: none;This represents the button border (none). Because the default border has a blue color, and I don’t want to show it, I change the border value to none.
Remember to:
+ place the semicolon  (;) after the declaration.
color: #ffff00; }This represents the button text color (yellow). 
Remember to:
+ place the semicolon  (;) after the declaration.
+ place a closing curly bracket ( } ) after the last declaration.

Note: To get the accurate button property, visit CSS Buttons on the W3schools website 

#Step 4: Wrap the CSS codes for the button within <style></style> tags. Below are the codes that we’ll paste into the HTML Code editor.

<style>

.pagebuilder-button-primary {

  background-color: #8843F2; 

  border: none;

  color: yellow; 

}

</style>

Note: Notice the red highlights.

The codes that will be pasted into the HTML Code editor.

#Step 5: Close the fullscreen and click Save when you’re done. Let’s see the result.

How the button looks on the frontend

Nothing’s changed, I know. Let me tell you why. It’s because this button applies all default styling rules. To override the existing rules, use  !important rule. As a result, the button will be styled based on the new rules. 

Put !important right after the value. Don’t forget to finish with a semicolon. Here are the final CSS codes for the button.

.pagebuilder-button-primary {

  background-color: #8843F2 !important;

  border: none !important;

  color: yellow !important;

}

</style>

#Step 6: Paste the newly-created codes into the HTML Code editor.

Paste the newly created codes into the HTML Code editor

Click Save after closing the fullscreen. Let’s see how the button looks on the front end. 

How the button looks on the front end

My recommendation is, you should go over this tutorial again to make sure you understand it. Then you’ll be ready to move on to the next section which might be slightly more challenging. 

The fact is that these CSS rules have been applied to all of the buttons on this page. Therefore, they all have the same style.

CSS rules have been applied to all of the buttons on this page

But what if you want the second button (beneath) on the same page to have a different style? In this case, you’ll need to make some minor changes to this button. So, where shall we start?

Each button has its own container which has its CSS Classes field. Remember? 

CSS classes field

#Step 1: To identify these two buttons, give either of them a name. In this case, I chose to name the second button “button2”. 

Name the second button button1

#Step 2: Add “.button2” as the parent class before the initial second button’s class. I’ll change the color of the button background and text as well. For this button, we’ll use the CSS codes below:

.button2 .pagebuilder-button-primary {

  background-color: orange !important;

  border: none !important;

  color: white !important;

}

#Step 3: Then paste the above codes into the HTML Code editor.

Paste the above codes into the html code editor

Note: It’s worth noting that you don’t need to create a separate <style> tag for each button. You simply need to group all the CSS codes of the buttons (or other elements in general) into ONLY ONE <style> tag.

#Step 4: After that, click Save. Exit the full-screen and hit Save to complete. 

We’ll now check the result on the front end. Look at this.

How the second button looks on the front end

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

2/ Style Heading With CSS

The example below demonstrates how to add CSS to Heading in Magento Page Builder. First of all, I’ll create three headings: heading 1, heading 2, heading 3 (See Image 1). Then I’ll change their font family and text color using CSS.

Add CSS to Heading in Magento Page Builder

#Step 1: Select your desired Google font

  • To find the font family you want, go to Google Fonts. You can either scroll down the page and pick one or type their name into the upper left search bar.
Select your desired Google font
  • In this example, I choose the Roboto font family. Click on its box and then you’ll be taken to the page with all Roboto fonts. 
The Roboto font family
  • I’ll choose the Medium 500 font. Click on Select this style
The Medium 500 Roboto font family
  • Click on the window icon to see the font-family rules.
Click on the window icon to see the font-family rule
  • Copy the generated code that is to be embedded in the <head> section of the page and paste it temporarily into a text editor.
    • Embed Font code
    • CSS Rule

I used CLASS to apply CSS to the button. In this example, I use TAG to add CSS to the heading. (heading tags)

h1 {font-family: ‘Roboto’, sans-serif; }

h2 {font-family: ‘Roboto’, sans-serif; }

h3 {font-family: ‘Roboto’, sans-serif; }

  • Next, I want to change my heading text’s color to orange and set the font weight to 800. To do this, insert the proper declarations that you want to apply to the heading. Then, enclose these three heading classes in a <style> tag. 
Insert the proper declarations that you want to apply to the heading
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

<style>

h1 {color: orange; font-weight: 800; font-family: ‘Roboto’, sans-serif; }

h2 {color: orange; font-weight: 800; font-family: ‘Roboto’, sans-serif; }

h3 {color: orange; font-weight: 800; font-family: ‘Roboto’, sans-serif; }

</style>
  • Paste the above codes into the Magento Page Builder HTML Code editor.
  • Close the full screen and save the changes. On the front end, these headings look like this.
These headings look like on the front end

And that’s all. If you need further clarifications of CSS, feel free to reach us. We’re always here to help you.

Work With Magento Page Builder HTML Code Settings

After customizing the content types using HTML codes, you may want to: 

  • insert other special elements in the code, such as widgets.
  • or, update some Advanced settings, such as margins and padding. 

So, this section is for you.

Head back to the HTML Code settings. Hover over the HTML Code container toolbox. Click the gear icon on the toolbox handle to open the Edit HTML Code page.

The HTML Code container toolbox

Insert Special Elements

  • When you land on the Edit HTML Code page, you’ll see an editor first. This editor supports HTML, CSS, and JavaScript codes, which means you can enter HTML, CSS, and JavaScript code and edit them in the editor
  • Besides, you can insert special elements into the code in this editor. These elements are widgets, images, and variables. 
Special elements into the code in the editor

Update Advanced Settings

  •  Alignment: Align the content within the HTML Code container. There are 4 alignment options available.

+ Default: If you take this option, the default alignment setting determined by the current theme will be applied. In this example, we chose the Luma theme. So, if our choice is Default, the content will be aligned to the left border of the HTML Code container.

The default alignment setting

+ Left: Align the content to the left of the Magento Page Builder HTML Code container.

Left alignment in the Magento Page Builder HTML Code

+ Center: Align the content to the center of the Magento Page Builder HTML Code container.

Center alignment in the Magento Page Builder HTML Code

+ Right: Align the content to the right of the Magento Page Builder HTML Code container.

Right alignment in the Magento Page Builder HTML Code
  • Border: Select the border style for all sides of the HTML Code container. 
Magento Page Builder HTML Code boders

To see what these borderlines look like, look at the image below. (Source: W3)

 See what these borderlines look like

Moreover, we’ve given specific examples for each borderline in the Magento Page Builder Heading post. So I won’t go into detail.

In case you select a border style other than None, you can continue the Border Color and Border Width fields:

  • Border Color: Choose the color for the HTML Code container’s border. To this end, you can choose a swatch from the panel (1), click and drag your cursor inside the color picker area (2), or type a legitimate color name or hexadecimal value (3). 
Magento Page Builder HTML Code boder color
  • Border Width: Set the border line width of the Magento Page Builder HTML Code container. (Unit: px)
  • Border Radius: Set the border radius of the Magento Page Builder HTML Code container.
  • CSS classes: This is optional. You can enter the names of CSS classes to apply to the HTML Code container. This is especially useful for distinguishing the same elements with different styles. (See the “Style  Button with CSS ” for an example).

If you want more than one class, use a space to separate them.

  • Margins and Padding: This allows you to create the space outside and inside of the HTML Code container. 

+ Margins: The amount of blank space outside the edge of all sides of the HTML Code container. You have 4 options to select: Top, Right, Bottom, and Left.

+ Padding: The amount of blank space inside the edge of all sides of the HTML Code container. You have 4 options to select: Top, Right, Bottom, and Left.

Magento Page Builder HTML Code margins and padding

A Page Builder Extension for Magento 2 With Better Functionality 

If you’ve been following our series on Magento Page Builder content types, you know for sure we’ll be talking about Magezon Page Builder, our flagship product. Our purpose is to assist new store owners who are using Magento Page Builder to create their websites. We’d also like to promote our Magezon Page Builder to anyone looking for a more efficient way to create visually stunning web pages. 

Magento Page Builder extension from Magezon
Magento Page Builder extension from Magezon

Magezon Page Builder has quite the same element, named HTML Raw which allows users to add all HTML, CSS, and JavaScript. The difference is, that the HTML Raw element comes with more advanced features. This page builder even does a better job when offering users elements to add JS and CSS separately. As a result, users find it easier to perform their work. 

However, honestly, HTML Raw in our Magezon Page Builder is only suitable for those who have the code knowledge, or time to do the whole job themselves. But if you are not among them, what do you do? Magezon Page Builder also helps you out in this case. Because this extension boasts over 50 powerful elements to build any layout you can think of, and each has multiple styling options, your pages will still have an eye-catching design without touching any line of code. Visit Magezon Page Builder for Magento 2 to discover its out-of-box features.


Good news: This April, we’ll release Magezon Page Builder 3.0. This new version comes with various robust features that we believe will surpass your expectations. Check out New Page Builder Sneak Peek to see what’s new in Magezon Page Builder. 

That’s all about Magento Page Builder HTML Code

Magento Page Builder HTML Code can be the most challenging content type to master, especially for individuals without a technical background. Start small and practice it over and over again. By doing so, CSS, in particular, will become more familiar to you over time, and as a result, you’ll have greater control over your websites. If you have any questions, don’t hesitate to let us know. 

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

About Nga Dong

Nga Dong
A content writer and marketer in Magezon

Check Also

How to Create a Halloween Landing Page in Magento

It’s Halloween today. We’re gonna show you how to create a Halloween landing page using …

Leave a Reply