How to add sections to a page

[FoxdenVixen]

I am using the template as more of a CMS than a blog. I would like to add sections to the about page. These sections would be separate and have a decorative frame around each section. The example below is just to point out what I am trying to achieve.

So it would look like this –

<section>
About Us
</section>

<section>
About This
</section>

<section>
About That
</section>

How would I accomplish this? Is there a plugin that can create sections that I can edit individually? <section> can be substituted with <div>.

[Alyssa]

@foxdenvixen this is not a theme issue, I’ll have to move this question to the general discussion forum

[Paul]

@foxdenvixen You can do this really with any WordPress page builder. The recommendation here is to use this – https://wordpress.org/plugins/siteorigin-panels/. To achieve what you want, think of a row within Page Builder as a section. To each row you can apply custom css so it has it’s own individual styling. You need to declare that CSS in the appropriate location within your child theme custom.css file, and give it a unique name. Example:

.about-us { background-color: #000; font-size: 20px; padding: 30px; }

Then returning to WP admin, edit your row, under widget styles expand attributes, and in the widget class field add the name you declared in custom.css minus the . – so just enter about-us. Save and view the updated page.

That’s the basic premise of it, always worth looking and tutorials and testing it yourself to understand it fully.

[FoxdenVixen]

Thank you, Paul. I will give this plugin a try. The Advanced Custom Fields is good but causes me to have to create several custom templates to work correctly throughout the site. The home page will be different than the about page, which will be different than the other pages, etc. After watching the video on this plugin, it seems that it will achieve what I am trying to accomplish. I will post here if it works or not.

[FoxdenVixen]

I have tried to play around with this. I am not sure what I am doing incorrectly. For each section of the about page, there will be:

.frame-top – this would show up as a background above the header part of the section

.frame-middle – this would show up as a background for however short or long the text section is

.frame-bottom – this would shop up as a background after the text section.

I have 3 sections or rows that I want on the about page.

Who is …? Can’t go into detail

What is …? can’t go into detail

Meet the Team

I have attached an image of a website page that looks exactly like what I am trying to achieve with my own graphics.

So is it easier just figure out what template I need to copy over to the child-theme and add divs so the styling is added or can this plugin do this for me? With the plugin I can add a row with a header element and a text element but I am having trouble with how I would individually style each section. Do I call section 1 who, section 2 what and section 3 meet? I hope the image that I attached helps you visualize what I am trying to do. If I have to rename templates, I don’t mind, I just need to know exactly which ones I will need. The home page will have 3 columns, the about page full width with 3 sections, other pages I am using left sidebar, and still others right sidebar.

[Paul]

@foxdenvixen You shouldn’t need to rename or copy any templates to your child theme to create the pages you want. You can give the rows or widgets within those rows any name you like. To style them you can directly enter css into the areas provided by page builder when editing a row or widget. But if you declare them within custom.css in your child theme, and decided at some point to switch to a different builder, you can just call on them again by entering the class name you gave them. You can set the number of columns you want a row to have when you create, and you can even split it by percentage values.

I can maybe help in more detail if you PM me, but my time is limited at the moment.

[FoxdenVixen]

PM sent.