-
Posts
-
The goal is create clickable columns without overriding columns.php.
I copied and renamed the columns.php file, changed the class name, and created a new tab, i.e., $this->config[‘tab’]. However, the link settings not only show up in my new clickable columns it shows in the stock columns element as well. I assumed this was because the shortcodes were the same in each. So I renamed the shortcodes and that removed the link settings from the default columns element.
But the increase and decrease arrows do not work. So I added the new shortcode name to the avia-builder.js file and added the admin css width to so they looked right in the Advanced Layout Builder.
Unfortunately, when I save I get a blank screen and a few screen display issues.
What am I missing?
Hey hookedonweb,
Thank you for using Enfold.
Please post the code of the new columns.php file on pastebin.com. Why do you have to make the columns clickable? Could you just use a text block or an image element to accomplish the same thing?
Best regards,
IsmaelWhy do I need clickable columns? Many of my client designs call for clickable containers that do not have an image and many clients do not have the knowledge to write the html or edit it and rather use a page builder element. Other Enfold forum users have the same need.
Clickable columns work fine if I override columns.php in a child theme, but I don’t want to break a site if columns.php is updated on the parent side. By adding a new clickable columns tab, this way the only element that would break are clickable columns not every column in the entire site.
Here is the pastebin: https://pastebin.com/NPH0MEcM
However, I only changed the class name, $atts and this code:
// Linkable columns $link = $atts['link']; $linktarget = $atts['linktarget']; $blank = (strpos($linktarget, '_blank') !== false || $linktarget == 'yes') ? ' target="_blank" ' : ""; $blank .= strpos($linktarget, 'nofollow') !== false ? ' rel="nofollow" ' : ""; $link = aviaHelper::get_url($link); $tag = !empty($link) ? array("a href='{$link}' {$blank} ",'a') : array('div','div'); $output .= '<'.$tag[0].' class="flex_column '.$shortcodename.' '.$extraClass.' '.$first.' '.$meta['el_class'].' '.avia_sc_columns_linkable::$extraClass.' linkable-column" '.$outer_style.'>'; //if the user uses the column shortcode without the layout builder make sure that paragraphs are applied to the text $content = (empty($avia_config['conditionals']['is_builder_template'])) ? ShortcodeHelper::avia_apply_autop(ShortcodeHelper::avia_remove_autop($content)) : ShortcodeHelper::avia_remove_autop($content, true); $output .= trim($content).'</'.$tag[1].'>';Hey!
You can always create that as a plugin
https://kriesi.at/support/topic/adding-new-advanced-layout-builder-element/and add it so you can use as an element when ever you want.
Also, we would love if you want to submit it as a code snippet on our library here:
https://github.com/KriesiMedia/enfold-library/Regards,
BasilisMaking it a plugin won’t help the issue I am having or prevent overriding the parent columns.php file, and I prefer to make theme modification within the child theme because plugins can be turned off and deleted. Running the Enfold modification via a child them means they will always be there as long as the Enfold child theme is active.
Clickable columns should be a default feature as many themes allow this. It would be real nice if it was just added in the core or an custom action was added to alter $output.
Once it’s working I can add it as a snippet, but it’s not an easy snippet as it requires .js, admin css as well as the mod to columns.php.
If anyone want a login to see the problem I am trying to solve let me know. I am certain it’s an issue with the shortcode name in columns.php, but after I change that I am getting some weird behavior with the javascript and can seem to see where it’s stems from.Hi!
Please rename the file to “columnslinkable.php” file then use the following code.
// https://pastebin.com/EEUXG5Bq
In the functions.php file, use this code:
add_action( 'admin_head', 'ava_custom_admin_style' ); function ava_custom_admin_style() { $output = '<style type="text/css">'; $output .= '.avia_layout_builder .av_one_fifth_linkable{width:18%;}'; $output .= '.avia_layout_builder .av_two_fifth_linkable{width:38%;}'; $output .= '.avia_layout_builder .av_one_half_linkable {width:48%;}'; $output .= '.avia_layout_builder .av_three_fifth_linkable{width:58%;}'; $output .= '.avia_layout_builder .av_four_fifth_linkable{width:78%;}'; $output .= '.avia_layout_builder .av_one_fourth_linkable{width:23%;}'; $output .= '.avia_layout_builder .av_three_fourth_linkable{width:73%;}'; $output .= '.avia_layout_builder .av_one_third_linkable{width:31.3%;}'; $output .= '.avia_layout_builder .av_two_third_linkable{width:64.6%;}'; $output .= '.avia_layout_builder .av_one_full_linkable{width:98%;}'; $output .= '}</style>'; echo $output; }And then add this in the custom.css file or the child theme’s style.css file.
div .flex_column { z-index: 1; float: left; position: relative; min-height: 1px; width: 100%; } div .av_four_fifth_linkable { margin-left: 6%; width: 15.2%; } div .av_one_fourth_linkable_linkable{ margin-left: 6%; width: 20.5%; } div .av_one_third_linkable { margin-left: 6%; width: 29.333333333333332%; } div .av_two_fifth_linkable { margin-left: 6%; width: 36.4%; } div .av_one_half_linkable { margin-left: 6%; width: 47%; } div .av_three_fifth_linkable{ margin-left: 6%; width: 57.599999999999994%; } div .av_two_third_linkable { margin-left: 6%; width: 64.66666666666666%; } div .av_three_fourth_linkable { margin-left: 6%; width: 73.5%; } div .av_four_fifth_linkable{ margin-left: 6%; width: 78.8%; } div .av_one_sixth_linkable { margin-left: 6%; width: 11.666666666666666%; } div .av_one_seventh_linkable { margin-left: 6%; width: 9.142857142857142%; } div .av_one_eighth_linkable { margin-left: 6%; width: 7.25%; } div .av_one_nineth_linkable { margin-left: 6%; width: 5.777777777777778%; } div .av_one_tenth_linkable { margin-left: 6%; width: 4.6%; } /* Columns for better content separation (no margin) ================================================== */ #top div .no_margin { margin-left: 0; margin-top: 0; } #top .no_margin.av_four_fifth_linkable { width: 20%; } #top .no_margin.av_one_fourth_linkable_linkable{ width: 25%; } #top .no_margin.av_one_third_linkable { width: 33.3%; } #top .no_margin.av_two_fifth_linkable { width: 40%; } #top .no_margin.av_one_half_linkable { width: 50%; } #top .no_margin.av_three_fifth_linkable{ width: 60%; } #top .no_margin.av_two_third_linkable { width: 66.6%; } #top .no_margin.av_three_fourth_linkable { width: 75%; } #top .no_margin.av_four_fifth_linkable{ width: 80%; } #top .no_margin.av_one_sixth_linkable { width: 16.666666666666668%; } #top .no_margin.av_one_seventh_linkable { width: 14.285714285714286%; } #top .no_margin.av_one_eighth_linkable { width: 12.5%; } #top .no_margin.av_one_nineth_linkable { width: 11.11111111111111%; } #top .no_margin.av_one_tenth_linkable { width: 10%; } /* Columns with equal height ================================================== */ #top .flex_column_table{ display: table; table-layout: fixed; width:100%; } #top .flex_column_table_cell{ float:none; display: table-cell; } #top .av-flex-placeholder{ display: table-cell; width: 6%; } .av-align-top{ vertical-align: top; } .av-align-middle{ vertical-align: middle; } .av-align-bottom{ vertical-align: bottom; } /*breaking point logic for the common 1/4 element in ipads. makes sure that it converts to a 1/2 element in most cases*/ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive .av_one_fourth_linkable.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_half_linkable.first + .av_one_fourth_linkable.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half_linkable.first + .av_one_fourth_linkable.el_before_av_one_fourth + .av_one_fourth_linkable.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth_linkable.flex_column_div { margin-left: 4%; width: 48%; } .responsive .av_one_fourth_linkable.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_half_linkable.first + .av_one_fourth_linkable.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_half_linkable.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth_linkable.first.flex_column_div { margin-left: 0%; clear: both; } .responsive .av_one_half_linkable.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_half_linkable.flex_column_div { width: 100%; } .responsive .av_one_half_linkable.first + .av_one_fourth_linkable.flex_column_div, .responsive .av_one_half_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable_linkable+ .av_one_fourth_linkable.flex_column_div, .responsive .av_one_fourth_linkable.first + .av_one_fourth_linkable_linkable+ .av_one_half_linkable.flex_column_div { margin-top: 30px; } }Best regards,
IsmaelI also saw an article here: https://kriesi.at/support/topic/apply-link-to-column-box/ that said you could add a link to an entire column element but I haven’t been able to get that to work.
- You must be logged in to reply to this topic.