^^&&^^

Edit File: section.php

<?php

if (class_exists('CSF')) {

CSF::createWidget('custom_text_with_image_widget', array(

'title' => 'Özel Metin ve Görsel Bileşeni',

'fields' => array(

array(

'id' => 'etiket_alani_arkaplan',

'type' => 'color',

'title' => esc_html__('Etiket alanı Arkaplan Rengi:', 'oruno'),

'subtitle' => esc_html__('Etiket alanı arkaplan rengini giriniz.', 'oruno'),

'default' => '#1B4ABE',

array(

'id' => 'etiket_alani_yazi',

'type' => 'color',

'title' => esc_html__('Etiket alanı Yazı Rengi:', 'oruno'),

'subtitle' => esc_html__('Etiket alanı yazı rengini giriniz.', 'oruno'),

'default' => '#fff',

array(

'id'    => 'affiliate_baslik_oruno',

'type'  => 'text',

'title' => 'Etiket Alanı Başlığı',

'default' => 'Budget Pick'

array(

'id'    => 'image_url',

'type'  => 'upload',

'title' => 'Görsel',

array(

'id'    => 'baslik_oruno',

'type'  => 'text',

'title' => 'Başlık',

array(

'id'    => 'baslik_link',

'type'  => 'text',

'title' => 'Başlığa link giriniz.',

array(

'id'    => 'content',

'type'  => 'textarea',

'title' => 'Açıklama',

array(

'id'      => 'alt_baslik_oruno',

'type'    => 'text',

'title'   => 'Alt Başlık',

array(

'id'      => 'orunobuton1link1',

'type'    => 'text',

'title'   => 'Buton linki',

'default'   => 'https://orunotema.com.tr/',

array(

'id' => 'orunbuton1renk1',

'type' => 'color',

'title' => esc_html__('1.Buton Arkaplan Rengi:', 'oruno'),

'subtitle' => esc_html__('Buton arkaplan rengini giriniz.', 'oruno'),

'default' => '#000',

array(

'id' => 'orunbutonyazi1renk1',

'type' => 'color',

'title' => esc_html__('Buton Yazı Rengi:', 'oruno'),

'subtitle' => esc_html__('Buton yazı rengini giriniz.', 'oruno'),

'default' => '#fff',

array(

'id'      => 'affi_buton_oruno',

'type'    => 'text',

'title'   => 'Buton Metni',

array(

'id'      => 'affi_text_oruno_alt',

'type'    => 'text',

'title'   => 'Butonlar arası yazı',

array(

'id'      => 'affi_buton_oruno2',

'type'    => 'text',

'title'   => 'Buton Yazı',

array(

'id'      => 'orunobuton1link',

'type'    => 'text',

'title'   => 'Buton linki',

'default'   => 'https://orunotema.com.tr/',

array(

'id' => 'orunbuton1renk',

'type' => 'color',

'title' => esc_html__('2.Buton Arkaplan Rengi:', 'oruno'),

'subtitle' => esc_html__('Buton arkaplan rengini giriniz.', 'oruno'),

'default' => '#000',

array(

'id' => 'orunbutonyazi1renk',

'type' => 'color',

'title' => esc_html__('Buton Yazı Rengi:', 'oruno'),

'subtitle' => esc_html__('Buton yazı rengini giriniz.', 'oruno'),

'default' => '#fff',

));

}

// Bileşenin içeriğini gösteren fonksiyon

if (!function_exists('custom_text_with_image_widget')) {

function custom_text_with_image_widget($args, $instance)

{

// CSF bileşenini çağırarak içeriği HTML olarak çıktılayalım

?><style>

.custom-container {

display: flex;

padding: 25px 25px;

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

position: relative;

}

@media(min-width:992px){

.half-width {

width: 50%;

padding: 20px;

box-sizing: border-box;

}

@media (max-width: 767px) {

.custom-container {

flex-direction: column;

}

.half-width {

width: 100%;

margin-bottom: 20px;

}

.custom-container img {

max-width: 100%;

height: auto;

display: block;

margin-bottom: 20px;

}

.custom-container h2,

.custom-container h3 {

margin-top: 0;

margin-bottom: 10px;

}

.custom-button

{

font-size: 1rem;

line-height: 1.375rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 500;

color: #000;

font-weight: 700;

width: 100%;

padding: 9px 24px;

border-radius: 7px;

border: 0;

background-color: #000;

-webkit-transition: all .1s ease-in-out;

transition: all .1s ease-in-out;

color: #fff;

text-decoration: none;

display: block;

text-align: center;

}

.custom-text {

padding: 6px 0;

text-align: center;

font-size: .875rem;

line-height: 1.25rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 500;

color: #666;

}

.custom-button:hover {

background-color: #0056b3;

}

.custom-container h4._54facc84 {

font-size: 1.1875rem;

line-height: 1.3125rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 900;

letter-spacing: -.5px;

color: #fff;

display: inline-block;

position: absolute;

top: -20px;

left: -10px;

margin: 0;

padding: 6px 16px 8px 14px;

background-color: #1b4abe;

box-shadow: 2px 2px 2px 0 rgba(0,0,0,.14);

}

._54facc84:after {

content: " ";

display: block;

position: absolute;

left: -10px;

bottom: -7px;

border-color: rgba(0, 0, 0, 0) #092f8d rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

border-style: inset solid inset inset;

border-width: 0 10px 7px;

}

.descriptionoforuno{

font-size: 1rem;

line-height: 1.375rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 500;

color: #000;

color: #222;

}

.half-width h3{

font-size: 1.25rem;

line-height: 1.4375rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 700;

letter-spacing: -.25px;

color: #000;

font-weight: 500;

margin: 0 0 16px;

}

.half-width h2{

font-size: 20px;

line-height: 1.4375rem;

font-family: nyt-franklin, helvetica, sans-serif;

font-weight: 700;

color: #000;

margin: 0 0 16px;

text-decoration:underline;

}

.img_column{

display: flex;

justify-content: center; /* Yatayda ortala */

align-items: center; /* Dikeyde ortala */

}

.affiliate_modul_oruno{

margin:25px 0;

}

</style>

<?php

$etiket_alani_arkaplan = esc_attr($instance['etiket_alani_arkaplan']);

$etiket_alani_yazi = esc_attr($instance['etiket_alani_yazi']);

<h4 class="_54facc84 c0a2cbc8" style="background-color: <?php echo $etiket_alani_arkaplan ?> !important;color: <?php echo $etiket_alani_yazi ?> !important" data-scp="callout_label"><?php

if (!empty($instance['affiliate_baslik_oruno'])) {

echo wp_kses_post($instance['affiliate_baslik_oruno']);

}

?></h4>

<?php

if (!empty($instance['image_url'])) {

echo '<img src="' . esc_url($instance['image_url']) . '" alt="Görsel">';

}

</div>

<a rel="nofollow" href="<?php

if (!empty($instance['baslik_link'])) {

echo wp_kses_post($instance['baslik_link']);

}

?>"> <h2><?php

if (!empty($instance['baslik_oruno'])) {

echo wp_kses_post($instance['baslik_oruno']);

}

?></h2>

<h3><?php

if (!empty($instance['alt_baslik_oruno'])) {

echo wp_kses_post($instance['alt_baslik_oruno']);

}

?></h3></a>

<p class="descriptionoforuno"> <?php

if (!empty($instance['content'])) {

echo wp_kses_post($instance['content']);

}

?></p>

<?php

$buton_rengi1 = esc_attr($instance['orunbuton1renk1']);

$yazi_rengi1 = esc_attr($instance['orunbutonyazi1renk1']);

$buton_linki1 = esc_url($instance['orunobuton1link1'])

<a rel="nofollow" href="<?php echo $buton_linki1 ?>" class="custom-button" style="margin-top:8px;background-color: <?php echo $buton_rengi1 ?> !important;color: <?php echo $yazi_rengi1 ?> !important"><?php

if (!empty($instance['affi_buton_oruno'])) {

echo wp_kses_post($instance['affi_buton_oruno']);

}

?></a>

<p class="custom-text" ><?php

if (!empty($instance['affi_text_oruno_alt'])) {

echo wp_kses_post($instance['affi_text_oruno_alt']);

}

?></p>

<?php

$buton_rengi = esc_attr($instance['orunbuton1renk']);

$yazi_rengi = esc_attr($instance['orunbutonyazi1renk']);

$buton_linki = esc_url($instance['orunobuton1link'])

<a rel="nofollow" href="<?php echo $buton_linki ?>" class="custom-button" style="background-color: <?php echo $buton_rengi ?> !important;color: <?php echo $yazi_rengi ?> !important"><?php

if (!empty($instance['affi_buton_oruno2'])) {

echo wp_kses_post($instance['affi_buton_oruno2']);

}

?></a>

</div>

</section>

<?php

}