Want to make creations as awesome as this one?

Ressources Chapitre 1

Transcript

LES RESSOURCES

CHAPITRE 1 : EXTRAIT DE CODE CCS ET PHP

MODULE 10

EXTRAIT DE CODE CCS ET PHP

AC ShortCodes est un plugin très simple avec une interface d'administration facile à utiliser.

En fait, il n' a pas non plus de page d'options standard.

Il vous suffit de télécharger le plugin et de créer des raccourcis, aussi simple que cela.

Le plugin AC ShortCodes vous permettra de convertir n'importe quel module du constructeur Divi en un raccourci que vous pouvez ajouter dans n'importe quel éditeur de module. La sortie sera la même que celle du code de raccourci. Regardez la vidéo et voyez comment elle se présente.

Un autre bon point est qu'il ne fonctionne pas seulement avec Divi mais aussi avec Extra et plus particulièrement avec tout thème WordPress dont le plugin Divi Builder est activé. Une autre bonne chose est que vous pouvez également appeler ces raccourcis dans les fichiers template comme header. php ou footer php ou tout autre type de modèle. Le code exact est donné au bas de cette page. Bien sûr, vous pouvez avoir besoin de CSS pour créer ce style s'ils sont rendus à partir de fichiers template.

L'utilisation d'un module dans un autre module a toujours été demandée par les utilisateurs et jusqu' à présent Elegant Themes n' a pas trouvé de fonctionnalité intégrée. Je suis sûr qu'ils en auront un jour. D'ici là, utilisez donc AC ShortCodes et convertissez n'importe quel module en un shortcode et utilisez-les dans d'autres modules ou dans les modèles php.


Comment ça marche ?

Vous devez d'abord télécharger le fichier et l'activer. Ensuite, à l'intérieur du menu administrateur Divi (ou menu Admin d'Extra ou dans le menu Apparence pour les autres thèmes WP), trouvez le sous-menu AC ShortCodes.

Visitez la page et commencez à créer un code de raccourci.

Utilisez le générateur de Divi Page et utilisez n'importe quel module pour créer le raccourci.


Vous pouvez modifier le style du module comme d'habitude. Une fois terminé, cliquez sur le bouton Créer et vous avez terminé.

Copiez maintenant le code de raccourci et placez-le dans des modules comme Toggle ou Tabs, ou CTA ou tout autre module qui a un éditeur.


En fait, il fonctionnera également dans les éditeurs de WooCommerce.


https://ayanize.com/product/ac-shortcodes/




Changer la couleur du diviseur Sidebar sur votre Blog

/* Diviseur vertical */


#main-content .container::before {background-color: #52255E;}

SIMPLIFIEZ VOUS LA VIE EN OFFRANT DE NOUVELLES PERSPECTIVES A DIVI

Un outil léger (en matière de code ajouté) qui vous donnera la possibilité d'insérer n'importe quel modèle de la bibliothèque Divi au sein d’un autre module (comme par exemple une section de 4 colonnes de texte dans un module texte.)


https://www.creaweb2b.com/plugins/simple-divi-shortcode-fr/

Changer la couleur de l'icône de recherche

Supprimer le diviseur Sidebar sur votre Blog

Ajouter des bordures au haut et au bas de la carte

Modifier le rayon de la bordure des images, ajouter une ombre et ajouter un effet contextuel de survol

/* search icon */

#et_search_icon {color: #DF889F;}

/* Supprimer la barre de division */

.container::before { display:none; }

.et_pb_map_container

{border-top: 5px solid #ff3600; border-bottom: 5px solid #ff3600; }




/* image animations and border radius */

img {

border-radius: 9px;

-moz-transition: all 0.09s;

-webkit-transition: all 0.09s; transition: all 0.09s;

-webkit-filter:

drop-shadow(5px 5px 5px black);}

img:hover {

-webkit-transform: scale(1.15);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

transform: scale(1.1);}

Comment ajouter une icône sociale dans le thème Divi WordPress à partir de thèmes élégants

Il y a certaines choses, comme les icônes sociales, qui ne peuvent pas être modifiées à partir des options de thème.

Mais si vous utilisez des icônes sociales supplémentaires comme Pinterest, Instagram, Linedin etc dans le thème Divi WordPress, voici la procédure.

  • Voici la liste des codes pour les icônes sociales disponibles dans le fichier Divi style.css.



.et-social-facebook a. icône : avant { contenu : ' \ e093 ' ; }

.et-social-twitter a. icône : avant { contenu : ' \ e094 ' ; }

.et-social-google-plus a. icône : avant { contenu : ' \ e096 ' ; }

.et-social-pinterest a. icône : avant { contenu : ' \ e095 ' ; }

.et-social-linkedin a. icône : avant { contenu : ' \ e09d ' ; }

.et-social-tumblr a. icône : avant { contenu : ' \ e097 ' ; }

.et-social-instagram a. icône : avant { contenu : ' \ e09a ' ; }

.et-social-skype a. icône : avant { contenu : ' \ e0a2 ' ; }

.et-social-flikrune. icône : avant { contenu : ' \ e0a6 ' ; }

.et-social-myspace a. icône : avant { contenu : ' \ e0a1 ' ; }

.et-social-dribble a. icône : avant { contenu : ' \ e09b ' ; }

.et-social-youtube a. icône : avant { contenu : ' \ e0a3 ' ; }

.et-social-vimeo a. icône: avant { content : ' \ e09c ' ; }

.et-social-rss a. icône : avant { contenu : ' \ e09e ' ; }


Cette liste affiche toutes les icônes de réseaux sociaux disponibles dans le thème Divi.




Comment ajouter une icône sociale dans le thème Divi WordPress à partir de thèmes élégants

Maintenant, ouvrez le fichier includes / social_icons.php et trouvez le code pour les icônes sociales

Divi ' ) ; ?> </ span>

</a>

</ li>

<? php endif ; ?>

<? php if ( 'on' === et_get_option ( 'divi_show_twitter_icon' , 'on' ) ) : ?>

<li class = "et-social-icon et-social-twitter">

<a href = " < ? php echo esc_url ( et_get_option ( 'divi_twitter_url' , '#' ) ) ; ?> "class =" icon ">

<span> < ) ; ?> </ span>

</a>

</ li>

<? php endif ; ?>

<? php if ( 'on' === et_get_option ( 'divi_show_google_icon' , 'on' ) ) : ?>

<li class = "et-social-icon et-social-google-plus">

<a href = " <? php echo esc_url ( et_get_option ( 'divi_google_url' , '#' ) ) ; ?> " class = "icon"> ( "Google" , "Divi" ) ; ?> </ span>

</a>

</ li>

<? php endif ; ?>

<? php if ( 'on' === et_get_option ( 'divi_show_rss_icon' , 'on' ) ) : ?>

<? php

$ et_rss_url = '' ! == et_get_option ( 'divi_rss_url' )

? et_get_option ( 'divi_rss_url' )

: ;

?>

<Li class = "et-social-icon-et-social rss">

<a href=" <?php écho esc_url ($et_rss_url); ?> "class =" icône "> <span> <? Php esc_html_e ( 'RSS' , 'Divi' ) ; ?> </ span> </a> </ li> <? php endif ; ?> </ ul>


Pour ajouter une icône sociale, par exemple LinkedIn, ajoutez une section de code comme suit, juste avant la fermeture dans le code des icônes sociales ci-dessus.</ul>

Comment ajouter une icône sociale dans le thème Divi WordPress à partir de thèmes élégants

<li class = "et-social-icône et-social-linkedin">

<a href="http://in.linkedin.com/in/mayursomani "class="icon">

<span> <? php esc_html_f ( 'LinkedIn' , 'Divi' ) ; ?> </ span>

</a>

</ li>


Pour ajouter YouTube, vous allez ajouter quelque chose comme:


<li class = "et-social-icon et-social-youtube">

<a href="http://youtube.com/u/yourusername "class="icon">

<span> <? php esc_html_f ( ' YouTube ' , ' Divi ' ) ; ?> </ span>

</a>

</ li>


Pour ajouter une icône Pinterest, vous allez ajouter,


<li class = "et-social-icône et-social-pinterest">

<a href="http://pinterest.com/votre_nom_utilisateur "class="icon">

<span> <? php esc_html_e ( 'Pinterest' , 'Divi' ) ; ?> </ span>

</a>

</ li>


Vous voyez le motif.

Vous pouvez ajouter un nouveau réseau à partir de la liste affichée ci-dessus. C'est tout. Vous venez d'ajouter une nouvelle icône sociale au thème Divi

WordPress. Vous pouvez également supprimer une icône sociale en supprimant simple- ment sa section du fichier includes / social_icons.php.


MERCI