Hi Team Enfold, Kriesi,

I have been using Enfold for 10 years(?). I have no idea when it came out, but it feels like forever. Having used it on three websites, two of which are still online (links below). I wanted to give some serious user feedback to you and your team since I hope it will help you to make it even better! I totally understand if there is no room for such a thing in your team. So I’m simply sending it as a “here you go, some seriously golden nuggets, do with it what you want” type of email :)

Websites:
MeshMasters.com (up2date)
RobertBerrier.com (old, and needs an update)

Before I slap all the feedback points. Know that I am a (3D) artist, with limited web coding knowledge. So I don’t know what is possible or not.

—

1) Often I want to have media like an image or video, but also text fields, to the left or right, or center of a section or part of the website, but in a smaller size than the container it’s in. For example, if I have a full width color section. Within that color section, I can use a 1/4 container with the media/text in it, another 3/4 container next to it to “force” it to be at a smaller size to the left or right of that color section. Or, I want to have a 1/3 sized media/text in the center of the website, so I put two 1/5 containers to the left and right. This “works”, but it’s finicky. I often rather want the media to be at a fixed (smaller) size, no matter what is next to it. Even better would be a percentage. Eg, this media should always be 20% size compared to the browser window, or 20% of the container it’s in. The container it is in would still be its max possible size. But it will try to get close to the smaller percentage or pixel size. This can somewhat be done with using a smaller resolution image. But this is also finicky because of all the different screen resolutions, especially in our age with HD vs 4k. So, a better way to “size” down images without having to container it. Perhaps a percentage setting in the media element itself.

—

2) The ability to have (all) elements be in the center of of the page. Eg, media, containers, buttons. If they are smaller than the color section or container they are in. I often want them in the center of that color section or container. No matter what responsive size we are in. Currently I need to do this with “buffer” containers to try and align it to the setting.

I have created some CSS code with a Class ID that I can add to a color section. Then everything in that color section will be centered. But I believe this should be a default setting within a color section and containers. Eg, “align all content within this container/color section to the Left/Center/Right.

—

3) I use CSS code to not have the header be transparent. I would say this should be an option in the Enfold settings. Rather than needing to code.
#header {
background-color: #1d1d40; /* This is needed for the opacity change */
opacity: 1 !important;
}

4) When text is in BOLD or STRONG. It gets an assigned color from the theme options. Not a bad idea, but it is a shared color with I believe “Primary Color – Font color for links, dropcaps and other elements” This means we users have less control over how text and it’s colors looks like. I suggest that BOLD and STRONG has a separate color option within the Theme color settings. In my opinion, links and BOLD should be seen as two different things to customize. I currently use CSS code to adjust this.

—

5) For all my websites I have a max website width setting, as set in the Enfold settings. But sometimes, I want a color section to use its own unique size. For example, you will see on MeshMasters.com that the portfolio section is a full-width color section. While the contact section at the button is a bit smaller than the website’s width settings. Having this as a setting in color sections would give people more options to make cool layouts. Currently I have this CSS code for this:

/* ========================================== */
/* === Color sections width additions === */
/* ========================================== */

/* === Full width, no padding === */
#fullwidth-container-nopadding .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}

/* === Full width, small padding === */
#fullwidth-container-smallpadding .container {
width: 100% !important;
min-width: 100%;
padding: 10px;
margin: 10px;
}

/* === Full width, default padding === */
#fullwidth-container .container {
width: 100% !important;
min-width: 100%;
}

—

5) Similar to the point above. I want my blog posts to be a smaller width. Since it makes reading large pieces of text easier. So having a separate width setting for blog posts could be interesting to add. For example, the main website is at say 85% width. But perhaps all blog posts are at 70%.

—

6) Font sizes on the main page (or landing pages) are often large. To grab attention with cool copy writing that sells. These are often smaller pieces of text. But on blog posts you have large pieces of text. And so a smaller font size makes it more readable. Since there is only one BODY or P font size for the entire website. You are stuck in choosing one for all pages. I currently made CSS code so on blog posts all font sizes are 95% or 90% smaller than the rest of the website. Perhaps this could also be a setting in the Enfold theme settings. Eg “blog posts font sizes”.

—

7) There are currently three responsive break points in pixels. I believe it’s 990px and 768px and 480px. Perhaps this is the standard in web development. But the ability to change these website wide would be great. Eg, If I change the 990px to say 800px in the enfold settings. Then on all other instances where this is used, like in color sections, containers, etc. That value is also reflected there in the UI.

—

8) When columns break down for responsiveness. They break down into a single column. Eg, a column of 3 containers, becomes a column of 1 with 3 containers below each other. Having options to control to how many columns it breaks would be great. Eg, 4 columns of containers next to each other (4×1). Could be 2 columns of 2 containers next to each other. Eg, 2×2. Instead of 1×4. More controls options for this would be AMAZING!

—

9) fyi, I used CSS code to adjust the masonry gap size (to 4 px). It’s a small thing, but perhaps a quick win to add to the Masonry settings and so to make the theme better.

—

10) another small thing. I use CSS code to remove the Gallery border.

—

11) I use CSS code to remove the Blog button hover effect. Perhaps also a quick win to add to Enfold.
/* === Hover icon disable === */
.slide-entry-wrap .image-overlay-inside:before { display: none; }

/* === Hover overlay color === */
.image-overlay { background: #0f0f26; }

—

12) Very similar where I remove the Featured Image effect:
.big-preview.single-big a{
pointer-events:none!important;
}

—

13) And also the blog page excerpts and dates:
/* === Remove blog page excerpts === */
.blog .slide-entry-excerpt { display: none; }

/* === Remove blog page dates === */
.slide-meta { display: none !important; }

—

14) Tables are very difficult to adjust. There is no control over it’s color and borders. I use quite a lot of CSS code to adjust them. Perhaps this should be an entire section in the Enfold themes to control them?
I currently use code to:
– Adjust colors for: General cells, uneven cells, even cells, header cells, the borders
– Thickness of borders and its colors
– Give transparency to cells.
– And then to apply these settings to each different theme area (Logo area, main area, alternative area, footer area, socket area)

—

15) the button element is missing padding and margin settings (and maybe also alignment settings?)

—

16) There are default padding settings for Color Sections. 0%, 20%, Default(?), 70% and 130%. It would be great if we can adjust these globally in the Enfold Settings. And ofcourse these changes are reflected in the Color Section padding settings. For example, Perhaps I want the default to be 60%, the large 100% and the extra large 150%

Yes, I am aware you can put in custom values in the element itself. But it’s better to align values website wide.

—

That’s it. I hope it helps and you can improve Enfold to an even better edition!

Robert Berrier