[Resolved] Home Page Qs

[zulqar]

Hello,
I need help to do the followings on my home page
1) reduce padding around the picture
2) insert a nice size call to action button from GP because WP button is very small
3) insert 2 or 3 column tables above the footer widget for text, picture and testimonials

Is there any tutorial specific to these issues?

Thanks
Zulqar

[Leo]

Hi there,

1. Looks like you are using the gallery block currently? Can you try using the image block since there is only one image?

2. This should help: https://docs.generatepress.com/article/adding-buttons/

3. You can use similar method here:
https://docs.generatepress.com/article/split-header-three-sections/

With a different hook for your desired location:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know if this helps 🙂

[zulqar]

1) Padding around image and large text- I don’t know how to get a gallery block. It seems that I used image block to insert the image. I tried deleting the Home Page and created a new clean Home Page and inserted image as block but the padding seems excessive. The padding also seems excessive around large texts- “looking for freedom?”

2) Button- I read the link but did not understand how to use the content provided.

3) Split body- the link seems to be for split header but I need to split the body of my content. However, I have not understand a thing of the content provided.

4) New question- Do I need to learn some programming language in order to use GP Pro or quit?

Thanks

[Leo]

1) I believe what I saw was a gallery block and not an image block. I don’t see the image anymore though.

2) So you would add this HTML in your content:
<a class="button" href="https://google.com">Button to Google</a>

Then style it using CSS. For example, if you want the ghost buttons, the CSS would be:

.button.ghost, .button.ghost:visited {     
    background: transparent;     
    border: 2px solid #FFF; 
} 
.button.ghost:hover, 
.button.ghost:active {     
    background: #FFFFFF;     
    color: #222222;     
    border: 2px solid transparent; 
}

3) You only need the HTML part (step 3) to create the columns. That can be added anywhere.
You can also consider using Gutenberg columns if it’s inside the content.

4) That really depends on what kind of site you are trying to create. GP can definitely be a bit difficult to start if you have no HTML and CSS knowledge.
In this case I would highly recommend looking into a using GP with a page builder like Beaver Builder or Elementor.

[zulqar]

I think I can handle HTML and CSS with a little try. Where can I find the HTML file for each page to insert stuff?

[zulqar]

Leo,
Could you please look at this now?- https://theaffiliateproject.com/home/

I am not using any image or gallery block but still have a lot of padding under large text. Is there a way to reduce the padding?

Also the html code for button is not properly done- not sure where is the right place to put it.

Thanks.

[Leo]

HTML is simply the content of the page in the editor. There isn’t a special file for it.

The space below the big text is paragraph margin set in Typography > Body.

I would recommend using the page hero add-on to create something like that instead of adding it in the content:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/

[zulqar]

Leo,
Thanks for a quick response!

I’ll certainly look into page hero add-on but I’m trying to avoid add-ons as much as possible in order to increase page loading speed, which is my main reason for choosing GP over Elementor.

BTW- You did not mention what I did wrong with the button code- why the button is not showing up?

Thanks again.

[David]

Hi there,

The HTML provided for the button has to be entered into the Text editor not the Visual editor.

[zulqar]

David,
That makes sense. How do I access text editor?

Thanks.

[David]

If you’re using the old classic editor of WordPress then there is a button to the top right of the editor.

If you’re using the latest block editor then you will find Code Editor as an option in the three dot menu in the top right hand corner of the screen. Or you can use the HTML Block

[zulqar]

Leo and David,
With your awesome support- now I know how to use page hero and html for buttons!

Feeling great!

[Leo]

Glad we could help 🙂

[Author]

Posts