Option to relocate the sections in El-Greco Theme

daniel-97

daniel-97

Well-Known Member
You can actually move them in your cPanel, it's very easy. But make sure you're using child theme.

Locate this file: public_html/wp-content/themes/your-theme-child/the file you want to edit

- Home page file name: front-page.php
- Product page file name: single-product.php
- Any other pages file name: they have the same structure like page-... (example: page-about-us, page-contact-us,...)

Make sure you're using child theme or it will be erased when you update your theme

And make sure you know the basic HTML knowledge, it's just cut + paste all the <div> and make sure you move all of their elements

Hope this helps ;)
 
daniel-97

daniel-97

Well-Known Member
Larakis said:
Yes i have.

I mean how i will know what block to move?
Click to expand...
You can click F12 to open Chrome Developer tool, and then combine Ctrl Shift C and click on the element you want to move

For example: Da Vinci 2.0 theme

After clicking F12, the develop tool will open like this, those are the HTML codes of this page
1629373897028.png


Let's say you want to switch these blocks
1629374001539.png


Combination "Ctrl Shift C" and click on the first block
1629374093976.png


This will make the tab jump to that block's <div> (each block is a <div> and close with a </div>)
1629374128656.png


If you're inside that <div> children, to make sure it's the parent, not the child, just hover up until you see the blue shadow on the left jump to another block, then you'll know the start of that <div>
1629374246506.png


Now collapse those child to only see the parents <div>, remember each <div> ends with </div> to close it.
You can now move them by cut + paste them in your php file, remember to test it first on this Chrome Developer Tool to see the results.

RESULT:
1629374492095.png


Here's a demo video

The changes on Chrome Developer is only for testing, they will disappear with you reload the page. So to implement the changes, edit in your php files. And as Chris said, always backup everything before doing anything that's related to your website.

Hope this helps :)
 
L

Larakis

Member
daniel-97 said:
You can click F12 to open Chrome Developer tool, and then combine Ctrl Shift C and click on the element you want to move

For example: Da Vinci 2.0 theme

After clicking F12, the develop tool will open like this, those are the HTML codes of this page
View attachment 15062


Let's say you want to switch these blocks
View attachment 15063


Combination "Ctrl Shift C" and click on the first block
View attachment 15064


This will make the tab jump to that block's <div> (each block is a <div> and close with a </div>)
View attachment 15065


If you're inside that <div> children, to make sure it's the parent, not the child, just hover up until you see the blue shadow on the left jump to another block, then you'll know the start of that <div>
View attachment 15066


Now collapse those child to only see the parents <div>, remember each <div> ends with </div> to close it.
You can now move them by cut + paste them in your php file, remember to test it first on this Chrome Developer Tool to see the results.

RESULT:
View attachment 15067


Here's a demo video

The changes on Chrome Developer is only for testing, they will disappear with you reload the page. So to implement the changes, edit in your php files. And as Chris said, always backup everything before doing anything that's related to your website.

Hope this helps :)
Click to expand...
Thanks
 
kdb

kdb

Active Member
daniel-97 said:
You can actually move them in your cPanel, it's very easy. But make sure you're using child theme.

Locate this file: public_html/wp-content/themes/your-theme-child/the file you want to edit

- Home page file name: front-page.php
- Product page file name: single-product.php
- Any other pages file name: they have the same structure like page-... (example: page-about-us, page-contact-us,...)

Make sure you're using child theme or it will be erased when you update your theme

And make sure you know the basic HTML knowledge, it's just cut + paste all the <div> and make sure you move all of their elements

Hope this helps ;)
Click to expand...
Thanks Daniel,

It can be done by diving in the coding level and easy for people with little bit coding knowledge; however, everytime the theme update will come then needs to do same again.

I wan't this option for everyone not just only me. It will give ADS team an advantage $$.

I have seen some amazing websites and their designs are eye catching.

The theme is also missing ALT for theme images which is always marked by the google.

Correct me if I'm wrong.

Regads,
kdb
@Ekaterina Sayapina @Nadezhda @George Murdasov
 
daniel-97

daniel-97

Well-Known Member
kdbazarcom said:
I wan't this option for everyone not just only me. It will give ADS team an advantage $$.

I have seen some amazing websites and their designs are eye catching.
Click to expand...
Yeah, they have this switching layout ability in the Smart Theme Woo, like having all other themes in 1 theme.

But the problem I see is that it will make the theme heavy. The more code, the heavier the theme -> Load slow

But if they make it happen, good for everyone :) But in the meantime, this is a way to do it if you really need it
 
  • Like
Reactions: kdb
You must log in or register to reply here.
Top