Profilabschnitt

Der Profilbereich ist die perfekte Möglichkeit, die Menschen hinter Ihrer Arbeit vorzustellen. Egal, ob Sie ein Infoseite, eine Teampräsentation oder ein Bio-Bereich, dieses Layout ermöglicht Ihnen, Personen mit Eleganz und Klarheit darzustellen.

Markieren Sie die Foto, Name, Rolle und Geschichte in einem Format, das persönlich und ansprechend wirkt. Von Kreativteams und Mitarbeitern bis hin zu Rednern, Mentoren oder Mitwirkenden – der Profilbereich hilft Ihnen, tiefere Verbindungen zu Ihrem Publikum aufzubauen, indem er Ihrer Marke oder Ihrem Projekt ein Gesicht gibt.

Mit einfachen Anpassungsoptionen und einem klaren, ansprechenden Design können Sie im Profilbereich ganz einfach die Menschen präsentieren, die Ihre Arbeit ermöglichen.


In diesem Artikel:

  1. Was ist der Profilbereich?
  2. Abschnitt „Profil hinzufügen“
  3. Listenelemente hinzufügen und bearbeiten
  4. Elemente der Sequenzliste
  5. Listeneinträge löschen
  6. Elemente verwalten
  7. Abschnittslayout ändern
  8. Stiloptionen

Profilabschnitt

Ein Profilbereich ist eine Sammlung einzelner Profile, in der Sie ein Foto, Ihren Namen, Ihre Rolle oder Ihre Bezeichnung sowie eine kurze Beschreibung hinzufügen können. Sie können auch einen Link oder eine Schaltfläche hinzufügen, um Besucher auf Detailseiten oder externe Links zu den einzelnen Profilen zu leiten.


Abschnitt „Profil hinzufügen“

  • Einer Seite kann ein Abschnitt hinzugefügt werden. Sie können entweder einen Abschnitt zu einer bereits vorhandenen Seite hinzufügen oder eine neue Seite erstellen innerhalb Ihrer Website.
  • Auf deiner Seite, Klicken Sie auf blau + Symbol hinzufügen a Neuer Abschnitt auf Ihre Seite.

  • Sie sehen jetzt die Abschnitt Kategorien auf der linken Seite.
  • Wähle die  Profil & Biolinks (1) Kategorie und klicken Sie auf die Profil Registerkarte (2), aus der Sie wählen können verschiedene Layouts Profil (3) Abschnitt.

Hinweis

  1. Sie können die Abschnittsbreite über verwalten Abschnittseinstellungen und die Inhaltsbreite aus der Inhaltsstil.
  2. Die ideale Bildgröße, die Sie in diesem Abschnitt hochladen müssen, hängt von der Anzahl der Spalten ab. WEITERE INFORMATIONEN .
  3. Halten Sie die Titel, Untertitel und Beschreibungen kurz und knackig.
  4. Klicken Sie im Beschreibungsfeld auf die Enter Schaltfläche, um einen Zeilenumbruch zu geben und die Shift + Enter Schaltfläche, um mit der nächsten Zeile zu beginnen.


Listenelemente hinzufügen und bearbeiten

Listenelement hinzufügen

Nachdem Sie den Abschnitt hinzugefügt haben:

  • Klicken Sie auf Bildliste bearbeiten (1) Schaltfläche zum Öffnen des Listenelementfensters.

  • Klicken Sie auf Artikel hinzufügen (2) Schaltfläche, um ein neues Listenelement hinzuzufügen.
  • Sie können wählen, um Dduplizieren oder löschen (3) die Listenelemente.


Listenelement bearbeiten

Klicken Sie auf das Listenelement, das Sie bearbeiten möchten. Dadurch werden die Bearbeitungsoptionen für bestimmte Listenelemente geöffnet.

Von hier aus können Sie:

  • Primäres und sekundäres Bild hochladen / entfernen (1)
    Sie können eine hochladen Sekundärbild zusammen mit dem Primäres Bild für jedes Listenelement. Wenn ein Benutzer mit der Maus über das Element fährt, wird das sekundäre Bild angezeigt und ersetzt das primäre Bild. Darüber hinaus können Sie die Bildakzentfarbe, das beim Hovern über das Bild angezeigt wird.
  • Hinzufügen Titel (2), Untertitel (3), und Beschreibung (4) des Listenelements.
  • Je nach gewähltem Layout finden Sie möglicherweise die Option für Untertitel und Beschreibung bei bestimmten Listenelementen nicht.
    Überprüfen Sie, bevor Sie die Beschreibung hinzufügen fehlen uns die Worte. Artikel.

5. Aktion beim Klicken

Sie können das Klickverhalten einzelner Elemente im Profil Im Folgenden sind die verfügbaren Optionen aufgeführt:

  • Gehe zu einem Link
    Wenn Sie diese Option auswählen, öffnet sich das Link-Builder, sodass Sie diesem Element einen Hyperlink hinzufügen können. Der Link kann Benutzer auf eine andere Seite Ihrer Website oder eine externe URL weiterleiten. WEITERE INFORMATIONEN Über Uns Link-Builder.
  • In Lightbox öffnen
    Diese Option zeigt den Artikel vergrößert an. Lightbox angezeigt, wenn angeklickt wird. In diesem Modus wird das Untertitel und Beschreibung Mit dem Element verknüpfte Elemente werden nicht in der Rasteransicht angezeigt, sind aber im Lightbox-Modus sichtbar.
  • Keine Aktion
    Wählen Sie diese Option, um das Element nicht anklickbar zu machen. Wenn diese Option ausgewählt ist, wird beim Anklicken des Elements keine Aktion ausgelöst.

6. Link in neuem Fenster öffnen: Stellen Sie den Link so ein, dass er in a geöffnet wird neuer Tab oder im selben Tab. Dies ist nur sichtbar, wenn Gehe zu einem Link ist unter dem Aktion beim Klicken Menü.

7. Schaltflächen und Symbole: Fügen Sie jede Art von hinzu verbindung zum Listenelement. Sie können einen Button/Bildlink/Social Icon/Textlink hinzufügen. Mehr erfahren.

8. Kartenstil-Überschreibung

Sie können die globalen Kartenstileinstellungen im Abschnitt überschreiben. Style Einstellungen und passen Sie die Karte jedes Elements im Abschnitt „Profil“ individuell an. Auf diese Weise können Sie verschiedenen Listenelementen einzigartige Stile zuweisen und so die Anpassung verbessern.

Mehr erfahren Informationen zur Kartenoption im dynamischen Abschnitt.

9. Formstil überschreiben

Verwenden Sie die Option „Überschreiben“, um jedem Bild im Abschnitt „Profil“ einzeln eine andere Form zuzuweisen. So haben Sie mehr Kontrolle über den visuellen Stil jedes Elements. Mehr erfahren über Formmaske.

10. Speichern: Speichern Sie die Änderungen, nachdem Sie die Anpassungen vorgenommen haben.

Hinweis

  • Ermöglichen Karten Option von Stileinstellungen um Karten für einzelne Artikel zu überschreiben und anzupassen.
  • Ermöglichen Formmaske Option von Style Einstellungen um Formen für jedes Element separat zu gestalten.


Sehen Sie sich das Bearbeiten eines Bildlistenelements in Aktion an:


Elemente der Sequenzliste

  • Sie können die Listenelemente einfach ziehen und ablegen, um die Reihenfolge zu ändern.

Sehen Sie sich die Sequenzierung der Bildlistenelemente in Aktion an: 


Löschen Sie ein Listenelement

Nachdem Sie ein Listenelement hinzugefügt haben, können Sie es bearbeiten und löschen.

  • Klicken Sie auf Löschen neben dem Element der Bildliste.
  • Tne, klicken Sie auf die Löschen Schaltfläche im Bestätigungs-Popup.
  • Schließlich haben Speichern Ihre Änderungen.

Sehen Sie sich das Löschen eines Bildlistenelements in Aktion an: 


Hinweis

Einmal gelöschte Listenelemente können nicht wiederhergestellt werden.


Elemente des Profilabschnitts verwalten

Der Abschnitt „Bildliste“ enthält eine Registerkarte Elemente Damit können Sie die Sichtbarkeit verschiedener Elemente innerhalb des Abschnitts ganz einfach verwalten. Mithilfe einfacher Kippschalter können Sie bestimmte Elemente aktivieren oder deaktivieren, ohne die Elemente selbst löschen oder ändern zu müssen.

  • Klicken Sie auf Bildliste bearbeiten (1) Taste.

  • Wähle die Elements Serie. (2) Registerkarte.
  • Nachdem Sie die Änderungen vorgenommen haben, klicken Sie auf Gespeichert (3) Taste.

Abschnittsoptionen

  1. Überschrift anzeigen: Aktivieren oder deaktivieren Sie die Sichtbarkeit der Überschrift für den Abschnitt „Bilderliste“.
  2. Schaltflächen anzeigen: Steuern Sie, ob Schaltflächen auf Abschnittsebene angezeigt werden.

Artikeloptionen

  1. Bild anzeigen: Sichtbarkeit der Bilder umschalten.
  2. Zeige Titel: Steuert, ob der Titel angezeigt wird.
  3. Untertitel anzeigen: Untertitel aktivieren oder deaktivieren.
  4. Beschreibung anzeigen: Verwalten Sie die Sichtbarkeit von Artikelbeschreibungen.
  5. Schaltflächen anzeigen: Entscheiden Sie, ob Schaltflächen für einzelne Elemente angezeigt werden sollen.


Abschnittslayout

  • Klicken Sie auf Bildliste bearbeiten (1) Taste.

  • Wähle die Layout (2) Registerkarte.
  • Auswählen ein Layout für Ihren Abschnitt und Gespeichert (3) die Änderungen.

 

Pro Tipp

Um einen Abschnitt in voller Breite bzw. einen Listenabschnitt mit Registerkarten zu erstellen, wählen Sie ein beliebiges Layout im Bereich von 25 bis 29.

Notizen

  • Sie können Ihrer Seite ganz einfach ein Listenlayout mit Registerkarten hinzufügen.
  • Sie haben die Möglichkeit, zwischen einem horizontalen und einem vertikalen Tab-Layout zu wählen.
  • Es hilft bei der Erstellung eines vergleichsbasierten Abschnitts.


Gestalten Sie Ihren Abschnitt

  • Klicken Sie auf Bilderliste bearbeiten (1) .

  • Wähle die Stil (2) Tab.
  • Ändern Sie den Stil für die Abschnittselemente und Speichern (3) Ihre Änderungen.


Sie haben mehrere Stiloptionen für den Abschnitt: 

  1. Anzeige-Eigenschaften
  2. Mobile Anzeige
  3. Ausrichtung
  4. Textgröße
  5. Abstand
  6. Abschnittsüberschrift
  7. Bildoptionen
  8. Formmaske
  9. Bild-Hover-Optionen
  10. Bildrand
  11. Kartenoptionen
  12. Schattenoptionen
  13. Schaltflächen & Links

Präsentation 

  1. Wählen Sie auf Artikel anzeigen in Reihen und Spalten or Karussell 
    • Wenn Sie die gewählt haben Reihen und Spalten Option werden die Listenelemente in Zeilen und Spalten angeordnet. In diesem Fall müssen Sie die Anzahl der Zeilen und Spalten angeben.
    • Wenn Sie die gewählt haben Karussell Option werden die Listenelemente als Diashow präsentiert. WEITERE INFORMATIONEN .
  2. Setze die Anzahl der Spalten für die Bilderliste. Sie können zwischen 1 und 10 Spalten wählen.
  3. Präzisiere das Abstand zwischen Spalten der Listenelemente.
  4. Präzisiere das Abstand zwischen Zeilen der Listenelemente.

Wenn in Schritt 1 die Option „Karussell“ ausgewählt ist, werden Ihnen die folgenden zusätzlichen Optionen angezeigt:

  1. Smooth-Scrolling aktivieren: Ermöglicht kontinuierliches Scrollen von Elementen im Karussell für ein nahtloses und optisch ansprechendes Erlebnis.
  2. Automatisches Schieben: Automatisches Durchlaufen der Folien ohne Benutzerinteraktion.
  3. Autoplay-Fortschritt anzeigen: Zeigt zur besseren Sichtbarkeit einen Fortschrittsindikator an, während die automatische Wiedergabe aktiv ist.
  4. Autoplay-Verzögerung: Legt das Zeitintervall zwischen jedem Folienübergang fest, wenn die automatische Wiedergabe aktiviert ist.
  5. Karussell-Schleife: Ermöglicht die kontinuierliche Folienschleife, sodass das Karussell nach der letzten Folie nahtlos neu gestartet wird.
  6. Karussellsteuerung: Wählen Sie das Navigationssteuerung. Sie können zwischen „Keine Steuerung“, „Pfeile – unten Mitte/oben rechts/unten rechts“, „Chevron“, „Punkte“ und „Horizontales Scrollen“ wählen.
  7. Kanten verblassen lassen: Wenden Sie einen subtilen Überblendeffekt auf die Ränder des Karussells an. Dies verbessert das Benutzererlebnis, indem Bilder beim Ein- und Ausblenden der Ansicht sanft überblendet werden.


Mobile Anzeige

  1. Stellen Sie die Anzahl der ein Rasterspalten für mobile Geräte. Sie können es auf maximal 3 Spalten einstellen.
  2. Definiere das Abstand zwischen Gittern (in Pixel).

Gerätespezifisches Spaltenlayout basierend auf den Studioeinstellungen:


Ausrichtung

  1. Ausrichten den Inhalt horizontal in der Bilderliste. Sie können sie linksbündig, rechtsbündig oder zentriert einstellen.
  2. Ausrichten den Inhalt vertikal in der Bildliste. Sie können sie so einstellen, dass sie oben, in der Mitte und unten ausgerichtet sind.
  3. Wähle die Inhaltsreihenfolge dh die Bilder der Listenelemente, die zuerst angezeigt werden sollen, oder der zugehörige Text.


Textgröße

  1. Klicken Sie auf Textstil ändern Schaltfläche, um die zu besuchen Technologie Abschnitt und Verwalten Sie Ihre Schriftgrößen und -stile. 
  2. Setze die Titel Schriftart für die Listenelemente des Abschnitts.
  3. Setze die Untertitel Schriftart für die Listenelemente des Abschnitts.
  4. Legen Sie die Standardeinstellung fest Beschreibung Schriftart für die Listenelemente des Abschnitts.


Abstand

  1. Präzisiere das Bildbreite für Listenelemente.
  2. Präzisiere das Inhaltsbreite für die Listenelemente.
  3. Präzisiere das Leerzeichen unter der Abschnittsüberschrift in px.
  4. Präzisiere das Leerzeichen unter Bildern der Listeneinträge (in %).
  5. Präzisiere das Leerzeichen unter den Titeln der Listeneinträge (in %).
  6. Präzisiere das Leerzeichen unter den Untertiteln der Listeneinträge (in %).


Abschnittsüberschrift

  1. Horizontal ausrichten der Abschnittsüberschriftstext. Sie können ihn auf Links, Mitte und Rechts einstellen.
  2. Aktivieren/Deaktivieren der Trennwand zwischen der Abschnittsüberschrift und dem Abschnittsinhalt.
  3. Setze die Dicke der Trennwand (in px).
  4. Präzisiere das Teilerfarbe aus dem Farbwähler.
  5. Wähle ein Teilerstil aus dem Dropdown.
  6. Setze die Überschriftenbreite um festzulegen, wie breit der Abschnittstitel angezeigt wird, beginnend bei einem Minimum von 50 %.


Bilder 

  1. Wähle die IMagier Crop für die Listenelemente. Sie können die Bilder als „Quadrat“, „Kreis“, „Horizontal“, „Hochformat“ und „Original“ festlegen.
  2. Wählen Sie einen gemeinsamen Eckenradius oder einen anderen Eckenradius für jede Seite der Listenelemente und legen Sie eine Zahl (in px) für die fest COrdner Radius der Listenelementbilder. WEITERE INFORMATIONEN .

Tipp

Verwendung der Eckenradius können Sie verschiedene Formen von Listenelementbildern erstellen. Wenn Sie hier 500 px angeben, werden die Bilder kreisförmig angezeigt.

  • Falls Sie geteilte Ecken gewählt haben, können Sie für jede Ecke einen anderen Eckenradius einstellen.


Formmaske

  1. Formmaske: Aktivieren Sie diesen Schalter, um den Bildern in der Bildliste eine Formmaske zuzuweisen. Sobald diese Option aktiviert ist, schneidet die ausgewählte Form das Bild optisch in diese Form.
  2. Form auswählen: Wählen Sie aus verschiedenen vordefinierten Formen für Ihre Bilder. So können Sie Ihre Inhalte kreativ gestalten, indem Sie Bilder in einzigartigen Formen wie rund, rautenförmig, tropfenförmig usw. darstellen.
  3. Strecken: Aktivieren Sie diese Option, um die ausgewählte Form zu strecken und sie besser an den Bildcontainer anzupassen. Dadurch wird sichergestellt, dass die Form den verfügbaren Platz proportional ausfüllt und die visuelle Ausrichtung auf verschiedenen Bildschirmgrößen verbessert wird.

Notizen

  • Die Option „Strecken“ ist layoutabhängig – Es wird möglicherweise nicht in bestimmten Layouts angezeigt. In Layouts, in denen Text wie Titel oder Untertitel über dem Bild angezeigt wird, Die gesamte Option „Formmaske“ ist möglicherweise nicht verfügbar.
  • Die Dehnungseinstellung hängt von mehreren Faktoren ab - Einschließlich Bildgröße, Ausrichtungund Zuschneideeinstellungen unter der Registerkarte „Stil“ definiert.
  • Wenn „Bildzuschneiden“ auf „Original“ eingestellt ist, die tatsächlichen Abmessungen des Bildes bestimmen, ob es vertikal oder horizontal gestreckt wird.


Auf Bild Hover 

  1. Wähle die Bild-Hover-Farbe um als Akzentfarbe oder sein angegeben. Wenn Sie die gewählt haben AkzentfarbeGeben Sie dann die an OpazitätSie können die Akzentfarbe für jedes Element festlegen von Element bearbeiten Panel.
  2. Wenn Sie die gewählt haben Farbe angeben Option setzen Sie dann die Overlay-Farbe und Deckkraft.
  3. Setze die Textfarbe überlagern das beim Hovern angezeigt wird.
  4. Wählen Sie auf Animieren Sie die Bilder der Listenelemente beim Hover durch Klicken auf Ja. Überprüfen Sie diese Funktion auf einer Live-Seite.
  5. Wähle ein Animationsstil für Bilder, wenn der Cursor darüber schwebt.
  6. Wählen Sie, ob Sie zulassen möchten, dass Übergänge von Bildern beim Schweben oder nicht.
  7. Wählen Sie ein Übergangsstil für den Hover-Übergang. Verfügbare Optionen sind „Ausblenden“ und „Umdrehen“.


Bildrand

  1. Rand aktivieren/deaktivieren um die Bilder herum, indem Sie den Schalter umschalten.
  2. Wählen Sie eine gemeinsame Grenze auf allen Seiten von Bildern oder Sie können das angeben Grenzen separat für jede Seite.
  3. Präzisiere das Breite der Grenze. Wenn es auf 0 gesetzt ist, wird der Rand nicht angezeigt. Sie haben auch die Möglichkeit, die Randbreite für jede Seite des Bildes individuell festzulegen.
  4. Wähle aus Rahmenfarbe aus dem Farbwähler.
  5. Wählen Sie eine bevorzugte aus Border Style aus dem Dropdown.
  6. Bestimmen Sie die Randbreite für Mobilgeräte Geräte und richten Sie es an der für den Desktop gewählten Breite aus.


Karten


Shadow

  1. Präsentation – Wählen Sie, ob der Schatten hinter den Listenelementen immer oder nur beim Hover angezeigt werden soll.
  2. Design – Wählen Sie aus vorhandenen Voreinstellungen oder erstellen Sie einen benutzerdefinierten Schatten.
    Falls Sie die benutzerdefinierte Option gewählt haben, besuchen Sie diese Box-Schatten-Generator um einen benutzerdefinierten Schatten zu erstellen. Zum Schluss kopieren und einfügen Box-Schatten-CSS.
  3. Falls Sie die Option Voreinstellungen gewählt haben, dann Wählen Sie Schattenstile aus dem Dropdown.


Schaltflächen & Links

  1. Sehen Sie, wie um das Styling zu verwalten Schaltflächen und Links.
  2. Gespeichert alle Stiländerungen.


Können Sie nicht finden, wonach Sie suchen?

Wenden Sie sich an einen Pixpa-Experten.