Landingpage-Vorlage mit Feedback-Formularen. Zielseitenvorlagen. Landing Page: Codebeispiele mit Satz, Parallaxe und Zähler
Eine einseitige Website ist praktisch für Geschäftsleute, da sie buchstäblich an einem Tag erstellt werden kann. Wenn eine laden Sie eine einseitige Website-Vorlage herunter Fertig, dann können Sie eine Website für Ihr Unternehmen für einen Mindestbetrag erstellen, da Sie nur für das Hosting bezahlen müssen. Für den Kunden ist eine einseitige Seite praktisch, da alle Informationen so kurz und strukturiert wie möglich dargestellt werden und nichts überflüssig ist. Einseitige Websites weisen aufgrund ihrer Kundenfreundlichkeit häufig höhere Conversions auf als andere Arten von Websites.
Wie wähle ich eine einseitige Vorlage aus?
- Aussehen. Es ist wünschenswert, das Design im allgemeinen Stil des Unternehmens zu gestalten. Die Benutzeroberfläche sollte nicht zu unpassende Farben haben. Einige Pastellfarben haben die Benutzer jedoch schon lange gelangweilt, sodass Helligkeit und Kreativität willkommen sind.
- "Gewicht". Animiertes Design, flackernde Banner, "schwere" Elemente und Schieberegler können die Website so überlastet machen, dass das Öffnen länger dauert als bei Mitbewerbern.
- Die Anzahl der Blöcke und die Möglichkeit, sie anzupassen. Entscheiden Sie vor der Auswahl einer Vorlage genau, welche Blöcke mindestens benötigt werden, um die Seite nicht zu überladen. Wenn Sie eine Vorlage ausprobieren, finden Sie heraus, ob Blöcke entfernt und ersetzt werden können.
- Die browserübergreifende Kompatibilität und das reaktionsschnelle Design werden das Publikum potenzieller Kunden erheblich erweitern. Stellen Sie daher sicher, dass Sie nur auswählen reaktionsschnelle Vorlagen für eine Seite.
Wir bieten vorlagen für eine Seite kostenlos
Wenn Sie sich für Ihr Unternehmen entscheiden Landing Page, Vorlage herunterladen auf unserer Website. Wir überprüfen alle Vorlagen sorgfältig auf Viren, damit Sie keine Angst haben, eine infizierte Datei herunterzuladen. Alles zielseitenvorlagen In unserem Katalog finden Sie ein modernes Design, das in verschiedenen Stilen hergestellt wird. Die Möglichkeit, die Anzahl der Blöcke anzupassen, das Farbschema und andere Funktionen zu ändern, hilft Ihnen dabei, eine einzigartige Original-Website basierend auf einer einfachen Vorlage zu erstellen.
Wir laden Sie ein, einseitige Website-Vorlagen herunterzuladen
Das Hauptproblem derer, die sich für den Download entschieden haben zielseitenvorlage kostenlosist eine riesige Menge an Viren und Fehlern in kostenlosen Vorlagen. Daher ist es sehr wichtig, eine sichere und zuverlässige Website zu finden. Wir laden Sie ein, uns zu besuchen, da wir die Sicherheit sorgfältig überwachen. Darüber hinaus werden wir Sie mit dem breitesten Sortiment begeistern hTML einseitige Vorlagen, herunterladen was du jetzt kannst!
Lesen Sie den Text mehr ...Grüße, meine lieben Leser. Heute werden wir über die technischen Punkte sprechen, mit denen wir uns steigern können umsatzumwandlung ihre Waren oder Dienstleistungen. Einer der wichtigsten Punkte ist eine durchdachte Landingpage mit Produkten. Die sogenannte Landing Page, über deren Erstellung wir weiter sprechen und fertige Seitencodes erhalten werden.
Was ist eine Zielseite? Dies ist die Seite, auf der Personen normalerweise landen, nachdem sie auf eine Anzeige geklickt haben. Erstellt für ein Angebot: Produkt, Service oder Abonnement. Eine effektive Zielseite ist der Grundstein für erfolgreiches Internet-Marketing. Das Produkt kann das beste auf dem Markt sein, die Anzeigen sind perfektioniert, aber ohne eine gute Zielseite liefern die Bemühungen nicht 100% des Ergebnisses. Sie sagt den Besuchern, was angeboten wird und warum sie es wollen sollten. Ein Gefühl der Dringlichkeit trägt zu einer schnellen Entscheidungsfindung und dem Übergang des Benutzers in die Kategorie eines Kunden bei.
Wie erstelle ich eine Landing Page? Es ist falsch zu glauben, dass die Antwort in der Fähigkeit zum Satz liegt. Eine gute Zielseite ist das Ergebnis einer gut koordinierten Arbeit an Zielen, Text, Design und Code. Zielseiten, von denen Beispiele unten aufgeführt sind, helfen Anfängern, die Grundlagen der Arbeit mit Layouts zu erlernen, ersetzen jedoch nicht die Konvertierungstexte und das Verständnis der Zielgruppe. Sie können sie auch mit verschiedenen erstellen konstruktoren Landing Page.
Fragen Sie sich also vor dem Erstellen einer Zielseite:
- Was wird eine Person tun, nachdem sie die Zielseite aufgerufen hat? Wird er etwas kaufen? Füllen Sie das Formular aus? Abonnieren Sie den Newsletter? Legen Sie klare Ziele fest, bevor Sie Ihre Conversion-Rate verfolgen.
- Wer sind meine Konkurrenten? In der Tat sind dies drei Fragen: Wer, wie erfolgreich sind sie und wie können ihre Leistungen angewendet werden? Nachahmung ist die aufrichtigste Form der Schmeichelei. Wenn Konkurrenten das tun, was funktioniert, wiederholen Sie dies auf Ihrer Website.
- Wer ist mein Publikum? Je besser Sie Ihre Nische und Zielgruppe verstehen, desto größer sind die Chancen, dass sich Ihre Bemühungen auszahlen.
Sie müssen alle Informationen anbieten, die Sie benötigen, aber nicht genug, um einen potenziellen Kunden zu überwältigen und zu vertreiben.
Beispiele zum Erstellen einer Zielseite + Codierung für Dummies
Bevor wir zur Sache kommen, werfen wir einen kurzen Blick auf HTML und CSS. Wenn Sie wissen, wie sie funktionieren, können Sie eine Zielseite erstellen.
Html - eine Browser-Markup-Sprache zur Visualisierung von Websites. Geschrieben mit Tags in spitzen Klammern, die den Inhalt definieren.
Das Tag wird geöffnet (<>) und schließt () um die Füllung:
<тег>inhaltтег>
Zur punktgenauen Anpassung werden Attribute nach dem Namen hinzugefügt:
<тег атрибут="значение">inhaltтег>
CSS - Definiert, wie HTML-Elemente angeordnet werden. Besteht aus Selektoren, Eigenschaften und Werten:
# Selektor (Eigenschaft: Wert;)
Der Selektor entspricht dem Namen eines bestimmten Tags in HTML. Das Ändern von Werten und das Hinzufügen von Eigenschaften steuert das Erscheinungsbild. Sie können unterschiedliche Seiten erstellen, indem Sie verschiedene CSS-Stile auf denselben HTML-Code anwenden.
5 erste Schritte
Für ein schnelles Layout verwenden wir eine Vorlage mit einem minimalen Design basierend auf Bootstrap. Es ist ein System mit eigenen Selektoren, das weltweit eingesetzt wird, um das Layout zu beschleunigen.
Es sieht bescheiden aus.
Aus diesem Fisch wird in mehreren Schritten ein Ort für jeden Geschmack geschaffen.
Verzeichnisstruktur im Ordner:
- index.html: Dies ist die Hauptdatei, die wir bearbeiten werden.
- / Assets: Hilfsdateien befinden sich hier:
- / css: Verzeichnis enthält Bootstrap- und Symbolstile. Die zu bearbeitende Datei ist main.css.
- / img: Ordner für Site-Bilder.
- / fonts: Symbolschriftarten.
- / js: Javascript-Dateien für Bootstrap.
Schritt 1: Verwenden der Kopfzeile
Die Überschrift und die Unterüberschriften sind wichtige Punkte, um den Wert des Vorschlags klar zu kommunizieren.
Lassen Sie uns den Titel und den Namen der Site ändern. Hier ist die Fähigkeit zum Setzen nicht erforderlich - Ihr Text wird an den Stellen geschrieben, die auf dem Bildschirm gelb hervorgehoben sind.
Schritt 2. Kürze ist die Schwester der Bekehrung. Vorteile und Preise hinzufügen
Es dauert 4 Abschnitte:
- vorteile;
- preise;
- bewertungen;
- aufruf zum Handeln.
Entwerfen wir den Hauptinhaltsabschnitt "main", in den wir die erforderlichen Abschnitte einfügen:
…..
…..
…..
…..
Wir füllen es mit Füllung anstelle von Punkten.
Für den Abschnitt "Vorteile" ist folgender Code erforderlich:
Leistungen
Schnell
Zuverlässig
Sed diam nonummy
Profitabel
Elit, sed diam nonummy
Technisch
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy
Zuverlässig
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy
Profitabel
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy
Technisch
Lorem ipsum dolor sitzen amet, consectetuer adipiscing
Zuverlässig
Lorem ipsum dolor sitzen amet, consectetuer adipiscing
Profitabel
Lorem ipsum dolor sitzen amet, consectetuer adipiscing
Inhalt zur Klarheit:
Es sieht zwar schlampig aus, aber es gibt keinen Grund zur Panik, wir fahren fort.
Wir schreiben die Preise vor. Der Inhalt ändert sich wie im ersten Schritt. Allgemeine Beschreibung mit Tarifklassen und drei Tarifen.
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Übung ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo Konsequenz.
Tarifpläne
Tarifnummer 1
$10
pro Monat / pro Person
- Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifnummer 2
$20
pro Monat / pro Person
- Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifnummer 3
$30
pro Monat / pro Person
- Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Sieht so aus.
Obwohl wir nicht am Erscheinungsbild der zukünftigen Zielseite interessiert sind, werden wir im Folgenden Beispiele für die Änderung von Stilen betrachten.
Schritt 3: Vertrauenssignale und Handlungsaufforderung
Die Verwendung gezielter Signale zeigt den Besuchern an, dass die Marke vertrauenswürdig ist. Signale können viele Formen annehmen, aber die Klassiker sind Kundenbewertungen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Übung ullamco laboris nisi ut aliquip ex ea Commodo:
Kundenbewertungen
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Übung ullamco laboris nisi ut aliquip ex ea Commodo. "
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Übung ullamco laboris nisi ut aliquip ex ea Commodo. "
Lassen Sie uns einen Aufruf zum Handeln einrichten.
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Übung ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo Konsequenz:
Profitieren Sie von der heutigen Bestellung
Testimonials helfen potenziellen Kunden bei der Kaufentscheidung für ein Produkt. Aus Gründen der Klarheit benötigen wir Avatare, daher werden wir sie sofort an Ort und Stelle schreiben - unter jedem Zitat.
Kundenname.
Schritt 4: Netzintegration und mobilfreundlich
Wir brauchen Bootstrap-Container, um das Gitter einzufügen. Es ist wichtig, sich die Gesamtzahl der zulässigen Spaltensegmente zu merken - 12. Die Klasse bestimmt die Breite der Inhaltsanzeige. Der Vorteil dieses vorgefertigten Rasters besteht darin, dass Container auf Reaktionsfähigkeit ausgelegt sind und sofort auf mobile Geräte anwendbar sind. Detaillierte Beschreibung auf der offiziellen Website. Das Gitter sieht so aus.
Lassen Sie uns den Inhalt von "main" in einen Container einwickeln. Dazu steht es im oberen Teil:
Wenn der Block die gesamte Bildschirmbreite haben soll, wird der Container eingefügt. Hier wird es ein Jambotron und ein Aufruf zum Handeln sein.
Wir wickeln alle Elemente, die positioniert werden müssen, mit Zeilentrennzeichen übereinander.
Wir können jetzt die Spalten in der Breite anpassen und uns dabei auf das Bootstrap-Raster konzentrieren. Nach dem Einwickeln klebte die Füllung nicht mehr an den Rändern des Bildschirms, und es traten saubere Vertiefungen auf.
Wir setzen die Preise in einer Reihe mit der Spaltenklasse col-lg-4. Innerhalb von Zeilenzeilen ist es nicht mehr erforderlich, separate Divas zum Umschließen zu schreiben. Sie können diese mit den vorhandenen durch ein Leerzeichen getrennten kombinieren.
In Analogie dazu haben wir Spalten für den Bereich Bewertungen und Vorteile eingerichtet. Wenn Sie ein Element zur Seite verschieben müssen, verwenden Sie die Spaltenklasse col-lg-offset-2 offset. Die Zahl am Ende bestimmt, wie viele Basisspalten die Verschiebung benötigt.
Schritt 5. Schriftarten und Symbole
Wir werden Schriftarten für Google Font-Titel implementieren. Wenn Sie auswählen, öffnen Sie die Registerkarte Import und kopieren Sie die Daten daraus in die Datei main.css. Wir fügen der Datei auch Header-Selektoren hinzu, für die die neue Schriftart angewendet wird.
@import "https://fonts.googleapis.com/css?family\u003dRoboto+Condensed" / * Schriftart für Überschriften importieren * /
.navbar-Marke,
h1,
h2,
h3,
h4,
h5,
h6 (
Schriftfamilie: "Roboto Condensed", serifenlos; / * Googlephone-Ausgabe * /
}
Aus Gründen der Übersichtlichkeit werden eine Klasse mit einem selbsterklärenden Namen, Textcenter und FontAwesome-Symbolen aus dem Bootstrap-Set registriert.
Damit ist die Vorbereitung abgeschlossen.
Landing Page: Codebeispiele mit Satz, Parallaxe und Zähler
Wir verwenden die drei beliebtesten Typen: mit einem Vorschlag, einem Formular und einem Countdown-Zähler. Während der Eingabe wird die Vorlage durch Effekte ergänzt.
Beispiel 1: mit einem Satz
Stellen wir den Hintergrund des Hauptkörpers und die Polsterung so ein, dass sie den ersten Bildschirm abdecken.
Jumbotron (
Hintergrund: # f5f5f5 url (../ img / fon.jpg) oben in der Mitte ohne Wiederholung;
maximale Breite: 100%;
Polsterung oben: 250px;
Polsterung unten: 200px;
Textausrichtung: Mitte;
}
Ändern Sie die Größe des Kopfes des Jambotrons von h2 auf h1. Als nächstes schreiben wir die Stile für die Elemente, die geändert werden müssen.
Beginnen wir mit den Symbolen.
Vorteile i (
Farbe: # cac4c4;
}
Nach dem Hash-Zeichen wird eine Farbe angegeben. Sie können Ihre Option mithilfe von HTML-Farbtabellen oder einem Bildeditor auswählen.
Einrückung für Abschnittsüberschriften
abschnitt h2 (
Polsterung: 30px;
Rand unten: 25px;
}
Wir ordnen das Erscheinen von Tarifen. Der Einfachheit halber erstellen wir unsere eigenen Klassen für die Elemente, die wir punktuell hervorheben möchten.
Tarifnummer 1
$10
pro Monat / pro Person
- Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Und viel CSS. Für welche Stellen die Websites verantwortlich sind, wird in den Kommentaren angegeben - / * zwischen Schrägstrichen mit einem Sternchen * /
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Tarif-Stile \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
/ * Gesamtansicht des Tarifs * /
.pricing_item (
Hintergrund: # f2f2f2;
Position: relativ;
Anzeige: -webkit-flex;
Anzeige: flex;
Flex-Richtung: Säule;
Elemente ausrichten: dehnen;
Textausrichtung: Mitte;
-webkit-flex: 0 1 330px;
Flex: 0 1 330px;
Polsterung: 2em 3em;
Rand: 1em;
Farbe: # 262b38;
Cursor: Standard;
Überlauf versteckt;
}
/ * Hintergrund ändern, wenn gedrückt wird * /
.pricing_item: hover (
Farbe: # 444;
Hintergrund: #daebef;
}
/ * individuelle Unterlage des Preisschildes in jedem Tarif * /
.pricing_item: Preis für das erste Kind (
Hintergrund: # 9ba9b5;
}
.pricing_item: n-tes Kind (2) .price (
Hintergrund: # 1f6098;
}
/ * auf Breitbildschirmen, Einrückungen und markieren Sie die mittlere Spalte des Tarifs * /
@ Media-Bildschirm und (Mindestbreite: 66.250em) (
.pricing_item (
Rand: 1,5 em 0;
}
.featured (
Z-Index: 10;
Rand: 0;
Schriftgröße: 1.15em;
}
}
/ * Header * /
.pricing_item h3 (
Schriftgröße: 2em;
Rand: 0,5 em 0 0;
Farbe: # 1d211f;
}
/ * Etikettenunterlage * /
.Preis (
Schriftgröße: 2em;
Schriftdicke: fett;
Farbe: #fff;
Position: relativ;
Z-Index: 100;
Zeilenhöhe: 95px;
Breite: 100px;
Höhe: 100px;
Rand: 1.15em Auto 1em;
Randradius: 50%;
Hintergrund: # 77a5cc;
-Webkit-Übergang: Farbe 0,3s, Hintergrund 0,3s;
Übergang: Farbe 0,3 s, Hintergrund 0,3 s;
}
/ * Währung * /
.währung (
Schriftgröße: 0.5em;
vertikal ausrichten: super;
}
/ * Klauselklärung * /
.Satz (
Schriftdicke: fett;
Rand: 0 0 1em 0;
Polsterung: 0 0 0,5 em;
Farbe: # 2a6496;
}
/ * aufführen * /
.pricing_item ul (
Schriftgröße: 0,95em;
Rand: 0;
Polsterung: 1,5 em 0,5 em 2,5 em;
Textausrichtung: links;
}
/ * Elemente auflisten * /
.pricing_item li (
Polsterung: 0,15 em 0;
}
/ * Rate Order Button * /
Schaltfläche .pricing_item (
Schriftdicke: fett;
Rand oben: Auto;
Polsterung: 1em 2em;
Farbe: #fff;
Randradius: 5px;
Hintergrund: # 428bca;
-Webkit-Übergang: Hintergrundfarbe 0,3s;
Übergang: Hintergrundfarbe 0,3s;
}
/ * Farbwechsel beim Drücken der Taste * /
.pricing_item button: hover,
.pricing_item button: focus (
Hintergrundfarbe: # 285e8e;
}
/ * Tarifhintergrund * /
.bg-2 (
Hintergrund: #dddddd;
}
Ergebnis
Kundenbewertungen. Lassen Sie uns ihnen einen ordentlichen Blick geben und den Ort bestimmen.
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Testimonials Stile \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
referenzen (
Polsterung: 4em 0;
Textausrichtung: Mitte;
}
.testimonials .avatar img (
Randradius: 50%;
float: left;
Anzeige: Inline;
Rand rechts: 1em;
Breite: 65px;
Höhe: 65px;
Rand unten: 30px;
}
.testimonials .avatar p (
Textausrichtung: links;
Polsterung: 1em;
Farbe: # 5d5d5d;
Schriftgröße: 900;
}
Der letzte Aufruf zum Handeln und die Fußzeile bleiben zu dekorieren.
/ * Aktion * /
.Aktion (
Hintergrund: # 476177;
Mindesthöhe: 180px;
Breite: 100%;
Polsterung: 4em 0;
Textausrichtung: Mitte;
}
.Aktion h2 (
Farbe: #fff;
Schriftgröße: 300;
}
.action p (
Farbe: #fff;
Textschatten: 0 1px 2px rgba (0, 0, 0, .2);
Schriftgröße: 1.2em;
}
.action .container (
Rand oben: 3em;
}
/ * Fusszeile * /
fusszeile (
Hintergrund: # 333333;
Polsterung: 1em 0;
Textausrichtung: rechts;
}
fußzeile p (
Farbe: #fff;
Zeilenhöhe: 1;
Texttransformation: Großbuchstaben;
Schriftgröße: 0.7em;
Rand oben: 0,5 em;
}
Der Fußzeile wurde die integrierte Bootstrap-Klasse btn-default zugewiesen.
Vorlage wiederbeleben. Wir werden das reibungslose Scrollen und die Schaltflächen für Abschnitte sowie die Animation von Text auf dem ersten Bildschirm einführen.
Damit die Übergänge funktionieren, werden wir einige der Abschnittsklassen durch ID ersetzen - für Vorteile und Tarife. Und wir werden den Schaltflächen Links zur ID zuweisen. Bildschirm - Was ist mit dem verbunden, was mit einer gelben Markierung hervorgehoben wird.
Stellen Sie die Polsterung auf die Tasten - jbutton. Das Scrollen beim Drücken funktioniert, aber sehr abrupt.
Glatte Übergänge werden mit Javascript oder jquery erstellt. Letzteres ist standardmäßig mit Bootstrap-Vorlagen verbunden.
Das Scrollen ist jetzt flüssig.
Hinzufügen von Animationen zu Text mit Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Dies ist eine vorgefertigte Open Source, die auf jeder Site verwendet werden kann. Legen Sie die Datei vom Github in den CSS-Ordner und schreiben Sie den Pfad.
Wir wählen hier die Effekte aus: https://daneden.github.io/animate.css/... Wir haben fadeInDown ausgewählt. Es ist im Code wie folgt geschrieben:
Wenn die Seite jetzt geladen oder aktualisiert wird, wird der Text animiert. Getan.
Beispiel 2: mit Form- und Parallaxeneffekt
Je mehr Formularfelder einem Besucher angeboten werden, desto weniger wahrscheinlich ist es, dass er sie ausfüllt. Fragen Sie nur nach den Mindestinformationen, die Sie benötigen.
Analog gesammelt. Wir werden die Hintergründe und Farben ändern. Und natürlich fügen wir die Form hinzu.
Lass uns beginnen mit parallaxe .
Ändern Sie den Jumbotron-Hintergrund in transparent:
hintergrund: transparent;
Fügen Sie im Kopf das Skript ein:
Die erste Zeile im Körper ist der Behälter für die Parallaxe:
Und in CSS sein Verhalten:
Bgparallax (
Hintergrund: URL (/../ img / fon.jpg) wiederholen;
Position: fest;
Breite: 100%;
Höhe: 300%;
oben: 0;
links: 0;
Z-Index: -1;
}
Parallaxe ist bereit. Um jedoch Änderungen am Code und an einem neuen Hintergrund vorzunehmen, muss das Farbschema neu zugewiesen werden.
Das Menü dunkel machen:
Navbar-Standard (
Hintergrundfarbe: # 333;
Randfarbe: # 444;
Farbe: dunkelgrau;
Randradius: 0;
}
Navbar-Standard .navbar-nav\u003e .active\u003e a, .navbar-default .navbar-nav\u003e .active\u003e a: hover, .navbar-default .navbar-nav\u003e .active\u003e a: focus (
Farbe: dunkelgrau;
Hintergrundfarbe: rgba (0, 0, 0, 0,5);
}
Wir ersetzen den Satz in Jumbotron durch einen neuen - mit dem Formularcode:
Landing Page macht Besucher zu Kunden
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
-
-
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy.
Und wir schreiben das Aussehen vor
/ * bilden * /
.headform-list (
Listenstil-Typ: keine;
Zeilenhöhe: 26px;
Schriftgröße: 400;
Polsterung: 0px;
Rand unten: 40px;
}
.headform (
Überlauf versteckt;
Position: relativ;
Hintergrundfarbe: rgba (0,0,0, 0,4);
Polsterung: 35px 40px;
Randradius: 8px;
}
eingabe, Schaltfläche, Auswahl, Textbereich (
Breite: 100%;
Rand unten: 10px;
}
.headform-list li .fa (
Position: absolut;
oben: 0px;
links: 0px;
Breite: 42px;
Schriftgröße: 24px;
Textausrichtung: Mitte;
}
.headform-list li (
Position: relativ;
Mindesthöhe: 38px;
Polsterung links: 62px;
Rand unten: 20px;
}
.jumbotron p (
Farbe: #fff;
Schriftgröße: 16px;
Schriftstil: kursiv;
}
Der Text des Jambotron kam auch hierher, da er Änderungen forderte.
Tarife neu färben.
/ * Gesamtansicht des Tarifs * /
.pricing_item (
Hintergrundfarbe: rgba (0,0,0, 0,4); / * Zeile geändert * /
Randradius: 4px; / * Zeile geändert * /
Position: relativ;
Anzeige: -webkit-flex;
Anzeige: flex;
-Webkit-Flex-Richtung: Spalte;
Flex-Richtung: Säule;
-webkit-align-items: strecken;
Elemente ausrichten: dehnen;
Textausrichtung: Mitte;
-webkit-flex: 0 1 330px;
Flex: 0 1 330px;
Polsterung: 2em 3em;
Rand: 1em;
Farbe: # f2f2f2; / * Zeile geändert * /
Cursor: Standard;
Überlauf versteckt;
Kastenschatten: 0 0 15px rgba (0, 0, 0, 0,05);
}
/ * Hintergrund ändern, wenn gedrückt wird * /
.pricing_item: hover (
Farbe: # 444;
Hintergrund: #ddd; / * Zeile geändert * /
}
Jetzt sehen sie so aus - transparenter Hintergrund und abgerundete Ecken.
Die Vorlage ist fertig.
Beispiel 3: mit einem Countdown-Zähler
Ändern Sie die Füllung des Jambotrons erneut und färben Sie die Vorlage neu, um sie analog zur vorherigen Vorlage an den neuen Hintergrund anzupassen. Wir verbinden das Zählerskript:
Html
Die Zeit wird knapp
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Übung ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo Konsequenz. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie konsequat, vel illum dolore eu feugiat nulla Facilisis bei vero eros und accumsan et iusto
-
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit, sed diam nonummy.
Entfernen Sie im Stylesheet den unteren Radius der Form und optimieren Sie die Schaltfläche.
Zusätzlich wurde das Menü für einen neuen Hintergrund neu gestrichen und der Textstil im Jambotron geändert - analog zum vorherigen Beispiel. Ergebnis.
Unterteil
Damit sind die Landing Page-Beispiele abgeschlossen, der Code erfordert jedoch zusätzliche Arbeit.
Die Zielseite muss schnell und gut sein wie ein Ferrari - die Ladezeiten der Seiten haben einen großen Einfluss auf die Absprungraten. Optimieren Sie Bilder, minimieren Sie die Größe der fertigen Skripte und Stile für maximale Effizienz.
Die Lektion enthält Beispiele für das Erstellen guter Zielseiten, mit denen Sie echte Kunden gewinnen und etwas Neues lernen können. Wir mögen und reposten. Bis bald.
Klicken Sie auf eine der Schaltflächen, um alle in der Lektion vorgestellten Quellen in Form von vorgefertigten Seiten herunterzuladen soziales Schloss um es zu öffnen und einen Link zu bekommen.
Mit freundlichen Grüßen, Galiulin Ruslan.
Thema Landing Page an Löchern gerieben. Obwohl der Boom auf Landing Pages etwas nachgelassen hat, sind Landing Pages immer noch gefragt. Sie werden von allen und jedem ins Leben gerufen, auch wenn dies eindeutig ein Verlust für ihre geschäftlichen Nischen ist. Jemand tut es nur um zu spielen und jemand um Geld zu verdienen. Es ist jedoch nicht so wichtig, welche Ziele Sie verfolgen. Wichtig ist, dass jeder eine Seite entwickeln muss. Jemand wird bei Profis bestellen und jemand wird aus dem einen oder anderen Grund beginnen, seine eigene Landing Page zu erstellen. Diese Sammlung ist letzterem gewidmet.
Leute, die sich entschieden haben erstellen Sie selbst eine WebsiteSie können die Entwicklung von vorne beginnen oder fertige verwenden, da sie keine speziellen Entwicklungskenntnisse benötigen. Grundkenntnisse in HTML und CSS sind ausreichend, wie in der Schule gelehrt. Auch hier stellt sich die Frage. Soll ich kostenpflichtig oder kostenlos verwenden? Natürlich wird der bezahlte von viel besserer Qualität sein und wahrscheinlich höhere Conversions zeigen. Free wird weniger schön sein, weniger aufwendig in Bezug auf Marketing, Layout und Design.
Diese Sammlung besteht aus nur geben Sie reines HTML frei, um eine Landing Page zu erstellen... Anfangs bestand die Auswahl aus 40 Positionen, aber als ich morgens aufwachte und diese Vorlagen mit einem neuen Auge betrachtete, beschloss ich, das meiste davon zu löschen, da es ehrlich gesagt Müll war und es im Internet so viel Müll gibt. Es bleiben nur die wertvollsten Vorlagen übrig, auf denen Sie zumindest etwas aufbauen können. Die Auswahl umfasst zielseitenvorlagen von verschiedenen Themen, aber aus irgendeinem Grund herrscht LP für mobile Anwendungen vor. Sie erwiesen sich als von höchster Qualität.
Wir haben zuvor eine Auswahl an kostenlosen Landing Page-Vorlagen getroffen. Sie wurden auf ein bestimmtes Thema zugeschnitten. Dieses Mal habe ich beschlossen, ein vorgefertigtes Thema zu erstellen, das keiner Richtung angehört.
Andere Sammlungen kostenloser HTML-Landingpage-Vorlagen:
Apropos. Wenn Sie diese Vorlagen aus irgendeinem Grund in die Wordpress-Engine ziehen möchten, habe ich zu diesem Thema einmal eine Auswahl von Plugins zum Erstellen einer Landing Page in Wordpress getroffen. Sie können versuchen, sie zu verwenden. Vielleicht spart dies viel Zeit. Obwohl ich persönlich nicht viel Sinn darin sehe, da reines HTML für eine einfache LP ausreicht.
So. Hier sind 20 kostenlose HTML-Landingpage-Vorlagen.
Appi - Hintergrundvideovorlage
Eine weitere Landing Page-Vorlage für die mobile App mit Hintergrundvideo im Vollbildmodus. Im Gegensatz zu der Vorlage mit einem Videohintergrund, die unten angegeben wird, ist diese viel besser, obwohl sie für ein bestimmtes Thema geschärft ist.Bukku
Kostenlose HTML-Vorlage zum Erstellen Landing Page Verkauf von Büchern... Hergestellt im flachen Stil in Grüntönen. Es gibt einige unterhaltsame Animationen.Außerdem stellt der Entwickler Quellcodes im PSD-Format zum kostenlosen Download zur Verfügung.
Landing Page Kaffee verkaufen
Kaffee Landing Page Vorlage... Das Design und die Implementierung des Layouts sind sehr interessant. Beim Scrollen der Seite werden Elemente animiert. Alles ist in sanften Farben gehalten. Perfekt für Organisationen, die Kaffee liefern. Diese Vorlage kann jedoch leicht an Ihr Thema angepasst werden, indem die Bilder ersetzt werden.Landing Zero - Landing Page mit Hintergrundvideo
Kostenlose HTML-Vorlage mit Video-Hintergrund universelle Fächer. Geeignet für die Erstellung eines Portfolios eines Freiberuflers jeglicher Spezialisierung, sei es ein Fotograf oder ein Designer.Kostenlose Vorlagen mit Hintergrundvideo sind im Allgemeinen schwer zu finden. Also lade es herunter.
Das Video auf dem ersten Bildschirm kann durch Ihr eigenes ersetzt werden. Wenn es keines gibt, können Sie es im kostenlosen Videobestand herunterladen. Ich habe vorhin eine Liste von Videobeständen mit legalen Videos gegeben.
Engagieren
Ein weiterer vielseitiger eine Seite mit Bootstrap ansprechen... Die Seite eignet sich für eine einfache Produktpräsentation. Ähnlich aufgebaut wie die Präsentationsseite von Apple-Produkten.Landing Page für ein Café oder Restaurant
Gewohnheit für einen gewöhnlichen Runenbenutzer kostenlose Landing Page Vorlage mit Grab Form im ersten Bildschirm. Geschärft für die Erstellung einer Landingpage für eine Bar, ein Restaurant, ein Café oder etwas Kulinarisches. Mit dem Antragsformular können Sie einen Tisch für eine bestimmte Zeit reservieren.Oleose
Sehr hohe Qualität, reaktionsschnell, kostenlos, aber auch für eine mobile Anwendung. Die Landing Page wird mithilfe des Bootstrap-Frameworks implementiert. Hat drei Farboptionen: hellblau, hellgrün und lila. Es ist jedoch nicht so streng auf das Thema zugeschnitten, daher kann es leicht nach Ihren Wünschen angepasst werden.Take ist eine kostenlose einseitige Website
Und wieder eine kostenlose einseitige HTML-Vorlage für eine mobile Anwendung. Das Design ist jedoch sehr interessant und ungewöhnlich. Ich würde sogar sagen, einzigartig. Die meisten Besucher des Beitrags sind keine Entwickler mobiler Anwendungen, daher müssen Sie alles wiederholen, um es Ihrem Thema anzupassen.Foodee
Kostenlose HTML5-Landingpage-Vorlage für eine Seite Café, Restaurant oder eine Art Restaurant. Vorlage mit Vollbildhintergrund und Parallaxeeffekten.Es gibt solche Blöcke wie: Menü, bevorstehende Ereignisse, Kundenbewertungen und eine Standardgruppe von Blöcken, in die Sie Vorteile einfügen können usw.