Hintergrund bearbeiten

28.06.2017 19:26
#1
Pr

Hallo Leute,

erst einmal großes Kompliment. Was man hier sieht, macht wirklich einen guten Eindruck.

Nun zu meiner Frage:
Ich wurde mit der Bearbeitung einer Website für unser kleines Unternehmen beauftragt und musst jetzt feststellen, dass der durchgängig weiße Hintergrund dann doch nicht wirklich hochwertig aussieht. Durch die Suchfunktion bin ich auf die Möglichkeit gestoßen, Bilder auf die ganze Breite zu legen oder einen farbigen Balken hinter Texten oder Bildern (ebenfalls komplette Breite) einblenden zu lassen. Das macht in meinen Augen wirklich etwas her, die Frage ist nur, ob man so etwas auch mit absolut null Programierkentnissen hinbekommt. Der Balken hinter den Text würde mir persönlich schon reichen, da der Rest wahrscheinlich zu anspruchsvoll sein wird.

Aber gibt es die Balken-Option auch für Beginner oder benötigt man hierzu gewisse Fähigkeiten?

Vielen Dank schon einmal für Eure Antworten

Freundliche Grüße


 Antworten

 Beitrag melden
29.06.2017 15:14
avatar  Charles
#2
avatar
Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
29.06.2017 23:12
#3
Pr

Erst einmal vielen Dank!

Auf die Gefahr hin, dass sich hier gleich alle mit der flachen Hand an die Stirn schlagen, möchte ich jedoch nochmals kurz nachfragen.

Ich habe die Spalte, welche hinterlegt werden soll, markiert. Habe mir im Anschluss diesen Code der Spalte rauskopiert, mir eine Farbe im Editor ausgesucht und dann die beiden Codes, welche in der Anleitung angeführt werden, untereinander in den Head-Bereich kopiert.
Scheinbar war dies aber nicht so ganz erfolgreich, da sich auf der Startseite nichts getan hat

Erkennt hier zufällig jemand (den wahrscheinlich völlig dämlichen) Fehler? Der Code wäre:


<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {



/* This is the Columns Element that we are converting - identify it here */

$( "#cc-m-11756100899" ).wrap( "<div id='section1' />" );



});



//]]>

</script>

<style type="text/css">

/*<![CDATA[*/



/* This code prevents side-scrolling */

body { overflow-x: hidden;}

.jtpl-main {overflow-x:hidden;}



/* This is a fullwidth section - add your comment to describe it */

#section1 {

width: 100vw;

position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

background: #333333;

}



/*]]>*/

</style>


 Antworten

 Beitrag melden
30.06.2017 07:46 (zuletzt bearbeitet: 30.06.2017 07:50)
avatar  Charles
#4
avatar

Auf die schnelle fallen mir nur 3 Sachen ein.

1. du solltest mal den Browser Cache leeren

3. hast du auch das kopiert?:

1
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"> </script>
 


Siehe "Step 4: Add the JavaScript"

2. vielleicht stimmt #cc-m-11756100899 nicht

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
01.07.2017 12:02 (zuletzt bearbeitet: 01.07.2017 12:14)
#5
Pr

Tausend Dank!!! Es hat tatsächlich funktioniert!

Eine Frage: Muss ich mich pro Seite zwischen Bild und Balken entscheiden? Ich habe auf der Homepage der Seite zunächst einmal eine Spalte per grauem Hintergrund hinterlegt. Weiter unten wollte ich nochmals ein Bild über die gesammte Breite einfügen. Ich habe also wieder eine Spalte angelegt und bin nach der Anleitung verfahren. Das hat in diesem Bereich prinzipiell auch gut funktioniert, leider hat es aber den grauen Balken von oben direkt mitüberschrieben, sodass das Bild nun wuasi zweimal auftaucht. Hättest du dafür zufälligerweise auch noch eine Lösung?

Aber nochmals vielen Dank!


Edit: Bei mehreren farbigen Balken geht es problemlos


 Antworten

 Beitrag melden
01.07.2017 21:20
avatar  Charles
#6
avatar

Das geht natürlich auch, steht aber auch alles im Tutorial.
Ich hab dir den Abschnitt mal rauskopiert:

Zitat
Placing multiple sections on one page
If you want to use several sections on your page, you will need to add a bit more code.

In the JavaScript section, duplicate this line but make sure that the id is replaced for each one and that you change the word 'section1' to be 'section2' and so forth:

$( "#cc-m-12285023130" ).wrap( "<div id='section1' />" );

In the CSS section, paste in additional CSS blocks, making sure to update section1 with section2 or section3 as needed.

Here's what the code looks like for http://brentfullwidth.jimdo.com/ which uses three full-width sections, one of each type:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

$( "#cc-m-12219240478" ).wrap( "<div id='section1' />" );
$( "#cc-m-12219243378" ).wrap( "<div id='section2' />" );
$( "#cc-m-12219244778" ).wrap( "<div id='section3' />" );

});

//]]>
</script>

<style type="text/css">
/*<![CDATA[*/


/* This code prevents side-scrolling */
body { overflow-x: hidden;}
.jtpl-main {overflow-x:hidden;}

/* This is the first fullwidth section */
#section1 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: #c7b69f;
}

/* This is the second fullwidth section */
#section2 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url("http://brentfullwidth.jimdo.com/app/download/12219261678/coffee-beans-crop.jpg?t=1435355036") no-repeat center center;
}

/* This is the third fullwidth section */
#section3 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url("http://brentfullwidth.jimdo.com/app/download/12231987478/bridget_light.jpg?t=1435614528") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/*]]>*/
</style>

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
01.07.2017 23:45
#7
Pr

Nochmals ein unfassbar großes Dankeschön!!! Ist mit Sicherheit nicht selbstverständlich, sich für fremde Menschen so viel Zeit zu nehmen.

Auch wenn ich es fast schon ein wenig unhöflich finde, hätte ich jedoch noch eine letzte Frage.

Ich habe viel Spalten untereinander. Links jeweils Text, rechts jeweils ein passendes Motiv dazu. Wenn ich zwei der Spalten jetzt jedoch farblich hinterlege, zieht sich das Textfeld bis an den Rand. auch die Überschrift darüber verrutscht leider richtung Rand. Hättest du zufälligerweise dafür auch noch eine Lösung? Dann wäre die Seite endlich perfekt

Ganz liebe Grüße


 Antworten

 Beitrag melden
03.07.2017 07:42
avatar  Charles
#8
avatar

Da müsste man sich die Seite mal angucken können um zu wissen woran es liegt.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
03.07.2017 16:42
avatar  az_
#9
avatar
az_

...man kann dazu mit sections arbeiten, muss man aber nicht:

- https://expanding.jimdo.com/hacks/full-width-slider/

Diese Methode lässt sich auf die meisten Jimdo-Elemente anwenden.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!