Seitenvorlagen. Landingpage-Vorlagen. Landingpage: Beispiele für Codes mit Angebot, Parallaxe und Zähler

Der Erfolg bei allen Unternehmungen in diesem modernen Zeitalter ist ein so komplexes Ziel wie nie zuvor in der Geschichte. Wenn man sich etwas vornimmt, sei es die Gründung eines Unternehmens, die Entwicklung eines Tools oder Spiels, die Koordinierung eines Großprojekts oder einer Veranstaltung oder auch einfach nur der Versuch, ein paar Dollar zu verdienen – der Erfolg entzieht sich den Vielen und heißt die Wenigen, die Gut Vorbereiteten, willkommen. und oft auch das regelrechte Glück. Wer jedoch regelmäßig Erfolg hat, wird Ihnen sagen, dass Glück einfach nicht das ist, was man sich vorstellen kann.

Vorbereitung bedeutet alles. Und um vorbereitet zu sein, muss man ihr Geschäft und ihre Zeit kennen. Aufgrund der großen Reichweite des World Wide Web und leistungsstarker mobiler Geräte sind dies für alle Unternehmen hektische und mobile Zeiten. Innovation ist das A und O, und wer nicht schwimmen kann, wird mit Sicherheit untergehen. Aus diesem Grund benötigen Sie für alle Ihre Unternehmungen eine solide technologische Grundlage, und nichts übertrifft HTML5 in puncto Spitzenleistung. Es ist die Sprache der modernen Welt, und die moderne Welt und ihre Möglichkeiten stehen vor Ihrer Tür. Haben Sie einen Ort, an dem Sie sie empfangen können? Die folgende Sammlung von HTML5-Landingpage-Vorlagen wurde so zusammengestellt, dass sie die besten und hellsten enthält Landingpage Vorlagen, die heute auf dem Markt sind. Guck mal!

Mit Softius wird Ihre Website viel innovativer und ansprechender aussehen und Sie können noch mehr Benutzer gewinnen. Diese Landingpage-Vorlage ist bekannt für ihre Spezialisierung auf Unternehmen, die sich auf die Bereitstellung von Software für verschiedene Zwecke konzentrieren. Selbst wenn Sie die nächste große mobile Anwendung entwickeln, wird Softius sein Bestes tun, um sie professionell und attraktiv zu präsentieren.

Jede Vorlage passt zu Ihrem Unternehmenshintergrund und sorgt so für den Erfolg Ihrer Bemühungen. Apropos Vorlagen: Softius enthält drei beeindruckende Demos, die Sie nutzen und an Ihre Bedürfnisse und Vorschriften anpassen können. Dank seines minimalistischen und klaren Ansatzes funktioniert Softius sofort mit mehreren Benutzern, auch wenn Sie einen akribischen Geschmack haben.

Ändern Sie Schriftarten, Farben, Layouts, Bilder und andere Details bis ins Unendliche und darüber hinaus und personalisieren Sie das Erlebnis. Integrieren Sie Widgets, um die Anpassung und Organisation Ihres Online-Auftritts zu optimieren. Softius ist 100 % effizient und dokumentiert, sodass jeder problemlos das Beste daraus machen kann.

VisaPress ist eine ideale Landingpage-Vorlage für alle Einwanderungs- und Visa-Beratungsagenturen und -Unternehmen. Da dieses Tool jedoch äußerst flexibel ist, können Sie VisaPress auch für alle möglichen anderen Zwecke nutzen, beispielsweise für Anwälte, Agenten, Coaching-Dienste und Migrationsberatung, um nur einige zu nennen. VisaPress ist vollständig responsiv und für Mobilgeräte geeignet und funktioniert reibungslos auf allen Retina-Bildschirmen und gängigen Webbrowsern. Egal woher sie kommen, Ihre von VisaPress betriebene Website wird immer reibungslos funktionieren.

Die Vorlage bietet drei Homepage-Designs, nämlich klassisches, normales und transparentes Aussehen. Darüber hinaus umfasst VisaPress vier Landingpages, Coaching und Kurse, einen Abschnitt mit Erfahrungsberichten und alle anderen Must-Haves. Wenn Sie sich für dieses spezielle Thema interessieren, ist VisaPress die beste Lösung, die Sie wählen können. Sie müssen keine weiteren Nachforschungen anstellen, wenn Sie alles direkt vor sich haben.

Angular Landing ist, wie der Name schon sagt, eine Seitenvorlage zur Lead-Erfassung. Bedenken Sie, dass es sich aufgrund seiner Effizienz und Umfangsfähigkeit nicht nur um Ihre alltägliche Landingpage-Vorlage handelt. Angular Landing wird mit Flex-Layout und Angular-CLI und Angular-Material zusammengestellt. Außerdem besteht jeder Abschnitt der Landingpage-Vorlage aus HTML-, SCSS- und TypeScript-Dateien. Zur einfachen Anpassung und Wiederverwendung durch Benutzer ist es außerdem in einem eigenen Verzeichnis organisiert.

Zu den weiteren Funktionen dieser übersichtlichen Vorlage gehören Preistabellen, Karussells, regelmäßige Aktualisierungen und die Scroll-Navigation. Angular Landing bietet Ihnen zwei Originalvarianten zur Auswahl, die beide von höchster Qualität sind. Genießen Sie das klare Design und die fantastische Optik von Angular Landing, die Ihnen dabei helfen werden, die Ziele zu erreichen, die Sie sich schon immer selbst gewünscht haben.

Wenn Sie auf der Suche nach der besten Weblösung sind, um Ihre Agentur online zu stellen, ist Agency die Landingpage-Vorlage, die Sie in Betracht ziehen sollten. Es ist für die beste Leistung optimiert und organisiert, damit alle Ihre Besucher zufrieden und begeistert sind, mehr über Ihre Arbeit zu erfahren. Der Stil der Agentur ist raffiniert und kreativ und stellt Ihre Inhalte in den Mittelpunkt, damit jeder das Beste daraus machen kann. Aufgrund des einseitigen Layouts müssen Benutzer nicht von Seite zu Seite springen und die Zurück-Taste drücken, um zu finden und zu entdecken, wonach sie suchen.

Agency verfügt über sechzehn verschiedene Häuser, die in zwei Gruppen unterteilt sind: klassische und Formversion. Von Bild- und Slider-Hintergründen bis hin zu allen möglichen Effekten, wie Winter, Wasser, Regen, Partikel und Farbverlauf, um nur einige zu nennen. Scroll-Animationen, SEO-fähig, integriertes MailChimp, praktisches Kontaktformular und Retina-fähige Font-Awesome-Icons – all das und noch eine Menge weiterer Vorzüge, die Ihnen die Agentur bietet.

Appino wird von vielen als eine der perfekten Landingpage-Vorlagen für mobile Apps angesehen. Aufgrund seiner schlanken, klaren und leistungsstarken Elemente ist es bei App-Entwicklern, Vermarktern und dergleichen sehr beliebt. Als Appino verfügt es über mehrere gebrauchsfertige Layouts, die App-Downloads und -Verkäufe stark beeinflussen können, was sich im Wachstum Ihrer Marke niederschlägt. Mit einer soliden Seite, die Sie mit Appino erstellen, können Sie mit Sicherheit fantastische Ergebnisse erzielen.

Mit seinen hochgradig anpassbaren Abschnitten, Überschriften, Schiebereglern, Farben und vorgefertigten Elementen ist die Verwendung von Appino als Ihre mobile App zur Lead-Erfassung bequem und effizient. Als i-Tüpfelchen bietet Appino lebenslange, kostenlose Updates an. Darüber hinaus erhält jeder Appino-Benutzer sechs Monate kostenlosen Support, der alle Ihre Fragen und Anliegen beantwortet.

Jonny ist eine Zwei-in-Eins-Landingpage-Vorlage. Es handelt sich um eine demnächst erhältliche Vorlage sowie einen Lander zur Lead-Generierung, der auch als Kontaktseite dient. Es stehen zwölf verschiedene Nischendemos zur Verfügung, die Sie sofort verwenden können. Und wenn Sie sich in einer anderen Nische als den verfügbaren befinden, können Sie Jonny mit ein paar schnellen Änderungen an Ihre Marke anpassen. Schließlich ist Jonny organisiert und einfach zu bearbeiten. Unabhängig von Ihrer Erfahrung können Sie alle das Beste aus dem soliden Jonny herausholen.

Zu den Pluspunkten des Tools gehören SEO-Freundlichkeit, zwölf nützliche Schaltflächen, ein funktionierendes Kontaktformular, ein modales Popup und eine Galerie. Natürlich endet die Liste der Vermögenswerte, die Jonny mitbringt, hier nicht. Um die Leistungsfähigkeit von Jonny jedoch wirklich zu verstehen, sehen Sie sich besser die Live-Vorschauseite an. Das Maß an Fachwissen, das es auf Ihre Bildschirme überträgt, wird Sie in Erstaunen versetzen.

Paper ist eine erstklassige, vielseitige Landingpage-Vorlage für Websites aller Genres und Branchen. Es ist ideal für Geschäftsleute, Unternehmer, Wohltätigkeitsgruppen, Start-ups, Freiberufler und Wissensdatenbank-Online-Projekte. Mit dem geringsten Arbeitsaufwand und einer geringen Investition können Sie schnell und effizient eine High-End-Seite zum Laufen bringen. Es handelt sich um eine der fortschrittlichsten, modernsten und innovativsten Vorlagen, die Sie für nahezu jede Seite verwenden können.

Dank der großen Auswahl an Funktionen und Elementen ist die Einrichtung Ihrer Website mit Paper weniger mühsam und bequemer. Paper bietet eine riesige Auswahl an responsiven Layouts sowie achtzehn und mehr Home-, Blog- und Shop-Seiten. Paper ist für unglaubliche Leistung und schnelle Ladegeschwindigkeiten optimiert und bietet Ihren Besuchern ein gleichmäßiges und entspanntes Skimming-Erlebnis. Beginnen Sie jetzt mit Papier und sehen Sie schon bald die ersten Ergebnisse.

Apps Craft ist eine spezielle Landingpage-HTML-Vorlage. Mit seinem modernen, ausgefallenen Konzept spricht Apps Craft die neugierigen Klicker dieser Welt an. Sie erhalten +10 anpassbare Homepages und inklusive Parallax-Effekt. Apps Craft ist mit Stolz eine der reaktionsschnellsten Vorlagen auf dem Markt. Es ist außerdem browserübergreifend kompatibel, sodass Sie über jeden Browser so viele Menschen wie möglich erreichen können. Steigern Sie Ihren Umsatz ganz einfach mit SEO-Verbesserungen, die speziell für Ihr Unternehmen entwickelt wurden. Apps Craft bietet sowohl das MailChimp-Abonnementformular als auch Ajax Working Kontakt Formular. Mit jedem von ihnen erhalten Sie eine großartige Feedback-Verbindung zu Ihren Kunden. Social-Media-Sharing ist auch für mehrere bekannte Plattformen verfügbar.

Apps Craft enthält auch PSD-Dateien mit Ebenen, um sehr coole Anpassungen vorzunehmen. Darüber hinaus ist es mit Bootstrap kompatibel und verfügt über einen wunderschönen Parallax-Effekt. Schöne Hautfarben, Google Web Fonts und hochwertige Font Icons gehören ebenfalls zum Angebot. Darüber hinaus stellt Apps Craft die entsprechenden Dokumentationsdateien zum einfachen Herunterladen bereit. Alle oben genannten Gründe machen es äußerst vielseitig und eignen sich für die Anpassung an Mobiltelefone und Tablets. Wenn Sie seine Vorliebe für Apps berücksichtigen, werden Sie keinen Zweifel an seiner Anpassungsfähigkeit haben. Entscheiden Sie sich für etwas Dynamisches und mit den besten Spezialfunktionen! Holen Sie sich Apps Craft!

LeadGen ist eine flexible und reaktionsfähige Mehrzweck-Website-Vorlage für HTML-Marketing. Es ist ein einfallsreiches Framework für Webmaster aus allen Lebensbereichen, um Ergebnisse zu erzielen. LeadGen ist ideal für eine Reihe von Branchen und Anwendungen, von denen es profitieren kann. Mit einer riesigen Auswahl an Landingpage-Demo-Websites sind die Möglichkeiten grenzenlos. LeadGen benötigt keine Programmierung, um Websites in professioneller Qualität zu erhalten. LeadGen ist eine zielgerichtete Lösung für Designer, Architekten, Kreative und Profis. Stellen Sie über 300 ausgefeilte Elemente über einen intuitiven Premium-Seitenersteller bereit.

LeadGen bietet einen robusten Rahmen für die Vermarktung Ihrer Produkte und Dienstleistungen an alle. Nahtloses Basteln ist mit nur wenigen Klicks und erweiterten Verwaltungsoptionen möglich. Optimieren Sie Ihre Übergänge und Animationen, passen Sie Video- und Bildhintergründe an und vieles mehr. Lassen Sie Ihrer Kreativität mit LeadGen freien Lauf und bringen Sie Ihr Unternehmen auf die nächste Stufe. LeadGen ist für Marketing und SEO optimiert und wird Ihren Traffic in die Höhe treiben. Es ist schlank und leicht und belastet Ihre Server bei jedem Datenverkehr nicht. Von Bloggern und Zeitschriften bis hin zu E-Commerce-Shops und Portfolios bietet LeadGen alles. Ganz zu schweigen von der sofort einsatzbereiten Kreuzkompatibilität mit allen Browsern und Geräten. Richten Sie noch heute Ihren Online-Shop ein und testen Sie LeadGen!

Pivot ist visuell beeindruckend und umfassend formbar, technologisch ausgefeilt und professionell grafisch gestaltet, äußerst intuitiv und einfach zu bedienen, entwicklerfreundlich und sauber zusammengestellt, äußerst gut dokumentiert und mit Page Builder ausgestattet. Dieses Thema ist äußerst innovativ und ermöglicht es Benutzern aller Erfahrungsstufen, ansprechende und beeindruckende einseitige oder mehrseitige Websites ohne jegliche Programmierung zu erstellen. Um dies zu erreichen, setzt Pivot einen sehr effektiven und äußerst intuitiven visuellen Page Builder ein, der über eine blockbasierte Oberfläche verfügt, in der Ihnen über 70 individuell erstellte, vollständig anpassbare Inhaltsblöcke zur Verfügung stehen, die Sie einfach auf Ihren Seiten einfügen und dann frei herumspielen können mit ihren individuellen Einstellungen und ihrem gesamten Erscheinungsbild und Verhalten.

Deshalb ist Pivot eine so flexible und vielseitige Wahl als Landing-Page-Website-Vorlage. Es versetzt Sie bei jedem Schritt des Weges und durch jeden Winkel in die Lage, das Navigationserlebnis Ihrer Website zu steuern, mit wunderbaren Funktionen, die Ihnen zur Verfügung stehen, einschließlich Kampagnenmonitoren, MailChimp-Integration, wunderschönen HTML5-Videohintergründen und Hardware-Parallax-visuellen Effekten, die Sie verblüffen werden und binden Sie Ihren eingehenden Datenverkehr ein. Begrüßen Sie Ihre Besucher mit Eleganz und Flexibilität mit Pivot und richten Sie die Welt rund um Ihre Website aus!

Massive ist äußerst ehrgeizig, rundum gut gestaltet, technologisch durchdacht und auf dem neuesten Stand, funktional einfallsreich und äußerst funktionsreich, clever und gut durchdacht, modern und aktuell, ästhetisch attraktiv und ausgefeilt, responsive HTML5-Ein- und Mehrseiten-Mehrzweck-Website-Vorlage. Diese Vorlage wurde im Laufe der Zeit sorgfältig und umfangreich entwickelt, um eine beeindruckende All-in-One-Website-Lösung zu bieten. Dank ausreichender Menge und professioneller Qualität ist es in der Lage, praktisch jede einzelne Aufgabe zu bewältigen, die eine Website erfordern könnte. Mit der Bereitstellung von über 50 wunderbaren Demo-Websites mit Innenseiten, über 260 einzelnen HTML5-Vorlagenseiten und Dutzenden zweckspezifischer Seiten ist Massive wirklich überwältigend. Aus diesem Grund kann Massive die Anforderungen einer Landing-Page-Website problemlos erfüllen.

Mit seiner tiefgreifenden Funktionalität und seiner enormen Vielfalt an leistungsstarken Funktionen und umfangreichen visuellen Anpassungsmöglichkeiten ist Massive sofort nach dem Auspacken perfekt ausgestattet, um ansprechende und moderne Landing-Page-Websites mit MailChimp-Integration, über 150 erstaunlichen Shortcodes und reibungslosem und schönem Parallax zu erstellen Abschnitte, Preistabellen, 20 Menüstile, 15 vorgefertigte Slider, 10 Seitentitel und ähnlich große Auswahlmöglichkeiten für jedes visuelle Element, aus dem Ihre Massive Landing Page-Website besteht. Basierend auf einem zuverlässigen und reaktionsfähigen Bootstrap-Design können Sie sicher sein, dass jeder Benutzer Ihre Massive-Website in ihrer richtigen visuellen Pracht genießen wird.

JANGO ist ein technologisch anspruchsvolles, optisch umfangreiches und gut gestaltetes, unglaublich grafisch anpassbares und erstaunlich intuitives, leistungsstarkes und schnelles Laden, flink und einfach zu bedienen. Suchmaschine Optimierte und entwicklerfreundliche responsive HTML5-Mehrzweck-Website-Vorlage. Diese Vorlage wurde entwickelt, um die effizienteste, mobilfreundlichste, entwicklerfreundlichste und benutzerfreundlichste Vorlage auf dem Markt zu sein. JANGO verwendet zu Ihrer Bequemlichkeit ein solides und zuverlässiges HTML5-Framework. Der Stil basiert auf ausgefeilten SASS-CSS3-Stylesheets, die leicht anpassbar sind und schnell geladen werden können. Es ist vollständig modular aufgebaut und basiert auf Twitters Bootstrap. Dadurch ist es besonders reaktionsschnell und kompatibel mit allen Browsern, Plattformen und Bildschirmgrößen.

JANGO ist perfekt für die Erstellung Ihrer Traum-Landing-Page-Website ohne jegliche Programmierung. Sein komponentenbasiertes Framework umfasst über 300 individuell erstellte Komponenten mit einem optimierten, dreistufigen Seitenerstellungsprozess. Gehen Sie von der Kopfzeile zu den Komponenten und der Bestellung zur Fußzeile, und fertig! Professionelle und ausgefeilte Landing-Page-Websites, einfach anzuklicken und zu ziehen, innerhalb weniger Minuten fertig, sofort einsatzbereit. JANGO setzt außerdem sein modulares Design in der gesamten Codebasis ein, mit einem gut lesbaren, entwicklerfreundlichen Code, der gut kommentiert ist, mit umfangreicher Dokumentation, um die Modifikation und Anpassung von JANGO an Ihre spezifischen Anforderungen zu erleichtern.

Offenlegung: Diese Seite enthält externe Affiliate-Links, die dazu führen können, dass wir eine Provision erhalten, wenn Sie sich für den Kauf des genannten Produkts entscheiden. Die Meinungen auf dieser Seite sind unsere eigenen und wir erhalten keinen zusätzlichen Bonus für positive Bewertungen.

Grüße, meine lieben Leser. Heute sprechen wir über technische Aspekte, mit denen wir den Umsatz unserer Waren oder Dienstleistungen steigern können. Einer der wichtigen Punkte ist eine gut durchdachte Zielseite mit Waren. Die sogenannte Landingpage, über deren Erstellung wir später sprechen und fertige Seitencodes besorgen.

Was ist eine Landingpage? Dies ist die Seite, auf der Menschen normalerweise landen, nachdem sie auf eine Anzeige geklickt haben. Erstellt für ein Angebot: Produkt, Service oder Abonnement. Eine effektive Landingpage ist der Grundstein für erfolgreiches Online-Marketing. Das Produkt mag das beste auf dem Markt sein, die Anzeigen sind perfekt, aber ohne eine gute Landingpage führen die Bemühungen nicht zu 100 % Ergebnissen. Es verrät 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 Schriftsatz liegt. Eine gute Landingpage ist das Ergebnis einer koordinierten Arbeit an Zielen, Text, Design und Code. Landingpages, von denen wir unten Beispiele zeigen, helfen Anfängern dabei, 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 Landing Page-Designern erstellen.

Bevor Sie also eine Landingpage erstellen, fragen Sie sich:

• Was wird eine Person tun, nachdem sie auf der Zielseite gelandet ist? Wird er etwas kaufen? Füllen Sie das Formular aus? Abonnieren Sie den Newsletter? Bevor Sie Ihre Conversion-Rate verfolgen, setzen Sie sich klare Ziele.
• Wer sind meine Konkurrenten? In Wirklichkeit geht es um drei Fragen: Wer, wie erfolgreich sind sie und wie können ihre Errungenschaften umgesetzt werden? Nachahmung ist die aufrichtigste Form der Schmeichelei. Wenn Ihre Konkurrenten etwas tun, das funktioniert, reproduzieren Sie es auf Ihrer Website.
• Wer ist mein Publikum? Je besser Sie Ihre Nische und Zielgruppe verstehen, desto größer ist die Chance, dass sich Ihre Bemühungen auszahlen.

Sie müssen alle notwendigen Informationen bereitstellen, aber nicht so viele, dass Sie Ihren potenziellen Kunden überfordern und abschrecken.

Bevor wir beginnen, werfen wir einen kurzen Blick auf HTML und CSS. Wenn Sie verstehen, wie sie funktionieren, können Sie eine Landung schaffen.

HTML ist eine Browser-Markup-Sprache zur Website-Visualisierung. Geschrieben unter Verwendung von Tags in spitzen Klammern, die den Inhalt definieren.

Das Tag öffnet () und schließt () um die Füllung herum:

Inhalt

Zur Feinabstimmung werden Attribute nach dem Namen hinzugefügt:

Inhalt

CSS – definiert, wie HTML-Elemente angeordnet werden. Besteht aus Selektoren, Eigenschaften und Werten:

#selector (Eigenschaft: Wert;)

Der Selektor entspricht dem Namen eines bestimmten Tags in HTML. Das Ändern von Werten und das Hinzufügen von Eigenschaften regelt seine Aussehen. Sie können Seiten erstellen, die unterschiedlich aussehen, indem Sie unterschiedliche CSS-Stile auf denselben HTML-Code anwenden.

Für ein schnelles Layout verwenden wir eine Vorlage mit minimalem Design basierend auf Bootstrap. Hierbei handelt es sich um ein System mit eigenen Selektoren, das weltweit zur Beschleunigung des Layouts eingesetzt wird.

Es sieht bescheiden aus.

Aus diesem Fisch entsteht in mehreren Schritten eine Website für jeden Geschmack.

Verzeichnisstruktur im Ordner:

• index.html: Dies ist die Hauptdatei, die wir bearbeiten werden.
• /assets: Hilfsdateien befinden sich hier:
• /css: Das Verzeichnis enthält Bootstrap- und Symbolstile. Die Datei, die wir bearbeiten werden, ist main.css.
• /img: Ordner für Site-Bilder.
• /fonts: Symbolschriftarten.
• /js: Bootstrap-Javascript-Dateien.

Schritt 1: Verwenden eines Headers

Die Überschrift und die Zwischenüberschriften sind wichtige Stellen, die dazu beitragen, den Wert des Angebots klar zu vermitteln.

Lassen Sie uns den Titel und den Namen der Site ändern. Hier sind keine Schreibkenntnisse erforderlich – Sie schreiben Ihren eigenen Text an den gelb markierten Stellen auf dem Bildschirm.

Schritt 2. Kürze ist die Schwester der Konvertierung. Hinzufügen von Vorteilen und Tarifen

Sie benötigen 4 Abschnitte:

• Vorteile;
• Tarife;
• Rezensionen;
• Aufruf zum Handeln.

Erstellen wir einen Abschnitt des Hauptinhalts „main“, in den wir die erforderlichen Abschnitte einfügen:

…..
…..
…..
…..

Füllen Sie mit Füllung statt mit Punkten.

Für den Bereich „Vorteile“ benötigen Sie diesen Code:

Vorteile
Schnell

Zuverlässig

Sed diam nonummy

Elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Inhalt zur Verdeutlichung:

Es sieht immer noch schlampig aus, aber es gibt keinen Grund zur Panik, machen wir weiter.

Wir schreiben Preise auf. Der Inhalt ändert sich auf die gleiche Weise wie im ersten Schritt. Allgemeine Beschreibung mit der Klasse „Tarife“ und drei Tarifen.

Tarifpläne

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Wir wissen nur, dass wir uns auf ein Mindestmaß beschränken müssen, denn unser Körper wird nicht von einer Kommode betroffen sein.

pro Monat/pro Person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

pro Monat/pro Person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

pro Monat/pro Person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Sieht so aus.

Das Erscheinungsbild der zukünftigen Landingpage interessiert uns vorerst nicht – im Folgenden schauen wir uns Beispiele für sich ändernde Stile an.

Schritt 3: Vertrauen Sie Signalen und Handlungsaufforderungen

Durch gezielte Signale wird den Besuchern signalisiert, dass die Marke vertrauenswürdig ist. Signale können empfangen werden Verschiedene Arten, aber die Klassiker sind Kundenrezensionen.

Kundenbewertungen

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bis zu einem gewissen Grad sind wir bereit, die Arbeit zu erledigen, die wir von jedem Kommandeur erhalten haben:

Lassen Sie uns einen Aufruf zum Handeln setzen.

Profitieren Sie, wenn Sie noch heute bestellen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Dies bedeutet jedoch, dass unser Körper keineswegs von einer Kommode betroffen sein muss:

Bewertungen helfen potenziellen Kunden dabei, sich für den Kauf des Produkts zu entscheiden. Aus Gründen der Übersichtlichkeit benötigen wir Avatare, die wir daher sofort unter jedem Zitat einfügen.

Kundenname.

Schritt 4: Netz- und mobilfreundliche Integration

Um das Grid zu implementieren, benötigen wir Bootstrap-Container. Es ist wichtig, sich die Gesamtzahl der gültigen Spaltensegmente zu merken – 12. Die Klasse bestimmt die Breite der Inhaltsanzeige. Das Gute an diesem vorgefertigten Raster ist, dass die Container auf Reaktionsfähigkeit ausgelegt sind und sofort auf mobilen Geräten verwendet werden können. Detaillierte Beschreibung auf der offiziellen Website. Das Raster sieht so aus.

Der Inhalt von „main“ wird in einen Container verpackt. Dazu wird oben Folgendes geschrieben:

… .

Wenn Sie möchten, dass der Block über die gesamte Breite des Bildschirms passt, wird ein Behälter hineingelegt. Hier wird es ein Jumbotron und ein Aufruf zum Handeln sein.

Wir werden alle Elemente, die übereinander platziert werden müssen, mit Zeilentrennzeichen umschließen.

Wir können nun die Breite der Spalten anpassen und uns dabei auf das Bootstrap-Raster konzentrieren. Nach dem Einpacken klebte die Füllung nicht mehr an den Rändern des Siebs und es entstanden feine Vertiefungen.

Wir setzen die Preise in einer Zeile mithilfe der Spaltenklasse col-lg-4. Innerhalb von Zeilenzeilen ist es nicht mehr notwendig, separate Divs zum Umbrechen zu schreiben; sie können mit vorhandenen, durch ein Leerzeichen getrennten, kombiniert werden.

Analog dazu richten wir Spalten für den Bereich „Bewertungen und Vorteile“ ein. Wenn Sie ein Element zur Seite verschieben müssen, verwenden Sie die Offset-Spaltenklasse col-lg-offset-2. Die Zahl am Ende bestimmt, um wie viele Basisspalten die Verschiebung erfolgt.

Schritt 5. Schriftarten und Symbole

Wir implementieren Google Font-Überschriftenschriftarten. Öffnen Sie bei Auswahl die Registerkarte „Importieren“ und kopieren Sie die Daten daraus in die Datei „main.css“. Wir fügen der Datei, für die die neue Schriftart verwendet wird, auch Titelselektoren hinzu.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* Schriftart für Überschriften importieren */
.navbar-marke,
h1,
h2,
h3,
h4,
h5,
h6 (
Schriftfamilie: „Roboto Condensed“, serifenlos; /* Googlefont-Ausgabe */
}

Zur Verdeutlichung werden die Vorteile durch eine Klasse mit dem selbsterklärenden Namen text-center und FontAwesome-Icons aus dem Bootstrap-Set beschrieben.

Zu diesem Zeitpunkt ist die Vorbereitung vollständig abgeschlossen.

Wir verwenden die drei beliebtesten Typen: mit einem Satz, einer Form und mit einem Countdown-Zähler. Im weiteren Verlauf des Layouts wird die Vorlage um Effekte ergänzt.

Stellen wir den Hintergrund des Hauptteils und die Polsterung so ein, dass der erste Bildschirm abgedeckt wird.

Jumbotron (
Hintergrund: #f5f5f5 url(../img/fon.jpg) oben in der Mitte keine Wiederholung;
maximale Breite: 100 %;
Polsterung oben: 250px;
Polsterung unten: 200px;
Textausrichtung: Mitte;
}

Ändern wir die Größe des Jumbotron-Headers von h2 auf h1. Als nächstes schreiben wir Stile für die Elemente, die geändert werden müssen.

Beginnen wir mit den Symbolen.

Vorteile i(
Farbe: #cac4c4;
}

Nach dem Rautezeichen wird eine Farbe angegeben. Sie können mithilfe von HTML-Farbtabellen oder einem Bildeditor Ihre eigene Option auswählen.

Einrückung für Abschnittsüberschriften

Abschnitt h2 (
Polsterung oben: 30px;
Rand unten: 25px;
}

Wir räumen das Erscheinungsbild der Zölle auf. Der Einfachheit halber erstellen wir unsere eigenen Klassen für die Elemente, die wir speziell hervorheben möchten.

Tarif Nr. 1
$10

pro Monat/pro Person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Und viel CSS. Für welche Stellen die Abschnitte zuständig sind, wird in den Kommentaren angegeben - /* zwischen Schrägstrichen mit einem Sternchen */

/* =========Tarifstile======== */
/* Gesamtansicht des Tarifs */
.pricing_item(
Hintergrund: #f2f2f2;
Position: relativ;
Anzeige: -webkit-flex;
Anzeige: Flex;

Flexrichtung: Spalte;

align-items: stretch;
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 darauf geklickt wird */
.pricing_item:hover (
Farbe: #444;
Hintergrund: #daebef;
}
/* individueller Preisschild-Hintergrund in jedem Tarif */
.pricing_item:first-child .price (
Hintergrund: #9ba9b5;
}
.pricing_item:nth-child(2).price (
Hintergrund: #1f6098;
}
/* auf Breitbildschirmen wird die mittlere Tarifspalte eingerückt und hervorgehoben */
@media screen und (min-width: 66.250em) (
.pricing_item(
Rand: 1,5em 0;
}
.feature(
Z-Index: 10;
Rand: 0;
Schriftgröße: 1,15em;
}
}
/* Titel */
.pricing_item h3 (
Schriftgröße: 2em;
Rand: 0,5em 0 0;
Farbe: #1d211f;
}
/* Preisschild-Hintergrund */
.Preis(
Schriftgröße: 2em;
Schriftdicke: fett;
Farbe: #fff;
Position: relativ;
Z-Index: 100;
Zeilenhöhe: 95px;
Breite: 100px;
Höhe: 100px;
Rand: 1,15em automatisch 1em;
Randradius: 50 %;
Hintergrund: #77a5cc;
-webkit-transition: Farbe 0,3 s, Hintergrund 0,3 s;
Übergang: Farbe 0,3 s, Hintergrund 0,3 s;
}
/* Währung */
.Währung(
Schriftgröße: 0,5em;
vertikal ausrichten: super;
}
/* Klarstellung des Vorschlags */
.Satz (
Schriftdicke: fett;
Rand: 0 0 1em 0;
Polsterung: 0 0 0,5em;
Farbe: #2a6496;
}
/* Liste */
.pricing_item ul (
Schriftgröße: 0,95em;
Rand: 0;
Polsterung: 1,5em 0,5em 2,5em;
Textausrichtung: links;
}
/* Elemente auflisten */
.pricing_item li (
Polsterung: 0,15em 0;
}
/* Schaltfläche „Preisbestellung“ */
.pricing_item-Schaltfläche(
Schriftdicke: fett;
margin-top: auto;
Polsterung: 1em 2em;
Farbe: #fff;
Randradius: 5px;
Hintergrund: #428bca;
-webkit-transition: Hintergrundfarbe 0,3 s;
Übergang: Hintergrundfarbe 0,3 s;
}
/* Farbe ändern, wenn die Taste gedrückt wird */
.pricing_item button:hover,
.pricing_item button:fokus (
Hintergrundfarbe: #285e8e;
}
/* Tarifhintergrund*/
.bg-2 (
Hintergrund: #dddddd;
}

Ergebnis

Kundenbewertungen. Lassen Sie uns ihnen ein ordentliches Aussehen geben und ihren Standort angeben.

/* =========Testimonials-Stile======== */
Referenzen (
Polsterung: 4em 0;
Textausrichtung: Mitte;
}
.Testimonials .avatar img (
Randradius: 50 %;
schweben: links;
Anzeige: inline;
Rand rechts: 1em;
Breite: 65px;
Höhe: 65px;
Rand unten: 30px;
}
.Testimonials .avatar p (
Textausrichtung: links;
Polsterung oben: 1em;
Farbe: #5d5d5d;
Schriftstärke: 900;
}

Jetzt müssen nur noch der letzte Call-to-Action und die Fußzeile dekoriert werden.

/* Aktion */
.Aktion(
Hintergrund: #476177;
Mindesthöhe: 180 Pixel;
Breite: 100 %;
Polsterung: 4em 0;
Textausrichtung: Mitte;
}
.Aktion h2 (
Farbe: #fff;
Schriftstärke: 300;

}
.Aktion 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,5em;
}

Der Fußzeilenschaltfläche ist die integrierte Bootstrap-Klasse btn-default zugewiesen.

Die Vorlage zum Leben erwecken. Wir werden flüssiges Scrollen und Schaltflächen für Abschnitte sowie Textanimationen auf dem ersten Bildschirm einführen.

Damit die Übergänge funktionieren, werden wir einige der Abschnittsklassen durch id ersetzen – für Leistungen und Tarife. Und wir werden den Schaltflächen Links zur ID hinzufügen. Screenshot – was an was angehängt ist, hervorgehoben mit einer gelben Markierung.

Wir legen Einrückungen für Schaltflächen fest – jbutton. Das Scrollen beim Drücken funktioniert, allerdings sehr abrupt.

Sanfte Übergänge entstehen, wenn Javascript-Hilfe oder jquery. Letzteres ist standardmäßig mit Bootstrap-Vorlagen verbunden.

Das Scrollen ist jetzt reibungslos.

Hinzufügen von Animationen zu Text mit Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Das ist fertig Open Source, es kann auf jeder Website verwendet werden. Platzieren Sie die Datei von Github im CSS-Ordner und geben Sie den Pfad an.

Die Effekte wählen wir hier aus: https://daneden.github.io/animate.css/. Wir haben fadeInDown ausgewählt. Im Code ist es so geschrieben:

Wenn die Seite nun geladen oder aktualisiert wird, wird der Text animiert. Bereit.

Je mehr Formularfelder einem Besucher angezeigt werden, desto geringer ist die Wahrscheinlichkeit, dass er diese ausfüllt. Bitten Sie nur um die minimal notwendigen Informationen.

Es ist analog aufgebaut. Wir werden Hintergründe und Farben ändern. Und natürlich fügen wir eine Form hinzu.

Beginnen wir mit der Parallaxe.

Lassen Sie uns den Hintergrund des Jumbotrons in transparent ändern:

Hintergrund: transparent;

Im Kopf werden wir das Skript einfügen:

$(window).scroll(function(e)(
Parallaxe();
});
Funktion Parallaxe())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Die erste Linie im Körper ist ein Container für Parallaxe:

Und in CSS verhält es sich wie folgt:

BgParallaxe (
Hintergrund: URL(/../img/fon.jpg) wiederholen;
Position: fest;
Breite: 100 %;
Höhe: 300 %;
oben:0;
links:0;
Z-Index: -1;
}

Parallax ist fertig. Aber Änderungen am Code und ein neuer Hintergrund erfordern eine Neuzuweisung des Farbschemas.

Menü dunkel machen:

Navbar-Standard (
Hintergrundfarbe: #333;
Randfarbe: #444;
Farbe: dunkelgrau;
Randradius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
Farbe: dunkelgrau;
Hintergrundfarbe: rgba(0, 0, 0, 0,5);
}

Wir ersetzen den Satz im Jumbotron durch einen neuen – mit dem Formularcode:

Mit der Landing Page werden Besucher zu Kunden
Es dauerte lange, bis ich sie aussetzte, bis ich mich darauf einließ, ein Fahrzeug zu bauen, das ein Maurer-Fahrzeug war, um den Rhoncus vulputate massa zu töten.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Und wir verschreiben das Aussehen

/* bilden */
.headform-list (
Listenstiltyp: keiner;
Zeilenhöhe: 26px;
Schriftstärke: 400;
Polsterung: 0px;
Rand unten: 40px;
}
.headform(
Überlauf versteckt;
Position: relativ;
Hintergrundfarbe: rgba(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: 38 Pixel;
Polsterung links: 62px;
Rand unten: 20px;
}
.jumbotron p(
Farbe: #fff;
Schriftgröße: 16px;
Schriftstil: kursiv;
}

Auch der Text des Jumbotrons landete hier, da er Änderungen erforderte.

Wir ändern die Tarife.

/* Gesamtansicht des Tarifs */
.pricing_item(
Hintergrundfarbe: rgba(0,0,0,.4); /* Zeile geändert */
Randradius: 4px; /* Zeile geändert */
Position: relativ;
Anzeige: -webkit-flex;
Anzeige: Flex;
-webkit-flex-direction: Spalte;
Flexrichtung: Spalte;
-webkit-align-items: stretch;
align-items: stretch;
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;
Box-Shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* Hintergrund ändern, wenn darauf geklickt 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.

Wir ändern erneut die Füllung des Jumbotrons und färben die Vorlage neu ein, um sie an den neuen Hintergrund anzupassen, ähnlich wie bei der vorherigen Vorlage. Verbinden Sie das Zählerskript:

HTML





Die Zeit wartet nicht
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Wir wissen nur, dass wir uns auf ein Mindestmaß beschränken müssen, denn unser Körper wird nicht von einer Kommode betroffen sein. Zweimal und jedes Mal schmerzt sie in der Vulputation, ohne dass sie belästigt wird, und die Heilige Schrift wird nicht leicht gemacht, während sie erodiert und angeklagt wird, und die wahre Würde, die sie vermisst, wird im Laufe der Zeit von ihr geschwächt und nicht leicht gemacht.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.