Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Footer layout

  • Hey there,

    I purchased the theme and I’m happy about it. Please help me with the following:
    I’d like to set up my footer to display in two rows. Here’s what I’m aiming for:

    1. First Row (Desktop):
    – Place a logo on the far left.
    – Social media icons to be on the far right.

    Responsive View:
    – Logo centered.
    – Social media icons below the logo.

    2. Second Row:
    – A horizontally stretching menu.

    You can see an example of this layout in the footer of the reference site i’ve provided. Please check both desktop and responsive views to understand what I’d like to achieve.

    Could you please provide me with step-by-step instructions on how to achieve this layout? If possible, a video demonstration would be really helpful.

    Thanks!

  • Hi there,

    The best method would be to create a Block Element – Footer:
    https://docs.generatepress.com/article/block-element-site-footer/

    We cannot provide a video for every question/request unfortunately – especially this one has multiple steps required.

    Here is the basic structure you would need to create:
    https://www.screencast.com/t/EnBPIhsQgl

    Can you start by replicating this first?

    Then I’ll provide the next steps.

    Let me know 🙂

  • hi,

    Thank you for your feedback.

    I’ve tried.

    See more information in the private area.

    Best.

  • Unfortunately, I can only teach you how to do it but cannot do the work for you.

    Can you start by creating a Block Element Footer with the structure I provided above?

    I don’t see any of my instructions being attempted currently and there aren’t any elements created in your install.

    Thanks for your cooperation 🙂

  • Hi,
    I can’t figure out this:

    07.08.2024-11.24.28

    Please note that I’m blind and I’m depending on another person to explain to me what is on the picture. I then attempt to implement it using a screen reader on my computer. It’s tough. Please give me step by step instructions.

  • Here is the HTML code for the structure:

    <!-- wp:generateblocks/container {"uniqueId":"f82a8ba2","isDynamic":true,"blockVersion":4} -->
    <!-- wp:generateblocks/grid {"uniqueId":"0d210e41","columns":2,"isDynamic":true,"blockVersion":3} -->
    <!-- wp:generateblocks/container {"uniqueId":"62193da3","isGrid":true,"gridId":"0d210e41","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"}} -->
    <!-- wp:generateblocks/image {"uniqueId":"6201608e","sizeSlug":"full","blockVersion":2} /-->
    <!-- /wp:generateblocks/container -->
    
    <!-- wp:generateblocks/container {"uniqueId":"25994e59","isGrid":true,"gridId":"0d210e41","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"row","alignItems":"flex-start","justifyContent":"flex-end","sizing":{"width":"50%","widthMobile":"100%"}} -->
    <!-- wp:generateblocks/button {"uniqueId":"d8e81925","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-d8e81925 gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"e10e9df7","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-e10e9df7 gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"0fdc6230","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-0fdc6230 gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/grid -->
    
    <!-- wp:generateblocks/container {"uniqueId":"e03c7a56","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"row","alignItems":"flex-start","justifyContent":"center"} -->
    <!-- wp:generateblocks/button {"uniqueId":"397e5b3c","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-397e5b3c gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"71b238b2","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-71b238b2 gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"83bf1d7a","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px","marginRight":"10px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-83bf1d7a gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"3482e1f6","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
    <span class="gb-button gb-button-3482e1f6 gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    <!-- /wp:generateblocks/container -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"9593522f","blockVersion":3,"typography":{"textAlign":"center"}} -->
    <h2 class="gb-headline gb-headline-9593522f gb-headline-text"></h2>
    <!-- /wp:generateblocks/headline -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"6cd649b1","blockVersion":3,"typography":{"textAlign":"center"}} -->
    <h2 class="gb-headline gb-headline-6cd649b1 gb-headline-text"></h2>
    <!-- /wp:generateblocks/headline -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"6d12c91e","blockVersion":3,"typography":{"textAlign":"center"}} -->
    <h2 class="gb-headline gb-headline-6d12c91e gb-headline-text"></h2>
    <!-- /wp:generateblocks/headline -->
    <!-- /wp:generateblocks/container -->

    You can copy it and paste in a Block Element Footer as instructed above.

  • Hello Leo,

    Thank you for your email.

    I’m sorry I can’t figure out your approach in this regard.

    With all due respect, could you allow someone else in the support team to take over this ticket?

    Thank you for understanding.

    Regards.

  • Hi there,

    can you reshape the login link ? As its returning a 404 error for me.

  • Hey David,

    Thanks for getting in touch.

    sorry about the log in link, I’ve updated it.

    If there’s a way to implement this with no impact on performance, that would be awesome.

    Cheers,

    Johnson

  • OK.
    I updated your site, as I think it was easier to DO it for you to review then it would be for me to explain.
    But I will explain in brief what I did :

    1. I installed the GenerateBlocks Plugin.
    2. in Dashboard > Appearance > Elements I created a new Block Element and set the Element Type to Site Footer.
    2.1 I set the Display Rules Location to Entire Site
    2.2 I saved the element as a Draft with a title of Site Footer.

    Publish the Element to display it on the site.

    3. In the editor I began with adding a Container Block.
    3.1 from the blocks toolbar I added the Inner Container Block.

    This gave the following structures:

    
    Container Block #1
    ---- Container Block #2
    

    Container Block #1 is automatically full width.
    I added a Background Color to the container, and set its Spacing > Padding Top and Bottom

    Container Block #2 is automatically centered and has a contained width.
    I set is Spacing > Padding Left & Right to 40px / 30px / 20px for Desktop , Tablet and Mobile
    I set its Layout > Display to Flex and Flex Wrap to Wrap.

    4. Inside Container Block #2 I added the 3 x Container Blocks

    
    Container Block #1
    ---- Container Block #2
    ---- ---- Container Block #3
    ---- ---- Container Block #4
    ---- ---- Container Block #5
    

    Container Block #3 and Container Block #4 have a width of 50%.
    And Container Block #4 has a Text Alignment of Right.

    Container Block #5 has a width of 100% and has a Layout Display of Flex to center the content.

    Then it was just a case of populating each of the inner containers with the images and buttons.

  • Hey David,

    Thanks a lot for making this happen! I really appreciate your help with everything. Your explanations on how you pulled this off were super helpful. I did notice a few things while reviewing, mainly related to accessibility:

    1. The logo looks a bit small now that I’ve replaced the site icon you added with the actual footer logo. It’s small on both desktop and mobile views.

    2. The social media icons don’t have aria labels for screen readers. For example, the Facebook link is read as “geeksmodo1” instead of saying “Follow us on Facebook”. And the Twitter icon is read as “geeksmodo” instead of “Follow us on X.

    3. It would be awesome if we could add ARIA landmarks to clearly mark the start and end of the footer section. Basically, from where the logo starts to the end of copyright.

    4. Adding an ARIA navigation role to signify its a list on the five list items would really improve navigation accessibility.

    I found some more detailed info about ARIA landmarks and navigation roles here: [ARIA Landmarks at Penn State](https://accessibility.psu.edu/arialand/).

    Also, I noticed a small glitch where a full stop (.) gets added automatically where i’ve place the privacy link.

    Could you also add a field for the copyright text?

    The reference site I sent you is marked properly as far as the accessibility features I mentioned above our concern. Maybe you could check the lables they are using.

    Thanks again for all your help with this!

    Regards,

    Johnson.

  • I made the following changes:

    1. select the Image block displaying the logo
    In block settings sidebar increase the Width value. I set it to 150px

    2.select the Button block and in the block settings sidebar Advanced panel you can add the ARIA Label

    3. select the top Container Block and in Advanced panel the TAG NAME to Footer

    4. For that I had to sway the buttons for a core Navigation Block. It has the NAV HTML Tag

    5. the full stop after the privacy, isn’t a full stop its just where the y descender breaks the underline.

    6. Copyright text has been added, note the following code {{current_year}}
    That is a temple tag and will return the current year.

    The changes I made above should achieve what you need from an a11y standpoint

  • Hello David,

    All looks great. As far as accessibility is concerned, your solution is brilliant and works effectively with a screen reader. A big thank you. I only noticed two things:

    1. The aria label for the navigation, where there are five list items, is currently being read by the screen reader as “Top menu mobile.” Could you please change it to “Footer Navigation”?

    2. On responsive view, the navigation list is now placed in a picker.

    Thank you for your continuous support.

    Sincerely.

    Johnson.

  • Selecting the Navigation Block:

    1. I set the OVERLAY MENU to OFF, so this keeps desktop menu on all devices

    2. in the Advanced Panel > MENU NAME is where I set the Footer Menu title

  • Hey David,

    Thank you so much for your help. Everything looks perfect now, and I really appreciate your attention to best accessibility practices.

    I’m now trying to setup the author box. From the look of things, i’ll definitely need your help along the way. Please watch out for my ticket.

    Best regards,
    Johnson

  • You’re welcome

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.