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:

&lt;p style=”text-align: left;”&gt;”</span></strong>This is a Sample piece of text<strong><span style=”color: #ff6600;”>”&lt;/p&gt;</span></strong>

What I then do is (in the text mode) I replace the “<strong><span style=”color: #ff6600;”>style=”text-align: left;</span></strong>” with “<strong><span style=”color: #ff6600;”>style=”font-size: 350%;</span></strong>”, like so:

&lt;p style=”font-size: 350%;”&gt;”This is a Sample piece of text”&lt;/p&gt;

Then when you switch to visual mode:
<p style=”font-size: 350%;”>”This is a Sample piece of text”</p>
You can then edit it how ever you see fit from the edit menu, like change colors and such
<p style=”font-size: 350%;”>”<span style=”color: #ff0000;”><em>Th</em></span>is is a <strong><span style=”color: #ff6600;”>Sample</span></strong> pi<span style=”color: #3366ff;”>ece o</span>f t<span style=”text-decoration: underline; color: #00ff00;”><strong>ext</strong></span>”</p>
You can also get creative like this
<p style=”font-size: 110%;”>Look I am so small but I can get really <strong><span style=”color: #f26907;”><a style=”font-size: 300%;”>BIG</a></span></strong> <span style=”color: #f26907;”><span style=”color: #000000;”> and then go back to small.</span></span></p>
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

<hr />

<h1><span style=”text-decoration: underline;”>Full width bars:</span></h1>
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.

&nbsp;

Click on design:

<img class=”alignnone size-full wp-image-16969″ src=”https://cdn.carrot.com/uploads/sites/10050/2019/10/1.png” alt=”” width=”1865″ height=”886″ />

&nbsp;

Click Custom CSS

<img class=”alignnone size-full wp-image-16970″ src=”https://cdn.carrot.com/uploads/sites/10050/2019/10/2.png” alt=”” width=”1815″ height=”855″ />

&nbsp;

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;
}

&nbsp;

here:

&nbsp;

<img class=”alignnone size-full wp-image-16971″ src=”https://cdn.carrot.com/uploads/sites/10050/2019/10/3.png” alt=”” width=”1777″ height=”814″ />

(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.

&nbsp;

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

&nbsp;

.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.

&nbsp;
<h1>So now..</h1>
<h1>HOW do you call up the full width bar on your page?</h1>
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)

&nbsp;

&lt;div class=”Test”&gt;
&lt;div class=”imageBox”&gt;

Text or picture inside the bar

&lt;/div&gt;
&lt;/div&gt;
<div class=””Test””>
<div class=””imageBox””>

<img class=”alignnone size-medium wp-image-1595″ src=”https://cdn.carrot.com/uploads/sites/32407/2019/08/I-BUY-HOUSES-COLUMBUS-01-1-300×200.jpg” alt=”I BUY HOUSES COLUMBUS OHIO” width=”300″ height=”200″ />

</div>
</div>
So the following code:

&lt;div class=”Test”&gt;
&lt;div class=”imageBox”&gt;

&lt;a href=”https://www.webuyhousesinconnecticut.com/sell-your-house-in-connecticut/”&gt;&lt;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″ /&gt;&lt;/a&gt;

&lt;/div&gt;
&lt;/div&gt;

looks like this:

&nbsp;

Like so:
<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>
&nbsp;

Sweet no?