DUDES< DO NOT SACRIFICE CONTENT FOR MAKING YOUR SITE LOOK PRETTY.
PLEASE follow the plan set out for you. Coding and pictures and colors should be done LAST. This is EXTREMELY important. Please don;t think “ohh it is OK I can handle it, because you can not, you
are sabotaging your success. Please believe me!. Having said that, here is the code for those that think are ready. If you are ready schedule a consultation with me.
Having said this:
Create a new page on your carrot site.
Go to the text view:
Paste this code (Code starts on following line:

HERE IS WHERE THE TEXT GOES

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

To change text size do this:
Type in your text
Your text will have no formatting (if you typed it in a clear unformulated section of the edit window).
I myself do not know the code from scratch but I have deciphered it enough to be able to modify it to my will when the code is already there.

So to get the code “there”, just click on the text (to put the cursor on the same line of the text) or just highlight the text and justify it left, center, or right.
Lets try it :
“This is a Sample piece of text”

This text should not be formatted. So I will click on it and justify it left.

“This is a Sample piece of text”

In the “Visual” representation, you will not notice anything because it was already left justified, but in the text representation this happened:
<p style=”text-align: left;”>”This is a Sample piece of text“</p>
What I then do is (in the text mode) I replace the “style=”text- align: left;” with “style=”font-size: 350%;“, like so:
<p style=”font-size: 350%;”>”This is a Sample piece of text”</p>
Then when you switch to visual mode:

“This is a Sample piece of text”

You can then edit it how ever you see fit from the edit menu, like change colors and such

“This is a Sample piece of text“

You can also get creative like this

Look I am so small but I can get really BIG and then go back to small.

You may not understand the code, but you can use this piece of code and change the words how you see fit and still use it

Full width bars:

These will only work when you do not have a sidebar layout. So you need to get rid of your vertical right hand sidebar layout. OK? Good! You need to have a piece of code in your CCS section that houses all the characteristics of your side bar, such as the color of the bar all the margins etc. etc.

Click on design:

Click Custom CSS

Paste this code:

.Test {
width: 100vw;
position: relative;
margin-left: -50vw; margin-top: 1.5rem; margin-bottom: 1.5rem;
left: 50%;
background: #ff691f; background-position: left; background-repeat: no-repeat; }

here:

(The name of this “full width bar engine” = Test)
The full width bar then that you call up in your content will have all these characteristics you have set in that code.
If you now need a second full width bar, that now has different characteristics, like a blue color like a facebook full width bar, you put a second piece of code in that CSS section with THOSE characteristics.
So lets say you want to create 2 full width bars. One is red for google, and one is blue for facebook (like I have on my website
You could do it like this

.GoogleFWB {
width: 100vw;
position: relative; margin-left: -50vw; margin-top: 1.5rem; margin-bottom: 1.5rem; left: 50%;
background: #db4a39; background-position: left; background-repeat: no-repeat; }
AND
.FacebookFWB {
width: 100vw;
position: relative; margin-left: -50vw; margin-top: 1.5rem; margin-bottom: 1.5rem; left: 50%;

background: #db4a39; background-position: left; background-repeat: no-repeat; }
If you called up the googleFWB, the full width bar on your site will then have the google colors and all parameters you have set for that bar (like the margins).
Obviously, when you just copy the code of this page in your page these full width bars won’t work because you do not yet have the code installed in your CSS section.

So now..

HOW do you call up the full width bar on your page?

Just type this where you want the par to show up on the page.: (Be sure you are in text mode when you put in that piece of code):

Text or picture inside the bar

</div>

So the following code:
<div class=”Test”>

<div class=”imageBox”>
<a href=”https://www.webuyhousesinconnecticut.com/sell-your-house-in-connecticut/”><img class=”aligncenter wp-image-12352 size-full” src=”https://cdn.carrot.com/uploads/sites/10050/2019/03/We-Buy-Houses-In-Connecticut.png” alt=”We Buy Houses In Connecticut” width=”1234″ height=”258″ /></a>
</div> </div>
looks like this:

Like so:

Sweet no?