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
-
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.
-
We did release a new module with this ability: Sitewide Blocks
MSolutions
-
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
-
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, 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
Thanks
