'; // Columna izquierda $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildTypographyGroup($componentId); $html .= '

'; // Columna derecha $html .= '

'; $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('ctaPostEnabled', 'Activar componente', 'bi-power', $enabled); $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('ctaPostShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= $this->buildSwitch('ctaPostShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile); $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'posts'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Contenido'; $html .= '

'; // Title $title = $this->renderer->getFieldValue($componentId, 'content', 'title', 'Accede a 200,000+ Analisis de Precios Unitarios'); $html .= '

'; $html .= ' Titulo'; $html .= ' '; $html .= '

'; // Description $description = $this->renderer->getFieldValue($componentId, 'content', 'description', ''); $html .= '

'; $html .= ' Descripcion'; $html .= ' '; $html .= '

'; // Button Text $buttonText = $this->renderer->getFieldValue($componentId, 'content', 'button_text', 'Ver Catalogo Completo'); $html .= '

'; $html .= ' Texto del boton'; $html .= ' '; $html .= '

'; // Button URL $buttonUrl = $this->renderer->getFieldValue($componentId, 'content', 'button_url', '/catalogo'); $html .= '

'; $html .= ' URL del boton'; $html .= ' '; $html .= '

'; // Button Icon $buttonIcon = $this->renderer->getFieldValue($componentId, 'content', 'button_icon', 'bi-arrow-right'); $html .= '

'; $html .= ' Icono del boton'; $html .= ' '; $html .= ' Clase de Bootstrap Icons'; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Tipografia'; $html .= '

'; $html .= '

'; $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '1.5rem'); $html .= '

'; $html .= ' Tamano titulo'; $html .= ' '; $html .= '

'; $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '700'); $html .= '

'; $html .= ' Peso titulo'; $html .= ' '; $html .= '

'; $html .= '

'; $descFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'description_font_size', '1rem'); $html .= '

'; $html .= ' Tamano descripcion'; $html .= ' '; $html .= '

'; $buttonFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'button_font_size', '1.125rem'); $html .= '

'; $html .= ' Tamano boton'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Colores'; $html .= '

'; // Gradiente $html .= '

Gradiente de fondo

'; $html .= '

'; $gradientStart = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_start', '#FF8600'); $html .= $this->buildColorPicker('ctaPostGradientStart', 'Inicio', $gradientStart); $gradientEnd = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_end', '#FFB800'); $html .= $this->buildColorPicker('ctaPostGradientEnd', 'Fin', $gradientEnd); $html .= '

'; // Textos $html .= '

Textos

'; $html .= '

'; $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#ffffff'); $html .= $this->buildColorPicker('ctaPostTitleColor', 'Titulo', $titleColor); $descColor = $this->renderer->getFieldValue($componentId, 'colors', 'description_color', '#ffffff'); $html .= $this->buildColorPicker('ctaPostDescColor', 'Descripcion', $descColor); $html .= '

'; // Boton $html .= '

Boton

'; $html .= '

'; $buttonBg = $this->renderer->getFieldValue($componentId, 'colors', 'button_bg_color', '#ffffff'); $html .= $this->buildColorPicker('ctaPostButtonBg', 'Fondo', $buttonBg); $buttonText = $this->renderer->getFieldValue($componentId, 'colors', 'button_text_color', '#212529'); $html .= $this->buildColorPicker('ctaPostButtonText', 'Texto', $buttonText); $html .= '

'; $html .= '

'; $buttonHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'button_hover_bg', '#f8f9fa'); $html .= $this->buildColorPicker('ctaPostButtonHoverBg', 'Hover', $buttonHoverBg); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Espaciado'; $html .= '

'; $html .= '

'; $marginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'container_margin_top', '3rem'); $html .= '

'; $html .= ' Margen superior'; $html .= ' '; $html .= '

'; $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'container_margin_bottom', '3rem'); $html .= '

'; $html .= ' Margen inferior'; $html .= ' '; $html .= '

'; $html .= '

'; $padding = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding', '1.5rem'); $html .= '

'; $html .= ' Padding interno'; $html .= ' '; $html .= '

'; $titleMargin = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '0.5rem'); $html .= '

'; $html .= ' Margen titulo'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '

'; $html .= '

'; $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '0.375rem'); $html .= '

'; $html .= ' Radio contenedor'; $html .= ' '; $html .= '

'; $gradientAngle = $this->renderer->getFieldValue($componentId, 'visual_effects', 'gradient_angle', '135deg'); $html .= '

'; $html .= ' Angulo gradiente'; $html .= ' '; $html .= '

'; $html .= '

'; $buttonRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_radius', '0.375rem'); $html .= '

'; $html .= ' Radio boton'; $html .= ' '; $html .= '

'; $buttonPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_padding', '0.5rem 1rem'); $html .= '

'; $html .= ' Padding boton'; $html .= ' '; $html .= '

'; $html .= '

'; $transition = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '

'; $html .= ' Transicion'; $html .= ' '; $html .= '

'; $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', 'none'); $html .= '

'; $html .= ' Sombra'; $html .= ' '; $html .= '

'; $html .= '