Recommended Structure?

[texaskiwi13]

Hi team,

I’m looking to create a new page layout I haven’t tried before and was wondering if you would give me some insight into how you would recommend setting the structure up.

Please see the attached sketch.

Some important things to note:

1. I want the blue/gray/B background to take up the entire screen size on a desktop. As you go down in screen size the composition would change, but it would still be a full bleed image.

2)The white space is going to be a slider so that as you scroll down the slide changes rather than scrolling down the page.

3. how do i get the header and footer to align in the white space rather than the background?

Note that I am not looking for you to build this for me, I’m just looking for direction about how you would recommend setting up the structure as there seem to be alot of ways to try and do it.

4. the easiest, but least responsive way would be to create a background image of the blue/grey/B and have that as the section background, or would you

5. create a section with no margin/padding and then put a grid within it and use the grid/cell background to create the blue/grey/B?

if you did that (5) would you then have the white space be an overlapping cell that contains a DIV that holds your slider?

And how does the nav bar and footer play into it all?

Or is there another way that I’m fully missing?

I know it can be done, but I can’t quite work out the clearest way to do it. Can you please give me some guidance on how you would recommend setting up the structure?

Thanks so much!

Ashley

Ps. I’m started the work on the page named “untitled”, but it feels like a work around and not the best way to do it.

[ruenel]

Hello @Texaskiwi13,

Thanks for writing in!

1.) You can start by having to use the Section, Row, and Column elements. Set the Row Container to 100% both the width and maximum width. You can also add a DIV element which will be positioned as “Absolute” and have the blue background color.

2.) For the white space area, you can insert another Row and Column element where the Row Container will just be the Global Container. Regretfully we do not have a feature that allows you to scroll down the slide changes rather than scrolling down the page.

3.) As long as you enable the Global Container on your Bar Container element on the header and footer, they will be aligned to the whitespace in the content area.

4.) Try using a Background Upper Layer for the color and the lower layer for the letter B. Check out these tutorials to learn how to work with background laters in Cornerstone:

5.) This setup could also be possible. Yes, you will have to overlap a Cell with a DIV element in it to hold your slider. The header/footer will still be the same. You’ll have to create them in the header and footer builders respectively.

Please check out the demo Section on the Untitled page you have created.

Cheers.

[texaskiwi13]

Thanks so much Rue! I’m wanting to have a lottie logo reveal animation play over the top of this hero section. I’ve created the JSON for the lottie and can think of two ways to do it, but see problems with both.

1. place the lottie in a absolute DIV over the top of the hero. the animation plays and then slides away so that it’s transparent, but the problem is that it is still technically on the top of the hero section so you can’t click on any of the buttons that are in the hero section as the lottie is still technically on the top. The other problem with this is that when it scales down from an XL screen and becomes more square it doesn’t cover up the hero. I’ve treid creating the lottie in different aspect ratios, but it still didn’t cover the hero. (note that i set it up this way when i was playing around with it in my header (logo reveal header), but i can’t get the lottie to be centered over the hero in the section. please see the section “lottie on top”).

2. place the lottie animation as the first slide and the hero setup as the second slide. the problem here is that you have to either click to change from the lottie logo reveal to the hero, or it plays automatically and loops back to the lottie.

I’m thinking the second option would probably be the best do to the responsive scaling, but still have the problems above.

I’m wanting the lottie to play and then go away. Can you please advise how you would achieve this whether an option above or a different option? Note if possible, I don’t want to install rev slider as I want to have as few plugins as possible.

Thanks,
Ashley

[ruenel]

Hello Ashley,

1.) Place the DIV container of the Lottie element inside your slide. Make sure to hide the Overflow of the Div element.

2.) Please move the container first so we can see the result.

Thanks.

[texaskiwi13]

Thanks Rue! Sorry for the delay. I’ve been away. I’ve done what you’ve said above in the reply in the section titled “Rue’s instructions”

A few problems

-it doesn’t cover the full screen to reveal the background (the blue 2/3, B 1/3)

• once the animation ends, I have to scroll to slide two.

I think I need to ditch the slider as I can’t make the slider scroll how it needs to for a clean ux (ie the user either has to click to navigate to hte content, or it loops back around to either the repeating lottie or a blank slide).

That being said, what I am ultimately trying to achieve is I want the logo reveal lottie to be full screen across all devices. when the lottie animation ends, I want it to reveal the hero section of my website. I’m not asking you to do this for me, I want to learn how to do it. Can you please help me figure this one out?

Thanks,
Ashley

[ruenel]

Hello Ashley,

You may need to restructure the Section again. I do not have a clear idea of how this world turns out though. I think I can create a demo of something. See the link URL in the secure note below.

Thanks.

[texaskiwi13]

Thanks so much Rue! Unfortunately, that didn’t work. I still have the issue of it not being great responsively and more importantly, you still can’t click on button after the lottie disappears.

I’ve done some more digging and found this elementor tutorial that is doing exactly what i want.

Create a Custom Page Loader with Lottie Animation in Elementor!

Obviously i don’t use elementor and have no desire to. My question now, is he is uploading the code in an “add code” section their theme has. In PRO, what would be the equivalent? My assumption is that this would go in the header.php file, but I can’t seem to access it (note that I use flywheel). I asked them and they said I would need to do it in the parent theme header.php file, but that seems dumb as it will get over ridden if I do an update. I don’t see a header.php file in my child theme. I tried adding it via an add headers/footers plugin but it didn’t do anything. I also tried adding it to the functions.php of my child theme but kept getting an error on line 26.

So that leads me to, 1) will this method work with PRO. 2) if so, where would I put the code to load the lottie animation preloader? and 3) if not, how do i achieve having my lottie logo animation as a website preloader with PRO?

Note, I’m happy to wait for Rue to answer.
Also, the name of the page has changed from untitled to “home page”

Thank you so much!

Thanks,
Ashley

Ps. please note I’m not just trying to get you to do this for me. I’m legitimately trying to teach myself how to do it, ideally without a plugin. I’ve tried multiple ways both with and without plugins and haven’t been able to get it to work. The majority of tutorials and plugins I’ve found don’t use a lottie animation, but understanding is that is the way forward.

[ruenel]

Hey Ashely,

This may work on your site with the Pro theme. You need to use the Snippet plugin or the Insert Headers and Footers plugin where you can insert the provided code. This is much easier than what we are currently trying on your site.

You may also use a Raw Content element on the page and insert the provided code. You can also put the provided code in the Custom JS section of the page. You have to hack it a little to make it work. Check out the link in secure note below.

Best Regards.

[texaskiwi13]

You’re amazing! I think we’ve finally gotten there! So based on all you said above, it looks like you opted to put it in the custom JS section for the homepage…is that correct? Do you think this is the best option? It avoids plugins, which I like.

A couple of questions:

1. why is the animation so small? I designed it to be 1920x1080.
2. why is it pixelated? it isn’t pixelated when i run it on my pc.
3. the position is set to fixed, but i can scroll and then when the animation goes away i’m half way down the page. is there a way to make it so when the animation goes away, its at the top of the screen even if the person was scrolling?
4. currently the transition is “opacity”. Can I change this? Where I can see what the options are so I can play around with different effects?

Sorry for so many questions. This site is the first time that I’ve used JSON and lottie, and I’m trying to expand my toolset. Please help me or at least give me the correct language so I can google it and find answers to my questions.

Lastly, Could you have a quick look at the rest of the home page and see if I’ve done all the lottie animations to best practice standards or if there are tweaks I should make? And what tool do you recommend for cross browser testing?

Thanks so much for sticking with me on this! I really really appreciate it!

Ashley

[texaskiwi13]

Update: I still have all of the above questions, but I’ve been playing around with it.

I updated line 46 from canvas to svg and that solved problems 1 & 2 above, but then it wasn’t centered and was cut off, so created new problems. (I tried to grab a screenshot, but couldn’t).

I then changed the top portion of the script to this (white line 46 was svg):

#loader { position: fixed; top: 100%; left: 100%; transform: translate(-100%, -100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffffff; transition: opacity .3s; z-index: 9999; } And again, that was better, but still not quite right. Then when I opened that on the front end, it was just white until it faded away. Thoughts?

[ruenel]

Hey Ashley,

I am already seeing the Lottie logo on the page. The canvas area is also center last time I checked.

• See the secure note below.

You may have resolved the issue already.

Thanks.

[texaskiwi13]

Thanks Rue Nel, but maybe I wasn’t clear in my question. with the current settings, the logo reveal is small and pixalated, which it shouldnt be as the animation is 1920x1080 and not pixalated. I played around with the settings to get it bigger and was able to do that by changing “renderer” from “canvas” to “svg” but then it wasn’t centered and the animation got cut off.

I’ve added the code I’ve updated to the page titled " preloader test page" so that you can see what I mean.

I’ve tried playing around with different values in the below portion of the code and just can’t get it to be centered and not cut off.

#loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
transition: opacity .3s;
z-index: 9999;
}

I’ve also played around with two different sizes/aspect ratios of the actual animation:

1920x1080 - https://lottie.host/55325f54-5c52-4e64-bdb0-0b430269a23e/dKmqtwmFHy.json
1920x1920 - https://lottie.host/fc42087c-89d4-4337-86d6-eb7a4c481626/GhZGHq6QCc.json

Can you please advise?

Thank you so much!

[ruenel]

Hey There,

The Canvas size seems to default to 600 pixels. Adding a custom CSS to change the width of the canvas to at least 80vw should change the width of your Logo.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Hope this makes sense.

[texaskiwi13]

Thanks Rue Nel.

I had already gotten to this point by the time you responded. The animation reveal is now the correct size and is not pixalated, but it is still cut off. I’ve tried playing around with the “top” and “left” values as well as the transform values and no matter what I do I can’t get it right. Any more insight you can give me? Note that to get it to not be pixalated, I’ve had to update the renderer from “canvas” to “svg”

</script><script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>

<style>
  #loader {
    position: fixed;
  	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    transition: opacity .3s;
		z-index: 9999;
  }

</style>

<div id="loader">
<div id="lottie-loader"></div>
</div>

<script>
  window.addEventListener("load", function() {
    const loader = document.getElementById("loader");
    setTimeout(function() {
      loader.style.opacity = "0";
      setTimeout(function() {
        loader.style.display = "none";
      }, 5000);
    }, 5000);
  });

  lottie.loadAnimation({
    container: document.getElementById("lottie-loader"),
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "https://lottie.host/55325f54-5c52-4e64-bdb0-0b430269a23e/dKmqtwmFHy.json",
    rendererSettings: {
      progressiveLoad: false
    },
    animationData: null,
    renderer: 'svg',
    images: null,
    events: {
      complete: function() {console.log('Animation Loaded')},
      error: function(e) {console.error(e)}
    }
  });

You can view my most up to date animation on the page called “homepage”

Thanks again!!

[ruenel]

Hey @texaskiwi13,

I am only seeing a White Area on page load. Can you please check it again?

Thanks.

[texaskiwi13]

Thanks Rue! I think this is part of my problem. When you view it in cornerstone you can see it, but it is cut off. When you view it on the front end, it’s like it’s position is outside of the viewport of the screen. Note this is when I change the renderer from canvas to SVG. The only way I can get it to not be pixalated is to make this change, but then I can’t figure out how to center on the screen.

See attached video -

2024-03-28 14 03 02.mp4

Thoughts?

[ruenel]

Hey @texaskiwi13,

Please update your code into this:

#loader {
    position: fixed;
  	top: 0;
    left: 0;
    //transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    transition: opacity .3s;
		z-index: 9999;
  }

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Cheers.