A couple of questions about demos installation

Hi,
Sorry for the late reply I was able to login to your site but I can’t see your theme settings because it is not an admin login, please upgrade our access.
So when installing a demo you will need to choose one that you most like, such as the Enfold Church Demo, and then to get a page from another demo you like such as the home page of Enfold Shop we can assist with the shortcode by using the Avia Layout Builder Debugger we can turn this on for you if we have full admin access and the WordPress > Appearance > Editor option is visible.
Please note that for the Shop pages you will need to install the WooCommerce plugin it is free and creates the “store”
It may be easier to install woocommerce, then the Shop Demo, then add a page or two from the Church Demo, only because there are a lot of settings in the Shop Demo if you plan on setting up an online store. We can try either way, is an online store your main goal or do you only want to sell a couple of items?

Best regards,
Mike

Hi,
Thank you for enabling the login, I have Enabled the Avia Layout Builder Debugger in your child theme functions.php, now you will see a new text field below the Advanced Layout Builder, here you can copy and paste the raw shortcodes for elements and pages. Please note that this shortcode needs to be in Plain Text, be careful of “curly quotes” & special characters from some text editors.

It sounds like you would like to copy many pages from a few demos, so I recommend installing another instance of Enfold on a localhost or on a testing sub-domain, we allow a sub-domain “staging” or “testing” install and often recommend this practice for testing updates before updating your live site. On your testing site you can import a demo and use the debugger to copy the shortcode to your live site, and then use a reset plugin before importing a different demo. Please note every demo will overwrite your site, so please don’t try to import multiple demos to your live site.
Also the images in the shortcode are not copied when you do this, so if you want the images you will have to move them manually. The same is true for custom css, although all of the elements settings and options, such as background color, padding, and margins, that are made within the element is copied over because that css in inline.

When you want to import the “Shop Demo” on your testing site, please install woocommerce before you import the shop demo so all of the settings are imported.

Now about your child theme and adding css to the stylesheet, each time you add css to the child theme stylesheet the theme settings needs to be saved again so the compressed css file is updated, simply saving the stylesheet will not do this.
I recommend turning the Enfold Theme Options > Performance > JS & CSS file merging and compression off while you are building your site, or using the Enfold Theme Options > General Styling > Quick CSS field until you are done and then moving your css to the child theme stylesheet, or after adding css to the child theme stylesheet you can add a blank line to the Quick CSS and save the theme settings to force the file to be rebuilt.

Well, that is all I can think of that you might need to know for this to go quickly and smoothly for you, but if you have any questions we are happy to help.

Best regards,
Mike

Hi Ana,

I tried logging into your site but I’m still getting the error message that I posted earlier in this thread, so I can’t view your theme settings. If the settings are not applying then it might be local browser cache, or it can be that you have file compression active under Enfold->Performance. If you have file compression active then you can turn that off until you are done with the site, or select to delete the old CSS and JS files on the same page after you have done changes to the theme options.

Best regards,
Rikard

Hi,
Sorry for the late reply, to hide the logo when scrolling down, we don’t have a built-in option for this, but you can try this css to achieve this:

#header.header-scrolled .container.av-logo-container {
	display: none !important;
}

On your mobile page the logo is showing for me, Please see the screenshot in Private Content area.
For mobile to have a bigger slider please try adding a “full screen” slider and select the visibility options to only show on mobile and set your easy slider to show all other times.
For the downgrading and controlling of virtual products you will need to use a woocommerce plugin to add this function, I don’t have experience which woocommerce will be best for you in this case but I recommend first going to the woocommerce site a look at the ones they have available.

Best regards,
Mike

Hi,
To make the header sticky for mobile I adjusted the css above for hiding the logo on desktop so it would not conflict with the mobile effect, and I then added css to make the mobile header fixed at the top, this is the new css:

@media only screen and (min-width: 767px) {
#header.header-scrolled .container.av-logo-container {
	display: none !important;
}
}
@media only screen and (max-width: 766px) { 
 .responsive #top #wrap_all #header {
    position: fixed;
  }
}

Please note that since your site is in maintenance mode when you look at your site you probably are seeing the “WordPress Admin Bar” at the top, so when you scroll in mobile view your new fixed header may look like there is a space above the header where the admin bar was when it scrolls out of view. Your visitors will not see this, if you want to see what they see then go to your profile and disable the admin toolbar.

You can add screenshots by uploading your images to a service such as postimages.org and pasting the html code, or link given in your post or Private Content area.

To demonstrate what I meant about the mobile slider, I hope you don’t mind that I added a “full screen slider” to your page under your “easy slider” with the same image, text, and two buttons. Then I set the “easy slider” to not show on mobile:

and I set the “full screen slider” to only show on mobile:

and I added this css so the “full screen slider” would not take the full screen:

@media only screen and (max-width: 767px) {
 #top #main #fullscreen_slider_1.avia-fullscreen-slider .avia-slideshow {
 	height: 70vh !important;
 	max-height: 70vh !important;
 } 
}

Please see the screenshots in Private Content area.

Best regards,
Mike

Hi,
Sorry for the late reply, when I check your site at different screen widths I don’t see a blank space, but this might be possible at odd in-between sizes when you don’t refresh the page.
Checking different screen sizes on a desktop screen by reducing the screen width of the window can get unexpected results.
A better approach is to use the dev tools and Toggle the Device Toolbar and click the predefined device sizes such as 320px, 375px, 425px, 768px, etc. and also refresh the page for each size you check.
Please see the screenshot in Private Content area.
This way you will see the page as a user on a real device would see it. Think of it like this, a user on a small iPhone, 320px, would never suddenly have their device change to a iPad, 768px, but if they switched to a iPad the page, javascript, and css would be loaded for the iPad.
I hope I have explained this well.

Best regards,
Mike

Hi,
1) I’m not sure I understand, Please see the screenshots in Private Content area of what I see when looking at your page on mobile.
2) as for your social share buttons at the bottom of your posts, I see that you are using Enfold v4.6.3.1, you will need to update to v4.7.3 to correct the WordPress error with v5.3.2.
3) To post images please try uploading to an image host like https://savvyify.com/img/ and then copy the embed codes into your post.

Best regards,
Mike