Hello everyone!
Yesterday I started using Divi, in order to save time on designing the page and rather focus on the coding part. All things good, but I stuck with the problem that I don’t know how to integrate the styling of certain divi template into my app, whenever I finish it.
I searched everywhere on the internet, but I just cannot find information about it. I see that whenever the component is exported, a JSON object is received, but the problem is that it is really strange and I don’t know how to apply it to certain React component. For example:
{
"context": "et_theme_builder",
"templates": [
{
"title": "Default Website Template",
"autogenerated_title": false,
"default": true,
"enabled": true,
"use_on": [],
"exclude_from": [],
"layouts": {
"header": { "id": 8, "enabled": true },
"body": { "id": 10, "enabled": true },
"footer": { "id": 0, "enabled": true }
},
"description": "<span class="et-cloud-app-layout-desc-item-global">Default Website Template</span>"
}
],
"layouts": {
"8": {
"context": "et_builder",
"data": {
"8": "[et_pb_section fb_built="1" theme_builder_area="post_content" _builder_version="4.24.3" _module_preset="default"][/et_pb_section]"
},
"images": [],
"post_title": "Theme Builder Layout",
"post_type": "et_header_layout",
"theme_builder": { "is_global": true },
"global_colors": null,
"post_meta": [
{ "key": "_et_pb_use_builder", "value": "on" },
{ "key": "_et_pb_built_for_post_type", "value": "page" },
{ "key": "_et_pb_enable_shortcode_tracking", "value": "" },
{ "key": "_et_pb_custom_css", "value": "" },
{ "key": "_et_pb_gutter_width", "value": "3" },
{ "key": "_et_pb_first_image", "value": "" },
{ "key": "_et_pb_truncate_post", "value": "" },
{ "key": "_et_pb_truncate_post_date", "value": "" },
{ "key": "_et_builder_version", "value": "VB|Divi|4.24.3" }
]
},
"10": {
"context": "et_builder",
"data": {
"10": "[et_pb_section fb_built="1" _builder_version="4.24.3" _module_preset="default" global_colors_info="{}"][et_pb_row column_structure="1_2,1_2" _builder_version="4.24.3" _module_preset="default" global_colors_info="{}"][et_pb_column type="1_2" _builder_version="4.24.3" _module_preset="default" global_colors_info="{}"][et_pb_accordion _builder_version="4.24.3" _module_preset="default" icon_color="#FFFFFF" hover_enabled="0" sticky_enabled="0"][et_pb_accordion_item title="Your Title Goes Here" _builder_version="4.24.3" _module_preset="default" open="off"]<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>[/et_pb_accordion_item][/et_pb_accordion][/et_pb_column][et_pb_column type="1_2" _builder_version="4.24.3" _module_preset="default" global_colors_info="{}"][et_pb_accordion _builder_version="4.24.3" _module_preset="default" icon_color="#FFFFFF" hover_enabled="0" sticky_enabled="0"][et_pb_accordion_item title="Your Title Goes Here" _builder_version="4.24.3" _module_preset="default" open="on"]<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>[/et_pb_accordion_item][/et_pb_accordion][/et_pb_column][/et_pb_row][/et_pb_section]"
},
"images": [],
"post_title": "Theme Builder Layout",
"post_type": "et_body_layout",
"theme_builder": { "is_global": true },
"global_colors": null,
"post_meta": [
{ "key": "_et_pb_use_builder", "value": "on" },
{ "key": "_et_pb_show_page_creation", "value": "off" },
{ "key": "_et_pb_built_for_post_type", "value": "page" },
{ "key": "_et_pb_enable_shortcode_tracking", "value": "" },
{ "key": "_et_pb_custom_css", "value": "" },
{ "key": "_et_pb_gutter_width", "value": "3" },
{ "key": "_et_pb_first_image", "value": "" },
{ "key": "_et_pb_truncate_post", "value": "" },
{ "key": "_et_pb_truncate_post_date", "value": "" },
{ "key": "_et_builder_version", "value": "VB|Divi|4.24.3" }
]
}
},
"presets": {},
"has_default_template": true,
"has_global_layouts": true
}
So how can I integrate that thing into certain React component, for example, let’s say I want to use something from that JSON into this component:
class DetailedExam extends Component {
constructor(props) {
super(props);
this.state = {
hasStarted: false,
details: {},
};
this.startExam = this.startExam.bind(this);
}
startExam() {
this.setState({
hasStarted: !this.state.hasStarted,
});
}
componentDidMount() {
this.setState({ details: this.props.location.state });
}
render() {
return (
<>
{this.state.hasStarted ? (
<App
// examType={}
/>
) : (
<div className="Front-Page">
<FrontPageHeader className={"Header"}>
<img src={solved_logo} className="Solved-Logo" />
</FrontPageHeader>
<div className="Content-Holder">
<main className="Main">
<h1>Hi</h1>
<div>
<span>
{this.state.details.title}
{this.state.details.text}
</span>
</div>
</main>
</div>
<div className="Start-Btn">
<button onClick={this.startExam}>Start</button>
</div>
<footer className="Footer">
<a
href="https://solvedeu.com"
target="_blank"
rel="noopener noreferrer"
>
<strong>Visit our website</strong>
</a>
</footer>
</div>
)}
</>
);
}
}
export default () => (
<DetailedExam params={useParams()} location={useLocation()} />
);
And is this the way to do it, because I have no clue how to? Maybe there is smoother and more elegant way than just figuring out where to place the converted css.
Thanks for all kind of help!