diff --git a/packages/webiny-app-cms/src/editor/components/Element.js b/packages/webiny-app-cms/src/editor/components/Element.js
index 504301fb184..8b86821ae22 100644
--- a/packages/webiny-app-cms/src/editor/components/Element.js
+++ b/packages/webiny-app-cms/src/editor/components/Element.js
@@ -75,6 +75,8 @@ const Element = pure(
{plugin.render({ element })}
+
+
+ +
)}
diff --git a/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js b/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js
index 2e41a349286..07a17497e06 100644
--- a/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js
+++ b/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js
@@ -111,6 +111,31 @@ export const ElementContainer = pure(
backgroundColor: color
}
}
+ },
+ ">.add-element": {
+ position: "absolute",
+ left: "50%",
+ backgroundColor: color,
+ color: "white",
+ width: "22px",
+ height: "22px",
+ borderRadius: "50%",
+ display: active || highlight ? "flex" : "none",
+ justifyContent: "center",
+ alignItems: "center",
+ transform: "scale(0.5)",
+ cursor: "pointer",
+ zIndex: 15,
+ transition: "transform 0.2s",
+ "&--above": {
+ top: -12
+ },
+ "&--below": {
+ bottom: -10
+ },
+ "&:hover": {
+ transform: "scale(1)"
+ }
}
};
})