WordPress jest bardzo popularnym systemem CMS na całym świecie ze względu na prosty interfejs, wysoce konfigurowalne motywy i nieskończoną różnorodność wtyczki potężny. Uprościło tworzenie, rozwój i zarządzanie stronami internetowymi, nawet dla najbardziej amatorskich użytkowników.

Dziś, dzięki WordPressowi, nie musisz już mieć określonej wiedzy, aby tworzyć atrakcyjne strony internetowe. Ale ty jesteś peut être natknąłem się już na stronę internetową, która oferuje naprawdę niesamowity design, i prawdopodobnie zastanawiałeś się: Jak to zrobić?

Niestety, jeśli jesteś amatorem lub początkującym, nie możesz wiele zrobić, nawet z WordPress, ponieważ aby zmodyfikować motyw, potrzebujesz pewnej wiedzy w zakresie HTML, CSS, PHP i kilku innych umiejętności, w zależności od charakteru motywu, ale także projektu lub celu.

Jednak nawet jeśli jesteś doświadczonym programistą, z pewnością potrzebujesz narzędzia, które pozwoli Ci zaoszczędzić czas i jakość końcowego wyniku.

Na szczęście wtyczka WordPress « Program do tworzenia stron WPBakery Dawniej znany jako „ Program Visual Composer » zapewnia rozwiązanie tego problemu. Z tym ostatnim, nawet najbardziej początkujący blogerzy może tworzyć strony o całkowicie unikalnym wyglądzie dla swojej witryny.

Za pomocą tej wtyczki możesz utworzyć:

  • Atrakcyjne strony docelowe (strona docelowa)
  • Ze stron sprzedaży do profesjonalny wygląd
  • Witryny z „prezentacją” Twojej firmy
  • Moduły stron dla treningu
  • chwilę

Moim zdaniem jest to najlepsze narzędzie do formatowania (lub układu) w Internecie. Specjalnie dla użytkowników WordPress.

Dlatego w tym samouczku pokażę, jak nadać swojej witrynie wyjątkowy wygląd (Lub bloga)wtyczka Program Visual Composer.

Więc ...

Jak zainstalować i skonfigurować Wtyczka WPBakery Page Builder

Program do tworzenia stron WPBakery jest wtyczka premia, którą można kupić Codecanyon : Najlepsza platforma sprzedaży na wtyczek internetowych.

W PORZĄDKU. Po zakupie i pobraniu tej wtyczki układu na WordPress, wszystko, co musisz zrobić, to zainstalować i aktywować.

Następnie zaczniemy od kilku podstawowych poprawek. Aby to zrobić, przejdź do lokalizacji „Ustawienia >> Program Visual Composer » na desce rozdzielczej.

Ustawienia ogólne

ustawienia ogólne kompozytor wizualnyPierwsza karta (ustawienia ogólne), Umożliwia zmianę:

  • Zawartość w którym wizualny Compose będzie dostępny. Możesz sprawdzić przedmioty (pisać) i / lub strony (strona)
  • Różne zasadydostęp różne role. Dzięki tej opcji możesz określić że zmienia się co. Zostaną wyświetlone różne dostępne role. Będziesz musiał kliknąć każdy z nich, aby sprawdzić elementy, do których jest przeznaczony (rola) będzie miał dostęp. Możesz zabronić używania „ wizualny kompozytor ”użytkownikom o określonej roli.
    aktywuj edytor w kreatorze stron WPbakery
  • Włącz lub wyłącz elementy czuły
  • Zdefiniuj podzbiory czcionek Google

wybór ról wpbakeryOpcje projektowania

W opcjach projektu masz możliwość modyfikowania domyślnego wyglądu wizualnego różnych elementów „ wizualny komponować ". Przed użyciem upewnij się, że zaznaczyłeś opcję « Użyj niestandardowych opcji projektowania ».

ustawienia css

Te opcje pozwolą Ci zdefiniować kolor, który ma zastosowanie do wszystkich elementów. 

  • Niestandardowy CSS »Daje ci możliwość dalszego dostosowania każdego elementu, tylko programiści mogą wiedzieć, co to jest.
  • Zakładka « Licencja produktu »Umożliwia aktywację wtyczka aby otrzymywać automatyczne aktualizacje.
  • Zakładka « shortcodes majątek Chodzi przede wszystkim o programistów.

OK, teraz stworzymy niestandardową stronę internetową za pomocą Kompozytor wizualny.

Jak utworzyć niestandardową stronę za pomocą wizualny komponować

Aby łatwo tworzyć spersonalizowane strony internetowe, możesz wybrać między edytorem sekcji „ back office „, Tj. Modyfikujesz witrynę z poziomu pulpitu WordPress, gdzie jest to„ front office ".

redaktor the-front-end-the-editor-backend

Jeśli używasz Gutenberga, zauważysz przycisk „Edytor stron” na górnym pasku zadań.

edytor wizualny kompozytor panel kontrolny gutenberg

Zaleta z edytorem Front office polega na tym, że możesz edytować swoje strony na żywo i zobaczyć, jak różne elementy pojawiają się w Twoim motywie.

Z redaktorem zaplecza

Aby uzyskać dostęp do edytora „ back office », Zapraszam do kliknięcia« wydawca Back-office ". Możesz wrócić do edytora wizualnego WordPress w dowolnym momencie, klikając „ tryb klasyczny ”. Ale myślę, że nie będzie to konieczne, więc formatowanie strony wtyczki jest zakończone.

Będąc w edytorze Back-office, możesz wybrać globalny układ, który będzie miał zastosowanie do strony.

Aktualizacje strona różnią się w zależności od tego, co planujesz zrobić ze stroną. Możesz wybrać « lądowanie strona » stworzyć stronę główną, „Lista usług” dla strony pokazującej usługi i tak dalej. Dzięki doświadczeniu będziesz w stanie nawet obstawiać zakłady en stron niestandardowe zaprojektowane bardzo pro.

Niezależnie od wyboru ustawienia strona, prezentacja elementów jest podobna we wszystkich tych ostatnich. Możesz dodać nowy element en cliquant sur „+” na samym szczycie meta pudełko « wizualny edytor », Lub dodaj model, klikając ikonę „Model”.

W każdej linii możesz (od lewej do prawej) :

  • Przesuń linię
  • Zarządzaj kolumnami w wierszu
  • Dodaj nową kolumnę

interfejs budowniczy strony wpbakeryInne opcje są dostępne po prawej stronie pola. Te opcje pozwalają ci (od lewej do prawej) Na adres:

  • zmniejszyć linię
  • edytuj wiersz
  • zduplikuj wiersz
  • usuń wiersz

wpbackery layoutW środku każdej kolumny możesz wcześniej dodać element, edytować kolumnę lub usunąć ją.

opcje sekcji wpbackeryopcje sekcji wpbackery

Polecane zasoby

Oto niektóre rozszerzenia wizualnego kompozytora, które gorąco polecamy:

1 - Jak zarządzać kolumnami

Na karcie zarządzania kolumnami możesz wybrać liczbę kolumn, które chcesz dodać do wiersza. Aby zrozumieć różne modele kolumn, wiedz, że każdy ułamek odpowiada szerokości, jaką będzie zajmować kolumna. O ile szablon zawiera ułamki, tyle razy strona będzie miała kolumny.

Oczywiście dostępne są różne szablony kolumn 11, ale możesz utworzyć dowolną ich liczbę, klikając łącze „Spersonalizowane” tuż pod listą kolumn.

Na przykład, aby wyświetlić sekcję strony z kolumnami 2 o równych szerokościach, musisz wybrać (Albo dodać) „1 / 2 + 1 / 2”. 

Kolumny zostaną wyświetlone na Twoim blogu, a ich szerokości zostaną rozdzielone proporcjonalnie do wymiarów motywu. Kolumna może zawierać jak najwięcej elementów, więc nie ma ograniczeń co do tego poziomu.

układ sekcji wpbakery

Różne elementy można przenosić do dowolnych kolumn.

ruchome pole tekstowe wordpress wpbakeryPo najechaniu myszką na każdy element będziesz miał dostęp do jego opcji, w szczególności przycisku, który pozwala:

  • ruch element
  • modyfikator element
  • duplikat element
  • Supprimer element

Opcje-the-elementy

2 - jak dodawać elementy

Możesz dostosować każdą kolumnę za pomocą elementów zaproponowanych przez „ Wizualny Komponować ". Aby dodać element, kliknij przycisk „+” w określonej kolumnie lub na przycisku „+” Główne menu wtyczki.

dodaj element wpbakery
Gdy kolumna jest pusta (ne zawiera brak treści)ona ma guzik „+” wewnątrz.
 Na przykład, aby dodać wideo, kliknij ten przycisk i wybierz element wideo.

dodatek do-video

Kliknięcie go otworzy nowe okno. W tym oknie musisz podać tytuł, link do filmu i dodatkową klasę (co nie jest obowiązkowe). Po zakończeniu wprowadzania różnych informacji o swoim filmie nie zapomnij zapisać zmian.

tuning wideo wpbakeryTwój film będzie dostępny w edytorze zaplecza. Zapisz zmiany jeszcze raz. Możesz go teraz wyświetlić, klikając „podgląd”.

dodaj wideo wpbakery wordpressProces dodawania elementu jest taki sam dla wszystkich innych, z kilkoma wyjątkami. Informacje do uzupełnienia mogą się różnić w zależności od elementów. 

Na przykład wybierając element tekstowy, znajdziesz klasyczny edytor wizualny (ten dostępny podczas pisania artykułów lub stron), ale też opcja pozwalająca na dodanie animacji podczas wyświetlania elementu. Ten ostatni może więc zanikać z jednej pozycji do drugiej, w zależności od ustawień.

ustawienia bloku tekstowegoNajciekawsze z tego wtyczkaoznacza, że ​​będziesz w stanie tworzyć Paski jeśli na przykład Twój motyw nie. Aby to zrobić, kliknij przycisk Dodaj (" + »)i wybierz element „ Komentarze WP ostatni "," Facebook lubić I wreszcie « Kategorie Wp ".

Teraz utwórz ten niestandardowy szablon kolumny 1 / 3 + 2 / 3 »Lub jakikolwiek inny i dodaj element sidebar na lewej kolumnie lub na prawej. Nie ma to znaczenia, ponieważ wszystko zależy od tego, jak szeroki ma być pasek boczny utworzony w ramach tego rozszerzenia układu, jak w programie Visual Composer.

Konfiguracja kolumn wpbakery

Zauważysz nową pustą kolumnę po prawej stronie, dodaj nowy wybrany element (Zalecam dodanie prostego tekstu). Teraz zapisz stronę i przejdź do podglądu, aby zobaczyć wynik tego ćwiczenia.

3 - Jak zapisać i ponownie użyć szablonu strony

Istnieje możliwość zapisania szablonu Twojej strony i wykorzystania go później. Uwielbiam tę opcję, ponieważ pozwala zaoszczędzić wiele godzin na kopiowaniu szablonu ze strony. Tutaj wszystko odbywa się za pomocą jednego kliknięcia. Tak, dobrze słyszałeś, jednym kliknięciem… lub za dwa 🙂

Aby zapisać szablon, kliknij ikonę szablonów. W oknie, które się pojawi, wprowadź nazwę swojego modelu w polu „ Zapisz bieżący układ jako szablon », A następnie kliknij« Zapisz szablon ".

Ważne: Musisz to zrobić na stronie, którą chcesz zapisać jako szablon, a nie na pustej stronie.

zarejestruj model wpbakery

W ten sam sposób znajdziesz różne modele, które zapisałeś, dalej w tym samym oknie w sekcji „Załaduj model”.

moje modele wpbakeryW tym przypadku wystarczy utworzyć nową stronę, a następnie przejść do szablonów i wybrać tę, którą chcesz nadać swojej stronie.

Z redaktorem front office

Redaktor front office ma przewagę de umożliwiają edycję strony w czasie rzeczywistym. Innymi słowy, pozwala zobaczyć, jak będzie wyglądać każda zmiana wprowadzona w witrynie za pomocą programu Visual Composer. Zaletą tego podejścia jest to, że nie musisz pracować na ślepo, tak jak w przypadku edytora stron zaplecza.

W dowolnym momencie możesz przełączyć się z jednej opcji na inną (Urząd back office lub krawędź).

Redaktor front-office nie różni się zbytnio od redaktora back-office tym, że jest tam bar utilisateur identyczne, ale wszystkie opcje edytora zaplecza są takie same, jak w edytorze front office.

pasek narzędzi wpbakeryDodano jednak pięć nowych przycisków, w tym:

  • Aktywacja lub dezaktywacja przewodników
  • Emulator, dzięki któremu zobaczysz, jak Twój blog będzie wyglądał na różnych urządzeniach
  • Przycisk z powrotem do back office
  • Przycisk Zapisz zmiany
  • Przycisk Exit wizualny komponować

opcje wpbakeryKażdy element strony można modyfikować, będziesz mógł zobaczyć dostępne opcje, najeżdżając kursorem na każdy element. Kształt przycisku "GRAĆ", pozwoli ci wyświetlić więcej opcji dla elementu.

Opcje-the-elementy-of-the-front office

Twoje pierwsze kroki mogą być trudne, ale dzięki praktyce osiągniesz strona główna tak.  Jeśli chcesz, zanim zdobędziesz wtyczkamożna przetestuj to za darmo (logowania, użytkownik: demo, hasło: demo).

Oto, co udało mi się osiągnąć w ciągu 1 minuty w domu. Dzięki praktyce możesz osiągnąć bardzo, bardzo satysfakcjonujące rezultaty. A jeśli potrzebujesz pomocy w tworzeniu witryny WordPress za pomocą tej potężnej wtyczki, nie krępuj się skontaktuj się z zespołem BlogPasCherkto chętnie zrealizuje Twoje projekty.

Mam nadzieję, że ten samouczek w całości po francusku pomoże Ci postawić pierwsze kroki z wtyczka « Program Visual Composer ". Jeśli masz problem, my (lub pomoc) chętnie Ci pomożemy. Nie zapomnij: piękna strona zamienia bardziej ciekawskich klientów.

Zalecane rozszerzenia

Oto niektóre rozszerzenia wizualnego kompozytora, które gorąco polecamy:

Odkryj więcej wtyczek na Codecanyon

Udostępnij ten poradnik z potrzebującym.