1) Yes, I did. I found that my max image dimensions were set in the plugin, which is why the sizes were changed. I have revised my settings. I didn't know about it, thank you.
2) I set the z-index for both the heading and the image to control the stacking order as you instructed. It looks correct now, thanks for the tutorial!
3) I can use any z index value weather the positioning of the element is absolute, default, or offset right?
1) I do, I found that my max image dimensions were set in the plugin that's why the sizes are changed. I didn't know about it though I have revised my settings. Thank you for telling me this.
2) I have set the z index for both the heading and the image to control order stacking as you told me, it looks correct now thanks for the tutorial.
As shown in the tutorial, if I did understand I can put any number in the z index field depending on the number of elements I'm working with. Then set them accordingly keeping the highest number as the one that is going to be on top of the others. Also I can follow the same process for a whole wrap and it's elements if I would like to overlap it with another element, correct?
3) To edit the position of an element which method is the most reliable? And when should I use it?
Edit the margin of the element in the spacing tab
Set it to absolute and modify the sides in the positioning tab
4)Since the elements in the builder are automatically wrapped. If I would like to edit the position of an element that exists inside a wrap.
Should I:
Edit the margin or positioning of the exact element
Edit the margin or positioning of the whole wrap containing the element
2) What you say is correct. However, we suggest being careful while setting the z-index, as setting a negative number might make an element unclickable in the builder, and you would have to use the navigator to access it.
3) Unfortunately, I cannot answer that straightly as it depends on the construction you must achieve.
The best way to learn more about that is to create a testing page, play around with both, and see how each behaves in different situations.
4) If you want to position content inside a section or wrap, you should use the options available in the positioning tab.
2) I see what you're saying. I didn't set any negative value within the z-index. Thank you so much
3) Alright, that's a good idea. I'll proceed with testing the elements on a blank page to observe different behaviors right away.
4) I get it now, and it makes sense as explained in the video and the screenshots. To illustrate this a bit, here's a screenshot representing a case:
For example, I would like to move my header icons slightly to the left, and also move the cart and account icons to the right side in the tablet view (768 × 959 px). How can I proceed according to your instructions?
If I apply a negative left margin, could it impact the responsiveness or cause any layout issues?
Though I couldn't move the right header icons more to the right side even when I set a negative margin for them as well (Cart and Account icons)
Please, let me know if this is the right move in such case.
1) I'm a bit lost in the navigator because there are so many duplicates. Some of which seem to be hidden in the mobile view. Are there any sections that should be deleted?
2)I did create a copy, but I didn't understand what is its exact purpose? I realized I could simply set it to full width and make it visible on tablet only, as you suggested. What do you think?
1) I'm not sure if you should delete anything, as I don't know exactly what you need. If you want to do a test, you can save a revision of your template, remove what you think you do not need, and check how it displays. If you remove too much, you can restore the revision.
2) The point of creating a copy is to set the Full width for the tablet only. If you enable this option in the section, it will also affect the desktop, and I was unsure if this is what you intended. But if the display is fine for you, then there is no need to create a separate section for a tablet.
1) Yes I understand I'm using revisions, I would like to know if it's common to have some duplicated elements within the navigator.
2) I have set the header section to full width, and I left the responsive visibility settings as they are. Is this correct ? I wanted to push the header side elements to the edges that's all.
3) On mobile view, the image and the header sections are both cropped even when I reduce the height of the header section. Also the scrolling tag isn't appearing neither.
1)What I mean is, for example, the following two sections are displaying the same content. I believe what's happening just as you mentioned is that one of the duplicated sections could be the version for the tablet viewport. The same could apply to any other duplicated element in the navigator bar if I'm not wrong.
1) I see and I can relate to what you've explained, that means the navigator may include header sections from other device views especially the ones with the hidden mobile icons right?
2) I have checked the page through mobile but the section I've cloned doesn't appear while it does in Bebuilder. Also the header section looks cropped from the top.
a. Homepage: here's a screenshot from my mobile phone.
b. Shop Page: And here's how usually the elements should be displayed.
This screenshot was taken from the shop page at the first sight. But after I scroll down, elements start getting cropped and disappearing again, just like how it's shown in the above image.
How can I fix these responsivity issues on mobile?
Hi, I'm building a landing page using Bebuilder to collect email and SMS sign-ups for a product drop. I already have the form ready to embed in the page.
The thing is that I want this landing page to stay public and act as the homepage, but I’d like to password-protect the rest of the website (store and other pages). Any recommendations or hints would be such a great help.
Here's an example of a reference screenshot to highlight what I want to set exactly:
I have set the custom page as an under construction page as you told me to do. Thank you!
The issue I'm currently encountering is that when when I paste the iFrame code provided by my third party sign up form plugin, an error pops up in Bebuilder when editing the page. While the form displays fine on the builder I guess there's something preventing it from appearing on the front end.
I have tried using both the HTML and the plain text elements, but the issue persists. Please let me know if you need any further information.
Looking forward to your guidance. Thanks again for the help!
If the custom code placed in the HTML element does not work, and this error appears, it is most likely due to the server, as it might have protection that prevents this code from working.
I suggest contacting your hosting provider regarding this code and looking at the server logs to see why it is blocked.
I have contacted my hosting provider and they said that there's no php errors on my setup. Also they told me to check my security plugin since it could be preventing it through a firewall block as you said.
However I have used a shortcode instead and it's displaying the form on the front end right know.
Yes, I have set my store to live with the under construction option enabled.
This page has an intent to gather Email information through an Embedded form and SMS through a pop up type form.
My questions are:
1) Could the pop up form usually display on my custom under construction page?
2) The pop up includes a Legal Consent with a Privacy policy page link that's critical to attach. Since I want the rest of the store to remain hidden what step should I take up on this?
1) Popups do not work on the under-construction page.
2) With under construction enabled, there is no option to open another page on the same domain, so I do not have a suitable solution for that, unfortunately.
Comments
Hi,
1) Yes, I did. I found that my max image dimensions were set in the plugin, which is why the sizes were changed. I have revised my settings. I didn't know about it, thank you.
2) I set the z-index for both the heading and the image to control the stacking order as you instructed. It looks correct now, thanks for the tutorial!
3) I can use any z index value weather the positioning of the element is absolute, default, or offset right?
Appreciate you
Kind regards
Hi there,
1) I do, I found that my max image dimensions were set in the plugin that's why the sizes are changed. I didn't know about it though I have revised my settings. Thank you for telling me this.
2) I have set the z index for both the heading and the image to control order stacking as you told me, it looks correct now thanks for the tutorial.
As shown in the tutorial, if I did understand I can put any number in the z index field depending on the number of elements I'm working with. Then set them accordingly keeping the highest number as the one that is going to be on top of the others. Also I can follow the same process for a whole wrap and it's elements if I would like to overlap it with another element, correct?
3) To edit the position of an element which method is the most reliable? And when should I use it?
4)Since the elements in the builder are automatically wrapped. If I would like to edit the position of an element that exists inside a wrap.
Should I:
Appreciate you
Kind regards
2) What you say is correct. However, we suggest being careful while setting the z-index, as setting a negative number might make an element unclickable in the builder, and you would have to use the navigator to access it.
3) Unfortunately, I cannot answer that straightly as it depends on the construction you must achieve.
The best way to learn more about that is to create a testing page, play around with both, and see how each behaves in different situations.
4) If you want to position content inside a section or wrap, you should use the options available in the positioning tab.
https://support.muffingroup.com/video-tutorials/flexbox-positioning-with-bebuilder/
If you want to move content from the sides of the container it is placed in, you should use margins.
For example, you have a section with one 1/2 wrap. To move it to the right,t you should use positioning options:
But it you want to move it a little bit further from the right side, you should use margin:
Best regards
2) I see what you're saying. I didn't set any negative value within the z-index. Thank you so much
3) Alright, that's a good idea. I'll proceed with testing the elements on a blank page to observe different behaviors right away.
4) I get it now, and it makes sense as explained in the video and the screenshots. To illustrate this a bit, here's a screenshot representing a case:
For example, I would like to move my header icons slightly to the left, and also move the cart and account icons to the right side in the tablet view (768 × 959 px). How can I proceed according to your instructions?
Please, let me know if this is the right move in such case.
Much appreciated
Kind regards
The mobile view starts at 767px width, and the smallest tablet I know about is the iPad mini, which has a width of 768px.
If you move your search icon 50px to the left it will look like that:
What I suggest is to create a copy of that section that will be visible only on tablet view:
And set it to be Full width:
Best regards
Hi,
1) I'm a bit lost in the navigator because there are so many duplicates. Some of which seem to be hidden in the mobile view. Are there any sections that should be deleted?
2)I did create a copy, but I didn't understand what is its exact purpose? I realized I could simply set it to full width and make it visible on tablet only, as you suggested. What do you think?
Thank you so much!
Kind regards
1) I'm not sure if you should delete anything, as I don't know exactly what you need. If you want to do a test, you can save a revision of your template, remove what you think you do not need, and check how it displays. If you remove too much, you can restore the revision.
https://support.muffingroup.com/video-tutorials/how-to-manage-revisions-in-muffin-live-builder/
2) The point of creating a copy is to set the Full width for the tablet only. If you enable this option in the section, it will also affect the desktop, and I was unsure if this is what you intended. But if the display is fine for you, then there is no need to create a separate section for a tablet.
Best regards
1) Yes I understand I'm using revisions, I would like to know if it's common to have some duplicated elements within the navigator.
2) I have set the header section to full width, and I left the responsive visibility settings as they are. Is this correct ? I wanted to push the header side elements to the edges that's all.
3) On mobile view, the image and the header sections are both cropped even when I reduce the height of the header section. Also the scrolling tag isn't appearing neither.
Appreciate your help.
Kind regards
1) Which elements do you refer to exactly?
2) If the display suits you, then it is completely fine.
3) In the header settings you should set Body offset to Yes for a mobile:
However, I am unsure of the scrolling tag you are referring to. Can you explain, please?
Thanks
1) I'm referring to these header sections displayed when you edit the header.
Some of them are hidden on mobile I guess.
3) I mean the marquee tag above my header (the white text element on the black background)
Thank you so much!
1) Yes, you are right. Sections with a crossed smartphone icon are hidden on mobile:
2) You do not have this section on mobile view. However, you can use the Export/Import option for this section to clone it to a mobile view.
Best regards
1)What I mean is, for example, the following two sections are displaying the same content. I believe what's happening just as you mentioned is that one of the duplicated sections could be the version for the tablet viewport. The same could apply to any other duplicated element in the navigator bar if I'm not wrong.
2) It worked thank you so much.
Appreciate it.
Kind regards
1) The first section in the Navigator is the one from mobile view:
(I changed bg in the builder to highlight it)
The second one is the one from the desktop:
They do not have visibility icons next to them as they are based on the template options, and Responsive visibility settings of the sections.
Best regards
1) I see and I can relate to what you've explained, that means the navigator may include header sections from other device views especially the ones with the hidden mobile icons right?
Thank you!
2) I have checked the page through mobile but the section I've cloned doesn't appear while it does in Bebuilder. Also the header section looks cropped from the top.
a. Homepage: here's a screenshot from my mobile phone.
b. Shop Page: And here's how usually the elements should be displayed.
This screenshot was taken from the shop page at the first sight. But after I scroll down, elements start getting cropped and disappearing again, just like how it's shown in the above image.
How can I fix these responsivity issues on mobile?
Thank you!
Kind regards
1) Yes, that is right.
2) WP admin bar covers it. You can hide it in the user settings:
Best regards
Thank you so much!
Appreciate it
Hi, I'm building a landing page using Bebuilder to collect email and SMS sign-ups for a product drop. I already have the form ready to embed in the page.
The thing is that I want this landing page to stay public and act as the homepage, but I’d like to password-protect the rest of the website (store and other pages). Any recommendations or hints would be such a great help.
Here's an example of a reference screenshot to highlight what I want to set exactly:
Thank you!
Kind regards
You can set this page as an Under Construction page in Theme options.
Best regards
Hi,
I have set the custom page as an under construction page as you told me to do. Thank you!
The issue I'm currently encountering is that when when I paste the iFrame code provided by my third party sign up form plugin, an error pops up in Bebuilder when editing the page. While the form displays fine on the builder I guess there's something preventing it from appearing on the front end.
I have tried using both the HTML and the plain text elements, but the issue persists. Please let me know if you need any further information.
Looking forward to your guidance. Thanks again for the help!
Appreciate you
Kind regards
If the custom code placed in the HTML element does not work, and this error appears, it is most likely due to the server, as it might have protection that prevents this code from working.
I suggest contacting your hosting provider regarding this code and looking at the server logs to see why it is blocked.
Best regards
I have contacted my hosting provider and they said that there's no php errors on my setup. Also they told me to check my security plugin since it could be preventing it through a firewall block as you said.
However I have used a shortcode instead and it's displaying the form on the front end right know.
Thank you!
Kind regards
So everything is fine at the moment?
Is there anything else I can assist you at the moment?
Best regard
Yes, I have set my store to live with the under construction option enabled.
This page has an intent to gather Email information through an Embedded form and SMS through a pop up type form.
My questions are:
1) Could the pop up form usually display on my custom under construction page?
2) The pop up includes a Legal Consent with a Privacy policy page link that's critical to attach. Since I want the rest of the store to remain hidden what step should I take up on this?
Thank you so much for your help!
Kind regards
1) Popups do not work on the under-construction page.
2) With under construction enabled, there is no option to open another page on the same domain, so I do not have a suitable solution for that, unfortunately.
Best regards
All clear!
3) So pop ups from third party email plugins doesn't display until the store's live without the under construction page on ?
4) I have set a timer and inserted my logo within Theme options> Pages >Under construction But none of the elements is appearing
Thank you!
Kind regards
3) That is right, what you say.
4) These options refers to the standard under construction page.
When you select a custom page, these options do not have effect, so you must add countdown and logo in the BeBuilder to that page.
Best regards
4) Okay I get it, if I want to Insert 2 elements onto this page:
What elements do you recommend using in Bebuilder? You can check the storefront for a clear view.
Appreciate it!
Kind regards
4a) Use the Countdown element.
4b) You can use the Icon element:
Best regards
All clear! Thank you!
Appreciate it