ElementorexCms.Canvas (ElementorexCms v0.1.0)

How the editor canvas looks: the stylesheets of your site, the attributes of <html> and <body> and an optional frame around the content.

The canvas is an <iframe> built from this configuration, so the content is rendered with your site's CSS and not the admin's, and the tablet and mobile widths trigger your media queries for real.

ElementorexCms.Canvas.new(
  stylesheets: ["/assets/css/app.css"],
  html_attrs: %{"data-theme" => "light"},
  body_class: "bg-base-200 p-8",
  # the content goes where the frame has `data-exr-mount`
  frame: ~s(<main class="mx-auto max-w-3xl rounded-box bg-base-100 p-6" data-exr-mount></main>)
)

Options

:stylesheets - URLs of the CSS files (same origin or allowed by your Content-Security-Policy)
:head - extra HTML for <head> (fonts...)
:html_attrs - attributes of <html> (data-theme for daisyUI)
:body_class - classes of <body>
:frame - HTML around the content, with an element carrying data-exr-mount where the document goes (default: just that element). It can be a string or anything Phoenix.HTML.Safe (a rendered component)
:widths - canvas width per device, default %{"desktop" => 1280, "tablet" => 768, "mobile" => 390}

Summary

Types

t()

Functions

new(opts \\ [])

Builds a canvas configuration (see the module docs).

Types

t()

@type t() :: %ElementorexCms.Canvas{
  body_class: term(),
  frame: term(),
  head: term(),
  html_attrs: term(),
  stylesheets: term(),
  widths: term()
}

Functions

new(opts \\ [])

@spec new(keyword()) :: t()

Builds a canvas configuration (see the module docs).