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 611 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories:
Pro
New Ribbon for Posts in Bricks

New Ribbon for Posts in Bricks

This Pro tutorial provides the steps to display a "New" ribbon for posts that were published in the last x days in Bricks. Update: Added…
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:
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Categories:
Tags:
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:
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Categories:
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Categories:
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:
Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories: