Wordpress

Revisió del complement de WordPress de Slider Revolution i com guiar

Slider Revolution és un control lliscant premium disponible com a complement de WordPress i extensió de Magento. Ha guanyat una gran popularitat a la comunitat de WordPress a causa de la seva àmplia gamma de funcions i la seva facilitat d'ús.

En aquesta visió general cobrirem les principals característiques del Connector de WordPress de Slider Revolution, i després us mostrarem com de fàcil és crear els vostres propis controls lliscants des de zero.

Aconsegueix Slider Revolution amb el teu tema! El connector Slider Revolution s'inclou gratuïtament amb la compra del nostre tema de WordPress Total com a connector inclòs. Així que no només obteniu un connector fantàstic, també obtindreu el tema Total, així com el connector del creador de pàgines WPBakery! (Consulteu les notes sobre la instal·lació i l'ús dels complements que s'hi inclouen a continuació).

Obteniu Slider Revolution

Slider Revolution: què fa que aquest connector sigui tan fantàstic

Hi ha un munt de funcions fantàstiques integrades a Slider Revolution per facilitar la creació de controls lliscants personalitzats per al vostre lloc web. Aquí teniu alguns dels nostres preferits.

Dissenys i capacitat de resposta

Slider Revolution ha canviat una mica el seu focus per ser més que un control lliscant. Des de l'actualització de la versió 6, per descomptat, podeu crear controls lliscants animats impressionants, així com carrusels i escenes (una sola diapositiva que s'utilitza com una fila del creador de pàgines). El connector també està preparat per respondre amb una nova opció d'herència intel·ligent. Per tant, en lloc de reduir-se simplement el control lliscant als dispositius mòbils, els elements canviaran la mida o es reduiran perquè el vostre control lliscant o mòdul sigui llegible i optimitzi segons el dispositiu.

Múltiples fonts de contingut

Vols crear un control lliscant per a les teves publicacions? O per als vostres productes WooCommerce? No és un problema: tria 9 fonts de contingut diferents en crear el control lliscant.

En escriure aquesta publicació, Slider Revolution admet contingut basat en:

  • Per defecte/personalitzat: carregueu les vostres pròpies imatges/vídeos
  • missatges: trieu entre les publicacions del vostre bloc, tipus de publicacions personalitzades, identificadors de publicació específics o utilitzeu la publicació/pàgina actual (idéal si voleu afegir un control lliscant destacat a la publicació del bloc o a l'element de cartera)
  • WooCommerce: mostra els teus productes
  • mitjans de comunicació social: concretament Flickr, Instagram, Twitter, Facebook, YouTube o Vimeo

Opcions fàcils

Slider Revolution us facilita la creació de controls lliscants personalitzats afegint opcions per a gairebé tot. Trieu el retard de la diapositiva, les fletxes de navegació, els tipus de lletra personalitzats, afegiu fons de paral·laxi, la ubicació del control lliscant (afegiu marges), afegiu capes multimèdia, inseriu botons, seleccioneu transicions de diapositives i molt més, tot utilitzant els menús desplegables del connector.

I, a més, podeu personalitzar gairebé tot i fins i tot desar els vostres propis valors predefinits per reutilitzar estils de lletra, transicions de diapositives, animacions de capes i molt més fàcil.

Suport multimèdia

Afegiu text, enllaços, imatges, vídeos i àudio amb uns quants clics del ratolí. Això us ofereix la possibilitat de crear diapositives riques en informació amb les quals els vostres lectors i clients es podran identificar. A més, cadascun d'aquests tipus de suports s'afegeix com a capa pròpia amb animacions, temps i estils únics que configureu mitjançant les súper opcions de Slider Revolution.

Instal·lació de Slider Revolution

Primer haureu d'obtenir una còpia del connector de WordPress Slider Revolution. Hi ha alguns mètodes diferents per instal·lar el connector en funció de si heu comprat la vostra pròpia còpia del connector o si s'inclou amb el vostre tema premium.

1. Instal·leu la vostra còpia de Slider Revolution

Descarregar Slider Revolution

Si heu comprat la vostra pròpia còpia de Slider Revolution a CodeCanyon, haureu d'instal·lar el connector vosaltres mateixos. Per descarregar els fitxers del connector, inicieu sessió al vostre compte d'Envato i aneu a la vostra pàgina de descàrregues (podeu accedir a aquesta pàgina passant el cursor pel vostre nom d'usuari). A continuació, localitzeu la vostra còpia de Slider Revolution i seleccioneu l'opció de descàrrega per a "Només fitxer instal·lable de WordPress".

Slider Revolution Afegeix un nou connector

A continuació, inicieu sessió al vostre lloc de WordPress i navegueu-hi Connectors> Afegeix un nou.

Slider Revolution Seleccioneu el connector Zip

A continuació, feu clic al botó "Carrega el connector" a la part superior esquerra de la pantalla.

Des d'aquí, utilitzeu el botó "Tria un fitxer" per seleccionar el fitxer del connector que acabeu de baixar de CodeCanyon i feu clic al botó "Instal·la ara".

Slider Revolution Activa el connector

Després d'això, només cal que activeu el connector i ja podreu començar a crear controls lliscants!

Descomprimiu la carpeta del connector per carregar-la mitjançant FTP

Nota: També podeu instal·lar el vostre connector mitjançant FTP iniciant sessió al vostre servidor i carregant el connector extret (descomprimit) a la vostra carpeta ubicada a wp-content/plugins.

2. Instal·leu Slider Revolution inclòs amb un tema premium

Molts temes premium inclouen còpies de connectors premium amb la descàrrega del tema. Si és així com voleu instal·lar la vostra còpia de Slider Revolution, haureu de fer referència a la documentació del vostre tema.

La majoria dels desenvolupadors de temes fan tot el possible per facilitar el procés d'instal·lació del complement. Per exemple, mitjançant la inclusió d'una barra d'avís o un panell d'activació.

Complements d'instal·lació de temes totals

A la nostra guia estem utilitzant el tema de WordPress Total. Després d'instal·lar i activar Total, hauríeu de veure un missatge a la pantalla que us recomana instal·lar Slider Revolution (i altres connectors inclosos amb el tema).

Complements d'activació de tema total

Només cal que feu clic a l'enllaç per anar a la pàgina de connectors recomanats/agrupats i, a continuació, feu clic per instal·lar i activar els vostres connectors.

Instal·leu Slider Revolution amb Total

Total també inclou una opció personalitzada a l'importador de demostració per instal·lar i activar Slider Revolution en importar dades de mostra. Si s'ha utilitzat Slider Revolution per crear la demostració que esteu important, se us demanarà que instal·leu el connector tal com es veu més amunt.

Importa els controls lliscants de la revolució amb Total

Aleshores, només assegureu-vos que l'opció "Importa els controls lliscants" estigui seleccionada i el tema importarà automàticament els controls lliscants personalitzats de la demostració. Fàcil!

Guia d'usuari de Slider Revolution

Després d'haver instal·lat el connector, hauria d'afegir un element de menú al tauler principal de WordPress. Feu clic a això per anar a la pàgina principal de gestió del control lliscant de Slider Revolution.

Pàgina principal del connector de Slider Revolution

Des d'aquí podeu crear o editar controls lliscants, importar plantilles, activar la vostra llicència si heu comprat la vostra pròpia còpia del connector.

Activació de la llicència del complement Slider Revolution

Si heu comprat Slider Revolution, podeu activar-lo per desbloquejar totes les funcions del control lliscant. Per localitzar la vostra llicència, haureu de tornar a CodeCanyon i visitar la pàgina del connector Slider Revolution.

Llicència del complement Slider Revolution

Des d'aquí, feu clic a la pestanya "Suport" per veure totes les vostres llicències adquirides. Copieu la vostra clau de llicència i torneu al vostre tauler de control de WordPress.

Icona de campana de revolució lliscant

Fent clic a la icona de la campana.

Activació de la revolució del control lliscant

A continuació, introduïu la vostra clau de llicència. Per rebre assistència de l'autor del complement, així com per desbloquejar les plantilles i complements del mòdul Slider Revolution premium, haureu de comprar la vostra pròpia llicència.

IMPORTANT, connector agrupat: Si la vostra còpia de Slider Revolution s'ha inclòs amb el vostre tema, podeu ignorar aquesta secció. No cal activar una llicència de connectors, ja que els connectors agrupats no en tenen cap. En comptes d'això, depèn del vostre autor del tema assegurar-se que la vostra còpia del connector s'actualitza dins de les actualitzacions del vostre tema. Tot i que de vegades això significa que potser haureu d'esperar una mica per a una actualització del control lliscant, assegura que el connector és totalment compatible amb el vostre tema.

Configuració global de la revolució lliscant

Abans de començar a construir et recomanem visitar el configuració global opció (que és un element del submenú a sota de Slider Revolution).

Configuració global de la revolució lliscant

Hi ha moltes opcions importants aquí per a la configuració predeterminada de la quadrícula sensible (que s'aplica quan es construeixen nous controls lliscants), URL de càrrega de fonts personalitzades, creació de bases de dades per al connector i molt més. Però hi ha dues opcions que us recomanem que modifiqueu.

La primera opció que hauríeu de considerar l'edició és permís que podeu utilitzar per restringir l'accés dels connectors només als administradors. Aquesta és una manera senzilla d'assegurar-vos que vosaltres, el vostre dissenyador web o altres administradors sou els únics que creen lliscants al vostre lloc (especialment útil si teniu autors convidats al vostre bloc).

La segona opció que potser voldreu editar és Punts d'interrupció de la quadrícula de disseny per defecte opció. Aquestes són les amplades de píxels segons el dispositiu per a la vostra configuració de resposta.

Aquí també podeu activar els tipus de lletra personalitzats, la càrrega mandrosa de tercers i forçar la creació de bases de dades (si teniu problemes amb la taula de la revolució lliscant). Un cop fet, assegureu-vos de desar la configuració.

Ara podeu començar a crear els vostres controls lliscants! Teniu tres opcions: començar des de zero, agafar un fitxer d'exportació gratuït dels "exemples d'ús" de Slider Revolution o importar els controls lliscants de mostra inclosos amb el vostre tema.

Importació manual d'un control lliscant

Importació manual de Slider Revolution

Per importar un control lliscant que hàgiu baixat des d'un altre lloc web dels exemples d'ús de Slider Revolution, primer descarregueu el fitxer lliscant del seu lloc i, a continuació, torneu al vostre WordPress fent clic al botó. Importa el control lliscant opció. Des d'aquí, busqueu el fitxer de mostra que heu baixat i feu clic a Pujar. Això hauria d'afegir el control lliscant de mostra i tota la seva configuració perquè pugueu utilitzar-lo com a base per a un control lliscant nou.

Nou mòdul de la plantilla

Plantilla d'importació de la revolució lliscant

Si heu comprat la vostra pròpia llicència per a Slider Revolution, tindreu accés a tots els seus dissenys predefinits (n'hi ha més de 180 per triar). Per utilitzar una plantilla, només cal que passeu el cursor sobre la que us agradi, feu clic a la icona Ull per previsualitzar o a la icona Plus per instal·lar la plantilla.

Nota: Si la vostra còpia de Slider Revolution s'ha inclòs amb el vostre tema, no tindreu accés a aquestes plantilles. Tanmateix, molts autors de temes inclouen les seves pròpies plantilles de control lliscant que han creat per anar juntament amb les seves demostracions de temes que podeu importar manualment.

Crea un control lliscant nou

Si feu un control lliscant des de zero, feu clic a Nou mòdul en blanc opció. Ara anem a treballar!

Missatge de benvinguda de la revolució lliscant

Primer veureu un missatge de benvinguda amb una opció per utilitzar la seva guia d'inici ràpid. Feu clic per començar i seguiu la nostra guia guiada a continuació.

Slider Revolution Tipus de control lliscant

Trieu un tipus de control lliscant: teniu l'opció de triar el vostre mòdul:

  • Botó lliscant: exactament com sona, múltiples diapositives animades que giren per mostrar una diapositiva rere l'altra
  • Escena: una sola diapositiva que es pot utilitzar com a mòdul de contingut (com una fila quan s'utilitza un creador de pàgines)
  • Carrusel: moltes diapositives amb múltiples visibles al mateix temps

Disseny de la revolució del control lliscant

A continuació, seleccioneu un disseny:

  • Auto: aquesta és la configuració predeterminada que estirarà el control lliscant a l'amplada del contenidor principal tal com la defineix el tema de WordPress, però encara definiràs l'alçada.
  • Amplada completa: exactament com sembla: una opció de control lliscant d'amplada completa que s'estirarà d'esquerra a dreta. Encara haureu de definir l'alçada del control lliscant.
  • Pantalla completa: utilitzeu-ho per crear controls lliscants grans que omplin literalment tota la pantalla, sense importar la mida del vostre navegador o dispositiu (fins i tot podeu utilitzar aquesta opció per afegir controls lliscants de pantalla completa amb vídeos per obtenir encara més impacte).

Resposta a la revolució lliscant

I com a últim pas, haureu de triar i personalitzar la vostra capacitat de resposta o la configuració de "canviar la mida":

  • Redimensionament clàssic (lineal).: després de configurar la mida de la pantalla principal, el control lliscant es comprimirà en conseqüència (per tant, un control lliscant de 1000x400px es comprimirà a un control lliscant de 500x200px amb els tipus de lletra, imatges i altres elements del control lliscant també es redueixen proporcionalment).
  • Herència intel·ligent: es creen automàticament quatre mides de dispositiu en funció de la configuració de l'escriptori que trieu, amb l'opció de fer els ajustos necessaris.
  • Personalitzat (manual): us permet establir la mida del control lliscant amb píxels exactes, amb opcions addicionals per configurar les mides del control lliscant a diferents amplades de pantalla (escriptori, portàtil, tauleta i telèfon).

Creador principal de Slider Revolution

Després de triar la configuració principal del control lliscant, se us dirigirà al creador de la revolució lliscant. Aquí és on realment creareu totes les vostres diapositives.

Opcions generals de la revolució lliscant

Abans de construir, hauríeu de tenir cura d'alguns dels conceptes bàsics. A la part dreta hi ha tota la configuració del control lliscant. Començant pel Engranatge icona per a la configuració general, aquí teniu una ullada ràpida al que trobareu.

títol: posa un nom al teu control lliscant. Per descomptat, només podeu deixar el valor predeterminat Slider 1 títol i àlies, però recomanem canviar-ho per una convenció de nomenclatura única segons el propòsit del control lliscant. Seleccioneu un nom per al control lliscant que us ajudarà a recordar què conté o en quina pàgina l'estàs utilitzant. Per exemple casa si utilitzareu el control lliscant de la vostra pàgina d'inici. També és on trobareu el codi curt fàcil del vostre control lliscant per inserir-lo a les publicacions i pàgines.

Disposició: Trieu el tipus de control lliscant (control lliscant, escena o carrusel) i la mida (automàtic, ample complet o pantalla completa). Si heu utilitzat la guia d'inici ràpid, ja ho heu seleccionat. Tanmateix, aquí també podeu editar les amplades i alçades de la vostra àrea de capa (on afegireu elements lliscants), la posició del vostre mòdul (el centre és per defecte), un color de fons predeterminat o una imatge per al vostre control lliscant (nota - això està separat dels fons de diapositives individuals), vora personalitzada, ombra i un grapat d'opcions avançades (per a l'alçada màxima de l'embolcall, desbordament, perspectiva de capa, etc.).

Estoig: seleccioneu com voleu afegir contingut al control lliscant. Hi ha 9 fonts de contingut per triar, però en la seva majoria voldreu seleccionar-les costum opció per crear el vostre control lliscant (tot i que les opcions basades en publicacions i WooCommerce també són molt útils).

Defectes per defecte: L'opció més important d'aquesta secció és per a la Durada de la diapositiva predeterminada, que és quant de temps durarà cada diapositiva per defecte (nota: podeu personalitzar-ho per diapositiva més endavant, però és bo tenir-ne una per defecte). També podeu establir un retard d'inicialització, que farà que el control lliscant esperi una quantitat de temps especificada abans d'animar-se. Hi ha altres valors predeterminats per a l'identificador de mòduls personalitzats, les classes i la capacitat de resposta i més, però la majoria dels usuaris no hauran de canviar-los.

General: Algunes de les opcions que potser voldreu utilitzar en aquesta secció inclouen la configuració de la presentació de diapositives per girar automàticament, aturar-se al passar el cursor, fer un bucle de diapositives i seleccionar una primera diapositiva designada (si és diferent de la diapositiva que vau afegir primer en crear el control lliscant). També és on trobareu opcions per amagar o desactivar el control lliscant al mòbil o sota amplades de píxels especificades.

on Scroll: Slider Revolution inclou una sèrie d'efectes de desplaçament avançats com ara paral·laxi, profunditats 3D, línia de temps, esvaïment, desenfocament, escala de grisos i molt més. Tot amb paràmetres personalitzables per a la velocitat de desplaçament, desplaçament/inclinació, etc. No anem a cavar en aquests, ja que poden trigar força temps a dominar-se, però si heu comprat la vostra pròpia llicència de control lliscant us recomanem que jugueu amb alguna cosa. de les opcions ja fetes de la biblioteca de plantilles per conèixer com es comporten aquests diferents efectes de desplaçament.

Filador: Aquest és el vostre precarregador, de manera que a mesura que les vostres imatges i animacions es carreguin al vostre servidor, els visitants de la vostra pàgina veuran el fons del control lliscant que heu seleccionat juntament amb el filador que heu triat. Actualment hi ha 15 spinners únics per triar entre tots amb colors personalitzables.

Avançat: Si voleu activar la càrrega mandrosa, podeu fer-ho des d'aquí, així com seleccionar una imatge alternativa o simplificar el control lliscant en navegadors antics (específicament per a iOS4 i IE8).

CSS/jQuery: podeu afegir el vostre propi codi personalitzat als controls lliscants, però, com és temptador, us recomanem que deixeu aquesta opció a menys que us sentiu còmode amb els idiomes de codificació.

Com Modal: Si esteu creant un control lliscant que voleu que aparegui com a finestra emergent o caixa de llum aquí és on trobareu les opcions per a la posició del control lliscant, si voleu utilitzar un color de coberta i el codi curt per utilitzar quan s'insereix el control lliscant modal a les pàgines (nota: això és diferent del codi curt del control lliscant principal ja que afegeix un atribut d'ús).

Pell: L'opció de la pell és essencialment un valor predefinit que podeu crear i després assignar a capes de text mentre esteu creant diapositives. Aquesta és una eina fantàstica si voleu mantenir la vostra marca igual a totes les capes.

complements: Aquesta secció us permet activar i accedir als complements (nota: els complements només estan disponibles si heu comprat la vostra pròpia llicència de control lliscant, no s'inclouen amb les versions de Slider Revolution amb temes).

Opcions de navegació de la revolució lliscant

El següent és decidir què us agradaria utilitzar per a la navegació sota el Teclat icona. Hi ha moltes opcions que podeu utilitzar per al vostre control lliscant. Totes les opcions següents inclouen paràmetres fàcils de personalitzar per a la posició/alineació, la mida, la visibilitat i l'estil global/preajustos.

  • Progrés: afegeix una barra de progrés o un cercle que visualitza el progrés actual de la diapositiva (o el progrés complet del control lliscant/mòdul).
  • Les fletxes: afegiu fletxes perquè els visitants facin clic a través de les vostres diapositives amb la vostra selecció de 13 estils diferents (nota: el personalitzat normalment es basa en el vostre tema).
  • Bales: Per afegir punts de navegació a les vostres diapositives, activeu les vinyetes i trieu entre 14 estils.
  • Tabs: Si esteu creant un control lliscant de contingut basat en les publicacions del vostre bloc, potser voldreu mirar la navegació de les pestanyes. Això mostra una miniatura, títol i qualsevol paràmetre (tal com es defineix a Opcions de diapositives), molt semblant a un giny de publicacions recents, per exemple.
  • Polzes: per mostrar una imatge en miniatura com a opció de navegació, seleccioneu els polzes i trieu entre 5 estils.
  • Mida anterior: defineix la mida de les imatges de previsualització utilitzades per a la navegació.
  • Pitgeu: habiliteu i personalitzeu la navegació amb lliscament tàctil, incloses les opcions de desplaçament de blocs, velocitat i direcció.
  • Teclat: activa la navegació amb el teclat (recomanat per a l'accessibilitat).
  • Ratolí: Editeu la navegació controlada amb el ratolí per utilitzar una funció de carrusel o desplaçament invers.
  • Editor de navegació: Aquesta secció és per personalitzar fletxes, vinyetes, pestanyes o polzes amb el vostre propi codi personalitzat. Com s'ha esmentat abans, tret que us sentiu còmode amb la codificació, us recomanem que utilitzeu les opcions integrades del control lliscant.

Opcions de diapositives de la revolució lliscant

I, finalment, les vostres Opcions de diapositives.

  • Fons: trieu el fons de la diapositiva. Trieu entre transparent, de colors (podeu afegir un degradat), imatge, imatge externa o un vídeo (YouTube, Vídeo o HTML5).
  • Miniatura: defineix la miniatura visible per l'administrador i la miniatura utilitzada per a la navegació.
  • Animació: Trieu l'animació de transició per a les vostres diapositives.
  • filtres: podeu afegir filtres al control lliscant. Al meu entendre, tenen més sentit per a diapositives amb un fons d'imatge, però depèn de vostè. Actualment hi ha 22 presets per triar.
  • Progrés: podeu personalitzar la durada de la diapositiva (temps en ms), la pausa i la visibilitat diapositiva per diapositiva.
  • Publicar normes: defineix si la teva diapositiva està publicada o no publicada. Això és fantàstic si esteu treballant en diapositives de temporada o de temps limitat que voleu crear, publicar i eliminar lentament.
  • Etiquetes i enllaç: EN aquesta secció podeu afegir classes personalitzades, dades d'identificació i HTML per a la vostra diapositiva, així com habilitar un enllaç (si voleu afegir un enllaç a tota la diapositiva).
  • Paràmetres: afegeix fins a 10 paràmetres personalitzats per utilitzar-los a les teves diapositives i navegació.
  • Capes de bucle: creeu i personalitzeu la configuració del bucle de diapositives si el control lliscant només té una diapositiva (especialment útil si feu servir el control lliscant com a estora de benvinguda o secció de pàgina).
  • on Scroll: també podeu personalitzar els vostres efectes de paral·laxi i desplaçament (esvaïment, desenfocament o escala de grisos) per diapositiva.

Com fer un control lliscant amb Slider Revolution

Ara que ja heu vist les característiques (uau, n'hi ha moltes!) us faré un breu resum de quines pensem que són les opcions més importants. Concretament, mostrant-vos com crear un control lliscant senzill.

opcions generals

Exemple de control lliscant: Opcions generals

Primer vam seleccionar algunes opcions generals:

  • Afegiu un títol i un àlies personalitzats al fitxer títol secció
  • Personalitzeu l'alçada i l'amplada de l'àrea de la capa d'escriptori Disposició (configurem el nostre a 1000 px d'ample perquè coincideixi amb l'amplada del nostre lloc i 500 px d'alçada)
  • Trieu una durada de diapositiva predeterminada (hem utilitzat 5000 ms, que són 5 segons) a sota Defectes per defecte
  • Seleccioneu un Filador per utilitzar-lo per al vostre precarregador (estem parcials a l'opció 7)

Navegació lliscant

Exemple de control lliscant: fletxes

A continuació, escollim les nostres Opcions de navegació. Al nostre exemple hem seleccionat l'estil "Urà", que són fletxes simples.

Afegint diapositives

Això és tot el que volíem configurar per al nostre control lliscant, de manera que el següent pas és afegir un parell de diapositives. Quan creeu un control lliscant nou, ja us trobeu a la diapositiva 1 de manera predeterminada, de manera que podeu començar a afegir paràmetres i capes immediatament.

Exemple de control lliscant: fons de color de la diapositiva

Podeu afegir un color de fons, una imatge o un vídeo. Si trieu afegir un color, també podeu afegir un degradat.

Exemple de control lliscant: fons de vídeo de diapositives

Per a un vídeo, només heu d'afegir la font i fer algunes seleccions. A la captura de pantalla anterior, hem configurat la diapositiva per forçar el mode de coberta (de manera que el vídeo omple tot el control lliscant) i per rebobinar a l'inici (de manera que es reprodueixi des del principi cada vegada que s'inicia la diapositiva).

Exemple de control lliscant: fons de la imatge de la diapositiva

Per al nostre exemple hem afegit un imatge de la nostra Mediateca. Hem deixat la imatge amb la configuració predeterminada de Cover (que estira la imatge per cobrir el control lliscant complet, a diferència de Contenir que redueix la imatge per adaptar-la a les limitacions del control lliscant).

Addició de capes

Ara per afegir capes! A la part superior de la pantalla, veureu una opció per a "+ Afegeix una capa". Aquí és on trobareu un munt d'opcions per afegir a les vostres diapositives. Podeu triar entre 8 diferents Afegeix capa opcions:

  • Text les capes són perfectes per afegir encapçalaments, descripcions o fins i tot enllaços senzills. Afegiu el que vulgueu dir a la vostra diapositiva.
  • imatges són ideals per inserir el vostre logotip, afegir profunditat a les diapositives de paral·laxi, inserir conjunts abans/després i molt més.
  • Botó Les opcions de capes inclouen tones de combinacions de mida i radi de vora per a les quals podeu editar el color, el fons, el color de la vora, el tipus de lletra, l'estat del cursor i el text. A més, hi ha una sèrie de preconfiguracions útils per a enllaços socials, icones animades de desplaçament del ratolí, menú d'hamburgueses o fins i tot reproducció/pausa.
  • Formes es pot utilitzar per afegir efectes (com ara pulsar o irradiar un color darrere d'un botó), per definir una part d'una capa de text (utilitzar una forma per ressaltar només una paraula o frase) o per afegir interès visual. Seleccioneu el vostre fons, el color/mida de la vora, el radi de la vora de la forma (0 per a un quadrat, 100 per a un cercle), la mida de la forma en píxels i el farciment.
  • Àudio i Vídeo les capes són bastant directes. Trieu el suport que voleu inserir i seleccioneu un fitxer de la vostra biblioteca multimèdia o inseriu un enllaç (YouTube, Vimeo, SoundCloud, etc.). A continuació, afegiu la configuració per habilitar el bucle, la reproducció automàtica, la següent diapositiva al final, el volum base, l'inici/final del segment i la càrrega prèvia. Aquesta és una manera senzilla d'afegir testimonis reals al control lliscant, un vídeo d'introducció o un tutorial.
  • Icona / SVG són exactament el que sonen: inclou icones o afegeix imatges SVG personalitzades que s'escallin perfectament amb el control lliscant en tots els dispositius.
  • Files es pot inserir i són com qualsevol altre creador de pàgines, amb la configuració de la columna. Aquesta és una manera fantàstica d'organitzar els elements de la capa o de crear un mòdul de diapositives únic.
  • Group s'utilitza per crear un grup de capes perquè sigui més fàcil posicionar i moure capes relacionades.
  • Biblioteca de capes només està disponible si teniu la vostra pròpia llicència per a Slider Revolution i és una col·lecció de recursos preparats de ThemePunch.
  • Import per copiar una capa o diapositiva des d'un altre control lliscant de la vostra biblioteca. Ràpid i senzill!

Exemple de control lliscant: Insereix una capa de text

Primer anem a afegir un senzill Text capa. Tindràs l'opció d'afegir un encapçalament o contingut d'estil ràpid: tots dos són capes de text, l'única diferència són les opcions d'estil previ que veuràs a la part dreta. Podeu triar un d'aquests estils o fer clic a la X a l'extrem superior dret per anar a la configuració de la capa.

Exemple de control lliscant: Configuració de la capa de text

Per al nostre exemple, aquestes són les opcions que hem escollit per al nostre encapçalament, així com un subtítol per a la nostra diapositiva:

  • Hem afegit el nostre text al Estoig secció, així com centrat el nostre text
  • Seleccionat a Estil per a la mida de la lletra, el pes, l'alçada de la línia i la font de Google
  • Hem personalitzat el Talla i pos per canviar la ubicació de la capa dins del nostre contenidor lliscant (recordeu que el nostre contenidor és de 1000 x 500 px)
  • I per últim va afegir un Animació efecte i velocitat perquè el nostre text s'esvaeixi a 800 ms (IN: Anim To) i les mateixes animacions perquè el nostre text surti (OUT: Anim To).

També hem afegit un botó. Per fer-ho, passeu el cursor a l'enllaç "+ Afegeix una capa" i feu clic a l'opció del botó.

Exemple de control lliscant: Insereix una capa de botons

Igual que el text, hi ha alguns estils ràpids que podeu utilitzar per començar.

Exemple de control lliscant: Configuració de la capa de botons

Per al nostre botó, hem utilitzat el següent. De nou, molt semblant a les opcions de text (però amb un parell de diferències importants):

  • Per al Estoig hem afegit el nostre text del botó.
  • Des Estil Podeu afegir el text i els colors dels botons, les opcions de lletra i afegir espai al botó amb farciment (dins) o marges (exterior). El nostre botó utilitza encoixinats esquerre i dret per fer-lo més ample.
  • Hem tornat a utilitzar el Talla i pos opcions per centrar la nostra capa de botons a la diapositiva.
  • I va afegir un Animació perquè el botó entri i surti de la diapositiva.
  • Com que es tracta d'una capa de botons, també hem afegit un Passa el ratolí efecte perquè els visitants sàpiguen intuïtivament que hi ha un enllaç. Així que vam triar una animació i vam fer que el nostre botó fos una mica transparent al passar el cursor.

Exemple de control lliscant: Enllaç de capa de botó

Per a un botó o qualsevol capa a la qual vulgueu afegir un enllaç, heu d'afegir el acció. Per exemple, hem afegit un enllaç simple i hem definit la configuració (al fer clic, l'URL i un objectiu per obrir en una finestra nova). Però hi ha un munt d'opcions a part d'un enllaç simple, com ara desplaçar-se a l'identificador (desplaçament local), saltar a la diapositiva (per saltar entre les diapositives), reproduir la diapositiva (per exemple, si heu afegit una funció interactiva), obrir un control lliscant modal, reproducció multimèdia (ideal per a un vídeo), etc.

Aquesta és la nostra primera diapositiva feta! Ara afegim un segon per mostrar-vos algunes funcions més.

Exemple de control lliscant: Afegeix una segona diapositiva

Si passeu el cursor a l'opció "Diapositives", veureu un desplegable per a:

  • Afegeix diapositives: feu clic per afegir una nova diapositiva en blanc, una diapositiva massiva per afegir diverses diapositives amb el mateix fons o importar una diapositiva.
  • Capes globals: es veuran com una superposició a la part superior de les diapositives que creeu. És una manera fantàstica d'afegir un logotip o una marca d'aigua, incloure un botó "Compra ara" per al vostre producte o fins i tot un enllaç per subscriure-us al vostre butlletí.
  • Totes les vostres diapositives actuals (la nostra diapositiva acabada és la diapositiva nova número 1).

Ara només has de repetir el procés de creació de diapositives tantes vegades com vulguis!

Hi ha moltes, moltes més opcions a Slider Revolution que podeu utilitzar per personalitzar encara més les vostres capes. Per exemple, podeu afegir un bucle a la vostra capa (podeu utilitzar-lo per crear un text de "venda" intermitent), afegir efectes de desplaçament, editar la visibilitat per amagar-lo en dispositius petits i molt més. Us recomanem que consulteu la base de coneixement oficial de Slider Revolution per trobar més informació sobre les funcions disponibles.

Exemple de control lliscant: barra superior

I, finalment, només vull assenyalar uns quants enllaços més útils a la part superior i inferior del creador de control lliscant. Començant a la part superior, trobareu els següents enllaços ràpids (en ordre):

  • esquena: per tornar a la pàgina principal de Slider Revolution al vostre tauler de WordPress
  • Diapositives: per afegir i gestionar diapositives dins del control lliscant
  • Afegeix capa: per afegir noves capes a la diapositiva actual
  • L' Nom de la capa que heu seleccionat
  • Duplicat icona per duplicar o copiar la vostra capa actual
  • Paperera icona per esborrar la capa seleccionada actual
  • Bloquejar icona per bloquejar la vostra capa per evitar edicions accidentals
  • ull icona per mostrar o amagar capes
  • Amunt avall Fletxes per navegar entre les capes
  • Més d'una mica et porten al cursor per seleccionar capes
  • A Rewind icona per desfer i revisar una llista de canvis recents
  • L' ordinador icona per previsualitzar la capacitat de resposta del control lliscant en mides estàndard de dispositiu
  • Qüestió marca l'enllaç d'ajuda de la icona
  • I finalment a Gota icona per accedir a ajustos predefinits d'estil ràpids per a la vostra capa

Exemple de control lliscant: horari

I a sota de la previsualització del control lliscant hauríeu de veure un horari. Des d'aquí podeu editar el retard per quan les vostres capes s'animaran a la vostra diapositiva (per a la nostra, l'hora de finalització és 00:05:00 o 5 segons; només heu de fer clic a sobre per editar la diapositiva). També podeu veure un calendari visual que mostra el temps de la capa en comparació amb el temps total de la diapositiva. Les seccions bloquejades són els temps d'animació de capes que podeu simplement feu clic i arrossegueu per canviar.

Un cop hàgiu afegit diverses capes, també podeu utilitzar aquesta secció per reorganitzar les capes arrossegant i deixant anar-les en ordre. A més, a la part superior esquerra, podeu trobar un enllaç útil per reproduir la vostra diapositiva i previsualitzar el vostre temps mentre feu edicions.

Previsualitza i desa el teu control lliscant

Exemple de control lliscant: previsualitza el control lliscant

Mentre esteu treballant, podeu previsualitzar el control lliscant fent clic al blau Vista prèvia botó a l'extrem inferior dret.

Exemple de control lliscant: desa el control lliscant

I no ho oblideu Desar les teves diapositives mentre treballes! Assegureu-vos que deseu la diapositiva després de fer qualsevol canvi. Si us allunyeu de la vostra diapositiva (encara que sigui a una altra diapositiva), podeu perdre tot el vostre esforç. Així que assegureu-vos d'estalviar, desar, guardar!

Slider Revolution també ofereix una opció Optimitzar la mida dels fitxers en desar, ofereix algunes recomanacions d'optimització i compressió del costat del servidor.

Després de desar, podeu continuar i treballar amb altres diapositives o controls lliscants, o utilitzar el vostre producte acabat en una pàgina.

Ús del teu control lliscant

Per afegir el vostre fabulós control lliscant a qualsevol publicació o pàgina, utilitzeu el codi curt de Slider Revolution que heu creat anteriorment. Podeu trobar aquest codi curt fent clic a l'element del menú Slider Revolution al vostre tauler.

Slider Revolution: localitza el codi curt

El codi curt hauria de semblar [rev_slider àlies="title"][/rev_slider] amb el "títol" basat en l'àlies que vau donar al control lliscant quan el vau crear per primera vegada.

Slider Revolution: Copia el codi curt

Només cal que enganxeu el codi curt al contingut de la vostra publicació o pàgina. O si el vostre tema admet ubicacions addicionals de control lliscant, també podeu afegir-hi el codi curt.

Slider Revolution: mòdul de creació de pàgines WPBakery

Si el vostre tema utilitza el creador de pàgines WPBakery (per exemple, com el tema de WordPress multiús total), podeu utilitzar l'element del creador de pàgines Slider Revolution inclòs.

Slider Revolution: vista prèvia del mòdul WPBakery Page Builder

Tot el que heu de fer és afegir el mòdul, seleccionar un control lliscant de la quadrícula (mostrarà una llista de tots els controls lliscants que ja heu creat), inserir i arrossegar i deixar anar el control lliscant al seu lloc. Fàcil oi?

Pensaments finals sobre Slider Revolution

Creiem que Slider Revolution és un dels complements de control lliscant premium més fàcils d'utilitzar, sobretot perquè ofereixen un editor visual fàcil d'utilitzar i un munt de funcions integrades perquè no hagis de conèixer CSS per dissenyar les teves diapositives (botons, tipus de lletra, colors i més ja hi són!). Té 5 estrelles sòlides i, segons la nostra opinió, us costarà trobar un complement lliscant millor.

Tant de bo la nostra guia us hagi ajudat a guiar-vos pel procés d'inici, però per obtenir més informació (o per agafar la vostra pròpia còpia), visiteu la pàgina principal de Slider Revolution de ThemePunch. Mostren grans exemples del seu control lliscant, així com enllaços a les demostracions en directe on podeu veure què pot fer Slider Revolution.

Més informació sobre Slider Revolution

Però ens agradaria saber de tu. Feu-nos saber què en penseu de Slider Revolution als comentaris següents o no dubteu a fer-nos qualsevol pregunta que tingueu. Estem encantats d'ajudar!

Articles Relacionats

답글 남기기

이메일 주소는 공개되지 않습니다.

Torna al botó superior