Return to previous page

How to check the size of a pages elements?

This topic has 6 replies, 2 voices, and was last updated 4 months, 2 weeks ago ago by Tony Rodriguez

GTP

Participant

December 19, 2023 at 11:40

Hi 8theme,

1) Is there anyway to check the size of a page in terms of specific sections?

Please see PCA.

2) If we find the size of this section, and we make a new element – can we edit the size of the element to match the space of the section?

For example, if the space is 35, and we want to make the new element the same size (35), where can we edit the size of the element?

Thanks for your help!

Please, contact administrator
for this information.

#377118 Copied Theme version: 9.2.5

5 Answers

Tony Rodriguez

Support staff

December 19, 2023 at 12:43

Hello, @GTP,

Thank you for contacting us and for using XStore.

1) You can use browser developer tools to inspect the elements and get some information about their sizes.

Here’s a general guide on how you might approach this using browser developer tools:

Open Developer Tools:

a) Right-click on the section you want to inspect.
b) Select “Inspect” or “Inspect Element” from the context menu.
c) This will open the browser’s developer tools.
d) Navigate to the “Elements” Tab:

In the developer tools, navigate to the “Elements” tab. Here, you can see the HTML structure of your page.
Inspect Section Dimensions:

a) Locate the HTML code for the specific section you’re interested in.
b) The right-hand panel of the developer tools will display the CSS styles for the selected element.
c) Look for the “Box Model” section, which will show you the dimensions (width, height, padding, border, and margin) of the selected element.

2) you can confidently respond with a “Yes.” You can provide them with the steps We outlined in the previous response:

a) Inspect the section to find its dimensions.
b) Note the width and height values of the section.
c) Create a new element in Elementor.
d) Adjust the size of the new element to match the dimensions of the section.

Let them know that Elementor provides options in the widget’s settings panel to adjust the width and height values, allowing for precise customization. Additionally, encourage them to preview the changes to ensure that the new element aligns perfectly with the desired size.

Yours sincerely,
The 8Themes Team

#377129 Copied

GTP

Participant

December 19, 2023 at 13:17

Hi Tony,

Thank you for the reply!

1) Can you provide a screenshot for this demo if you don’t mind?

https://xstore.8theme.com/elementor/product/american-vintage/

Can we know the size for this element;

https://prnt.sc/XyB8G9olFp0P

Ranging from the eyeball (9 people are viewing this product right now) to the end (white space)?

2) Can you please let us know on where we can adjust the size of the elements on elementor? Perhaps share a screenshot? We cannot find it.

Thank for your help 🙂

#377138 Copied

Tony Rodriguez

Support staff

December 19, 2023 at 14:15

Hello, @GTP,

1) We can provide a screenshot for the demo you’ve mentioned. Please find the requested screenshot attached https://imgur.com/a/q4TcMNi.

If you want to know How to inspect please read this documentation added in the link below:https://zapier.com/blog/inspect-element-tutorial/

2) It appears that you are interested in customizing the Single Product page. To assist you with this, please follow the steps outlined below:

a) Navigate to XStore >> Theme Settings >> WooCommerce (Shop) >> Single Product Builder. Within this section, you have the capability to customize the Default Single Product Builder. This includes options to set the width of the Section on the Single Product page.

For a visual reference, please consult the image provided at the following link:
https://imgur.com/a/4FloJQQ

b) If you prefer to create a custom Single Product page using Elementor, please refer to the documentation provided in the link below:
https://xstore.helpscoutdocs.com/article/190-xstore-single-product-builder-with-elementor

Should you have any further questions or require assistance, feel free to reach out. We’re here to help!

Yours sincerely,
The 8Themes Team

#377146 Copied

GTP

Participant

December 23, 2023 at 08:16

Hi Tony,

Hope you are doing well today!

1) Thank you for the information and documentation, very helpful. We will read over it and see how it can be done.

2) Thank for for this information as well.

In regards to this screenshot:
For a visual reference, please consult the image provided at the following link:
https://imgur.com/a/4FloJQQ

Lets say the width we choose is according to the first section is 47.

How can we set the elementor element to be 47 as well?

I think we found out how, but just want to make sure;

– Go and add a new element on elementor
– Click on the edit column button
– Edit the widget space (Widgets Space px) to 47.

Screenshot = https://prnt.sc/9pYWH9m7glVk

Can you please confirm if that is correct?

Thanks for your help!

#377507 Copied

Tony Rodriguez

Support staff

December 23, 2023 at 10:04

Hello, @GTP,

1/ Sure, Take your time.

2/ We regret to inform you that the current configuration is incorrect.

We kindly request that you utilize Elementor to modify the column settings. Specifically, please adjust the column width to exceed 100%. For your convenience, we have provided reference images to guide you through this process. https://imgur.com/GxB5Joq and https://imgur.com/8eZOCEC

We trust this information will be of assistance to you.

Best regards,
The 8Theme Team

#377521 Copied
Tagged: check page size, how-to guide, optimize woocommerce site, page elements size, page size tutorial, woocommerce templates, wordpress
Viewing 6 results - 1 through 6 (of 6 total)