Sell Theme: How To Add A Custom Page Header

Requirements:

- Entry-level experienceor a willingness to learn HTML & CSS.

Custom page headers can be added to the top of any page by using HTML & CSS.

1. Once inside the B2B Direct admin portal, using the menu on the left-hand side, click "Website" > "Pages"
2. Click the desired page to go into the editor
3. Add a Paragraph or similar UI element.
4. Click the newly added element, then within the editor click the Source Code icon
5. Paste in your HTML / CSS
6. Save and Publish your draft.
7. Navigate back to the frontend of your B2B Direct site and refresh the page. You may be required to clear your cache to see the changes.
   
   

The following frameworks and libraries can be utilized in your code...

BootStrap framework

• https://getbootstrap.com/docs/4.1/getting-started/introduction/

FontAwesome & Orion icon libraries

• https://orioniconlibrary.com/all-icons
• https://fontawesome.com/icons?d=gallery

Sample Page Header Code

<section class="hero">
<div class="container">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Contact</li>
</ol>
<div class="hero-content pb-5 text-center">
<h1 class="hero-heading">Contact</h1>
<div class="row">
<div class="col-xl-8 offset-xl-2">
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</section>