Implementing a Contact Form 7 form:
– insert a ‘Code Block’ element from the Advanced Layout Builder into your page (contact)
– insert the ‘Shortcode’ of the CF7-form into the ‘Code Block’

Does that work for you?

You should avoid to change the core files in the “framework”-folder of Enfold. Not in the main theme and not in the child theme.
And you can’t override those files like other ones e.g. “Templates”, “CSS” or “Shortcodes”. They are included functions and don’t belong to the WordPress Template Hierarchy.

—–
For WooCommerce … you can overwrite the templates within your Enfold Child Theme like in every other WP Theme:

=> https://docs.woocommerce.com/document/template-structure/

—–
You can also overwrite the templates from Enfold (normal non-shop pages, posts, header, footer etc.) in a child theme like in every (most) other WP child themes:

=> https://codex.wordpress.org/Child_Themes#Template_Files
=> https://developer.wordpress.org/themes/basics/template-hierarchy/

—–
You can add custom CSS for styling:

=> https://kriesi.at/documentation/enfold/add-custom-css/

—–
You can override the Enfold Advanced Layout Builder elements:

=> https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

—–
You can also change core functionalities by using hooks and filter:

=> https://kriesi.at/documentation/enfold/hooks-and-filters/

—–
Did i miss something?
Maybe … but a lot of stuff can be “crazy customized” by you … hehe … :-)

• This reply was modified 5 years, 11 months ago by cg.

You have an open CSS tag in your Quick CSS … that’s why the last CSS does not apply to the page … :-)
There is a “}” missing.

I am very sure the CSS for “av-instagram-follow” will work.

copy&paste this:

span.avia-menu-text {
  text-transform: uppercase;
}
.av-inner-masonry-content.site-background {
  opacity: 1 !important;
}
.av-inner-masonry-content-pos h3 font font {
  color: #000 !important;
}
#top .av_header_transparency {
  background: rgba(0, 0, 0, 0.1);
}
#header_main_alternate {
  border: 0 none !important;
}
.av-instagram-follow {
  color: #333 !important;
}

• This reply was modified 5 years, 11 months ago by cg.

As far as i can see this one of your CSS snippets should work:

.av-instagram-follow {
  color: #333 !important;
}

After adding that to your Quick CSS … did you cleared all possible caches?
Also in the “Enfold Options > Performance” at the bottom try activating “Delete old CSS and JS files” and save the change.

What do you mean by “affected”? … Does Google show any additional information?
Because: Normally those URLs should respond with HTTP status ‘403’. That means “forbidden”. Google shouldn’t crawl nor index those URLs.
Also you shouldn’t submit those folder-URLs to Google … they are not content-pages of your Website … only some of the containing images, css, javascript as part of a HTML-page … not as a page themself.

You only have to copy that whole file you edited, i.e. “search.php”, into the folder “shortcodes” inside of your child theme … directly into that folder without further subfolders.

The documentation of Enfold also explains the part for your child theme functions.php.
I didn’t found the link two days ago, that’s why i linked to that forum thread, but here it is:

=> https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

you didn’t mention mobile view initially … i wanted to help … not to do your entire work … :-)

but, here you go … nicely solved on mobile too:

=> https://enfold.tabulor.de/test

Here the text is centered … with a background color (+ transparency) … and it adjusts its size depending on its text content:

=> https://enfold.tabulor.de/sample-page

That’s the soluction i posted before. Reopened the staging domain.
Isn’t it, what you wanted to achieve?

I think it would be a lot more reliable to not set an absolute width. Because when you change the text or its size or the size of the browser window (on mobile) it won’t fit. And every time someone wants to add a page or change a page title you would have to adjust the css with an absolute setting in the css.

Versuche mal im Browser die direkten URLs zur Admin einzugeben/aufzurufen:

deineDomain.de/wp-login.php
deineDomain.de/wp-admin/
deineDomain.de/wp-admin/index.php

Yes … after adding the filter it should work to copy/edit the shortcodes into that folder.
Remember to disable or regenerate any possible caches.

Yes … it’s only for system info text … like in your example list … can’t be edited normally.

Default is (should) be the way you expect it to be … i just tried it on a staging site …

The sorting depends on the “publish date” of portfolio entries.
You can edit those publish dates to change the order of the items.
On the right side of an item view in the browser/frontend it navigates to the next newer item.

—–
Edit: Dr. Schwartz needs an other font for the logo-like info in the header area … don’t use ‘Bank Gothic’ like that … brrrrr … :-)

—–
Edit2:

I followed the url to your test site … and the behaviour is ok … like expected …
Look at your page “Projekte”: the top entry is “Arealbebauung Margaretenhöhe” because it was published last (newest publish date). From there downwards are more entries sorted from new to old.
And when you select a detail view from one of those, the “left”/”right” navigation mirrors exactly the order from the page “Projekte”.

• This reply was modified 5 years, 11 months ago by cg.

There is already a specific ID on every page you can address with custom CSS.
For example: HTML > Body > class > “page-id-2”

But i’m not sure if i completly understand your goal … can you show your current status? … and maybe a quick illustration of what you want to achieve?

As far as i understand, i did a little example of how i would solve that.

Result: => https://enfold.tabulor.de/sample-page

– a ‘Color Section’ for the background with a unique ID -> “hero”
– a simple ‘Text Block’ inside of it … or “Special Heading’, depending on the page structure / semantic
– some Custom CSS in Quick CSS or preferably in the style.css of a child theme

#hero .avia_textblock  p {
  display: table;
  background: rgba(255,255,255,0.8);
  color: #222222;
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  margin: auto;
  padding: 30px 30px 20px 30px;
}

• This reply was modified 5 years, 11 months ago by cg.

Am Besten ist natürlich ein CDN … weil das auch gleichzeitig die Latenzzeiten, Expire-Header, Cache-Invalidation, etc. für den Abruf von statischen Inhalten insgesamt (also auch gecachtes HTML, CSS, JS) verbessert.

Für die meisten WordPress-Seiten ist das aber alles eher eine Optimierungsstufe, die nicht sooo relevant ist. Statt auf Google Pagespeed zu gucken und an ein paar KB rumzupfrimeln, wäre der Fokus auf gute eigene Inhalte oft ratsamer und die Energie dort besser investiert. :-)
Durch die ganzen hübschen “Scores” die so verteilt werden, ist das Thema aber insgesamt stärker im Blick. Man kann also auch abwarten und darauf setzen, dass z.B. der eigene (oder ein anderer) Hosting-Provider eine gute Lösung anbietet. Da gibt es ja auch schon ein paar. Richtig gut zu lösen ist das jedenfalls, wenn man oberhalb von Theme und CMS ansetzt; also Server-Struktur. “Kostenlos” und gleichzeitig perfekter Speed-Score ist eben nicht drin … und auf einem Shared-Hosting wohl auch nicht erreichbar … und vor allem oft auch nicht nötig …

Was ich für kleine, eher statische Seiten auch schon gemacht habe … mit sehr guten Ergebnissen, aber eben nicht automatisierbar und daher wartungsaufwendiger:
– Seite so weit fertig machen
– dann einmal “FileOptimizer” über alle Mediendateien laufen lassen (lossy compression)

Die WordPress-Plugins habe ich nach kurzem Testen immer wieder weggeschubst … die Free Version reichte (mir) meist nicht aus, und wenn es Geld kostet, dann lieber 5-10 Euro monatlich für einen CDN …
Mit dem hier kam ich noch am ehesten hin: https://wordpress.org/plugins/wp-smushit/

WordPress verwendet serverseitig die GD Lib um die verschiedenen Bildgrößen zu erstellen. Die Kompressionsmethoden dabei sind nicht sehr effizient und die Bilder haben oft selbst bei kleineren Pixelabmessungen eine größere Datenmenge.
Enfold kann darauf keinen direkten Einfluss nehmen.

Optionen/Ansätze:
– die von WP verwendete Qualitätsstufe für die generierten Bilder reduzieren (jpeg Kompression)
– auf dem Server ein Script per Cron laufen lassen, das die Bilder nachträglich und regelmäßig z.B. mit “Imagemagick” optimiert
– einen externen Service nutzen, der die komprimierten Bilder liefert; z.B. WP Plugins “Optimus” oder “EWWW Image Optimizer”
– einen CDN einbinden der Bild-Optimierungen vornimmt, z.B. “CloudFlare” mit “Mirage” und/oder “Polish”

Neben der verbesserten Kompression von Bildern kann zur Optimierung auch die Auslieferung/Einbindung der Bilder im HTML verbessert werden, Stichworte: Responsive Images, picture-Tag, srcset

• This reply was modified 5 years, 11 months ago by cg.