Layout possible with Enfold?

Hey northorie,

Thank you for the inquiry.

Yes, the layout should be possible with Enfold but it will require some modifications. Unfortunately, we won’t be able to build a demo specifically for this site, but we can assist you if you encounter any issues building the layout.

Best regards,
Ismael

Hi,

The first section with the background image can be recreated using the Color Section element or Fullscreen Sliders. The page can be set to have a transparent header. For the next section, you can use Column elements and apply some custom css to adjust the container width if needed. The theme also includes a built-in Contact Form element which can be added using the Advance Layout Builder (ALB).

You can check the documentation for more details on the builder and available elements: https://kriesi.at/documentation/enfold/

Let us know if you need more info.

Best regards,
Ismael

Hi,
Thank you for your patience. but the vertical black line is from a special element in the fusion plugin, Enfold doesn’t have such an element, we have a horizontal hr element.
If you would like to request this feature, the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.

Best regards,
Mike

Hi,

Yes, you can use an Image element, apply a Custom CSS Class to it, and then make a few css modifications to adjust its position. This can also be achieved with pure css. If you can provide a test page, we’ll send you the initial css.

Best regards,
Ismael

Hi,

Thank you for the info.

Did you create a test page for the layout above? We tried logging in, but the credentials provided are invalid. Please check the info carefully or provide another admin account.

Best regards,
Ismael

Hi,

We applied a unique class name (av-black-vertical-line) to the first column with the feather image, then added this css code to create the black line.

.av-black-vertical-line:before {
    content: '';
    width: 1px;
    height: 200px;
    position: absolute;
    background: #000000;
    top: -100px;
    left: 100px;
    display: block;
    z-index: 1000;
    visibility: visible;
}

We also added a separator/whitespace element to the first section to create a huge space at the bottom, then added this css to pull the columns upward.

.av-grid-with-black-border {
    position: relative;
    z-index: 100;
}

.av-grid-pull-black-border {
   margin-bottom: -324px;
}

Best regards,
Ismael

Hi,
apply a unique class name (av-black-vertical-line) to the column that you want the black line on, please examine the column that Ismael did for you.
To move the column up use the setting to add a negative top margin.

Best regards,
Mike