WPBakery - Eigen Elementen Maken – Service Blok

WPBakery Elementen Maken - Deel 2

In het eerste gedeelte uit deze serie hebben we een eerste element gemaakt die we “Service Blok” hadden genoemd en deze bekend gemaakt onder een eigen categorie binnen WPBakery:

Eigen element toegevoegd aan WPBakery

Element in WPBakery

In dat element hebben we de opties aangemaakt om een afbeelding en een stuk tekst te plaatsen en deze als “Service Blok” in de pagina in te voegen:

Qwain Service Blok Frontend weergave

Frontend Weergave

We gaan deze nu uitbreiden met een “label”, om het service-blok er extra uit te laten springen en een “knop” waarin een link kan worden geplaatst naar de desbetreffende service-pagina.

Mocht je het eerste gedeelte gemist hebben, kun je die hier terug lezen: WPBakery Elementen Maken.

Service Blok – Label

Het label van het blok gaan we gecentreerd boven het blok positioneren en geven deze de benaming “Service Label”. Deze maken we dan als eerste bekend aan de code die we in het eerste gedeelte al hadden aangemaakt:

array(
  'type' => 'textfield',
            'holder' => 'h3',
            'class' => 'qwain-title-class',
            'heading' => __( 'Service Label', 'text-domain' ),
            'param_name' => 'qwain_sb_label',
            'value' => __( '', 'text-domain' ),
            'description' => __( 'Geef de label-tekst van de service op', 'text-domain' ),                        
            'group' => 'Service Blok',
    ),

Dit stukje code voegen we toe op regel 34 van de code uit het eerdere deel. Dus direct na “‘params’ => array (“.

Het label-veld zal dan als eerste verschijnen bij de settings van het element:

WPBakery Service Blok Label

Label Veld

Dan dienen we het label alleen nog toe te voegen aan het HTML-gedeelte van het element:

// Element HTML
public function vc_qwain_service_box_html( $atts, $content ) {

    // Params extraction
    extract(
        shortcode_atts(
            array(
                'qwain_sb_img' => 'qwain_sb_img',
                'qwain_sb_label' => '',                   
                'qwain_sb_title'   => '',
            ),
            $atts
        )
    );

    $qwain_sb_img_url = wp_get_attachment_image_src( $qwain_sb_img, "large");

    // Fill $html var with data
    $html = '
    <div class="qw-service-block-wrap">

        <div class="qw-service-block-label">'. $qwain_sb_label .'</div>

        <img class="qw-service-block-img" src="'. $qwain_sb_img_url[0] .'">

        <span class="qw-service-block-title">' . $qwain_sb_title . '</span>

        <div class="qw-service-block-text">'. $content .'</div>

    </div>';

    return $html;

}

De opmaak van het label doen we dan met CSS, zodat (in dit voorbeeld) het label “ietsje” boven het gehele element verschijnt en gecentreerd. In het css-gedeelte hebben we ook de styling van de afbeelding aangepast en het element een wat dikkere afgeronde rand gegeven. Met de tekst “WPBakery” als label ziet het element er dan als volgt uit:

WPBakery Serviceblok met label

Serviceblok met label

Serviceblok Button

Om nu een button aan te maken waarin we een link kunnen plaatsen naar een andere pagina waar de service verder is beschreven, voegen we het volgende stukje code toe:

array(
     'type'       => 'vc_link',
     'heading'    => __( 'Linkknop', 'text-domain' ),
     'param_name' => 'qwain_sb_button',
     'description' => __( 'Geef de link-tekst en pagina-url op', 'text-domain' ),                        
     'group' => 'Service Blok',
   ),

Dit blokje code hebben we voor het tekst-gedeelte geplaatst. Op regel 50 van de code uit het eerdere deel.

De knop dienen we dan nog toe te voegen bij het HTML-gedeelte van de code:

// Element HTML
public function vc_qwain_service_box_html( $atts, $content ) {

    // Params extraction
    extract(
        shortcode_atts(
            array(
                'qwain_sb_img' => '',
                'qwain_sb_label' => '',                   
                'qwain_sb_title'   => '',
                'qwain_sb_button' => '',
            ),
            $atts
        )
    );

    $qwain_sb_img_url = wp_get_attachment_image_src( $qwain_sb_img, "large");

    $qwain_sb_button = ($qwain_sb_button=='||') ? '' : $qwain_sb_button;
      $qwain_sb_button = vc_build_link( $qwain_sb_button );
      $qwain_sb_button_link = $qwain_sb_button['url'];
      $qwain_sb_button_title = $qwain_sb_button['title'];
      $qwain_sb_button_target = ($qwain_sb_button['target'] == '') ? '' : 'target="'.$qwain_sb_button['target'].'"';        

    $qwain_sb_full_button = '<a href="' . $qwain_sb_button_link . '"' . $qwain_sb_button_target . '">' . $qwain_sb_button_title . '</a>';

    // Fill $html var with data
    $html = '
    <div class="qw-service-block-wrap">

        <div class="qw-service-block-label">'. $qwain_sb_label .'</div>

        <img class="qw-service-block-img" src="'. $qwain_sb_img_url[0] .'">

        <span class="qw-service-block-title">' . $qwain_sb_title . '</span>

        <div class="qw-service-block-text">'. $content .'</div>

        <div class="qw-service-block-button-wrapper">
            <span class="qw-service-block-button">'. $qwain_sb_full_button . '</span>
        </div>

    </div>';

    return $html;

Wat dan nog overblijft is de css toevoegen om de knop een style te geven en de gehele styling aan het gebruikte thema aan te passen.


Het eindresultaat ziet er dan zo uit:


Custom Element
WPBakery Custom Element
Indien gewenst kunnen we ook elementen voor Visual Composer, speciaal voor u op maat maken.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

We verzorgen ook trainingen speciaal voor WordPress Design en WPBakery. Voor meer info, bekijk dan deze pagina: WordPress Trainingen.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *