Center column page builder

I cant figure out how to centre a column in the page builder.

What I want to do is: Center one column and make the width to 8 columns (2/3) like it is in your about us page example.

When I try to replicate this setup it aligns the column to the left if I change the width.

Find screenshots attached.

Thank you for your help.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached. If you try to change it increases the actual width
that’s why it is displayed like that.

Keep the width same as our about us page. This will fix this.

Or You can edit the about us page template and add content to it according to your needs.

Best Regards.

Thank you. I got it working.

1. Is it also possible to change the width of the woocommerce product pages?

2. (If you have a positive answer to question 1 the following issue is probably solved) If I choose “Product page design” to “center” it only centers the short product description but the picture stays aligned to the left. Do you maybe have some css so I it will center both: picture + short product description?

3. The font size of the first H2 tag in the product description is small (smaller than H3 headings for example). The H2 tags that follow afterwards have the correct size. Any idea why this is happening? Is this a bug?

Hello,

1. Yes, you can change the layout of the product page width from Theme Settings >> Product page >> Change the layout of the Product page and also set the full width page by enabling the Full width product page option. Please see the screenshot: http://prnt.sc/sqhwse

2. If you want to say that the picture should come first above the short description and product title then you should use the below given custom CSS code:

.single-product .product-images-inner {
    left: 25%;
}
.single-product .row.product-image-summary-inner .col-lg-6.col-12.col-md-6.product-images {
    flex: 0 0 100%;
    max-width: 100%;
}
.single-product .col-lg-6.col-12.col-md-6.summary.entry-summary {
    flex: 0 0 100%;
    max-width: 100%;
}

3. Can you please share the product URL where the H2 font size is smaller than the H3 font size so I will check and solve the issue. Also, send me the screenshot of the issue for better understanding.

Best Regards.

1. I would like to reduce the width. If I follow your advice it increases the width.

2. I dont want to have that the picture come first. I would like to have the picture + short product description in the center of the page and not aligned to the left.

As far as I can see it is this row:
class=”row product-image-summary-wrap”

But I cant find the right css to center both things adequatly. If I use “margin-left: 40px;” it moves both things to the center (as I would like to have it) but this is not a good way to do it.

If we could reduce the width of this row it would probably solve the issue (not sure).

3. Enclosed I am sending an example screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, there is no option in theme settings to set custom width for the product page.

Unfortunately, you could not have the layout you mentioned for the product page. It requires customization and this is beyond our limitations and support policy.

Because when we set the element to full width then the elements will also set to full width and the layout is like you got after adding the CSS I provided. They are wrapped in the same div so when we try to position the elements separately it would disturb the other elements layout as well.

And for the titles please provide the URL of the website to check it myself and help you out accordingly.

Best Regards.

Ok I see, but actually on tablets (if I reduce the window size of my browser) the product page looks exactly like I want it. Product Image + Short description get centered then.

So I guess that I would only need to put the CSS for tablets on the CSS for desktop and then it should be solved. Could you check if you can give me that CSS code that is applied for tablets?

Hello,

Unfortunately, you cannot have the same styling for the desktop as for the desktop version for the product page.

You are asking for core customization that are beyond our limitations and support policy.

Best Regards.

Please find URL to check the other issue in the private content.

Hello,

I have visited the URL you provided. It seems that the font-size of the first h2 is changed in the description tab that’s why it is displayed like that. Please remove any size that you added for that particular h2 this will fix it.

Screenshot for Clarification: https://ibb.co/G9YJXC1

Best Regards.

Thanks for checking.

I am not aware that I made any changes to the H2 size, Typography or on the description tab. I cant find the setting to change this. Do you have an idea where I can change the font size?

Kind regards

Hello,

Please add the following Custom CSS in the Global Custom CSS under Theme Settings >> Custom CSS.

.woocommerce-Tabs-panel .wc-tab-inner > div > h2:first-child {
font-size: 24px;
}

You can adjust the font-size according to your needs.

Best Regards.

I would like to avoid using CSS if possible.

Is it by your theme default that the first H2 title has a smaller size or what is the reason for this?

Hello,

Please provide a relevant screenshot of the backend area which you have used to set the heading there to check it myself and help you out accordingly.

Because on my test site there is no such issue with the h2 element that I have added using the Custom heading element of the Wp-Bakery page builder.

Screenshot for Clarification: https://ibb.co/TrJTtVG

Best Regards.

Thank you this solved the problem.

1. Would you recommend to build the pages with WP bakery instead of the classic editor? Does this have an advantage/disadvantage in terms of code?

2. When editing the FAQ it says “make sure it is unique and valid according to w3c specification”.

Can you confirm that I can give the section ID any name (as long as it is unique and does not contain a space)? For example: payment_methods

Then it would be valid according to w3c?

3. Is it possible to generate an URL to link to a specific section of the FAQ?

Hello,

We are Glad that one of your issues is resolved.

1) Our website is created with Wp-Bakery Page builder and most components require Wp-Bakery page builder to work. So we suggest to use Wp-Bakery page builder.

2) To edit FAQs you need to Go to Woodmart >> Header Builder >> Edit Header.

And you need to edit the menu used in the topbar menu from Appearance >> Menus.

Then you can add the page named FAQ in the menu.

3) You can use any class as the extra class you need to make it unique because then it would not conflict with the other classes.

If you want to ask anything else then provide some relevant screenshot of the specific area to check it myself and help you out accordingly.

Best Regards.

For some reason you actually did not answer any of my questions.

I will try again:

1. Does this it have an advantage/disadvantage to use the WP page builder instead of the classic editor in terms of SEO?

2. Can you give me an example of a name for a section ID of the FAQ that is valid according to w3c specification? Do I have to use underscores instead of space?

3. Is it possible to generate an URL to link to a specific section of the FAQ? If so, how can I generate the link?

Thank you.

Hello,

1) The SEO depends on how much you have optimized your website according to the rules of SEO the page builder doesn’t take much effect on it.

2) You can choose the name for the ID that you will be targeting while styling the particular section that’s why the section ID is used for. You can assign any name to it like “new_style” etc.

You can read the following article for further help:
https://www.w3schools.com/tags/att_global_id.asp

3) Could you please provide some relevant screenshot of the specific area with the URL of the page to check it myself and help you out accordingly.

Best Regards.

Thank you.

3. I found a solution for that. Thank you.

Hello,

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority, and your words reaffirms the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts