Hallo AnnaSophie!
Ich habe hier mal einen Chrashkurs zusammen geschrieben:
1) Grundfunktionen:
Unwichtiges ist in HELLGRAU!
Wenn sich die Seite oeffnet, siehst Du unten mittig
diesen BUTTON. Oeffnen!
Du siehst dann dieses MENUE
GRAUE FELDER-links
1) Einstellungen( brauchst Du derzeit nicht) 2) Zoom 3,4,5) Darstellung Bildschirm, Tablett. phone ( zum Ueberpruefen der Arbeit)
Das rechte GRAUE FELD: Arbeitsmodus:
1) Felder werden bei Hover sichtbar 2) Felder werden bei klick sichtbar 3)alles sichtbar(schlecht)
VIOLETT-mitte
1) Laden( nicht noetig) 2) Modul speichern (nicht noetig) 3) kuebeln(bitte nicht) 4) Einstellungen(bitte nicht)
5) kleine UHR: falls Fehler oder so, kannst Du hier Timeline zueueckgehen!
6) Exportieren ( brauchst Du nicht)
TEXTE BEARBEITEN
Ueber Textfeld hover, bis graues mini-menue erscheint
dort auf das ZAHNRAD klicken.
Fenster Text Einstellungen geht auf.
Text editieren..
gleich ueberhalb des Textfeldes ist ein MENUE,
2tes von links ist ein grosses B fuer Bold,
die Ueberschriften sind so…
6) Zeilen wegen Handy NICHt ZU LANGE machen,
ganz oben „Erdbeerchrunch ist so das maximum“
ACHTUNG: Neben dem Text befindet sich eine (unsichtbare) CODE Datei.
DIE IST ESSENZIELL, ohne der geht gar nichts!
SPEICHERN rechts-FERTIG :)!
WORKFLOW:
Hier die App schliessen.
Mit Maus/stift/etc + control Taste
kannst Du auch die gesichterte Arbeit
in neuem Reiter ansehen!
maria & josef
Dokumentation der zusaetzlichen
Codes & Scripts
1) Header backgroundimage ist mit der
css klasse parahacks versehen. diese dient der feinjustage auf den div. devices.
(negative pixelangabe verschiebt das bild horizontal)
der code befindet sich in den seiteneinstellungen > advanced > custom css
.parahacks .et_parallax_bg {
position: absolute;
width: 100%;
background-position:50% -95px !important;
}
1) Der Header BG (TYPO & LOGO) ist im CSS manuell eingefuegt (header-row/advanced/custom css)
1) Screen:
display:flex;
overflow:hidden;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(https://www.mariaundjosefwien.at/wp-content/uploads/2023/12/HEADER900-1.png)
2) Tablett :
display:flex;
overflow:hidden;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(https://www.mariaundjosefwien.at/wp-content/uploads/2023/12/HEADER900.png)
3) Mobile:
display:flex;
overflow:hidden;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(https://www.mariaundjosefwien.at/wp-content/uploads/2023/12/HEADER500-e1707070192130.png)
maria & josef
CODE for MOBILE-PARALLAX
code ist im divi > theme options > integration > add code to the head
<script>
jQuery(document).ready(function($) {
// Mobile device check
$is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if ($is_mobile_device) {
// Function to check if an element is in the Viewport
isInViewport = function(elem) {
elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
// Apply Parallax transform calculations when scrolling
$(window).scroll(function() {
$(„.et_parallax_bg“).each(function() {
var $this_parent = $(this).parent();
// Check if the parent element is on-screen
var $is_visible = isInViewport($this_parent);
if ($is_visible) {
element_top = $this_parent.offset().top,
parallaxHeight = $(this).pare
nt(„.et_pb_fullscreen“).length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .4 * $(window).height() + parallaxHeight,
main_position = „translate(0, “ + .4 * ($(window).scrollTop() + $(window).height() – element_top) + „px)“;
$(this).css({height: bg_height,“-webkit-transform“: main_position,“-moz-transform“: main_position,“-ms-transform“: main_position,transform: main_position});
}
});
});
}
});
</script>
maria & josef
CODE FOR 2-6 COLUMNS ON TABLETT & MOBILE
code ist im divi >theme options >general >css codes
CSS Class – s h o r t h a n d c o d e s f o r s t a c k i n g:
2 Columns:
two_col-mob, two-col-tab
3 Columns:
three_col-mob, three-col-tab
4 Columns:
four_col-mob, four-col-tab
5 Columns:
five-col-mob, five-col-tab
6 Columns:
six-col-mob, sic-col-tab
/****************** Change Columns for Mobile and Tablett NO MARGIN ********************/
/* 2 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .two-col-mob .et_pb_column {
width:50% !important;
}
html .et-db .two-col-mob .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .et-db .two-col-mob .et_pb_column:not(:nth-child(2n)) {
margin-right:0% !important;
}
}
/* 3 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .three-col-mob .et_pb_column {
width:33.334% !important;
}
html .et-db .three-col-mob .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .et-db .three-col-mob .et_pb_column:not(:nth-child(3n)) {
margin-right:0% !important;
}
}
/* 4 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .four-col-mob .et_pb_column {
width:25% !important;
}
html .et-db .four-col-mob .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .et-db .four-col-mob .et_pb_column:not(:nth-child(4n)) {
margin-right:0 !important;
}
}
/* 5 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .five-col-mob .et_pb_column {
width:20% !important;
}
html .et-db .five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}
html .et-db .five-col-mob .et_pb_column:not(:nth-child(5n)) {
margin-right:0% !important;
}
}
/* 6 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .six-col-mob .et_pb_column {
width:16.667% !important;
}
html .et-db .six-col-mob .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .et-db .six-col-mob .et_pb_column:not(:nth-child(6n)) {
margin-right:0% !important;
}
}
/*************** Change Tablet Columns ***************/
/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .one-col-tab .et_pb_column {
margin-right:0 !important;
width:100% !important;
}
html .et-db .one-col-tab .et_pb_column:not(:last-child) {
margin-bottom:30px !important;
}
}
/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .two-col-tab .et_pb_column {
width:50% !important;
}
.two-col-tab .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .et-db .two-col-tab .et_pb_column:not(:nth-child(2n)) {
margin-right:0% !important;
}
}
/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .three-col-tab .et_pb_column {
width:33.334% !important;
}
html .et-db .three-col-tab .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .et-db .three-col-tab .et_pb_column:not(:nth-child(3n)) {
margin-right:0% !important;
}
}
/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .four-col-tab .et_pb_column {
width:25% !important;
}
html .et-db .four-col-tab .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .et-db .four-col-tab .et_pb_column:not(:nth-child(4n)) {
margin-right:0% !important;
}
}
/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .five-col-tab .et_pb_column {
width:20% !important;
}
.five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}
html .et-db .five-col-tab .et_pb_column:not(:nth-child(5n)) {
margin-right:0% !important;
}
}
/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .six-col-tab .et_pb_column {
width:16.667% !important;
}
html .et-db .six-col-tab .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .et-db .six-col-tab .et_pb_column:not(:nth-child(6n)) {
margin-right:0% !important;
}
}
/****************** Change Columns for Mobile and Tablett NO MARGIN END***************** */
maria & josef
CODE SPEISEKARTE SPECIALS:
<style>
.specials_speisen { display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
justify-items: stretch;
align-items: end;
grid-template-areas:
„namen_speise speise_points_center speise_preis“;
}
.namen_speise {
justify-self: start;
align-self: end;
grid-area: namen_speise;
font-size: clamp(1rem, 0.536vw + 0.893rem, 1.375rem);
line-height: clamp(1.3rem, 0.696vw + 1.161rem, 1.788rem);
}
.speise_points_center {
justify-self: stretch;
align-self: end;
grid-area: speise_points_center;
margin:0.9ch!important;
}
.speise_preis {
justify-self: end;
align-self: end;
grid-area: speise_preis;
font-size: clamp(1rem, 0.536vw + 0.893rem, 1.375rem);
line-height: clamp(1.3rem, 0.696vw + 1.161rem, 1.788rem);
padding-left:1ch;
}
</style>