How to Edit or Remove the Service Page Descriptions that Appear on the Homepage

Astrid
#1

Hi Roman,

Is there a way to either edit or remove the descriptions from pages that are using the Single Service template? The screenshot below is of my homepage, and I’d like to be able to customize the wording below “Blog Posts” and “Social Media Posts” without changing the text on the actual page. Or if that isn’t possible, I’d like to remove it altogether.

image
image.png1081×318 13 KB

Here’s the link to my site if needed: http://zacharytotah.me/

Thanks for your help!

Zac

#3

Hello Zac,

You can try to recreate that section using a couple of Custom HTML widgets, just add something like this:

<div style="text-align: center;">
	<h3 class="service-title">
		<a href="//example.com">Service 1</a>
	</h3>

	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

#4

Hi Roman,

That’s taking me down the right track. However, I’m having difficulty with the spacing. See screenshot below:

image
image.png1551×508 8.92 KB

I have three widgets. The one at the top with “Writing Samples” is arbitrary text. Then I have two HTML widgets beneath that. All three are set to 50px padding top/bottom. Is there a way to decrease the amount of white space between the top widget and the bottom two without shrinking the padding above the arbitrary text widget or below the two HTML widgets? In other words, I’d just like to only decrease the space between them so it’s more even, like the below section that I sent yesterday:

image
image.png1553×410 24.1 KB

Hopefully that makes sense.

Also, is there a way to bring the text of the two HTML widgets closer together while still keeping the text aligned center? Basically, I’d like to make the section with the three widgets (the first screenshot) as similar in layout as possible to the screenshot directly above.

Appreciate your help!

Zac

#5

Hello Zac, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#text-6 {
    padding-bottom: 0 !important;;
}

#text-6 + .multicolumn-row {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

#text-6 + .multicolumn-row section {
    padding-top: 0 !important;
}

@media (min-width: 800px) {
    #text-6 + .multicolumn-row section {
        max-width: 32%;
    }
}

@media (max-width: 799px) {
    #text-6 + .multicolumn-row {
        flex-direction: column;
    }
}

But please note that it can stop working if you change the page layout because I used first text widget ID (#text-6) in order to target those CSS rules.

Kind Regards, Roman.

#6

AWESOME! That worked perfectly.

Thanks for all your help, Roman!!!

Zac

#7

Great! You are welcome Zac :slight_smile:

Kind Regards, Roman.

#8
Recently anwsered topic