Custom Footer for “Open By Owner” Page

Word Count: 233
  • Post category:RE Collective (21)
  • Post last modified:2022-03-23

Introduction

The revised requirement is the OBO page to have a different footer setup for the mobile mode, while footer on the other pages remain unchanged.

In the mobile mode, the right column will go under the left column. The Client now wants to have the CF7 form on the right column to be inserted under the Contact Us element.

The DOM Structure

Normal state for all pages

  • Section
    • Left Column
      • Contact Us
      • Paragraph: Your new journey….
      • Phone, email, address, hours, social icons
    • Right Column
      • CF7 Form

Mobile state required for OBO page

  • Section
    • Right Column
      • Contact Us (new, display on mobile, hide on others)
      • CF7 form ***
    • Left Column
      • Contact Us (display on desktop & table, hide on mobile)
      • Paragraph: Your new journey….
      • Phone, email, address, hours, social icons

Solution

  • Copy & Paste ‘Contact Us’ element to Right Column, above the CF7 form
  • Add CSS classes:
    • left side: cu-foot-contact-us-left
    • right side: cu-foot-contact-us-right
    • section containing the columns: cu-footer-section2
    • Shortcode for CF7: cu-shortcode-cf7
    • Heading for left ‘join us on our socials’: cu-foot-join-us-left
  • Set responsive display conditions for right side ‘Contact Us’ elements for normal pages:
    • Right element – hide on all three modes
  • Get the page ID of OBO page = 94
  • Open the Elementor page setting for OBO and paste the below codes to the Custom CSS.
  • Style the element using the above CSS classes as required.

Custom CSS on OBO page

@media (max-width: 767px) {
    .page-id-94 .cu-foot-contact-us-left {
        display: none;
    }
    
    .page-id-94 .cu-foot-contact-us-right {
        display: block;
    }
    
    .page-id-94 .cu-footer-section2 > .elementor-container {
        flex-direction: column-reverse;
    }   
} /* @767  */
Tags: ,