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

Hi,

You may need pull the whole cell instead.

.responsive #top #wrap_all .flex_cell.av-m7dbfxs0-8641a1a6d69afe4c2e8bb61389de1cc0 {
    top: -100px;
    position: relative;
    max-width: 50%;
    display: block;
    margin: 0 auto;
}

View post on imgur.com

You may want to avoid applying 500px padding on both sides of the cell because it makes the container too narrow on large screens.

Best regards,
Ismael

Hi,

We added the class name “av-grid-narrow-column” to the grid row element containing the columns, then added this css code.

@media only screen and (min-width: 989px) {
  .responsive #top #wrap_all .av-grid-narrow-column .flex_cell {
    top: -100px;
    position: relative;
    max-width: 64%;
    display: block;
    margin: 0 auto;
  }
}

Please remove the 500px padding on both grid row.

Best regards,
Ismael

Hi,

We created a test page, adjusted the layout and edited the css code. You can follow this layout for the other columns. Please check the private field.

Best regards,
Ismael

Hi,

Yes, unfortunately, it’s only possible without the box shadow. Fur further assistance with customization and building your site, you can hire a freelance developer or contact our partner, Codeable.

— https://kriesi.at/contact/customization

Best regards,
Ismael

Hi,

Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard