How to add a block to all website pages?

Hello!

How can I add a footer block (just above the footer navigation) to all website pages? Actually blocks can be added on a page basis only.

I would like to create a blocks with some important information that will be visible to both members and visitors throughout the website (same block). I am using the Artificer template.

Also, I might use a similar block at the very bottom of all pages to display the icons of all the Accepted Payment Methods on our website (Visa, Mastercard, Paypal etc ) and the Google Play and App Store badges to download the Android and iOS Apps.

Thanks

  • Up vote
    1
    Down vote
  • View
    528
  • More
Replies (12)

    • Please any help?

      • Hello @OneEagle !

        To insert the HTML / JS / CSS code, you can use the Designer->Injections area in Studio, and paste it into the "Body" field. This should suffice for the second case. The first thing will require a custom module in place to add the processed variables to the required locations.

        • Hi @LeonidS Thanks for your reply. Yes I understand for the first case. For the second one, the Injections area in the Designer App works just fine for me. The content appears at the very bottom of the page after the footer links. Is there a way to make it appear above the footer navigation menu? Thanks.

          • It's possible with the Javascript / Jquery code, for example by using a method like

            https://api.jquery.com/insertBefore/

            • Brilliant @LeonidS! Thanks a lot. It works.

              I have used the insertBefore() method in the injections area (BODY injection):

              <script>
$( ".xxxxx" ).insertBefore( $( ".bx-footer" ) );
script>

              xxxxx being the class attribute of the div i have created with the content I am injecting.

              Thank you!

              • By the way , How to hide that div content I added to the footer through Injections area in the mobile app? I would like to show it on the phone, tablet and desktop only.

                • Try to add the RAW block with the CSS code like

                  div.class {

                  display: none;

                  }

                  which will be invisible on mobile devices.

                  • For us noobs: --> use 's' instead of 'a' ?

                    • It was a typo error. It shoud be:

                      display: none;

                      • Thanks @LeonidS. I already know that css code. I am not talking about hiding it on mobile devices, i meant in the Mobile App. I would like it to be displayed on the phone (when using a website browser on the phone), tablet and desktop but not in the mobile app, similar to the setting we have for Navigation Items:

                        Hidden on:
                        phone
                        tablet
                        desktop
                        -> mobile app

                        Thanks

                        • Hi @LeonidS@LeonidS, I have found the answer to my own question by mysefl.

                          To hide it on the mobile app, the following class attribute should be added to the tag/element

                          bx-def-mobile-app-hide

                          For other devices, these ones should be used:

                          To hide on the phone:

                          bx-def-media-phone-hide

                          To hide on the tablet:

                          bx-def-media-tablet-hide

                          To hide on the desktop:

                          bx-def-media-desktop-hide

                          and it works.

                          Additionally, the following class attributes can be used:

                          To display something to guest only:

                          bx-hide-when-logged-in

                          To display something to members only:

                          bx-hide-when-logged-out

                          Update:

                          To apply a css style to visitors/guests only, use (thanks to LeonidS):

                          .bx-user-unauthorized .my-element {
your style here;
}

                          Thanks

                          Login or Join to comment.