Come rendere il modulo Follow sui social media corretto come Monarch
Pubblicato: 2017-08-07Nel tutorial di oggi, ti mostreremo come adattare il modulo Follow ai social media a determinate esigenze. Social Media Follow è un modulo che raramente manca da qualsiasi pagina di qualsiasi sito web. È uno dei modi principali per connettere i canali dei social media con il sito web. Per aiutarti a raggiungere la connessione desiderata tra il tuo sito web e i canali dei social media, abbiamo Monarch. Un plug-in che ti aiuta facilmente a mostrare i pulsanti per seguire i social media sul tuo sito web. Ma se preferisci ottenere alcuni dei risultati Monarch tramite Divi builder, allora questo post potrebbe tornarti utile.
Ti mostreremo come creare un modulo di follow sui social media fisso per il tuo sito Web, che è una delle cose fornite dal plug-in Monarch. Oltre a posizionarlo sul lato sinistro o destro (impostazioni standard all'interno di Monarch), ti mostreremo anche come farlo aderire alla parte superiore e inferiore della tua pagina. Oltre a farlo aderire alla parte superiore della pagina, includeremo anche una parte in cui ti mostriamo come far apparire il modulo Follow sui social media sotto il menu principale del tuo sito web (indipendentemente dal fatto che il tuo menu principale sia fisso o meno) .
Diamo un'occhiata ai risultati finali di seguito.
Esempio lato sinistro
Esempio lato destro
Esempio in alto (standard)
Senza navigazione fissa
Con navigazione fissa
Esempio in basso
Come rendere il modulo Follow sui social media corretto come Monarch
Iscriviti al nostro canale Youtube
Passaggi generali
Poiché i passaggi di base per l'aggiunta di un modulo di follow sui social media a una pagina sono gli stessi in ogni esempio, lo mostreremo solo una volta. Se vuoi ottenere lo stesso risultato per il lato destro, il posizionamento in alto o in basso, dovrai prima aggiungere il modulo di follow sui social media come spiegato nella parte successiva di questo post.
Aggiungi il modulo Segui social media alla pagina
Per semplificare, aggiungeremo il modulo Follow sui social media nella prima sezione della nostra pagina. In questo modo, saprai immediatamente dove trovarlo quando vorrai apportare modifiche in futuro. Non abbiamo davvero bisogno di una riga separata per questo modulo poiché gli assegneremo una posizione fissa.
Aggiungi i canali dei social media al modulo Segui sui social media+
La prossima cosa che dovremo fare è aggiungere i canali di social media necessari al modulo di follow sui social media. Apri le impostazioni del modulo e fai clic su "Aggiungi nuovo social network". Dopo averlo fatto, puoi scegliere il social network che desideri aggiungere e assegnargli un URL.
Ad ognuno dei social network viene assegnato automaticamente un colore dell'icona che corrisponde al social network. Se, tuttavia, preferisci utilizzare i colori nello stile del tuo sito web, puoi scegliere un colore diverso nella scheda Design. Per l'esempio che ti mostreremo come fare, includeremo quattro social network; Facebook, Twitter, Google+ e LinkedIn. Invece di usare i colori standard, daremo a ciascuno dei social network lo stesso colore ma con un'opacità diversa. Ordineremo anche i canali social in base all'importanza.
Impostazioni Facebook
Fai clic su "Aggiungi nuovo social network". Nelle opzioni del social network, scegli per Facebook. Mentre sei ancora nella scheda Contenuto, aggiungi l'URL collegato al canale dei social media di Facebook.
Quindi, passa alla scheda Progettazione. In questo caso, Facebook è il social network più importante. Ecco perché gli daremo la tonalità di colore che attira maggiormente l'attenzione. Il colore che abbiamo usato è 'rgba(59,89,152,0.94)'.
Impostazioni Twitter
Quindi, aggiungi un nuovo social network. Invece di scegliere per Facebook, questa volta scegli per Twitter. Aggiungi l'URL nella stessa scheda Contenuto e passa alla scheda Design. Nella scheda Design, scegli "rgba(59,89,152,0.76)" come colore di sfondo. In questo caso, Twitter è un importante canale di social media ma non importante quanto Facebook. Ecco perché arriva secondo nella fila e con un colore leggermente più trasparente e meno evidente.
Impostazioni di LinkedIn
Ripeti la stessa procedura per il social network LinkedIn nella scheda Contenuto e vai alla scheda Design. All'interno della scheda Design, assegna il colore 'rgba(59,89,152,0.6)' all'icona.
Impostazioni Google+
Ultimo ma non meno importante; aggiungi un'icona social di Google+. Compila l'URL e vai alla scheda Design. Questo è il social network 'meno' importante che vogliamo aggiungere all'elenco in questo esempio e avrà il colore dell'icona 'rgba(59,89,152,0.42)'.
Crea la barra laterale sinistra Segui i social media
Il primo modulo di follow sui social media fisso che ti mostreremo come fare si trova sul lato sinistro della tua pagina. Questo è quello più usato e potrebbe essere quello che ti fa subito pensare di più a Monarch. Segui prima i passaggi generali e continua aggiungendo il codice CSS che troverai nella parte successiva di questo post. Ti mostreremo due modi per aggiungere il codice CSS; alle Opzioni del tema ea una pagina in particolare. Dopo questo esempio, puoi scegliere tra le due opzioni anche per gli altri esempi.
Aggiungi righe di codice CSS alle opzioni del tema
Uno dei metodi per aggiungere il codice CSS aggiuntivo è tramite le Opzioni del tema. Questo metodo viene utilizzato più frequentemente quando si desidera creare l'effetto in tutto il sito Web. Ma ricorda; se stai utilizzando questo effetto, dovrai includere il modulo Follow sui social media in ogni pagina del tuo sito web (o nelle pagine in cui desideri che appaia).
Per aggiungere il codice CSS alle tue Opzioni del tema, vai alla dashboard di WordPress > Divi > Opzioni del tema > Generale > Scorri verso il basso la scheda Generale e aggiungi le seguenti righe di codice CSS al campo CSS personalizzato:
ul.et_pb_social_media_follow {
position: fixed;
left: 0;
top: 35%;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Aggiungi righe di codice CSS a una pagina in particolare
Un altro metodo che ti aiuta ad applicare il codice CSS è aggiungerlo a una pagina in particolare. Questo metodo è più comunemente utilizzato quando si decide di aggiungere il modulo di follow sui social media a una sola pagina in particolare. Utilizzando questo metodo, il tuo sito Web non caricherà le righe di codice CSS su ogni altra pagina del tuo sito Web che non contiene il modulo di follow sui social media. Oppure, se vuoi che il modulo Follow sui social media su altre pagine si comporti come al solito, anche questo metodo ti aiuterà.
Fai clic sul seguente pulsante sul tuo generatore Divi:
Quindi, copia e incolla il codice CSS nel campo CSS personalizzato.
Crea la barra laterale destra Segui i social media
Il prossimo codice che condivideremo ti aiuterà a mettere il modulo Follow sui social media sul lato destro del tuo sito web.
Le linee di codice CSS necessarie
Aggiungi le seguenti righe di codice CSS alle Opzioni del tema o a una pagina in particolare come spiegato nell'esempio sopra.
ul.et_pb_social_media_follow {
position: fixed;
top: 40%;
padding: 0 !important;
right: 0;
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Crea i migliori follower sui social media
Andando avanti, puoi anche individuare il tuo modulo di follow sui social media nella parte superiore del tuo sito web. Questo è in realtà un modo molto interessante per lasciare che le icone dei social media seguano i tuoi visitatori attraverso il sito web. Non è molto usato, quindi cattura l'attenzione della gente.
Le linee di codice CSS necessarie
Copia e incolla le seguenti righe di codice CSS nelle Opzioni del tema o aggiungile a una pagina in particolare.
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Crea i migliori social media Segui sotto il menu principale
Il metodo mostrato in precedenza per aggiungere il modulo Follow sui social media al tuo sito Web non prende in considerazione il menu principale. Se, tuttavia, desideri che Social Media Follow appaia sotto il menu principale e torni all'inizio durante lo scorrimento, questa parte del post potrebbe aiutarti.
Aggiungi il codice CSS
In entrambi i casi in cui la navigazione fissa è attivata e dove non lo è, dovresti aggiungere le seguenti righe di codice CSS nelle Opzioni del tema o aggiungerle a una pagina in particolare:
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}Successivamente, dovrai aggiungere anche del codice jQuery. Il codice jQuery dipende dall'attivazione o meno della navigazione fissa.
Con navigazione fissa
Se hai attivato la navigazione fissa, dovrai aggiungere le seguenti righe di codice jQuery all'intestazione del tuo sito Web o a un Modulo di codice all'interno della pagina in cui vuoi che funzioni:
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>
Non dimenticare di usare anche le righe di codice CSS. Il codice jQuery è aggiuntivo. Inoltre, assicurati che quando scorri, l'altezza del tuo primario rimanga la stessa. Puoi farlo andando sul dashboard di WordPress > Aspetto > Personalizza > Intestazione e navigazione > Impostazioni di navigazione fisse > Seleziona il minimo per l'altezza del menu fisso.
Senza navigazione fissa
Se vuoi ottenere lo stesso risultato, ma non hai una navigazione fissa, il codice sarà leggermente diverso:
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>
Crea il seguito di social media inferiore
L'ultimo della riga è il modulo Follow sui social media in basso.
Le linee di codice CSS necessarie
Aggiungi le seguenti righe di codice CSS al campo CSS personalizzato delle tue Opzioni del tema o a una pagina in particolare:
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
bottom: 0;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Pensieri finali
In questo tutorial, ti abbiamo mostrato come creare il modulo Follow sui social media nello stesso stile del plug-in Monarch. Utilizzando questo metodo, non sarà necessario scaricare il plug-in Monarch se lo si utilizza esclusivamente per condividere i propri canali di social media. Per la condivisione sui social media, dovresti comunque utilizzare il plug-in Monarch. Se hai domande o suggerimenti; sentiti libero di lasciare un commento nella sezione commenti qui sotto in modo che possiamo metterci in contatto!
Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!
Immagine in primo piano di Snopek Nadia / shutterstock.com