Footer frustration

Hi. I could use some help. Can someone please provide a step-by-step guide on how to create a footer that has the following attributes? I see what looks to be one in the Community by @Chris at Jumpy Follow Footer - #2 by Chris. However, it was provided under Sparkle v3.

  • Be used for both blog pages and non-blog pages where the blogs are in one section and the non-blogs in another section
  • Be Desktop and Mobile compatible
  • Be consisting of a group of elements (I want mine to consist of a Box, an Embedded, three Text Boxes with links to internal pages, and one Text Box.)
  • Does not move from its location when I move the Group to the bottom of another page
  • Does not move from its location when I move the Group on mobile version of the page I am working on
  • Does not move the page’s bottom when I edit another page in any way.

I ask because I am frustrated from my own attempts. I’ve defined the Group with both “Fix to browser bottom” and “Move with Page Bottom” unchecked. I assume with these two settings unchecked, what I have is a group that is not different than any other group. However, my observations say this group that I want to be a footer moves away from the location I last had it when I edit another page. The page’s bottom also gets extended - under what circumstances, I have yet to understand.

Bottom line is I am just not understanding how to accomplish the creation of a page footer.

Thanks in advance.
-DaverD

Hey Dave, you should just uncheck the “Fix to browser bottom”. What this option does is fix it in the bottom of the browser (not the website) of the viewer, aka always being in sight.

The “Move with page bottom” setting is the right one, as it ignores the limitation of the Sparkle canvas bottom page and acts as a footer. Note that you should have the group as the last thing on the page, glued to the Sparkle canvas bottom, for this setting to work correctly and as a footer. That way you can do whatever you want as a footer, just remember to have it glued to the page bottom of the Sparkle canvas.

Hello.

You have done a few things right.

I don’t understand some of what you write. But I can’t shake the suspicion that (self-moving) layout blocks are involved here.

Am I right?

Mr. F.

Thanks @primo for explaining the difference between the two settings. Helpful to understand for sure.

Hello @Mr_Fozzie. My apologies for any confusion. Perhaps I provided too much detail in the goal I am trying to achieve. Simply put, how do I create a footer?

I am not using layout blocks - at least not intentionally. Meaning, I have yet to use the Layout Block element.

At this point, my next attempt will be to:

  • Select the group
  • Ensure the two attributes (“Fix to browser bottom” and “Move with page bottom”) are unchecked
  • Place the group at the bottom of the canvas of any page
  • Check off “Move with page bottom”
  • Go through each page and move the group to bottom of the canvas
  • Repeat the cycle for each page for the mobile device
  • Once completed, check off “Move with page bottom”

I’ll do a sanity check as I am going through the pages to see if the behavior I am expecting is indeed happening.

My expectation with the last step is that the group defining my “footer” is anchored at the bottom of each canvas and will stay at the bottom of the canvas anytime I make a change to any page. I may need to adjust what the bottom of the canvas is. However, any adjustment will carry with it the group I defined as my “footer”.

Finally, as @primo points out, with “Fix to browser bottom” unchecked, the display of my footer is not fixed to the bottom of the browser’s window. It will scroll like the rest of the elements.

Thank you for your time.

Wow @DaverD, that sounds just really complicated?..

  • Create WideBox and place at bottom of canvas
  • drop in your elements in the Widebox to create your footer
  • Now click and drag to select all the elements of your Footer
  • Right click and Group
  • Now go to Arrange panel and tick Move With Page Bottom
  • Now also tick Show On All Pages

By ticking Show On All Pages your footer will find the bottom of the canvas on all your pages because it is stuck to the “page scrubber”, including new pages that you add. In the browser your Footer will always be the last groped elements in your web page layout which is what you want.

Ok @FlaminFig…YOU ARE HIRED! :smiley:

I can’t tell you how grateful I am.

I want to call out that the sequence you have is most important. One must check off “Move with page bottom” first and then “Show on all pages”. In addition, to handle multiple devices, one must put the WideBox in place for all devices before the “Move with page bottom” and “Show on all pages” sequence.

Again, thank you very much.

1 Like

@DaverD, glad it has all worked out for you! :slight_smile:

My frustration has returned with a vengeance.

I am doing a redesign to my blog site. How do I move the already existing footer group on one of the blog pages without disrupting the footers on the other blog pages? Currently, when I move the footer to the proper location along with the page bottoms on a bunch of pages (I move the desktop and mobile pages together before moving onto the next page), the footer locates itself on all changed pages to the lowest point on the canvas among the changed pages along with an expanded canvas.

So for example, if blogs A, B, and C had their footer moved into the proper place one page at a time and blog C was the longest in length, then the footer for blogs A and B would be at the same vertical location as on blog C. Again, Visibility is set to “Show on all pages in section” and there is no checkmark for “Move with page bottom”.

I feel like I am in a “What came first? The chicken or the egg?” situation. Am I stuck with having to have the a unique copy of the footer in each page with the Visibility set to “Show on this page only”?

Note: I have about 60 blogs in both Desktop and Mobile devices.

Help as I have run out of ideas to try out.

@DaverD eventually you will get the hang of it! :slight_smile:

So we know that every page will have differing page lengths. We know that you have a footer that looks constant across all your pages. From what I have read you have the one footer grouped and assigned to Show On All Pages.

So you are nearly there…
I would go back to the original footer and untick Show On All Pages, and then…

  • Click again on your footer group and tick Show On All Pages
  • with the footer group still selected tick Move With Page Bottom
  • now you need to go to your individual pages and manually move the scrubber at bottom of the canvas page so to move your footer uniquely for that page into position. Or if your page is now too long you can double click the stacked 4x2 dots on the scrubber so your footer will fly up to meet the last element on your page

By not having the Move With Page Bottom ticked you will continue doing the merry-go-round with your footer. This command allows you to individualise a footer that has Show On All Pages assigned without affecting any of the others.

Or, when the dots are too far down and not visible, use the keyboard [CTRL]+[CMMD]+[F]

Mr. F.

1 Like

Hello DaverD

I can well understand your frustration about the footer.
It can drive you crazy, especially when sections come into play.

Do I understand correctly that you have 3 blogs, each with multiple blog posts? And each blog has its individual section?

And now you want each blog to have its own footer? That’s when it gets interesting. If you select “Show on all pages” you have a global footer (I’ll call it that). If you switch back and forth with that to “Show on all pages in section” and back again, things get easily mixed up and shifted.

There is no “Don’t show in this section” option, unfortunately.

But there are several possible solutions to the problem:

(1) You put all pages into sections and make a footer for each one, which is then only shown in this section. This requires some work. But this footer can be designed individually for each section.

(2) You make a global footer for all pages and add another footer for each section. This is quite simple: make a new group and place it near the global footer (in the corresponding section). Do not merge it with the global footer. Set “Show on all pages in this section” and “Move with end of page”. The newly inserted footer does not have to stick to the bottom of the page.

Is that what’s driving you crazy?

Mr. F.

No. I had two blogs “libraries” (Don’t know the correct term) within my blog site. In focusing on one, I already had a footer in place. I am doing a redesign that takes away the manual updates I was doing with my own tagging/indexing and utilizing Sparkle 4’s. (This will save me much time.).

In doing the redesign’s UI changes, I was changing the already existing footer on some 60 blog posts. I was not understanding fully what at the “Move With Page Bottom” and “Show on All Pages” attributes did. I spent many hours trying different combinations of when to click on/off each these two attributes as I kept seeing the footer placement move or not move such that it was not producing the result I wanted.

@FlaminFig’s explanations helped me understand the two attributes so that I was able to finally accomplish what I wanted across all the blog posts.

Thank you @FlaminFig.

Thanks @Mr_Fozzie for your time. BTW, how did you know of the keyboard shortcut the keyboard [CTRL]+[CMMD]+[F]? That’s a handy one to know. I don’t see it from Sparkle’s drop down menus.

1 Like

1 Like

Hello.

This gives me an idea that I don’t know if it’s technically possible to realize.
Is it possible to extend this command with a selection that one could adjust all pages at once?
Or what dangers or sources of error can be in there?

Mr. F.

1 Like

Thank you @selcuk. I swear I looked up and down each menu drop down before posting my question…just to avoid the egg on my face right now. :blush:

1 Like

Considering how many pages I have on my site (and growing), such a global change option would be a big time saver.

I’ll second the motion in adding that to the Sparkle Upgrade Wish List.

-DaverD