[Resolved] Template designing with toolset

[Author]

Posts

[chris-anitaS]

We are designing a site with Toolset and Divi.

1. We have created content template and post created with those templates. After Publish the post, the formatting of those pages (created with content template) are not showing fullwidth, though we have chosen "Fullwidth as the layout" in content Template.

Sharing the link:

hidden link

2. *How to display content(add custom fields) over the image in content Template. Kindly guide us how to do it? Attaching a screenshot for the expected design

[Nigel]

Hi there

1. You have used the theme option settings in the Content Template, as shown in the screenshot? (It looks like you are using boxed layout on your site.)

2. To have an image with a text overlay you need to use a Container block, where you set an image as the container background (either a static image, or a dynamic image coming from a field of the post being displayed), and then you can add other elements, including text, to the container for the foreground.

[chris-anitaS]

We want to design the banner section with the background image and text. We are able to add the container and upload the background image but need to set my background image in full width.

We don't see the options you mentioned in documentation: full width container and a normal width container under the Block Alignment.

How do you set up a "Toolset Container" block as full width or normal width? Thank you for your support.

hidden link

[Waqar]

Thank you for sharing these details.

Can you please share temporary admin login details, so that I can see how this page is set up in the admin area?

I'll be in a better position to guide you with the next steps accordingly.

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing the admin access.

The Toolset block alignment options are dependant on the active theme and its layout styles.

If you'll go to WP Admin -> Appearance -> Customize -> General Settings -> Layout Settings, you'll find that through the Divi theme's settings, the "Website Content Width" option is set to 1080 px. This means that the website's container areas, will not extend, wider than 1080 px.

To be able to make selected containers, to cover the full-screen width (and extend them even further than this limit of 1080px), you can follow these steps:

1. In your content template's CSS editor, you can include some CSS code for a special class "full-screen":
( screenshot: hidden link )

.full-screen {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw - 8px);
    margin-right: calc(-50vw - 8px);
    padding-right: 0!important;
    padding-left: 0!important;
}

2. For any "Container" block that you'd like to cover full-screen width, you can add this class "full-screen", in the "CSS Classes" field.
( screenshot: hidden link )

I hope this helps and please let me know if you need any further assistance around this.

[chris-anitaS]

My issue is resolved now. Thank you!