28th Feb '24
/
0 comments

Plain HTML pages in Bricks

Plain HTML pages in Bricks

As great as Bricks is, there might be some situations when you want to put raw HTML and render just that, with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.

Use case: You are trying to embed a TypeForm quiz and don’t want any code from Bricks or other plugins to pollute your HTML.

Sample embed code:

<div data-tf-live="01HQPE13KWFMSHKSK7YHG65EKH"></div><script src="//embed.typeform.com/next/embed.js"></script>

Turning off the header and footer for your specific Page in Bricks PAGE SETTINGS → GENERAL or adding it to be excluded from your single Bricks template that applies to all Pages won’t suffice.

Ben Affleck in this situation:

The solution is to use a traditional WordPress Page Template.

Step 1

Create a file named say page_quiz.php having:

<?php
/**
* Template Name: Quiz
*/

?>

<div data-tf-live="01HQPE13KWFMSHKSK7YHG65EKH"></div><script src="//embed.typeform.com/next/embed.js"></script>

<?php

Step 2

Upload it to your child theme directory.

Step 3

Apply this template for the Page.

If you have already edited the Page with Bricks and added any elements, delete them.

Result on the front end is the same but looking at the page source, all there will be is:

Much better.

You can, of course, add HTML DOCTYPE declaration, head and body tags, etc., if needed.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Categories:
Tags:
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Categories:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags:
Create a App-Like Navigation in Bricks

Create a App-Like Navigation in Bricks

I've promised a few folks in the Facebook group to create a tutorial on how to create an app-like navigation in Bricks like in the…
Categories:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
Categories: