diff --git a/esphome/components/graphical_layout/__init__.py b/esphome/components/graphical_layout/__init__.py
index 56664f30a3..ca16f0771b 100644
--- a/esphome/components/graphical_layout/__init__.py
+++ b/esphome/components/graphical_layout/__init__.py
@@ -25,10 +25,10 @@ CONF_BORDER_COLOR = "border_color"
 
 BASE_ITEM_SCHEMA = cv.Schema(
     {
-        cv.Optional(CONF_MARGIN, default=0): cv.templatable(cv.int_range(min=0)),
-        cv.Optional(CONF_BORDER, default=0): cv.templatable(cv.int_range(min=0)),
+        cv.Optional(CONF_MARGIN, default=0): cv.int_range(min=0),
+        cv.Optional(CONF_BORDER, default=0): cv.int_range(min=0),
         cv.Optional(CONF_BORDER_COLOR): cv.use_id(color.ColorStruct),
-        cv.Optional(CONF_PADDING, default=0): cv.templatable(cv.int_range(min=0)),
+        cv.Optional(CONF_PADDING, default=0): cv.int_range(min=0),
     }
 )
 
diff --git a/esphome/components/graphical_layout/display_rendering_panel.cpp b/esphome/components/graphical_layout/display_rendering_panel.cpp
index cf3f76b20d..e96f7cfaf9 100644
--- a/esphome/components/graphical_layout/display_rendering_panel.cpp
+++ b/esphome/components/graphical_layout/display_rendering_panel.cpp
@@ -10,12 +10,12 @@ namespace graphical_layout {
 static const char *const TAG = "displayrenderingpanel";
 
 void DisplayRenderingPanel::dump_config(int indent_depth, int additional_level_depth) {
-  ESP_LOGCONFIG(TAG, "%*sDimensions: %ix%i", indent_depth, "", this->width_, this->height_);
+  ESP_LOGCONFIG(TAG, "%*sDimensions: %ix%i", indent_depth, "", this->width_.value(), this->height_.value());
   ESP_LOGCONFIG(TAG, "%*sHas drawing lambda: %s", indent_depth, "", YESNO(this->lambda_ != nullptr));
 }
 
 display::Rect DisplayRenderingPanel::measure_item_internal(display::Display *display) {
-  return display::Rect(0, 0, this->width_, this->height_);
+  return display::Rect(0, 0, this->width_.value(), this->height_.value());
 }
 
 void DisplayRenderingPanel::render_internal(display::Display *display, display::Rect bounds) {
diff --git a/esphome/components/graphical_layout/display_rendering_panel.h b/esphome/components/graphical_layout/display_rendering_panel.h
index 0a753021bf..e06e203239 100644
--- a/esphome/components/graphical_layout/display_rendering_panel.h
+++ b/esphome/components/graphical_layout/display_rendering_panel.h
@@ -4,6 +4,7 @@
 
 #include "esphome/components/graphical_layout/graphical_layout.h"
 #include "esphome/components/font/font.h"
+#include "esphome/core/automation.h"
 
 namespace esphome {
 namespace graphical_layout {
@@ -20,13 +21,13 @@ class DisplayRenderingPanel : public LayoutItem {
   void render_internal(display::Display *display, display::Rect bounds) override;
   void dump_config(int indent_depth, int additional_level_depth) override;
 
-  void set_width(int width) { this->width_ = width; };
-  void set_height(int height) { this->height_ = height; };
+  template<typename V> void set_width(V width) { this->width_ = width; };
+  template<typename V> void set_height(V height) { this->height_ = height; };
   void set_lambda(display_writer_t lambda) { this->lambda_ = std::move(lambda); };
 
  protected:
-  int width_{0};
-  int height_{0};
+  TemplatableValue<int> width_{0};
+  TemplatableValue<int> height_{0};
   display_writer_t lambda_{nullptr};
 };
 
diff --git a/esphome/components/graphical_layout/display_rendering_panel.py b/esphome/components/graphical_layout/display_rendering_panel.py
index 422c6c4feb..e1a792f049 100644
--- a/esphome/components/graphical_layout/display_rendering_panel.py
+++ b/esphome/components/graphical_layout/display_rendering_panel.py
@@ -23,10 +23,10 @@ def get_config_schema(base_item_schema, item_type_schema):
 async def config_to_layout_item(pvariable_builder, item_config, child_item_builder):
     var = await pvariable_builder(item_config)
 
-    width = await cg.templatable(item_config[CONF_WIDTH], args=[], output_type=int)
+    width = await cg.templatable(item_config[CONF_WIDTH], args=[], output_type=cg.int_)
     cg.add(var.set_width(width))
 
-    height = await cg.templatable(item_config[CONF_HEIGHT], args=[], output_type=int)
+    height = await cg.templatable(item_config[CONF_HEIGHT], args=[], output_type=cg.int_)
     cg.add(var.set_height(height))
 
     lambda_ = await cg.process_lambda(
diff --git a/esphome/components/graphical_layout/horizontal_stack.py b/esphome/components/graphical_layout/horizontal_stack.py
index 0865795eb3..c277a9f6cb 100644
--- a/esphome/components/graphical_layout/horizontal_stack.py
+++ b/esphome/components/graphical_layout/horizontal_stack.py
@@ -23,7 +23,7 @@ def get_config_schema(base_item_schema, item_type_schema):
     return base_item_schema.extend(
         {
             cv.GenerateID(): cv.declare_id(HorizontalStack),
-            cv.Optional(CONF_ITEM_PADDING, default=0): cv.templatable(cv.int_),
+            cv.Optional(CONF_ITEM_PADDING, default=0): cv.int_,
             cv.Required(CONF_ITEMS): cv.All(
                 cv.ensure_list(item_type_schema), cv.Length(min=1)
             ),
diff --git a/esphome/components/graphical_layout/text_panel.cpp b/esphome/components/graphical_layout/text_panel.cpp
index c38bc82fc3..f0a5b9e96c 100644
--- a/esphome/components/graphical_layout/text_panel.cpp
+++ b/esphome/components/graphical_layout/text_panel.cpp
@@ -13,7 +13,8 @@ static const int TEXT_ALIGN_Y_MASK =
     (int) display::TextAlign::BOTTOM | (int) display::TextAlign::BASELINE | (int) display::TextAlign::CENTER_VERTICAL;
 
 void TextPanel::dump_config(int indent_depth, int additional_level_depth) {
-  ESP_LOGCONFIG(TAG, "%*sText: %s", indent_depth, "", this->text_.c_str());
+  std::string text = this->text_.value();
+  ESP_LOGCONFIG(TAG, "%*sText: %s", indent_depth, "", text.c_str());
 }
 
 display::Rect TextPanel::measure_item_internal(display::Display *display) {
@@ -21,14 +22,16 @@ display::Rect TextPanel::measure_item_internal(display::Display *display) {
   int y1;
   int width;
   int height;
-  display->get_text_bounds(0, 0, this->text_.c_str(), this->font_, this->text_align_, &x1, &y1, &width, &height);
+  std::string text = this->text_.value();
+  display->get_text_bounds(0, 0, text.c_str(), this->font_, this->text_align_, &x1, &y1, &width, &height);
   return display::Rect(0, 0, width, height);
 }
 
 void TextPanel::render_internal(display::Display *display, display::Rect bounds) {
   int width, height, x_offset, baseline;
 
-  this->font_->measure(this->text_.c_str(), &width, &x_offset, &baseline, &height);
+  std::string text = this->text_.value();
+  this->font_->measure(text.c_str(), &width, &x_offset, &baseline, &height);
 
   const auto x_align = display::TextAlign(int(this->text_align_) & TEXT_ALIGN_X_MASK);
   const auto y_align = display::TextAlign(int(this->text_align_) & TEXT_ALIGN_Y_MASK);
@@ -73,7 +76,7 @@ void TextPanel::render_internal(display::Display *display, display::Rect bounds)
   }
 
   auto rendered_alignment = display::TextAlign::TOP_LEFT;
-  display->print(bounds.x, bounds.y, this->font_, this->foreground_color_, rendered_alignment, this->text_.c_str());
+  display->print(bounds.x, bounds.y, this->font_, this->foreground_color_, rendered_alignment, text.c_str());
 }
 
 }  // namespace graphical_layout
diff --git a/esphome/components/graphical_layout/text_panel.h b/esphome/components/graphical_layout/text_panel.h
index 66610630e3..08e78c0325 100644
--- a/esphome/components/graphical_layout/text_panel.h
+++ b/esphome/components/graphical_layout/text_panel.h
@@ -4,6 +4,7 @@
 
 #include "esphome/components/graphical_layout/graphical_layout.h"
 #include "esphome/components/font/font.h"
+#include "esphome/core/automation.h"
 
 namespace esphome {
 namespace graphical_layout {
@@ -19,7 +20,7 @@ class TextPanel : public LayoutItem {
   void dump_config(int indent_depth, int additional_level_depth) override;
 
   void set_item_padding(int item_padding) { this->item_padding_ = item_padding; };
-  void set_text(std::string text) { this->text_ = std::move(text); };
+  template<typename V> void set_text(V text) { this->text_ = text; };
   void set_font(display::BaseFont *font) { this->font_ = font; };
   void set_foreground_color(Color foreground_color) { this->foreground_color_ = foreground_color; };
   void set_background_color(Color background_color) { this->background_color_ = background_color; };
@@ -27,7 +28,7 @@ class TextPanel : public LayoutItem {
 
  protected:
   int item_padding_{0};
-  std::string text_{};
+  TemplatableValue<std::string> text_{};
   display::BaseFont *font_{nullptr};
   display::TextAlign text_align_{display::TextAlign::TOP_LEFT};
   Color foreground_color_{COLOR_ON};
diff --git a/esphome/components/graphical_layout/text_panel.py b/esphome/components/graphical_layout/text_panel.py
index c5080ab8da..d3f26d71c4 100644
--- a/esphome/components/graphical_layout/text_panel.py
+++ b/esphome/components/graphical_layout/text_panel.py
@@ -1,3 +1,4 @@
+from esphome import core
 import esphome.codegen as cg
 import esphome.config_validation as cv
 from esphome.components import font, color
@@ -36,7 +37,7 @@ def get_config_schema(base_item_schema, item_type_schema):
     return base_item_schema.extend(
         {
             cv.GenerateID(): cv.declare_id(TextPanel),
-            cv.Optional(CONF_ITEM_PADDING, default=0): cv.templatable(cv.int_),
+            cv.Optional(CONF_ITEM_PADDING, default=0): cv.int_,
             cv.Required(CONF_FONT): cv.use_id(font.Font),
             cv.Optional(CONF_FOREGROUND_COLOR): cv.use_id(color.ColorStruct),
             cv.Optional(CONF_BACKGROUND_COLOR): cv.use_id(color.ColorStruct),
@@ -63,7 +64,7 @@ async def config_to_layout_item(pvariable_builder, item_config, child_item_build
         background_color = await cg.get_variable(background_color_config)
         cg.add(var.set_background_color(background_color))
 
-    text = await cg.templatable(item_config[CONF_TEXT], args=[], output_type=str)
+    text = await cg.templatable(item_config[CONF_TEXT], args=[], output_type=cg.std_string)
     cg.add(var.set_text(text))
 
     if text_align := item_config.get(CONF_TEXT_ALIGN):
diff --git a/esphome/components/graphical_layout/vertical_stack.py b/esphome/components/graphical_layout/vertical_stack.py
index 8ad6929621..22757f8d2e 100644
--- a/esphome/components/graphical_layout/vertical_stack.py
+++ b/esphome/components/graphical_layout/vertical_stack.py
@@ -23,7 +23,7 @@ def get_config_schema(base_item_schema, item_type_schema):
     return base_item_schema.extend(
         {
             cv.GenerateID(): cv.declare_id(VerticalStack),
-            cv.Optional(CONF_ITEM_PADDING, default=0): cv.templatable(cv.int_),
+            cv.Optional(CONF_ITEM_PADDING, default=0): cv.int_,
             cv.Required(CONF_ITEMS): cv.All(
                 cv.ensure_list(item_type_schema), cv.Length(min=1)
             ),