Making Line Break on Header (Slider title)

davidshkim.com

I would like my Slider Title to appear as follows:

Hi, I’m David. I’m a
Digital Marketing Strategist
in Vancouver

I would also like the words in second line in bigger font size than the first and third lines. I cannot seem to access/change them in HTML or CSS. I would appreciate if you could give me a step-by-step guidelines how to do so. Thank you so much.

Hi,

There is no feature from the theme to format the slider title and subtitle like you want.
But you can do that by using some lines of javascript. Please follow the steps below:

  1. Install Header Footer plugin
  2. Go to Header footer page and add this script to Footer field (Before </body> closing tag):
<script>
jQuery(function($){
    $('.text-slider .subtitle').html('<span>DIGITAL MARKETER</span><br><span style="font-size: 28px;">IN VANCOUVER</span>')
});
</script>
  1. Add this CSS code to: Customize > Additional CSS:
.text-slider .maintitle {
    font-size: 28px;
}

Regards,
Awan

Hi Awan,

I’m trying to add the following lines as a whole part of <h2>, instead of having second and third lines in “subtitle”.

Hi, I’m David. I’m a
Digital Marketing Strategist
in Vancouver

Also, I would like to delete the red line appearing between the main title and subtitle. I would appreciate your help again. Thanks a lot!

Hi,

So you want to remove the subtitle and put all your welcome message in “maintitle”? If yes, you can replace the javascript in above with this:

<script>
jQuery(function($){
	$('.text-slider .maintitle').html("Hi, I'm David. I'm<br>Digital Marketing Strategist</br>In Vancouver")
});
</script>

Don’t forget to remove the content of the subtitle text from the customizer.

Thanks.

  1. Is there any way I could make the second line “Digital Marketing Strategist” in bigger font than the first and third lines, and also a bit of spacing between words?

I would like to exactly look like this header: http://mattyford.com/

Hi, I’m David. I’m a (font 55px)
Digital Marketing Specialist (font 70px)
in Vancouver (font 55px)

  1. How do I delete the red line appearing at the bottom of main title?

Thanks again.

Hi,

Here is the javascript code if with different font size each line:

<script>
jQuery(function($){
	$('.text-slider .maintitle').html("<span style=\"font-size:55px;\">Hi, I'm David. I'm</span><br><span style=\"font-size:70px;\">Digital Marketing Strategist</span></br><span style=\"font-size:55px;\">In Vancouver</span>")
});
</script>

And here is to remove the line below the text:

.text-slider .maintitle:after {
    background-color: transparent !important;
}

Please remove the content of the subtitle text from the customizer because we don’t need this anymore.

Regards,
Awan

Thanks very much Awan. I managed to make link breaks in between the lines and get rid of the red line below the main title.

Is there any way I could space out the words in between as well as padding between the lines so as to make it look like the front page of www.mattyford.com? This would be my last question. Thanks again in advance!

Please ignore the previous question. I have figured those out myself.

My last question is how do I make only the “digital marketing specialist” line bolded and the first/third line not bolded?

I added <link href=“https://fonts.googleapis.com/css?family=Montserrat:400,700” rel=“stylesheet”>
in my header.php to add Monserrat custom font in the wordpress. I have added two font styles, 400 being regular and 700 being bold, so I think I have already enabled two variations of the font if I’m not wrong.

Thanks in advance!