Problem
There is no element or setting in the designer to display the current page’s title in an element
Workaround
Current workaround is to use JavaScript to get and use the page title using the custom code document.title
.
The page title (also called window/tab title), is set via the “Meta Title” field in the page settings:
Example of tab title:
Custom code example and output:
Example
An example of this can be found in my sandbox:
http://sandbox-903b9c.webflow.io/half-size-background-color-on-title
Designer view (use placeholder element)
Default placeholder (in this case an h1 element)
Set title in page settings
Published view
Code used in site footer
(or you can place in page footer code if you only want this on a certain page)
<script>
Webflow.push(function() {
// Set the text of the first "h1" tag on the page
$('h1').first().text(function() {
// Set it to the page(document) title if the text of the element is exactly the default text ("Heading"),
// otherwise, set the text content to whatever it currently contains (i.e.: do nothing)
return $(this).text() !== "Heading" ? $(this).text() : document.title;
});
});
</script>
Alternatively, you can target the element using a class or ID selector:
<script>
Webflow.push(function() {
// Set the text of the element with class "myelement" to the page title
$('.myelement').text(document.title);
});
</script>
Do note that Webflow changes the class name set in the designer, to lowercase + replace spaces with hyphens when published.
Also, feel free to contact me for further code help and/or customization of third-party plugins