One Page Layout Help

I guess you use the PageBuilder by SiteOrigin for creating the page?
Click on the tool icon to edit the row. There under Row Styles > Attributes is a field for the id.

Further information: https://siteorigin.com/one-page-navigation-with-page-builder-corp/

https://prntscr.com/np3c5u

Here is my current builder, I don’t see a tool icon. I’m a little confused what a “row” is though. I don’t think I’m currently using the Site Origin page builder as I had already built some of my pages before realizing it was recommended for the theme and didn’t want it to conflict or break anything I’d already done

Ah, you are indeed not using the page builder, you are using the built in Gutenberg page editor.

To add an id that you can use in your menu, click on a block (e.g. a title block). On the right side of the edit page, you have your block options. Click on Advanced. There you can add a HTML anchor which is the id you have to set.

This is all pretty new to me I’ve never created a “one page layout” before — what CSS code would I put into the advanced “Additional CSS Class” window to set an ID?

If I understand what the one page layout is correctly it means that once they scroll to the end of the home page it will immediately begin scrolling through the second page (in this case Services). Is that correct?

Thanks again for all the assistance, I know I have a lot of questions.

If I understand what the one page layout is correctly it means that once they scroll to the end of the home page it will immediately begin scrolling through the second page (in this case Services). Is that correct?

No, that is not correct. A one page layout is a type of website, that has (nearly) all the content on one page. If you click on a menu item, the page will scroll down to where this section is on the website.
You can see an example on this demo layout for Meteorite: Meteorite Agency. If you click on the menu points, it will scroll to the section.

once they scroll to the end of the home page it will immediately begin scrolling through the second page

This is a different technique and not possible without a plugin. What you described is called infinite scroll.

what CSS code would I put into the advanced “Additional CSS Class” window to set an ID?

The Additional CSS Class field is something different. There you can assign custom CSS classes that you can use in your CSS code. A real one page layout (like in the demo) you would need to assign an id in theHTML Anchor field. This one is only available on heading blocks – as far as I tried this out.
The id for this block could be linked in the menu so that it scrolls to the id on the page.

Thanks again for all the assistance, I know I have a lot of questions.

You’re welcome.

Tell me if you need any more explanations on anything.

Unfortunately I’m not seeing the HTML Anchor field when I click on the Title Block, select Block

https://prntscr.com/npg5xo

Here is when I click on a lower block, things come up in the block tab but still no HTML Anchor field

https://prntscr.com/npg6aq

Not sure what I’m doing wrong. I might just go activate the other page builder you mentioned to see if I can get it that way.

You are not using the correct block for an id. I guess the anchor field is only at the heading block.
Here is a screenshot of what I mean: Screenshot of heading block

Okay I see the HTML Anchor field now, I guess that only works with the heading block and not the title block so I had to change the way the page looked a bit.

What do I put in the HTML Anchor field? A number or?

If your text is about your services, you would put services in it. If it is an “about us” text, then about-us.
Then you can use this in the menu with a link like https://www.your-page.com/#services

So I need to create a new menu, under “custom Links” put in localhost/wordpress/#services

(temporarily until I host it on an actual website), then what do I do with that menu?

then what do I do with that menu?

What exactly do you want to achieve now?

Sorry for all the confusion, now I understand how it works. I was under the assumption that if you clicked the menu item it would take you to the page, but if you scrolled down on the main page it would also eventually bring you to it. Now I understand though when you click the menu item it drags you down to where the next section starts based on which block I gave the HTML tag too.

I think I’ll just do it the round about way and just copy / paste the rest of the content onto the home page so it’s there as well.

but if you scrolled down on the main page it would also eventually bring you to it

I never heard of a technique like this. However it would be very confusing for the website user to get on a new page just because of scrolling.

when you click the menu item it drags you down to where the next section starts based on which block I gave the HTML tag too

Exactly!

copy / paste the rest of the content onto the home page so it’s there as well

A one page design is always good if you don’t have so much content, so that it would look pretty empty on a seperate page.

I guess this topic can be marked as resolved then. Feel free to ask any further questions in a new topic.